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

Slickswitch Gadget

by Dirk Geppert Mon Jan 29, 2018 10:44 am

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: 131
Joined: Sat Mar 01, 2014 3:02 pm

Re: Slickswitch Gadget

by the.weavster Mon Jan 29, 2018 6:00 pm

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: 259
Joined: Mon May 05, 2014 9:49 pm
Location: France

Re: Slickswitch Gadget

by falsam Mon Jan 29, 2018 6:30 pm

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 10 - JDK 1.8 - SB 2.20 - Android 5.5
http://falsam.com

Sorry for my poor english
the.weavster
 
Posts: 131
Joined: Sat Mar 01, 2014 3:02 pm

Re: Slickswitch Gadget

by the.weavster Mon Jan 29, 2018 6:52 pm

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

Re: Slickswitch Gadget

by Dirk Geppert Tue Jan 30, 2018 8:42 am

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.
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 1 guest