Custom Switches and Buttons

Post Reply
User avatar
rbytes
Posts: 1798
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Custom Switches and Buttons

Post by rbytes » Tue Aug 28, 2018 3:59 pm

This program will display two functional switches and buttons. More of the code code be shifted to functions. You will need the 8 images from the post and the click sound. These should be placed in a folder named Switches in the same path as the program.

See the screenshots below that show how the switches appear onscreen. Sorry that the button images appear so large in this post, but I have no control over that.

Code: Select all

/*
Custom Switches
by rbytes, August 2018
*/
option sprite pos central
set orientation landscape
get screen size sw,sh
if sw*sh<1024*724 then iPhone=1
' iphone=1    for testing iphone
if iphone then
  sw=567!sh=320
endif
graphics
graphics clear .4,.4,.4

rw=sw/1024 ! rh=sh/768

' set size (scale) of the switch sprites

size1=.4         ' variable to set the size of the upper slide switch
size2=.2         ' variable to set the size of the upper button switch
size3=.2         ' variable to set the size of the lower slide switch
size4=.15        ' variable to set the size of the lower slide switch

if iphone then fx=36 else fx = 50
if iphone then trim=-5 else trim=0
' ***** create fields so switches can change their text content

FIELD "state1" TEXT "OFF" AT trim+278*rw,110*rh SIZE fx,40*rw
FIELD "state2" TEXT "OFF" AT trim+675*rw,110*rh SIZE fx,40*rw
FIELD "state3" TEXT "OFF" AT 278*rw,410*rh SIZE fx,40*rw
FIELD "state4" TEXT "OFF" AT trim+675*rw,410*rh SIZE fx,40*rw
FIELD "state1" font size 18*rw
FIELD "state2" font size 18*rw
FIELD "state3" font size 18*rw
FIELD "state4" font size 18*rw


' ***** call the switch creation function

makeswitch("off1","Switches/switchoff1.png","on1","Switches/switchon1.png",300*rw, 245*rh,size1*rw)
makeswitch("off2","Switches/buttonoff1.png","on2","Switches/buttonon1.png",700*rw,250*rh,size2*rw)
makeswitch("off3","Switches/switchoff2.png","on3","Switches/switchon2.png",304*rw,545*rh,size3*rw)
makeswitch("off4","Switches/buttonoff2.png","on4","Switches/buttonon2.png",700*rw, 545*rh,size4*rw)


' ***** load switch sound
MUSIC "click" LOAD "Switches/click.mp3"
MUSIC "click" VOLUME .5


' ***** main program loop
do
GET TOUCH 0 AS x,y


' ***** detect switch or button touch and call move switch function

IF SPRITE_HIT ("off1", X,Y) THEN swon1=moveswitch("off1","on1","state1",swon1)
IF SPRITE_HIT ("off2", X,Y) THEN swon2=moveswitch("off2","on2","state2",swon2)
IF SPRITE_HIT ("off3", X,Y) THEN swon3=moveswitch("off3","on3","state3",swon3)
IF SPRITE_HIT ("off4", X,Y) THEN swon4=moveswitch("off4","on4","state4",swon4)

slowdown
until 0
end

'y'
' ***** switch creation function

DEF makeswitch(off$,imageoff$,on$,imageon$,x,y,scale)
' ***** off sprite1
SPRITE off$ LOAD imageoff$
SPRITE off$ AT x,y SCALE scale
SPRITE off$ SHOW

' ***** on sprite1
SPRITE on$ LOAD imageon$
SPRITE on$ AT x,y SCALE scale
end def


' ***** switch change image function

DEF moveswitch(off$,on$,field$,swon)
    swon=1-swon
    IF swon THEN
      SPRITE on$ SHOW
      FIELD field$ TEXT "ON"
    ELSE
      SPRITE on$ HIDE
      FIELD field$ TEXT "OFF"
    ENDIF
    MUSIC "click" PLAY
    ' ***** prevent cycling on/off if button or switch is held
    do
      GET TOUCH 0 AS x,y
    until x=-1
    return swon
END DEF
buttonoff1.png
buttonoff1.png (97.06 KiB) Viewed 1101 times
buttonoff2.png
buttonoff2.png (153.71 KiB) Viewed 1101 times
buttonon1.png
buttonon1.png (183.24 KiB) Viewed 1101 times
buttonon2.png
buttonon2.png (209.49 KiB) Viewed 1101 times
switchoff1.png
switchoff1.png (47.02 KiB) Viewed 1101 times
switchoff2.png
switchoff2.png (55.63 KiB) Viewed 1101 times
switchon1.png
switchon1.png (42.78 KiB) Viewed 1101 times
switchon2.png
switchon2.png (53.53 KiB) Viewed 1101 times
click.mp3
(3.88 KiB) Downloaded 10 times
Attachments
FA7F39ED-BF29-4520-A835-6D7CFF77F3D2.png
FA7F39ED-BF29-4520-A835-6D7CFF77F3D2.png (171.94 KiB) Viewed 1100 times
7FED6940-AE56-4646-A82C-3893BE34D99B.png
7FED6940-AE56-4646-A82C-3893BE34D99B.png (186.32 KiB) Viewed 1100 times
####### Living the colorful life #######

Post Reply