Showing and Hiding Groups
When we set up the Groups, we added a function to make it easy for use to turn those Groups on or off. To use this function, just call showLayer() with the name of the Group that you want to show. So if you want to show the Group view1, use the following:
layerVisibility("show", splash, view1)
If you want to hide the Group view2, use the following:
layerVisibility("hide", splash, view2)
So now if you only want the Group view3 to be visible, you would do the following:
layerVisibility("hide", splash, view1)
layerVisibility("hide", splash, view2)
layerVisibility("show", splash, view3)
Switching Images
The set_image() function that we set up earlier takes two parameters:
- group - Name of the Group that you want the image to be loaded into.
- filename - The path for the BMP image to load.
From there the function will remove the last image from the given Group, load a new BMP into the TileGrid and add it to the given Group.
That is it. We now have an easy way to change images for our UI.
The first image we will load will be into our bg_group by running the following code.
set_image(bg_group,"/images/BGimage.bmp")
Now the set_image() can be used to change images in the code loop for things like displaying weather icons, emojis, or even change the entire background image. Later we will use the set_image() function to make a button that will change an icon on one of our View tabs.
Updating Text
To use the function that we created for word wrapping, just run text_box() with the following parameters.
- target - The Label that you want to update with text.
- top - How far from the top is this Label, because an update may move the text.
- string - The text that you want to wrap in String format.
- max_chars - maximum amount of text characters you want in a line of text.
So the following code will let you send String data to a Label so that the text is wrapped and aligned to the top left of its originally set spot.
text_box(my_lable, 10, 'The text on this screen is wrapped.', 15)
The text block that the function returns will look like this:
The text onthis screen iswrapped.
Use the top attribute to set the y position of the text box from the top of the group.
Here is how the Label will look with only one line of of text, multiple lines in the same Label.y position, and multiple lines repositioned so the top stays in place.
Reading Buttons in the Loop
Now that we have our buttons we need to read them. To do that we will first see if anything is touching the screen. Then we test the screen's touch coordinates to see if they are inside any of our buttons.
If the touchscreen is touched inside one of our buttons we can execute some code. For the Tab buttons this means switching views. The larger buttons will send commands to the NeoPixel to do something.
# ------------- Handle Button Press Detection ------------- #
if touch: # Only do this if the screen is touched
# loop with buttons using enumerate() to number each button group as i
for i, b in enumerate(buttons):
if b.contains(touch): # Test each button to see if it was pressed
print('button%d pressed' % i)
if i == 0 and view_live != 1:
# only if button[0] is pressed and view1 is visable
switch_view(1)
while ts.touch_point: # for debounce
pass
if i == 1 and view_live != 2:
# only if button[1] is pressed and view2 is visable
switch_view(2)
while ts.touch_point: # for debounce
pass
if i == 2 and view_live != 3:
# only if button[2] is pressed and view3 is visable
switch_view(3)
while ts.touch_point: # for debounce
pass
if i == 3:
# Toggle switch button type
if switch_state == 0:
switch_state = 1
b.label = "ON"
b.selected = False
pixel.fill(WHITE)
print("Swich ON")
else:
switch_state = 0
b.label = "OFF"
b.selected = True
pixel.fill(BLACK)
print("Swich OFF")
while ts.touch_point: # for debounce
pass
print("Swich Pressed")
if i == 4:
# Momentary button type
b.selected = True
print('Button Pressed')
button_mode = numberUP(button_mode, 5)
if button_mode == 1:
pixel.fill(RED)
elif button_mode == 2:
pixel.fill(YELLOW)
elif button_mode == 3:
pixel.fill(GREEN)
elif button_mode == 4:
pixel.fill(BLUE)
elif button_mode == 5:
pixel.fill(PURPLE)
switch_state = 1
button_switch.label = "ON"
button_switch.selected = False
while ts.touch_point: # for debounce
pass
print("Button released")
b.selected = False
if i == 5 and view_live == 2:
# button[5] only works if view2 is visable
b.selected = True
while ts.touch_point: # for debounce
pass
print("Icon Button Pressed")
b.selected = False
if i == 6 and view_live == 3:
# button[6] only works if view3 is visable
b.selected = True
while ts.touch_point: # for debounce
pass
print("Sound Button Pressed")
b.selected = False
The last two buttons are ones that we have displayed on view2 and view3. The issue with these buttons is that they are not visible unless the Group that they are a part of is visible. However, this button press detecting code does not care if the button is visible or not. The code just checks to see if the users touch was inside where the button should be. To fix this, we make it so that the button action only takes place if the button is pressed and its view Group is live.
if i == 6 and view_live == 3:
b.selected = True
while ts.touch_point: # for debounce
pass
print("Sound Button Pressed")
b.selected = False
