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 on
this screen is
wrapped.
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
Page last edited March 08, 2024
Text editor powered by tinymce.