Simple test

Ensure your device works with this simple test.

examples/displayio_layout_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Tim C, written for Adafruit Industries
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Currently contains GridLayout example.
 6
 7Make green and purple rectangles and a
 8"Hello World" label.
 9"""
10
11import board
12import displayio
13import terminalio
14from adafruit_display_text import label
15
16from adafruit_displayio_layout.layouts.grid_layout import GridLayout
17
18# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
19# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
20# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
21display = board.DISPLAY
22
23# Make the display context
24main_group = displayio.Group()
25display.root_group = main_group
26
27layout = GridLayout(
28    x=10,
29    y=10,
30    width=200,
31    height=100,
32    grid_size=(2, 2),
33    cell_padding=8,
34)
35_labels = []
36
37_labels.append(
38    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077)
39)
40layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
41_labels.append(
42    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700)
43)
44layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
45_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
46layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
47_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
48layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
49
50main_group.append(layout)
51while True:
52    pass

Cartesian plane simple test

Create a simple plot plane.

examples/displayio_layout_cartesian_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Jose David M.
 2#
 3# SPDX-License-Identifier: MIT
 4#############################
 5"""
 6This is a basic demonstration of a Cartesian widget.
 7"""
 8
 9import time
10
11import board
12import displayio
13import terminalio
14
15from adafruit_displayio_layout.widgets.cartesian import Cartesian
16
17# Fonts used for the Dial tick labels
18tick_font = terminalio.FONT
19
20display = board.DISPLAY  # create the display on the PyPortal or Clue (for example)
21# otherwise change this to setup the display
22# for display chip driver and pinout you have (e.g. ILI9341)
23
24
25# Create a Cartesian widget
26my_plane = Cartesian(
27    x=150,  # x position for the plane
28    y=100,  # y plane position
29    width=100,  # display width
30    height=100,  # display height
31    axes_color=0xFFFFFF,  # axes line color
32    axes_stroke=2,  # axes lines width in pixels
33    tick_color=0xFFFFFF,  # ticks color
34    major_tick_stroke=1,  # ticks width in pixels
35    major_tick_length=5,  # ticks length in pixels
36    tick_label_font=tick_font,  # the font used for the tick labels
37    font_color=0xFFFFFF,  # ticks line color
38)
39
40my_group = displayio.Group()
41my_group.append(my_plane)
42display.root_group = my_group  # add high level Group to the display
43
44posx = 0
45posy = 0
46
47while True:
48    for i in range(0, 90, 2):
49        my_plane.update_pointer(i, i)
50        time.sleep(0.5)

Cartesian lineplot

Create a lineplot.

examples/displayio_layout_cartesian_lineplot.py
 1# SPDX-FileCopyrightText: 2021 Stefan Krüger
 2#
 3# SPDX-License-Identifier: MIT
 4#############################
 5"""
 6This is a basic demonstration of a Cartesian widget for line-ploting
 7"""
 8
 9import time
10
11import board
12import displayio
13
14from adafruit_displayio_layout.widgets.cartesian import Cartesian
15
16# create the display on the PyPortal or Clue or PyBadge(for example)
17display = board.DISPLAY
18# otherwise change this to setup the display
19# for display chip driver and pinout you have (e.g. ILI9341)
20
21# pybadge display:  160x128
22# Create a Cartesian widget
23# https://circuitpython.readthedocs.io/projects/displayio-layout/en/latest/api.html#module-adafruit_displayio_layout.widgets.cartesian
24my_plane = Cartesian(
25    x=15,  # x position for the plane
26    y=2,  # y plane position
27    width=140,  # display width
28    height=105,  # display height
29    xrange=(0, 10),  # x range
30    yrange=(0, 10),  # y range
31)
32
33my_group = displayio.Group()
34my_group.append(my_plane)
35display.root_group = my_group  # add high level Group to the display
36
37data = [
38    # (0, 0),  # we do this point manually - so we have no wait...
39    (1, 1),
40    (2, 1),
41    (2, 2),
42    (3, 3),
43    (4, 3),
44    (4, 4),
45    (5, 5),
46    (6, 5),
47    (6, 6),
48    (7, 7),
49    (8, 7),
50    (8, 8),
51    (9, 9),
52    (10, 9),
53    (10, 10),
54]
55
56print("examples/displayio_layout_cartesian_lineplot.py")
57
58# first point without a wait.
59my_plane.add_plot_line(0, 0)
60for x, y in data:
61    my_plane.add_plot_line(x, y)
62    time.sleep(0.5)
63
64while True:
65    pass

Cartesian Advanced

Create three different cartesian planes in the display

examples/displayio_layout_cartesian_advanced_test.py
 1# SPDX-FileCopyrightText: 2021 Jose David M.
 2#
 3# SPDX-License-Identifier: MIT
 4#############################
 5"""
 6This is a more advance demonstration of a Cartesian widget and some configurable
 7parameters.
 8"""
 9
10import board
11import displayio
12import terminalio
13
14from adafruit_displayio_layout.widgets.cartesian import Cartesian
15
16# Fonts used for the Dial tick labels
17tick_font = terminalio.FONT
18
19display = board.DISPLAY  # create the display on the PyPortal or Clue (for example)
20# otherwise change this to setup the display
21# for display chip driver and pinout you have (e.g. ILI9341)
22
23
24# Create different Cartesian widgets
25my_group = displayio.Group()
26
27car = Cartesian(
28    x=25,
29    y=10,
30    width=100,
31    height=100,
32    subticks=True,
33)
34my_group.append(car)
35
36car3 = Cartesian(
37    x=150,
38    y=10,
39    width=150,
40    height=100,
41    xrange=(0, 160),
42    axes_stroke=1,
43    axes_color=0x990099,
44    subticks=True,
45)
46my_group.append(car3)
47
48car4 = Cartesian(
49    x=30,
50    y=140,
51    width=80,
52    height=80,
53    axes_stroke=1,
54    tick_color=0xFFFFFF,
55    subticks=True,
56)
57
58my_group.append(car4)
59
60car5 = Cartesian(
61    x=180,
62    y=140,
63    width=70,
64    height=70,
65    xrange=(0, 120),
66    yrange=(0, 90),
67    tick_color=0x990099,
68    axes_stroke=3,
69    major_tick_length=10,
70)
71my_group.append(car5)
72
73display.root_group = my_group
74
75while True:
76    pass

GridLayout simple text

Make green and purple rectangles and a “Hello World” label

examples/displayio_layout_gridlayout_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Tim C, written for Adafruit Industries
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Make green and purple rectangles and a
 6"Hello World" label.
 7"""
 8
 9import board
