PureBasic Forums - English

Posted: **Wed Dec 20, 2023 1:09 pm**

I would like to have a slide switch on a touchdevice that triggers an action. A coin is to be pushed into a slot.
The whole thing should also work with Spiderbasic so that it can be used as an app.
How would you build this UI? I'm not really happy with my implementation yet. It should also be fun to push the coin.

Here is the complete project with the pictures: https://u.pcloud.link/publink/show?code ... yvY0BP9ra7

Code: Select all

#PB_Window_Background = #PB_Window_SystemMenu
Define.i w, h

If ExamineDesktops()
  h = DesktopHeight(0)
  w = DesktopWidth(0)
EndIf

h = 800
w = 600

OpenWindow   (0, 0, 0, w, h, "Insert Coin", #PB_Window_Background)
SetWindowColor(0, #White)

CanvasGadget (0, 0, h - 200, w, 200)

Global PosX.i = 100, SlideBack.i, SlideDTG.i


Procedure DrawButton()
  
  If StartDrawing(CanvasOutput(0))
    x = GetGadgetAttribute(0, #PB_Canvas_MouseX) + ImageWidth(0)/3
    
    If x < 150
      x = 150
    EndIf
    
;     If x + ImageWidth(0) > GadgetWidth(0)
;       x = GadgetWidth(0) - ImageWidth(
;     EndIf
    
    If SlideBack <> #True
      
      If x < PosX Or x > PosX + 200
        
      Else  
      
        PosX = x - ImageWidth(0)/2  
      EndIf
      
    Else
      PosX - 20
      
      If PosX <= 0
        PosX = 0
      EndIf
    EndIf
    
    Box(0, 0, GadgetWidth(0), GadgetHeight(0), $FFFFFF)
    
    
    ; Background
    DrawImage(ImageID(3), 0, 100 - ImageHeight(3)/2)
    
    ; Slot
    
    DrawAlphaImage(ImageID(1), GadgetWidth(0) - ImageWidth(1), 100 - ImageHeight(1)/2)
    
    ; Coin
    DrawAlphaImage(ImageID(0), PosX, 100 - ImageHeight(0)/2)
    
    ; Overlay
    DrawAlphaImage(ImageID(2), GadgetWidth(0) - ImageWidth(2), 100 - ImageHeight(2)/2)
    
    
    StopDrawing()
    
    
    If SlideBack And PosX <= 0
      SlideBack = #Null
    EndIf
    
  EndIf
  
  SlideDTG = ElapsedMilliseconds()
EndProcedure

Procedure TimerEvents()
  
  Select EventTimer()
      
    Case 0 ; AutoSlideBack Check
      
      If PosX > 0 And PosX < GadgetWidth(0) - ImageWidth(0) - 10 And SlideDTG < ElapsedMilliseconds() - 1000
        
        If SlideBack = #Null And (GetGadgetAttribute(0, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton) = #Null
          SlideBack = #True
          AddWindowTimer(0, 1, 1)

        EndIf
      EndIf  
      
    Case 1 ; SlideBack
      DrawButton()
  
      If SlideBack = #Null
        Debug "SlideBack done"
        RemoveWindowTimer(0, 1)
      EndIf
      
  EndSelect
EndProcedure

Procedure GadgetEvents()
  
  Select EventGadget() 
    Case 0
      If EventType() = #PB_EventType_LeftButtonDown Or (EventType() = #PB_EventType_MouseMove And GetGadgetAttribute(0, #PB_Canvas_Buttons) & #PB_Canvas_LeftButton)
        DrawButton()
        
      EndIf
  EndSelect
    
EndProcedure

AddWindowTimer(0, 0, 500)
BindEvent(#PB_Event_Timer, @TimerEvents(), 0)

UsePNGImageDecoder()
UseJPEGImageDecoder()

; Get the images here: https://u.pcloud.link/publink/show?code=kZ9cc70Zx264w2xlIH0RvJc7yAyvY0BP9ra7

LoadImage(0, "0_coin.png")
LoadImage(1, "1_slot.png")
LoadImage(2, "2_overlay.png")
LoadImage(3, "3_bgr.jpg")

BindGadgetEvent(0, @GadgetEvents())

DrawButton()


Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

PureBasic Forums - English

UI - insert coin to start action

UI - insert coin to start action