Hi folks,
is it possible to customize the CheckboxGadget with CSS? I'd like to show as a Slickswitch
like this:
(Image taken form http://www.purebasic.fr/english/viewtop ... 14&t=61195)
There is also a Slickswitch jQuery Plugin aviable at github: https://github.com/LukeKirby/jQuery-slickswitch
But I've no clue how to use it inside SpiderBasic.
Ciao Dirk
Slickswitch Gadget
-
- Posts: 222
- Joined: Sat Mar 01, 2014 3:02 pm
Re: Slickswitch Gadget
You might be able to improvise using toggle-on and toggle-off from FontAwesome.
I've used the check icon as a way of having multiple check boxes in the same ListIconGadget row.
I've used the check icon as a way of having multiple check boxes in the same ListIconGadget row.
Re: Slickswitch Gadget
A test with a canvas.
For each SwitchGadget, the gadget status (On or Off) and the colors (On and Off) are stored in the gadget with the function SetGadgetData()
For each SwitchGadget, the gadget status (On or Off) and the colors (On and Off) are stored in the gadget with the function SetGadgetData()
Code: Select all
;Include Switch Button
EnableExplicit
;-Private procedure
Procedure DrawSwitchButton(Gadget, x, y, width, height)
Protected Setup.s, State, onRGBColor, offRGBColor, SwitchX, BodyColor
If IsGadget(Gadget)
Setup = Str(GetGadgetData(Gadget))
State = Val(Mid(Setup, 1, 1)) - 1
onRGBColor = Val(Mid(Setup, 2, 8))
offRGBColor = Val(Mid(Setup, 10, 8))
If State = #True
SwitchX = 1
BodyColor = onRGBColor
Else
SwitchX = width - height
BodyColor = offRGBColor
EndIf
;Draw switch button
StartDrawing(CanvasOutput(gadget))
;body
RoundBox(0, 0, width-1, height-1, 6, 6, BodyColor)
DrawingMode(#PB_2DDrawing_Outlined)
RoundBox(0, 0, width-1, height-1, 6, 6, RGB(105, 105, 105))
;Switch
DrawingMode(#PB_2DDrawing_Default)
RoundBox(SwitchX, 1, height-2, height-3, 6, 6, RGB(220, 220, 220))
DrawingMode(#PB_2DDrawing_Outlined)
RoundBox(SwitchX, 1, height-2, height-3, 6, 6, RGB(105, 105, 105))
StopDrawing()
EndIf
EndProcedure
;-Public procedures
;Draw canvas (option #PB_Canvas_Transparent)
Procedure SwitchButton(Gadget, x, y, width, height, onRGBColor = $00FF00, offRGBColor = $D3D3D3)
Protected Setup.s = "1" + RSet(Str(onRGBColor), 8, "0") + RSet(Str(offRGBColor), 8, "0")
;Format Setup
;01-01 State (0 or 1) + 1
;02-09 On RGB Color
;10-17 Off RGB Color
CanvasGadget(Gadget, x, y, width, height, #PB_Canvas_Transparent)
SetGadgetData(Gadget, Val(Setup))
DrawSwitchButton(Gadget, GadgetX(Gadget), GadgetY(Gadget), GadgetWidth(Gadget), GadgetHeight(Gadget))
EndProcedure
;Returns the state of the gadget (1 = On, 0 = off)
Procedure GetSwitchButton(Gadget)
If IsGadget(Gadget)
ProcedureReturn Val(Mid(Str(GetGadgetData(Gadget)), 1, 1)) - 1
EndIf
EndProcedure
;Set the actual state (1 = On, 0 = off)
Procedure SetSwitchButton(Gadget, State)
Protected Setup.s
If IsGadget(Gadget)
Setup = Str(GetGadgetData(Gadget))
Setup = Str(State + 1) + Mid(Setup, 2, 16)
SetGadgetData(Gadget, Val(Setup))
DrawSwitchButton(Gadget, GadgetX(Gadget), GadgetY(Gadget), GadgetWidth(Gadget), GadgetHeight(Gadget))
EndIf
EndProcedure
;-
;-Zone Test
Declare onClick()
OpenWindow(0, 0, 0, 0, 0, "", #PB_Window_Background)
;Two SwitchButtons
SwitchButton(1, 20, 20, 50, 25)
SetSwitchButton(1, #True)
SwitchButton(2, 20, 50, 50, 25, RGB(0, 255, 0), RGB(0, 0, 255))
BindGadgetEvent(1, @onClick(), #PB_EventType_LeftClick)
BindGadgetEvent(2, @onClick(), #PB_EventType_LeftClick)
Procedure onClick()
Protected Gadget = EventGadget()
If GetSwitchButton(Gadget) = #False
SetSwitchButton(Gadget, #True)
Else
SetSwitchButton(Gadget, #False)
EndIf
Debug "Gadget : " + Gadget + " State : " + GetSwitchButton(Gadget)
EndProcedure
➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
➽ http://falsam.com
Sorry for my poor english
-
- Posts: 222
- Joined: Sat Mar 01, 2014 3:02 pm
Re: Slickswitch Gadget
Or just use an ImageGadget and use SetGadgetState() and GetGadgetState() to set/test the value.
-
- Posts: 284
- Joined: Fri Sep 22, 2017 7:02 am
Re: Slickswitch Gadget
Thank you for your suggestions. But in this case, I would prefer to simply redesign a gadget because I have to comply with corporate design guidelines.