10import displayio
11import terminalio
12from adafruit_display_text import label
13
14from adafruit_displayio_layout.layouts.grid_layout import GridLayout
15
16# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
17# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
18# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
19display = board.DISPLAY
20
21# Make the display context
22main_group = displayio.Group()
23display.root_group = main_group
24
25layout = GridLayout(
26    x=10,
27    y=10,
28    width=200,
29    height=100,
30    grid_size=(2, 2),
31    cell_padding=8,
32)
33_labels = []
34
35_labels.append(
36    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077)
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700)
41)
42layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
43_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
44layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
45_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
46layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
47
48main_group.append(layout)
49while True:
50    pass

GridLayout divider lines example

Create GridLayouts with divider lines.

examples/displayio_layout_gridlayout_dividers.py
 1# SPDX-FileCopyrightText: 2021 Tim C, written for Adafruit Industries
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Illustrate how to use divider lines with GridLayout
 6"""
 7
 8import board
 9import displayio
10import terminalio
11from adafruit_display_text import label
12
13from adafruit_displayio_layout.layouts.grid_layout import GridLayout
14
15# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
16# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
17# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
18display = board.DISPLAY
19
20# Make the display context
21main_group = displayio.Group()
22display.root_group = main_group
23
24layout = GridLayout(
25    x=10,
26    y=10,
27    width=200,
28    height=100,
29    grid_size=(2, 2),
30    cell_padding=8,
31    divider_lines=True,  # divider lines around every cell
32)
33_labels = []
34
35_labels.append(
36    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077)
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700)
41)
42layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
43_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
44layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
45_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
46layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
47
48main_group.append(layout)
49
50other_layout = GridLayout(
51    x=10,
52    y=120,
53    width=140,
54    height=80,
55    grid_size=(2, 3),
56    cell_padding=4,
57    h_divider_line_rows=(1, 2),  # Lines before rows 1 and 2
58)
59
60other_layout.add_content(
61    label.Label(terminalio.FONT, text="0x0"), grid_position=(0, 0), cell_size=(1, 1)
62)
63other_layout.add_content(
64    label.Label(terminalio.FONT, text="0x1"), grid_position=(0, 1), cell_size=(1, 1)
65)
66other_layout.add_content(
67    label.Label(terminalio.FONT, text="0x2"), grid_position=(0, 2), cell_size=(1, 1)
68)
69
70other_layout.add_content(
71    label.Label(terminalio.FONT, text="1x0"), grid_position=(1, 0), cell_size=(1, 1)
72)
73other_layout.add_content(
74    label.Label(terminalio.FONT, text="1x1"), grid_position=(1, 1), cell_size=(1, 1)
75)
76other_layout.add_content(
77    label.Label(terminalio.FONT, text="1x2"), grid_position=(1, 2), cell_size=(1, 1)
78)
79
80main_group.append(other_layout)
81
82while True:
83    pass

GridLayout Get Cell

Make green and purple rectangles and then update the color and text values of the labels using the get_cell() function.

examples/displayio_layout_grid_layout_get_cell_test.py
 1# SPDX-FileCopyrightText: 2021 Tim C, written for Adafruit Industries
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Make green and purple rectangles and then update the color
 6and text values of the labels using the get_content() function.
 7"""
 8
 9import board
10import displayio
11import terminalio
12from adafruit_display_text import label
13
14from adafruit_displayio_layout.layouts.grid_layout import GridLayout
15
16# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
17# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
18# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
19display = board.DISPLAY
20
21# Make the display context
22main_group = displayio.Group()
23display.root_group = main_group
24
25layout = GridLayout(
26    x=10,
27    y=10,
28    width=200,
29    height=100,
30    grid_size=(2, 2),
31    cell_padding=8,
32)
33_labels = []
34
35_labels.append(
36    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077)
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700)
41)
42layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
43_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
44layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
45_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
46layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
47
48main_group.append(layout)
49
50layout.get_content((0, 0)).text = "Happy"
51layout.get_content((1, 0)).text = "Circuit"
52
53layout.get_content((0, 1)).text = "Python"
54layout.get_content((1, 1)).text = "Day"
55
56layout.get_content((0, 1)).background_color = 0x007700
57layout.get_content((1, 1)).background_color = 0x770077
58
59while True:
60    pass

