Slickswitch Gadget

Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Slickswitch Gadget

Post by Dirk Geppert »

Hi folks,

is it possible to customize the CheckboxGadget with CSS? I'd like to show as a Slickswitch
like this:

Image (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
the.weavster
Posts: 220
Joined: Sat Mar 01, 2014 3:02 pm

Re: Slickswitch Gadget

Post by the.weavster »

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.
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: Slickswitch Gadget

Post by falsam »

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()

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
the.weavster
Posts: 220
Joined: Sat Mar 01, 2014 3:02 pm

Re: Slickswitch Gadget

Post by the.weavster »

Or just use an ImageGadget and use SetGadgetState() and GetGadgetState() to set/test the value.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Slickswitch Gadget

Post by Dirk Geppert »

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.
Post Reply