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:

showLayer(vew1)

If you want to hide the Group view2, use the following:

hideLayer(view1)

So now if you only want the Group view3 to be visible, you would do the following:

Download: file
hideLayer(view1)
hideLayer(view2)
showLayer(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.

Download: file
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.

There is a new update in the works to make it easy to change the text box alignment, but for now this will work.

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.

Download: file
# ------------- 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.

Download: file
if i == 6 and view_live == 3:
    b.selected = True
    while ts.touch_point:  # for debounce
        pass
    print("Sound Button Pressed")
    b.selected = False
This guide was first published on Feb 10, 2020. It was last updated on Feb 10, 2020. This page (Usage) was last updated on Feb 20, 2020.