Pygame simple test

Display Hello World using Blinka_Displayio_PyGameDisplay.

examples/displayio_layout_gridlayout_pygame_display_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Tim C, written for Adafruit Industries
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Make a GridLayout with some Labels in it's cells.
 6Displayed with Blinka_Displayio_PyGameDisplay
 7
 8Requires: https://github.com/FoamyGuy/Blinka_Displayio_PyGameDisplay
 9"""
10
11import displayio
12import terminalio
13from adafruit_display_text import label
14from blinka_displayio_pygamedisplay import PyGameDisplay
15
16# Make the display context. Change size if you want
17from adafruit_displayio_layout.layouts.grid_layout import GridLayout
18
19display = PyGameDisplay(width=320, height=240)
20main_group = displayio.Group()
21display.root_group = main_group
22
23layout = GridLayout(
24    x=10,
25    y=10,
26    width=320,
27    height=100,
28    grid_size=(2, 2),
29    cell_padding=8,
30)
31_labels = []
32
33_labels.append(
34    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077)
35)
36layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
37_labels.append(
38    label.Label(terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700)
39)
40layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
41_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
42layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
43_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
44layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
45
46main_group.append(layout)
47while display.running:
48    pass

Icon Animated simple test

Creates two animated icons with touch response: zoom and shrink animations.

examples/displayio_layout_icon_animated_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Kevin Matocha
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Creates two animated icons with touch response: zoom and shrink animations.
 6"""
 7
 8import time
 9
10import adafruit_touchscreen
11import board
12import displayio
13
14from adafruit_displayio_layout.widgets.icon_animated import IconAnimated
15
16display = board.DISPLAY
17
18ts = adafruit_touchscreen.Touchscreen(
19    board.TOUCH_XL,
20    board.TOUCH_XR,
21    board.TOUCH_YD,
22    board.TOUCH_YU,
23    calibration=((5200, 59000), (5800, 57000)),
24    size=(display.width, display.height),
25)
26
27
28IconAnimated.init_class(display, max_scale=1.5, max_icon_size=(48, 48), max_color_depth=255)
29
30icon_zoom = IconAnimated(
31    "Zoom",
32    "icons/Play_48x48_small.bmp",
33    x=50,
34    y=40,
35    on_disk=True,
36    scale=1.5,  # zoom animation
37    angle=5,
38)
39
40icon_shrink = IconAnimated(
41    "Shrink",
42    "icons/Play_48x48_small.bmp",
43    x=180,
44    y=40,
45    on_disk=True,
46    scale=0.7,  # shrink animation
47    angle=-10,
48)
49
50icons = [icon_zoom, icon_shrink]
51
52main_group = displayio.Group()
53main_group.append(icon_zoom)
54main_group.append(icon_shrink)
55
56display.root_group = main_group
57
58
59COOLDOWN_TIME = 0.25
60LAST_PRESS_TIME = -1
61
62display.auto_refresh = True
63
64while True:
65    time.sleep(0.05)
66    p = ts.touch_point
67    if p:
68        _now = time.monotonic()
69        if _now - LAST_PRESS_TIME > COOLDOWN_TIME:
70            for icon in icons:
71                if icon.contains(p):
72                    icon.zoom_animation(p)
73                    LAST_PRESS_TIME = time.monotonic()
74
75    else:
76        for icon in icons:
77            icon.zoom_out_animation(p)

Page Layout simple test

Make a PageLayout with two pages and change between them.

