Customize Button appearance

[Manoiud]

Hello, I’m a new user. Loving the app so far, and it’s fun to program in BASIC again, especially with all the upgrades.

One question: is it possible to customize UI elements with custom graphics? Like having an image as the button texture and maybe even changing the font and color of the button text?

Thank you!

[Mr. Kibernetik]

No, buttons cannot have graphics as their component.

But buttons can be transparent to display image below the button. Or sprites can be used as an interactive images.

[Manoiud]

Thank you for the suggestions for a workaround, will do that.

[JürgenS]

How to set a button transparent? Can not find this in the manual of Mr. Dutchman.

[Dutchman]

Here's a program that Rbytes made as a demo for using icons as text in buttons:

Code: Select all

'Button Mania
'by ricardobytes » 06 May 2016
/*
After finding that emoji could be used to design a clickable list, I wondered if they might be also be useful as pushbutton switches. The answer is yes. I could have condensed the code by using a loop, but I left it expanded so that all you need to do to use a button in your own programs is to copy and paste its code section.
The first two buttons toggle on-off only. The next two have an off-low-high sequence.
*/
SET ORIENTATION LANDSCAPE
SET BUTTONS CUSTOM
DRAW COLOR 0,0,0
DRAW ALPHA 0
FILL ALPHA 0
PRINT
PRINT "                            E M O J I   S W I T C H E S"
N1$="Button1" ! N2$="Button2" ! N3$="Button3" ! N4$="Button4"
N5$="Button5" ! N6$="Button6" ! N7$="Button7" ! N8$="Button8"
T1$="😢" ! T2$="😄" ! t3$="⬛️" ! t4$="⬜️"
t5$="⚫️" ! t6$="🔵" ! t7$="🔴"
t8$="❕" ! t9$="❗️" ! t10$="‼️"
y3=2 ! y4=2
A1$="OFF" ! A2$="OFF" ! A3$="OFF" ! A4$="OFF"
bw=100 ! bh=100
SET BUTTONS FONT SIZE 100
BUTTON N1$ TEXT T1$ AT 150,100 SIZE bw,bh
BUTTON N2$ TEXT T3$ AT 350,100 SIZE bw,bh
BUTTON N3$ TEXT T5$ AT 550,100 SIZE bw,bh
BUTTON N4$ TEXT T8$ AT 750,100 SIZE bw,bh
DRAW ALPHA 1
SET BUTTONS FONT SIZE 20
BUTTON N5$ TEXT A1$ AT 150,200 SIZE bw,bh
BUTTON N6$ TEXT A2$ AT 350,200 SIZE bw,bh
BUTTON N7$ TEXT A3$ AT 550,200 SIZE bw,bh
BUTTON N8$ TEXT A4$ AT 750,200 SIZE bw,bh

DO
'sad-happy face switch
IF BUTTON_PRESSED(N1$) THEN
  y=1-y
  IF y THEN
    BUTTON N1$ TEXT T2$
    A1$="ON"
  ELSE
    BUTTON N1$ TEXT T1$
    A1$="OFF"
  ENDIF
  BUTTON N5$ TEXT A1$
  BEEP
ENDIF

'black-white square switch
IF BUTTON_PRESSED(N2$) THEN
  y2=1-y2
  IF y2 THEN
    BUTTON N2$ TEXT T4$
    A2$="ON"
  ELSE
    BUTTON N2$ TEXT T3$
    A2$="OFF"
  ENDIF
  BUTTON N6$ TEXT A2$
  BEEP
ENDIF

'black-blue-red three-way switch
IF BUTTON_PRESSED(N3$) THEN
  ON y3 GOTO 10, 20, 30
  10 BUTTON N3$ TEXT T5$ ! A3$="OFF" ! GOTO 40
  20 BUTTON N3$ TEXT T6$ ! A3$=" LO" ! GOTO 40
  30 BUTTON N3$ TEXT T7$ ! A3$="  HI"
  40 y3+=1 ! IF y3>3 THEN y3=1
  BUTTON N7$ TEXT A3$
  BEEP
ENDIF

'grey-red-double red exclamation switch
IF BUTTON_PRESSED(N4$) THEN
  ON y4 GO TO 50, 60, 70
  50 BUTTON N4$ TEXT T8$ ! A4$="OFF" ! GOTO 80
  60 BUTTON N4$ TEXT T9$ ! A4$=" LO" ! GOTO 80
  70 BUTTON N4$ TEXT T10$ ! A4$="  HI"
  80 y4+=1 ! IF y4>3 THEN y4=1
  BUTTON N8$ TEXT A4$
  BEEP
ENDIF
SLOWDOWN
UNTIL 0

[Chooch912]

I really like the functionality this program would add to a few projects I'm working on, but when I copied the program and ran it none of the emojis showed up. I am running this on an iPad 9th gen with IOS 17.6.1.

I couldn't find a way to post a photo, but my screen appears like this (if I tap above each of the OFF words, where I'm guessing the emojis appear, OFF changes to ON on the 1st 2, and LO HIGH on the last 2). How to I get the emojis to appear?

EMOJI SWITCHES


OFF OFF OFF OFF

[Mr. Kibernetik]

In the program sample above, instead of

Code: Select all

DRAW ALPHA 0

there should be

Code: Select all

DRAW ALPHA 1

or just remove this line.

[Mr. Kibernetik]

This is a simple example of two buttons, one is default and another one is transparent:

Code: Select all

graphics
graphics clear 0,1,1
fill alpha 0
draw alpha 1
draw color 0,0,0

button 1 text "button 1" at 100,50

set buttons custom

button 2 text "button 2" at 100,100

WhatsApp Image 2024-09-16 at 08.38.32_56deea2e.png (41.15 KiB) Viewed 170 times

[JürgenS]

Thank You!

Example of Rbytes:

"SET ORIENTATION LANDSCAPE" will persist also for other programs until SmartBasic (v6.9 IDE on iPhone 13 pro) is completely finished or "SET ORIENTATION 0" is applied as a single task or added and run in another program?

[Chooch912]

Thank you Mr. K.

Changing to DRAW ALPHA 1 solved the problem and the program works like a charm.

Also, I appreciate your "simple" 2 button program. I now have a better understanding of "transparency".