Buttons are a group consisting of a Shape, Label, and touchscreen coordinates. So they take a bit to setup, but then they are rather easy to use.
Setup Some Styles
Just like with our text we will set up some variables that will help with the repetitive dimensions we will be using.
# ---------- Display Buttons ------------- # # Default button styling: BUTTON_HEIGHT = 40 BUTTON_WIDTH = 80 # We want three buttons across the top of the screen TAB_BUTTON_Y = 0 TAB_BUTTON_HEIGHT = 40 TAB_BUTTON_WIDTH = int(screen_width / 3) # We want two big buttons at the bottom of the screen BIG_BUTTON_HEIGHT = int(screen_height/3.2) BIG_BUTTON_WIDTH = int(screen_width/2) BIG_BUTTON_Y = int(screen_height-BIG_BUTTON_HEIGHT)
Setup the Buttons
We will be setting up a few buttons that will always be visible to be used with our main UI. These buttons will be added to a group called buttons to make it easy to tell what button was pressed later. They will also be added to our splash Group so that they will be displayed with our main Group.
# This group will make it easy for us to read a button press later.
buttons = []
# Main User Interface Buttons
button_view1 = Button(
x=0, # Start at furthest left
y=0, # Start at top
width=TAB_BUTTON_WIDTH, # Calculated width
height=TAB_BUTTON_HEIGHT, # Static height
label="View 1",
label_font=font,
label_color=0xFF7E00,
fill_color=0x5C5B5C,
outline_color=0x767676,
selected_fill=0x1A1A1A,
selected_outline=0x2E2E2E,
selected_label=0x525252,
)
buttons.append(button_view1) # adding this button to the buttons group
button_view2 = Button(
x=TAB_BUTTON_WIDTH, # Start after width of a button
y=0,
width=TAB_BUTTON_WIDTH,
height=TAB_BUTTON_HEIGHT,
label="View 2",
label_font=font,
label_color=0xFF7E00,
fill_color=0x5C5B5C,
outline_color=0x767676,
selected_fill=0x1A1A1A,
selected_outline=0x2E2E2E,
selected_label=0x525252,
)
buttons.append(button_view2) # adding this button to the buttons group
button_view3 = Button(
x=TAB_BUTTON_WIDTH * 2, # Start after width of 2 buttons
y=0,
width=TAB_BUTTON_WIDTH,
height=TAB_BUTTON_HEIGHT,
label="View 3",
label_font=font,
label_color=0xFF7E00,
fill_color=0x5C5B5C,
outline_color=0x767676,
selected_fill=0x1A1A1A,
selected_outline=0x2E2E2E,
selected_label=0x525252,
)
buttons.append(button_view3) # adding this button to the buttons group
button_switch = Button(
x=0, # Start at furthest left
y=BIG_BUTTON_Y,
width=BIG_BUTTON_WIDTH,
height=BIG_BUTTON_HEIGHT,
label="Light Switch",
label_font=font,
label_color=0xFF7E00,
fill_color=0x5C5B5C,
outline_color=0x767676,
selected_fill=0x1A1A1A,
selected_outline=0x2E2E2E,
selected_label=0x525252,
)
buttons.append(button_switch) # adding this button to the buttons group
button_2 = Button(
x=BIG_BUTTON_WIDTH, # Starts just after button 1 width
y=BIG_BUTTON_Y,
width=BIG_BUTTON_WIDTH,
height=BIG_BUTTON_HEIGHT,
label="Light Color",
label_font=font,
label_color=0xFF7E00,
fill_color=0x5C5B5C,
outline_color=0x767676,
selected_fill=0x1A1A1A,
selected_outline=0x2E2E2E,
selected_label=0x525252,
)
buttons.append(button_2) # adding this button to the buttons group
# Add all of the main buttons to the splash Group
for b in buttons:
splash.append(b)
You can see that there are many parameters for Button and this example uses them all. You do not have to set a color for the selection options, but the colors will invert when the button is pressed if you do not specify those colors.
Each Button is added to the button group and that that is used to add each Button to the splash Group.
Disappearing Buttons
There are two more Buttons that will be on separate view tabs and thus will be hidden at times. We do not want these Buttons to be added to the splash Group but we do want one on the view2 Group and the other on view3.
We will still be adding these buttons to the button group though so that we can detect a button press for these just like the others.
# Make a button to change the icon image on view2
button_icon = Button(
x=150,
y=60,
width=BUTTON_WIDTH,
height=BUTTON_HEIGHT,
label="Icon",
label_font=font,
label_color=0xFFFFFF,
fill_color=0x8900FF,
outline_color=0xBC55FD,
selected_fill=0x5A5A5A,
selected_outline=0xFF6600,
selected_label=0x525252,
style=Button.ROUNDRECT,
)
buttons.append(button_icon) # adding this button to the buttons group
# Add this button to view2 Group
view2.append(button_icon)
# Make a button to play a sound on view2
button_sound = Button(
x=150,
y=170,
width=BUTTON_WIDTH,
height=BUTTON_HEIGHT,
label="Sound",
label_font=font,
label_color=0xFFFFFF,
fill_color=0x8900FF,
outline_color=0xBC55FD,
selected_fill=0x5A5A5A,
selected_outline=0xFF6600,
selected_label=0x525252,
style=Button.ROUNDRECT,
)
buttons.append(button_sound) # adding this button to the buttons group
# Add this button to view2 Group
view3.append(button_sound)
Later we will get into how we can read these buttons being pressed on the Usage page.
There is a bit more information on Buttons at the link below.
Text editor powered by tinymce.