examples/displayio_layout_page_layout_simpletest.py
 1# SPDX-FileCopyrightText: 2022 Tim C
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Make a PageLayout with two pages and change between them.
 6"""
 7
 8import time
 9
10import board
11import displayio
12import terminalio
13from adafruit_display_shapes.circle import Circle
14from adafruit_display_shapes.rect import Rect
15from adafruit_display_text.bitmap_label import Label
16
17from adafruit_displayio_layout.layouts.page_layout import PageLayout
18
19# built-in display
20display = board.DISPLAY
21
22# create and show main_group
23main_group = displayio.Group()
24display.root_group = main_group
25
26# create the page layout
27test_page_layout = PageLayout(x=0, y=0)
28
29page_1_lbl = Label(
30    font=terminalio.FONT,
31    scale=2,
32    text="This is the first page!",
33    anchor_point=(0, 0),
34    anchored_position=(10, 10),
35)
36page_2_lbl = Label(
37    font=terminalio.FONT,
38    scale=2,
39    text="This page is the second page!",
40    anchor_point=(0, 0),
41    anchored_position=(10, 10),
42)
43
44page_1_group = displayio.Group()
45page_2_group = displayio.Group()
46
47square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
48circle = Circle(50, 100, r=30, fill=0xDD00DD)
49
50page_1_group.append(square)
51page_1_group.append(page_1_lbl)
52
53page_2_group.append(page_2_lbl)
54page_2_group.append(circle)
55
56test_page_layout.add_content(page_1_group, "page_1")
57test_page_layout.add_content(page_2_group, "page_2")
58
59main_group.append(test_page_layout)
60while True:
61    time.sleep(1)
62    test_page_layout.next_page()

Page Layout advanced test

Make a PageLayout and illustrate all of it’s features

examples/displayio_layout_page_layout_advancedtest.py
  1# SPDX-FileCopyrightText: 2022 Tim C
  2#
  3# SPDX-License-Identifier: MIT
  4"""
  5Make a PageLayout and illustrate all of it's features
  6"""
  7
  8import time
  9
 10import board
 11import displayio
 12import terminalio
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.rect import Rect
 15from adafruit_display_shapes.triangle import Triangle
 16from adafruit_display_text.bitmap_label import Label
 17
 18from adafruit_displayio_layout.layouts.page_layout import PageLayout
 19
 20# built-in display
 21display = board.DISPLAY
 22
 23# create and show main_group
 24main_group = displayio.Group()
 25display.root_group = main_group
 26
 27# create the page layout
 28test_page_layout = PageLayout(x=0, y=0)
 29
 30# make 3 pages of content
 31page_1_group = displayio.Group()
 32page_2_group = displayio.Group()
 33page_3_group = displayio.Group()
 34
 35# labels
 36page_1_lbl = Label(
 37    font=terminalio.FONT,
 38    scale=2,
 39    text="This is the first page!",
 40    anchor_point=(0, 0),
 41    anchored_position=(10, 10),
 42)
 43page_2_lbl = Label(
 44    font=terminalio.FONT,
 45    scale=2,
 46    text="This page is the second page!",
 47    anchor_point=(0, 0),
 48    anchored_position=(10, 10),
 49)
 50page_3_lbl = Label(
 51    font=terminalio.FONT,
 52    scale=2,
 53    text="The third page is fun!",
 54    anchor_point=(0, 0),
 55    anchored_position=(10, 10),
 56)
 57
 58# shapes
 59square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 60circle = Circle(50, 100, r=30, fill=0xDD00DD)
 61triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 62triangle.x = 80
 63triangle.y = 70
 64
 65# add everything to their page groups
 66page_1_group.append(square)
 67page_1_group.append(page_1_lbl)
 68page_2_group.append(page_2_lbl)
 69page_2_group.append(circle)
 70page_3_group.append(page_3_lbl)
 71page_3_group.append(triangle)
 72
 73# add the pages to the layout, supply your own page names
 74test_page_layout.add_content(page_1_group, "page_1")
 75test_page_layout.add_content(page_2_group, "page_2")
 76test_page_layout.add_content(page_3_group, "page_3")
 77
 78# add it to the group that is showing on the display
 79main_group.append(test_page_layout)
 80
 81# change page with function by name
 82test_page_layout.show_page(page_name="page_3")
 83print(f"showing page index:{test_page_layout.showing_page_index}")
 84time.sleep(1)
 85
 86# change page with function by index
 87test_page_layout.show_page(page_index=0)
 88print(f"showing page name: {test_page_layout.showing_page_name}")
 89time.sleep(1)
 90
 91# change page by updating the page name property
 92test_page_layout.showing_page_name = "page_3"
 93print(f"showing page index: {test_page_layout.showing_page_index}")
 94time.sleep(1)
 95
 96# change page by updating the page index property
 97test_page_layout.showing_page_index = 1
 98print(f"showing page name: {test_page_layout.showing_page_name}")
 99time.sleep(5)
100
101another_text = Label(
102    terminalio.FONT,
103    text="And another thing!",
104    scale=2,
105    color=0x00FF00,
106    anchor_point=(0, 0),
107    anchored_position=(100, 100),
108)
109test_page_layout.showing_page_content.append(another_text)
110
111print("starting loop")
112while True:
113    time.sleep(1)
114    # change page by next page function. It will loop by default
115    test_page_layout.next_page()

Pygame Switch example

Make a GridLayout with some Labels in its cells. Displayed with Blinka_Displayio_PyGameDisplay

examples/displayio_layout_page_layout_advancedtest.py
  1# SPDX-FileCopyrightText: 2022 Tim C
  2#
  3# SPDX-License-Identifier: MIT
  4"""
  5Make a PageLayout and illustrate all of it's features
  6"""
  7
  8import time
  9
 10import board
 11import displayio
 12import terminalio
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.rect import Rect
 15from adafruit_display_shapes.triangle import Triangle
 16from adafruit_display_text.bitmap_label import Label
 17
 18from adafruit_displayio_layout.layouts.page_layout import PageLayout
 19
 20# built-in display
 21display = board.DISPLAY
 22
 23# create and show main_group
 24main_group = displayio.Group()
 25display.root_group = main_group
 26
 27# create the page layout
 28test_page_layout = PageLayout(x=0, y=0)
 29
 30# make 3 pages of content
 31page_1_group = displayio.Group()
 32page_2_group = displayio.Group()
 33page_3_group = displayio.Group()
 34
 35# labels
 36page_1_lbl = Label(
 37    font=terminalio.FONT,
 38    scale=2,
 39    text="This is the first page!",
 40    anchor_point=(0, 0),
 41    anchored_position=(10, 10),
 42)
 43page_2_lbl = Label(
 44    font=terminalio.FONT,
 45    scale=2,
 46    text="This page is the second page!",
 47    anchor_point=(0, 0),
 48    anchored_position=(10, 10),
 49)
 50page_3_lbl = Label(
 51    font=terminalio.FONT,
 52    scale=2,
 53    text="The third page is fun!",
 54    anchor_point=(0, 0),
 55    anchored_position=(10, 10),
 56)
 57
 58# shapes
 59square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 60circle = Circle(50, 100, r=30, fill=0xDD00DD)
 61triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 62triangle.x = 80
 63triangle.y = 70
 64
 65# add everything to their page groups
 66page_1_group.append(square)
 67page_1_group.append(page_1_lbl)
 68page_2_group.append(page_2_lbl)
 69page_2_group.append(circle)
 70page_3_group.append(page_3_lbl)
 71page_3_group.append(triangle)
 72
 73# add the pages to the layout, supply your own page names
 74test_page_layout.add_content(page_1_group, "page_1")
 75test_page_layout.add_content(page_2_group, "page_2")
 76test_page_layout.add_content(page_3_group, "page_3")
 77
 78# add it to the group that is showing on the display
 79main_group.append(test_page_layout)
 80
 81# change page with function by name
 82test_page_layout.show_page(page_name="page_3")
 83print(f"showing page index:{test_page_layout.showing_page_index}")
 84time.sleep(1)
 85
 86# change page with function by index
 87test_page_layout.show_page(page_index=0)
 88print(f"showing page name: {test_page_layout.showing_page_name}")
 89time.sleep(1)
 90
 91# change page by updating the page name property
 92test_page_layout.showing_page_name = "page_3"
 93print(f"showing page index: {test_page_layout.showing_page_index}")
 94time.sleep(1)
 95
 96# change page by updating the page index property
 97test_page_layout.showing_page_index = 1
 98print(f"showing page name: {test_page_layout.showing_page_name}")
 99time.sleep(5)
100
101another_text = Label(
102    terminalio.FONT,
103    text="And another thing!",
104    scale=2,
105    color=0x00FF00,
106    anchor_point=(0, 0),
107    anchored_position=(100, 100),
108)
109test_page_layout.showing_page_content.append(another_text)
110
111print("starting loop")
112while True:
113    time.sleep(1)
114    # change page by next page function. It will loop by default
115    test_page_layout.next_page()

Switch simple test

Create a single sliding switch.

examples/displayio_layout_switch_simpletest.py
 1# SPDX-FileCopyrightText: 2021 Kevin Matocha
 2#
 3# SPDX-License-Identifier: MIT
 4"""
 5Creates a single sliding switch widget.
 6"""
 7
 8import time
 9
10import adafruit_touchscreen
11import board
12import displayio
13
14from adafruit_displayio_layout.widgets.switch_round import SwitchRound as Switch
15
16display = board.DISPLAY
17
18ts = adafruit_touchscreen.Touchscreen(
19    board.TOUCH_XL,
20    board.TOUCH_XR,
21    board.TOUCH_YD,
22    board.TOUCH_YU,
23    calibration=((5200, 59000), (5800, 57000)),
24    size=(display.width, display.height),
25)
26
27# Create the switch
28my_switch = Switch(20, 30)
29
30
31my_group = displayio.Group()
32my_group.append(my_switch)
33
34# Add my_group to the display
35display.root_group = my_group
36
37# Start the main loop
38while True:
39    p = ts.touch_point  # get any touches on the screen
40
41    if p:  # Check each switch if the touch point is within the switch touch area
42        # If touched, then flip the switch with .selected
43        if my_switch.contains(p):
44            my_switch.selected(p)
45
46    time.sleep(0.05)  # touch response on PyPortal is more accurate with a small delay

Switch test with multiple switches

Create multiple sliding switch with various sizes and orientations.

examples/displayio_layout_switch_multiple.py
  1# SPDX-FileCopyrightText: 2021 Kevin Matocha
  2#
  3# SPDX-License-Identifier: MIT
  4"""
  5Creates multiple sliding switch widgets of various size and orientations.
  6"""
  7
  8import time
  9
 10import adafruit_touchscreen
 11import board
 12import displayio
 13
 14from adafruit_displayio_layout.widgets.switch_round import SwitchRound as Switch
 15
 16display = board.DISPLAY
 17
 18# setup the touch screen
 19ts = adafruit_touchscreen.Touchscreen(
 20    board.TOUCH_XL,
 21    board.TOUCH_XR,
 22    board.TOUCH_YD,
 23    board.TOUCH_YU,
 24    calibration=((5200, 59000), (5800, 57000)),
 25    size=(display.width, display.height),
 26)
 27
 28
 29# Create the switches
 30
 31my_switch = Switch(20, 30)
 32
 33my_switch2 = Switch(
 34    x=120,
 35    y=35,
 36    height=30,  # Set height to 30 pixels.  If you do not specify width,
 37    # it is automatically set to a default aspect ratio
 38    touch_padding=10,  # add extra boundary for touch response
 39    value=True,
 40)  # initial value is set to True
 41
 42my_switch3 = Switch(
 43    x=20,
 44    y=85,
 45    height=40,
 46    fill_color_off=(255, 0, 0),  # Set off colorred, can use hex code (0xFF0000)
 47    outline_color_off=(80, 0, 0),
 48    background_color_off=(150, 0, 0),
 49    background_outline_color_off=(30, 0, 0),
 50)
 51
 52my_switch4 = Switch(
 53    x=120,
 54    y=85,
 55    height=40,
 56    width=110,  # you can set the width manually but it may look weird
 57)
 58
 59my_switch5 = Switch(
 60    x=20,
 61    y=140,
 62    height=40,
 63    display_button_text=False,  # do not show the 0/1 on the switch
 64)
 65
 66my_switch6 = Switch(
 67    x=120,
 68    y=140,
 69    height=40,
 70    horizontal=False,  # set orientation to vertical
 71)
 72
 73my_switch7 = Switch(
 74    x=180,
 75    y=140,
 76    height=40,
 77    horizontal=False,  # set orientation to vertical
 78    flip=True,  # swap the direction
 79)
 80
 81my_switch8 = Switch(
 82    x=0,
 83    y=0,  # this is a larger, vertical orientation switch
 84    height=60,
 85    horizontal=False,  # set orientation to vertical
 86    flip=True,  # swap the direction
 87)
 88# use anchor_point and anchored_position to set the my_switch8 position
 89# relative to the display size.
 90my_switch8.anchor_point = (1.0, 1.0)
 91# the switch anchor_point is the bottom right switch corner
 92my_switch8.anchored_position = (display.width - 10, display.height - 10)
 93# the switch anchored_position is 10 pixels from the display
 94# lower right corner
 95
 96my_group = displayio.Group()
 97my_group.append(my_switch)
 98my_group.append(my_switch2)
 99my_group.append(my_switch3)
100my_group.append(my_switch4)
101my_group.append(my_switch5)
102my_group.append(my_switch6)
103my_group.append(my_switch7)
104my_group.append(my_switch8)
105
106# Add my_group to the display
107display.root_group = my_group
108
109
110# Start the main loop
111while True:
112    p = ts.touch_point  # get any touches on the screen
113
114    if p:  # Check each switch if the touch point is within the switch touch area
115        # If touched, then flip the switch with .selected
116        if my_switch.contains(p):
117            my_switch.selected(p)
118
119        elif my_switch2.contains(p):
120            my_switch2.selected(p)
121
122        elif my_switch3.contains(p):
123            my_switch3.selected(p)
124
125        elif my_switch4.contains(p):
126            my_switch4.selected(p)
127
128        elif my_switch5.contains(p):
129            my_switch5.selected(p)
130
131        elif my_switch6.contains(p):
132            my_switch6.selected(p)
133
134        elif my_switch7.contains(p):
135            my_switch7.selected(p)
136
137        elif my_switch8.contains(p):
138            my_switch8.selected(p)
139
140    time.sleep(0.05)  # touch response on PyPortal is more accurate with a small delay

FlipInput simple test

Create three FlipInput selectors.

examples/displayio_layout_flip_input_simpletest.py
  1# SPDX-FileCopyrightText: 2021 Kevin Matocha
  2#
  3# SPDX-License-Identifier: MIT
  4#############################
  5"""
  6This is a basic demonstration of a FlipInput widget.
  7"""
  8
  9import time
 10
 11import adafruit_touchscreen
 12import board
 13import displayio
 14from adafruit_bitmap_font import bitmap_font
 15
 16from adafruit_displayio_layout.widgets.flip_input import FlipInput
 17
 18display = board.DISPLAY  # create the display on the PyPortal,
 19# otherwise change this to setup the display
 20# for display chip driver and pinout you have (e.g. ILI9341)
 21
 22# setup the touchscreen
 23ts = adafruit_touchscreen.Touchscreen(
 24    board.TOUCH_XL,
 25    board.TOUCH_XR,
 26    board.TOUCH_YD,
 27    board.TOUCH_YU,
 28    calibration=((5200, 59000), (5800, 57000)),
 29    size=(display.width, display.height),
 30)
 31
 32# Select the font file for use
 33font_file = "fonts/DSEG14Classic-Regular-64-ModS.pcf"
 34my_font = bitmap_font.load_font(font_file)
 35
 36my_flip1 = FlipInput(
 37    display,
 38    anchor_point=[0.0, 0.0],
 39    anchored_position=[50, 40],
 40    color=0xFF2222,  # reddish orange color
 41    value_list=[  # list of month strings, using three characters
 42        "JAN",
 43        "FEB",
 44        "MAR",
 45        "APR",
 46        "MAY",
 47        "JUN",
 48        "JUL",
 49        "AUG",
 50        "SEP",
 51        "OCT",
 52        "NOV",
 53        "DEC",
 54    ],
 55    font_scale=5,
 56    horizontal=False,  # use vertical arrows
 57    animation_time=0.4,
 58)
 59
 60my_flip2 = FlipInput(
 61    display,
 62    anchor_point=[0.0, 0.0],
 63    anchored_position=[220, 40],
 64    color=0xFF2222,  # reddish orange color
 65    value_list=[f"{x:02d}" for x in range(1, 31 + 1)],
 66    # use a list of strings from 01 through 31
 67    # use the {0:02d} format string to always use two digits (e.g. '03')
 68    font_scale=5,
 69    horizontal=False,  # use vertical arrows
 70    animation_time=0.4,
 71)
 72
 73my_flip3 = FlipInput(
 74    display,
 75    anchor_point=[0.5, 1.0],
 76    anchored_position=[320 // 2, 240 - 10],
 77    color=0xFF2222,  # reddish orange color
 78    value_list=[f"{x}" for x in range(1985, 2022, 1)],
 79    # use a list with values of stringsfrom 1985 to 2022
 80    font=my_font,
 81    horizontal=True,  # use horizontal arrows
 82    animation_time=0.8,  # add more time since the animation covers a longer distance
 83)
 84
 85# Pick an interesting date to start
 86#
 87# You can set the value by direct integer indexes of the list or by a string
 88# Here are three ways to set the values:
 89my_flip1.value = 9  # use direct integer indexing to set the value to the 10th month
 90my_flip2.value = my_flip2.value_list.index("21")  # find the index yourself by
 91# searching the value_list
 92my_flip3.value = "2015"  # or set the value based on a string that is in the value_list
 93
 94# Create the group to display and append the FlipInput widgets
 95my_group = displayio.Group()
 96my_group.append(my_flip1)
 97my_group.append(my_flip2)
 98my_group.append(my_flip3)
 99
100display.root_group = my_group  # add high level Group to the display
101display.auto_refresh = True
102
103while True:
104    p = ts.touch_point
105    # print("touch_point p: {}".format(p)) # print the touch point
106
107    if p:  # if touched, check if any of the widgets was triggered
108        if my_flip1.contains(p):
109            my_flip1.selected(p)
110            time.sleep(0.15)  # add a short delay to reduce accidental press
111        elif my_flip2.contains(p):
112            my_flip2.selected(p)
113            time.sleep(0.15)  # add a short delay to reduce accidental press
114        elif my_flip3.contains(p):
115            my_flip3.selected(p)
116            time.sleep(0.15)  # add a short delay to reduce accidental press
117
118    time.sleep(0.01)  # small delay seems to improve touch response

Tab Layout simple test

Make a TabLayout and illustrate the most basic features and usage.

examples/displayio_layout_tab_layout_simpletest.py
  1# SPDX-FileCopyrightText: 2022 Tim C
  2#
  3# SPDX-License-Identifier: MIT
  4"""
  5Make a TabLayout and illustrate the most basic features and usage.
  6"""
  7
  8import time
  9
 10import board
 11import displayio
 12import terminalio
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.rect import Rect
 15from adafruit_display_shapes.triangle import Triangle
 16from adafruit_display_text.bitmap_label import Label
 17
 18from adafruit_displayio_layout.layouts.tab_layout import TabLayout
 19
 20CHANGE_DELAY = 1.0  # Seconds to wait before auto-advancing to the next tab
 21
 22# built-in display
 23display = board.DISPLAY
 24
 25# create and show main_group
 26main_group = displayio.Group()
 27display.root_group = main_group
 28
 29font = terminalio.FONT
 30
 31# create the page layout
 32test_page_layout = TabLayout(
 33    x=0,
 34    y=0,
 35    display=board.DISPLAY,
 36    tab_text_scale=2,
 37    custom_font=font,
 38    inactive_tab_spritesheet="bmps/inactive_tab_sprite.bmp",
 39    showing_tab_spritesheet="bmps/active_tab_sprite.bmp",
 40    showing_tab_text_color=0x00AA59,
 41    inactive_tab_text_color=0xEEEEEE,
 42    inactive_tab_transparent_indexes=(0, 1),
 43    showing_tab_transparent_indexes=(0, 1),
 44    tab_count=4,
 45)
 46
 47# make page content Groups
 48page_1_group = displayio.Group()
 49page_2_group = displayio.Group()
 50page_3_group = displayio.Group()
 51page_4_group = displayio.Group()
 52
 53# labels
 54page_1_lbl = Label(
 55    font=terminalio.FONT,
 56    scale=2,
 57    text="This is the first page!",
 58    anchor_point=(0, 0),
 59    anchored_position=(10, 10),
 60)
 61page_2_lbl = Label(
 62    font=terminalio.FONT,
 63    scale=2,
 64    text="This page is the\nsecond page!",
 65    anchor_point=(0, 0),
 66    anchored_position=(10, 10),
 67)
 68page_3_lbl = Label(
 69    font=terminalio.FONT,
 70    scale=2,
 71    text="The third page is fun!",
 72    anchor_point=(0, 0),
 73    anchored_position=(10, 10),
 74)
 75
 76page_4_lbl = Label(
 77    font=terminalio.FONT,
 78    scale=2,
 79    text="The fourth page\nis where it's at",
 80    anchor_point=(0, 0),
 81    anchored_position=(10, 10),
 82)
 83
 84# shapes
 85square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 86circle = Circle(50, 120, r=30, fill=0xDD00DD)
 87triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 88rectangle = Rect(x=80, y=80, width=100, height=50, fill=0x0000DD)
 89
 90triangle.x = 80
 91triangle.y = 70
 92
 93# add everything to their page groups
 94page_1_group.append(square)
 95page_1_group.append(page_1_lbl)
 96page_2_group.append(page_2_lbl)
 97page_2_group.append(circle)
 98page_3_group.append(page_3_lbl)
 99page_3_group.append(triangle)
100page_4_group.append(page_4_lbl)
101page_4_group.append(rectangle)
102
103# add the pages to the layout, supply your own page names
104test_page_layout.add_content(page_1_group, "One")
105test_page_layout.add_content(page_2_group, "Two")
106test_page_layout.add_content(page_3_group, "Thr")
107test_page_layout.add_content(page_4_group, "For")
108
109# add it to the group that is showing on the display
110main_group.append(test_page_layout)
111
112# change page with function by name
113test_page_layout.show_page(page_name="Thr")
114print(f"showing page index:{test_page_layout.showing_page_index}")
115time.sleep(1)
116
117# change page with function by index
118test_page_layout.show_page(page_index=0)
119print(f"showing page name: {test_page_layout.showing_page_name}")
120time.sleep(1)
121
122# change page by updating the page name property
123test_page_layout.showing_page_name = "Thr"
124print(f"showing page index: {test_page_layout.showing_page_index}")
125time.sleep(1)
126
127# change page by updating the page index property
128test_page_layout.showing_page_index = 1
129print(f"showing page name: {test_page_layout.showing_page_name}")
130time.sleep(5)
131
132another_text = Label(
133    terminalio.FONT,
134    text="And another thing!",
135    scale=2,
136    color=0x00FF00,
137    anchor_point=(0, 0),
138    anchored_position=(100, 100),
139)
140test_page_layout.showing_page_content.append(another_text)
141
142print("starting loop")
143
144prev_change_time = time.monotonic()
145
146while True:
147    now = time.monotonic()
148    if prev_change_time + CHANGE_DELAY <= now:
149        prev_change_time = now
150        # change page by next page function. It will loop by default
151        test_page_layout.next_page()

Tab Layout touch test

Make a TabLayout change tabs with the touchscreen

examples/ddisplayio_layout_tab_layout_touchtest.py
  1# SPDX-FileCopyrightText: 2022 Tim C
  2#
  3# SPDX-License-Identifier: MIT
  4"""
  5Make a TabLayout change tabs with the touchscreen
  6"""
  7
  8import adafruit_touchscreen
  9import board
 10import displayio
 11import terminalio
 12from adafruit_display_shapes.circle import Circle
 13from adafruit_display_shapes.rect import Rect
 14from adafruit_display_shapes.triangle import Triangle
 15from adafruit_display_text.bitmap_label import Label
 16
 17from adafruit_displayio_layout.layouts.tab_layout import TabLayout
 18
 19# built-in display
 20display = board.DISPLAY
 21
 22# ------------ Touchscreen setup --------------- #
 23# See: https://learn.adafruit.com/making-a-pyportal-user-interface-displayio/display
 24display = board.DISPLAY  # create the display object
 25
 26screen_width = display.width
 27screen_height = display.height
 28ts = adafruit_touchscreen.Touchscreen(
 29    board.TOUCH_XL,
 30    board.TOUCH_XR,
 31    board.TOUCH_YD,
 32    board.TOUCH_YU,
 33    calibration=((5200, 59000), (5800, 57000)),
 34    size=(screen_width, screen_height),
 35)
 36
 37# create and show main_group
 38main_group = displayio.Group()
 39display.root_group = main_group
 40
 41font = terminalio.FONT
 42
 43# create the page layout
 44test_page_layout = TabLayout(
 45    x=0,
 46    y=0,
 47    display=board.DISPLAY,
 48    tab_text_scale=2,
 49    custom_font=font,
 50    inactive_tab_spritesheet="bmps/inactive_tab_sprite.bmp",
 51    showing_tab_spritesheet="bmps/active_tab_sprite.bmp",
 52    showing_tab_text_color=0x00AA59,
 53    inactive_tab_text_color=0xEEEEEE,
 54    inactive_tab_transparent_indexes=(0, 1),
 55    showing_tab_transparent_indexes=(0, 1),
 56    tab_count=4,
 57)
 58
 59# make page content Groups
 60page_1_group = displayio.Group()
 61page_2_group = displayio.Group()
 62page_3_group = displayio.Group()
 63page_4_group = displayio.Group()
 64
 65# labels
 66page_1_lbl = Label(
 67    font=terminalio.FONT,
 68    scale=2,
 69    text="This is the first page!",
 70    anchor_point=(0, 0),
 71    anchored_position=(10, 10),
 72)
 73page_2_lbl = Label(
 74    font=terminalio.FONT,
 75    scale=2,
 76    text="This page is the\nsecond page!",
 77    anchor_point=(0, 0),
 78    anchored_position=(10, 10),
 79)
 80page_3_lbl = Label(
 81    font=terminalio.FONT,
 82    scale=2,
 83    text="The third page is fun!",
 84    anchor_point=(0, 0),
 85    anchored_position=(10, 10),
 86)
 87
 88page_4_lbl = Label(
 89    font=terminalio.FONT,
 90    scale=2,
 91    text="The fourth page\nis where it's at",
 92    anchor_point=(0, 0),
 93    anchored_position=(10, 10),
 94)
 95
 96# shapes
 97square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 98circle = Circle(50, 120, r=30, fill=0xDD00DD)
 99triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
100rectangle = Rect(x=80, y=80, width=100, height=50, fill=0x0000DD)
101
102triangle.x = 80
103triangle.y = 70
104
105# add everything to their page groups
106page_1_group.append(square)
107page_1_group.append(page_1_lbl)
108page_2_group.append(page_2_lbl)
109page_2_group.append(circle)
110page_3_group.append(page_3_lbl)
111page_3_group.append(triangle)
112page_4_group.append(page_4_lbl)
113page_4_group.append(rectangle)
114
115# add the pages to the layout, supply your own page names
116test_page_layout.add_content(page_1_group, "One")
117test_page_layout.add_content(page_2_group, "Two")
118test_page_layout.add_content(page_3_group, "Thr")
119test_page_layout.add_content(page_4_group, "For")
120
121# add it to the group that is showing on the display
122main_group.append(test_page_layout)
123
124
125# add something new after the TabLayout was already created
126another_text = Label(
127    terminalio.FONT,
128    text="And another thing!",
129    scale=2,
130    color=0x00FF00,
131    anchor_point=(0, 0),
132    anchored_position=(100, 100),
133)
134test_page_layout.showing_page_content.append(another_text)
135
136while True:
137    touch = ts.touch_point
138    if touch:
139        test_page_layout.handle_touch_events(touch)