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"""
10import board
11import displayio
12import terminalio
13from adafruit_display_text import label
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(
37        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
38    )
39)
40layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
41_labels.append(
42    label.Label(
43        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
44    )
45)
46layout.add_content(_labels[1], grid_position=(1, 0), cell_size=(1, 1))
47_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Hello"))
48layout.add_content(_labels[2], grid_position=(0, 1), cell_size=(1, 1))
49_labels.append(label.Label(terminalio.FONT, scale=2, x=0, y=0, text="Grid"))
50layout.add_content(_labels[3], grid_position=(1, 1), cell_size=(1, 1))
51
52main_group.append(layout)
53while True:
54    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
10import board
11import displayio
12import terminalio
13from adafruit_displayio_layout.widgets.cartesian import Cartesian
14
15# Fonts used for the Dial tick labels
16tick_font = terminalio.FONT
17
18display = board.DISPLAY  # create the display on the PyPortal or Clue (for example)
19# otherwise change this to setup the display
20# for display chip driver and pinout you have (e.g. ILI9341)
21
22
23# Create a Cartesian widget
24my_plane = Cartesian(
25    x=150,  # x position for the plane
26    y=100,  # y plane position
27    width=100,  # display width
28    height=100,  # display height
29    axes_color=0xFFFFFF,  # axes line color
30    axes_stroke=2,  # axes lines width in pixels
31    tick_color=0xFFFFFF,  # ticks color
32    major_tick_stroke=1,  # ticks width in pixels
33    major_tick_length=5,  # ticks length in pixels
34    tick_label_font=tick_font,  # the font used for the tick labels
35    font_color=0xFFFFFF,  # ticks line color
36)
37
38my_group = displayio.Group()
39my_group.append(my_plane)
40display.root_group = my_group  # add high level Group to the display
41
42posx = 0
43posy = 0
44
45while True:
46    for i in range(0, 90, 2):
47        my_plane.update_pointer(i, i)
48        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
10import board
11import displayio
12from adafruit_displayio_layout.widgets.cartesian import Cartesian
13
14# create the display on the PyPortal or Clue or PyBadge(for example)
15display = board.DISPLAY
16# otherwise change this to setup the display
17# for display chip driver and pinout you have (e.g. ILI9341)
18
19# pybadge display:  160x128
20# Create a Cartesian widget
21# https://circuitpython.readthedocs.io/projects/displayio-layout/en/latest/api.html#module-adafruit_displayio_layout.widgets.cartesian
22my_plane = Cartesian(
23    x=15,  # x position for the plane
24    y=2,  # y plane position
25    width=140,  # display width
26    height=105,  # display height
27    xrange=(0, 10),  # x range
28    yrange=(0, 10),  # y range
29)
30
31my_group = displayio.Group()
32my_group.append(my_plane)
33display.root_group = my_group  # add high level Group to the display
34
35data = [
36    # (0, 0),  # we do this point manually - so we have no wait...
37    (1, 1),
38    (2, 1),
39    (2, 2),
40    (3, 3),
41    (4, 3),
42    (4, 4),
43    (5, 5),
44    (6, 5),
45    (6, 6),
46    (7, 7),
47    (8, 7),
48    (8, 8),
49    (9, 9),
50    (10, 9),
51    (10, 10),
52]
53
54print("examples/displayio_layout_cartesian_lineplot.py")
55
56# first point without a wait.
57my_plane.add_plot_line(0, 0)
58for x, y in data:
59    my_plane.add_plot_line(x, y)
60    time.sleep(0.5)
61
62while True:
63    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
13from adafruit_displayio_layout.widgets.cartesian import Cartesian
14
15# Fonts used for the Dial tick labels
16tick_font = terminalio.FONT
17
18display = board.DISPLAY  # create the display on the PyPortal or Clue (for example)
19# otherwise change this to setup the display
20# for display chip driver and pinout you have (e.g. ILI9341)
21
22
23# Create different Cartesian widgets
24my_group = displayio.Group()
25
26car = Cartesian(
27    x=25,
28    y=10,
29    width=100,
30    height=100,
31    subticks=True,
32)
33my_group.append(car)
34
35car3 = Cartesian(
36    x=150,
37    y=10,
38    width=150,
39    height=100,
40    xrange=(0, 160),
41    axes_stroke=1,
42    axes_color=0x990099,
43    subticks=True,
44)
45my_group.append(car3)
46
47car4 = Cartesian(
48    x=30,
49    y=140,
50    width=80,
51    height=80,
52    axes_stroke=1,
53    tick_color=0xFFFFFF,
54    subticks=True,
55)
56
57my_group.append(car4)
58
59car5 = Cartesian(
60    x=180,
61    y=140,
62    width=70,
63    height=70,
64    xrange=(0, 120),
65    yrange=(0, 90),
66    tick_color=0x990099,
67    axes_stroke=3,
68    major_tick_length=10,
69)
70my_group.append(car5)
71
72display.root_group = my_group
73
74while True:
75    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"""
 8import board
 9import displayio
10import terminalio
11from adafruit_display_text import label
12from adafruit_displayio_layout.layouts.grid_layout import GridLayout
13
14# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
15# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
16# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
17display = board.DISPLAY
18
19# Make the display context
20main_group = displayio.Group()
21display.root_group = main_group
22
23layout = GridLayout(
24    x=10,
25    y=10,
26    width=200,
27    height=100,
28    grid_size=(2, 2),
29    cell_padding=8,
30)
31_labels = []
32
33_labels.append(
34    label.Label(
35        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
36    )
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(
41        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
42    )
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

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"""
 7import board
 8import displayio
 9import terminalio
10from adafruit_display_text import label
11from adafruit_displayio_layout.layouts.grid_layout import GridLayout
12
13# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
14# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
15# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
16display = board.DISPLAY
17
18# Make the display context
19main_group = displayio.Group()
20display.root_group = main_group
21
22layout = GridLayout(
23    x=10,
24    y=10,
25    width=200,
26    height=100,
27    grid_size=(2, 2),
28    cell_padding=8,
29    divider_lines=True,  # divider lines around every cell
30)
31_labels = []
32
33_labels.append(
34    label.Label(
35        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
36    )
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(
41        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
42    )
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)
51
52other_layout = GridLayout(
53    x=10,
54    y=120,
55    width=140,
56    height=80,
57    grid_size=(2, 3),
58    cell_padding=4,
59    h_divider_line_rows=(1, 2),  # Lines before rows 1 and 2
60)
61
62other_layout.add_content(
63    label.Label(terminalio.FONT, text="0x0"), grid_position=(0, 0), cell_size=(1, 1)
64)
65other_layout.add_content(
66    label.Label(terminalio.FONT, text="0x1"), grid_position=(0, 1), cell_size=(1, 1)
67)
68other_layout.add_content(
69    label.Label(terminalio.FONT, text="0x2"), grid_position=(0, 2), cell_size=(1, 1)
70)
71
72other_layout.add_content(
73    label.Label(terminalio.FONT, text="1x0"), grid_position=(1, 0), cell_size=(1, 1)
74)
75other_layout.add_content(
76    label.Label(terminalio.FONT, text="1x1"), grid_position=(1, 1), cell_size=(1, 1)
77)
78other_layout.add_content(
79    label.Label(terminalio.FONT, text="1x2"), grid_position=(1, 2), cell_size=(1, 1)
80)
81
82main_group.append(other_layout)
83
84while True:
85    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_cell() function.
 7"""
 8import board
 9import displayio
10import terminalio
11from adafruit_display_text import label
12from adafruit_displayio_layout.layouts.grid_layout import GridLayout
13
14# use built in display (PyPortal, PyGamer, PyBadge, CLUE, etc.)
15# see guide for setting up external displays (TFT / OLED breakouts, RGB matrices, etc.)
16# https://learn.adafruit.com/circuitpython-display-support-using-displayio/display-and-display-bus
17display = board.DISPLAY
18
19# Make the display context
20main_group = displayio.Group()
21display.root_group = main_group
22
23layout = GridLayout(
24    x=10,
25    y=10,
26    width=200,
27    height=100,
28    grid_size=(2, 2),
29    cell_padding=8,
30)
31_labels = []
32
33_labels.append(
34    label.Label(
35        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
36    )
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(
41        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
42    )
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)
51
52layout.get_cell((0, 0)).text = "Happy"
53layout.get_cell((1, 0)).text = "Circuit"
54
55layout.get_cell((0, 1)).text = "Python"
56layout.get_cell((1, 1)).text = "Day"
57
58layout.get_cell((0, 1)).background_color = 0x007700
59layout.get_cell((1, 1)).background_color = 0x770077
60
61while True:
62    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"""
10import displayio
11import terminalio
12from adafruit_display_text import label
13from blinka_displayio_pygamedisplay import PyGameDisplay
14
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(
35        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
36    )
37)
38layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
39_labels.append(
40    label.Label(
41        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
42    )
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 display.running:
52    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"""
 7import time
 8import board
 9import displayio
10import adafruit_touchscreen
11from adafruit_displayio_layout.widgets.icon_animated import IconAnimated
12
13display = board.DISPLAY
14
15ts = adafruit_touchscreen.Touchscreen(
16    board.TOUCH_XL,
17    board.TOUCH_XR,
18    board.TOUCH_YD,
19    board.TOUCH_YU,
20    calibration=((5200, 59000), (5800, 57000)),
21    size=(display.width, display.height),
22)
23
24
25IconAnimated.init_class(
26    display, max_scale=1.5, max_icon_size=(48, 48), max_color_depth=255
27)
28
29icon_zoom = IconAnimated(
30    "Zoom",
31    "icons/Play_48x48_small.bmp",
32    x=50,
33    y=40,
34    on_disk=True,
35    scale=1.5,  # zoom animation
36    angle=5,
37)
38
39icon_shrink = IconAnimated(
40    "Shrink",
41    "icons/Play_48x48_small.bmp",
42    x=180,
43    y=40,
44    on_disk=True,
45    scale=0.7,  # shrink animation
46    angle=-10,
47)
48
49icons = [icon_zoom, icon_shrink]
50
51main_group = displayio.Group()
52main_group.append(icon_zoom)
53main_group.append(icon_shrink)
54
55display.root_group = main_group
56
57
58COOLDOWN_TIME = 0.25
59LAST_PRESS_TIME = -1
60
61display.auto_refresh = True
62
63while True:
64    time.sleep(0.05)
65    p = ts.touch_point
66    if p:
67        _now = time.monotonic()
68        if _now - LAST_PRESS_TIME > COOLDOWN_TIME:
69            for icon in icons:
70                if icon.contains(p):
71                    icon.zoom_animation(p)
72                    LAST_PRESS_TIME = time.monotonic()
73
74    else:
75        for icon in icons:
76            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"""
 7import time
 8import displayio
 9import board
10import terminalio
11from adafruit_display_text.bitmap_label import Label
12from adafruit_display_shapes.rect import Rect
13from adafruit_display_shapes.circle import Circle
14from adafruit_displayio_layout.layouts.page_layout import PageLayout
15
16# built-in display
17display = board.DISPLAY
18
19# create and show main_group
20main_group = displayio.Group()
21display.root_group = main_group
22
23# create the page layout
24test_page_layout = PageLayout(x=0, y=0)
25
26page_1_lbl = Label(
27    font=terminalio.FONT,
28    scale=2,
29    text="This is the first page!",
30    anchor_point=(0, 0),
31    anchored_position=(10, 10),
32)
33page_2_lbl = Label(
34    font=terminalio.FONT,
35    scale=2,
36    text="This page is the second page!",
37    anchor_point=(0, 0),
38    anchored_position=(10, 10),
39)
40
41page_1_group = displayio.Group()
42page_2_group = displayio.Group()
43
44square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
45circle = Circle(50, 100, r=30, fill=0xDD00DD)
46
47page_1_group.append(square)
48page_1_group.append(page_1_lbl)
49
50page_2_group.append(page_2_lbl)
51page_2_group.append(circle)
52
53test_page_layout.add_content(page_1_group, "page_1")
54test_page_layout.add_content(page_2_group, "page_2")
55
56main_group.append(test_page_layout)
57while True:
58    time.sleep(1)
59    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"""
  7import time
  8import displayio
  9import board
 10import terminalio
 11from adafruit_display_text.bitmap_label import Label
 12from adafruit_display_shapes.rect import Rect
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.triangle import Triangle
 15from adafruit_displayio_layout.layouts.page_layout import PageLayout
 16
 17# built-in display
 18display = board.DISPLAY
 19
 20# create and show main_group
 21main_group = displayio.Group()
 22display.root_group = main_group
 23
 24# create the page layout
 25test_page_layout = PageLayout(x=0, y=0)
 26
 27# make 3 pages of content
 28page_1_group = displayio.Group()
 29page_2_group = displayio.Group()
 30page_3_group = displayio.Group()
 31
 32# labels
 33page_1_lbl = Label(
 34    font=terminalio.FONT,
 35    scale=2,
 36    text="This is the first page!",
 37    anchor_point=(0, 0),
 38    anchored_position=(10, 10),
 39)
 40page_2_lbl = Label(
 41    font=terminalio.FONT,
 42    scale=2,
 43    text="This page is the second page!",
 44    anchor_point=(0, 0),
 45    anchored_position=(10, 10),
 46)
 47page_3_lbl = Label(
 48    font=terminalio.FONT,
 49    scale=2,
 50    text="The third page is fun!",
 51    anchor_point=(0, 0),
 52    anchored_position=(10, 10),
 53)
 54
 55# shapes
 56square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 57circle = Circle(50, 100, r=30, fill=0xDD00DD)
 58triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 59triangle.x = 80
 60triangle.y = 70
 61
 62# add everything to their page groups
 63page_1_group.append(square)
 64page_1_group.append(page_1_lbl)
 65page_2_group.append(page_2_lbl)
 66page_2_group.append(circle)
 67page_3_group.append(page_3_lbl)
 68page_3_group.append(triangle)
 69
 70# add the pages to the layout, supply your own page names
 71test_page_layout.add_content(page_1_group, "page_1")
 72test_page_layout.add_content(page_2_group, "page_2")
 73test_page_layout.add_content(page_3_group, "page_3")
 74
 75# add it to the group that is showing on the display
 76main_group.append(test_page_layout)
 77
 78# change page with function by name
 79test_page_layout.show_page(page_name="page_3")
 80print("showing page index:{}".format(test_page_layout.showing_page_index))
 81time.sleep(1)
 82
 83# change page with function by index
 84test_page_layout.show_page(page_index=0)
 85print("showing page name: {}".format(test_page_layout.showing_page_name))
 86time.sleep(1)
 87
 88# change page by updating the page name property
 89test_page_layout.showing_page_name = "page_3"
 90print("showing page index: {}".format(test_page_layout.showing_page_index))
 91time.sleep(1)
 92
 93# change page by updating the page index property
 94test_page_layout.showing_page_index = 1
 95print("showing page name: {}".format(test_page_layout.showing_page_name))
 96time.sleep(5)
 97
 98another_text = Label(
 99    terminalio.FONT,
100    text="And another thing!",
101    scale=2,
102    color=0x00FF00,
103    anchor_point=(0, 0),
104    anchored_position=(100, 100),
105)
106test_page_layout.showing_page_content.append(another_text)
107
108print("starting loop")
109while True:
110    time.sleep(1)
111    # change page by next page function. It will loop by default
112    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"""
  7import time
  8import displayio
  9import board
 10import terminalio
 11from adafruit_display_text.bitmap_label import Label
 12from adafruit_display_shapes.rect import Rect
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.triangle import Triangle
 15from adafruit_displayio_layout.layouts.page_layout import PageLayout
 16
 17# built-in display
 18display = board.DISPLAY
 19
 20# create and show main_group
 21main_group = displayio.Group()
 22display.root_group = main_group
 23
 24# create the page layout
 25test_page_layout = PageLayout(x=0, y=0)
 26
 27# make 3 pages of content
 28page_1_group = displayio.Group()
 29page_2_group = displayio.Group()
 30page_3_group = displayio.Group()
 31
 32# labels
 33page_1_lbl = Label(
 34    font=terminalio.FONT,
 35    scale=2,
 36    text="This is the first page!",
 37    anchor_point=(0, 0),
 38    anchored_position=(10, 10),
 39)
 40page_2_lbl = Label(
 41    font=terminalio.FONT,
 42    scale=2,
 43    text="This page is the second page!",
 44    anchor_point=(0, 0),
 45    anchored_position=(10, 10),
 46)
 47page_3_lbl = Label(
 48    font=terminalio.FONT,
 49    scale=2,
 50    text="The third page is fun!",
 51    anchor_point=(0, 0),
 52    anchored_position=(10, 10),
 53)
 54
 55# shapes
 56square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 57circle = Circle(50, 100, r=30, fill=0xDD00DD)
 58triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 59triangle.x = 80
 60triangle.y = 70
 61
 62# add everything to their page groups
 63page_1_group.append(square)
 64page_1_group.append(page_1_lbl)
 65page_2_group.append(page_2_lbl)
 66page_2_group.append(circle)
 67page_3_group.append(page_3_lbl)
 68page_3_group.append(triangle)
 69
 70# add the pages to the layout, supply your own page names
 71test_page_layout.add_content(page_1_group, "page_1")
 72test_page_layout.add_content(page_2_group, "page_2")
 73test_page_layout.add_content(page_3_group, "page_3")
 74
 75# add it to the group that is showing on the display
 76main_group.append(test_page_layout)
 77
 78# change page with function by name
 79test_page_layout.show_page(page_name="page_3")
 80print("showing page index:{}".format(test_page_layout.showing_page_index))
 81time.sleep(1)
 82
 83# change page with function by index
 84test_page_layout.show_page(page_index=0)
 85print("showing page name: {}".format(test_page_layout.showing_page_name))
 86time.sleep(1)
 87
 88# change page by updating the page name property
 89test_page_layout.showing_page_name = "page_3"
 90print("showing page index: {}".format(test_page_layout.showing_page_index))
 91time.sleep(1)
 92
 93# change page by updating the page index property
 94test_page_layout.showing_page_index = 1
 95print("showing page name: {}".format(test_page_layout.showing_page_name))
 96time.sleep(5)
 97
 98another_text = Label(
 99    terminalio.FONT,
100    text="And another thing!",
101    scale=2,
102    color=0x00FF00,
103    anchor_point=(0, 0),
104    anchored_position=(100, 100),
105)
106test_page_layout.showing_page_content.append(another_text)
107
108print("starting loop")
109while True:
110    time.sleep(1)
111    # change page by next page function. It will loop by default
112    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
 9import board
10import displayio
11import adafruit_touchscreen
12from adafruit_displayio_layout.widgets.switch_round import SwitchRound as Switch
13
14display = board.DISPLAY
15
16ts = adafruit_touchscreen.Touchscreen(
17    board.TOUCH_XL,
18    board.TOUCH_XR,
19    board.TOUCH_YD,
20    board.TOUCH_YU,
21    calibration=((5200, 59000), (5800, 57000)),
22    size=(display.width, display.height),
23)
24
25# Create the switch
26my_switch = Switch(20, 30)
27
28
29my_group = displayio.Group()
30my_group.append(my_switch)
31
32# Add my_group to the display
33display.root_group = my_group
34
35# Start the main loop
36while True:
37    p = ts.touch_point  # get any touches on the screen
38
39    if p:  # Check each switch if the touch point is within the switch touch area
40        # If touched, then flip the switch with .selected
41        if my_switch.contains(p):
42            my_switch.selected(p)
43
44    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
  9import board
 10import displayio
 11import adafruit_touchscreen
 12from adafruit_displayio_layout.widgets.switch_round import SwitchRound as Switch
 13
 14display = board.DISPLAY
 15
 16# setup the touch screen
 17ts = adafruit_touchscreen.Touchscreen(
 18    board.TOUCH_XL,
 19    board.TOUCH_XR,
 20    board.TOUCH_YD,
 21    board.TOUCH_YU,
 22    calibration=((5200, 59000), (5800, 57000)),
 23    size=(display.width, display.height),
 24)
 25
 26
 27# Create the switches
 28
 29my_switch = Switch(20, 30)
 30
 31my_switch2 = Switch(
 32    x=120,
 33    y=35,
 34    height=30,  # Set height to 30 pixels.  If you do not specify width,
 35    # it is automatically set to a default aspect ratio
 36    touch_padding=10,  # add extra boundary for touch response
 37    value=True,
 38)  # initial value is set to True
 39
 40my_switch3 = Switch(
 41    x=20,
 42    y=85,
 43    height=40,
 44    fill_color_off=(255, 0, 0),  # Set off colorred, can use hex code (0xFF0000)
 45    outline_color_off=(80, 0, 0),
 46    background_color_off=(150, 0, 0),
 47    background_outline_color_off=(30, 0, 0),
 48)
 49
 50my_switch4 = Switch(
 51    x=120,
 52    y=85,
 53    height=40,
 54    width=110,  # you can set the width manually but it may look weird
 55)
 56
 57my_switch5 = Switch(
 58    x=20,
 59    y=140,
 60    height=40,
 61    display_button_text=False,  # do not show the 0/1 on the switch
 62)
 63
 64my_switch6 = Switch(
 65    x=120,
 66    y=140,
 67    height=40,
 68    horizontal=False,  # set orientation to vertical
 69)
 70
 71my_switch7 = Switch(
 72    x=180,
 73    y=140,
 74    height=40,
 75    horizontal=False,  # set orientation to vertical
 76    flip=True,  # swap the direction
 77)
 78
 79my_switch8 = Switch(
 80    x=0,
 81    y=0,  # this is a larger, vertical orientation switch
 82    height=60,
 83    horizontal=False,  # set orientation to vertical
 84    flip=True,  # swap the direction
 85)
 86# use anchor_point and anchored_position to set the my_switch8 position
 87# relative to the display size.
 88my_switch8.anchor_point = (1.0, 1.0)
 89# the switch anchor_point is the bottom right switch corner
 90my_switch8.anchored_position = (display.width - 10, display.height - 10)
 91# the switch anchored_position is 10 pixels from the display
 92# lower right corner
 93
 94my_group = displayio.Group()
 95my_group.append(my_switch)
 96my_group.append(my_switch2)
 97my_group.append(my_switch3)
 98my_group.append(my_switch4)
 99my_group.append(my_switch5)
100my_group.append(my_switch6)
101my_group.append(my_switch7)
102my_group.append(my_switch8)
103
104# Add my_group to the display
105display.root_group = my_group
106
107
108# Start the main loop
109while True:
110    p = ts.touch_point  # get any touches on the screen
111
112    if p:  # Check each switch if the touch point is within the switch touch area
113        # If touched, then flip the switch with .selected
114        if my_switch.contains(p):
115            my_switch.selected(p)
116
117        elif my_switch2.contains(p):
118            my_switch2.selected(p)
119
120        elif my_switch3.contains(p):
121            my_switch3.selected(p)
122
123        elif my_switch4.contains(p):
124            my_switch4.selected(p)
125
126        elif my_switch5.contains(p):
127            my_switch5.selected(p)
128
129        elif my_switch6.contains(p):
130            my_switch6.selected(p)
131
132        elif my_switch7.contains(p):
133            my_switch7.selected(p)
134
135        elif my_switch8.contains(p):
136            my_switch8.selected(p)
137
138    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
  9# pylint: disable=invalid-name
 10
 11import time
 12import board
 13import displayio
 14import adafruit_touchscreen
 15from adafruit_bitmap_font import bitmap_font
 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=["{0:02d}".format(x) 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=["{}".format(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"""
  7import time
  8import displayio
  9import board
 10import terminalio
 11from adafruit_display_text.bitmap_label import Label
 12from adafruit_display_shapes.rect import Rect
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.triangle import Triangle
 15from adafruit_displayio_layout.layouts.tab_layout import TabLayout
 16
 17CHANGE_DELAY = 1.0  # Seconds to wait before auto-advancing to the next tab
 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
 26font = terminalio.FONT
 27
 28# create the page layout
 29test_page_layout = TabLayout(
 30    x=0,
 31    y=0,
 32    display=board.DISPLAY,
 33    tab_text_scale=2,
 34    custom_font=font,
 35    inactive_tab_spritesheet="bmps/inactive_tab_sprite.bmp",
 36    showing_tab_spritesheet="bmps/active_tab_sprite.bmp",
 37    showing_tab_text_color=0x00AA59,
 38    inactive_tab_text_color=0xEEEEEE,
 39    inactive_tab_transparent_indexes=(0, 1),
 40    showing_tab_transparent_indexes=(0, 1),
 41    tab_count=4,
 42)
 43
 44# make page content Groups
 45page_1_group = displayio.Group()
 46page_2_group = displayio.Group()
 47page_3_group = displayio.Group()
 48page_4_group = displayio.Group()
 49
 50# labels
 51page_1_lbl = Label(
 52    font=terminalio.FONT,
 53    scale=2,
 54    text="This is the first page!",
 55    anchor_point=(0, 0),
 56    anchored_position=(10, 10),
 57)
 58page_2_lbl = Label(
 59    font=terminalio.FONT,
 60    scale=2,
 61    text="This page is the\nsecond page!",
 62    anchor_point=(0, 0),
 63    anchored_position=(10, 10),
 64)
 65page_3_lbl = Label(
 66    font=terminalio.FONT,
 67    scale=2,
 68    text="The third page is fun!",
 69    anchor_point=(0, 0),
 70    anchored_position=(10, 10),
 71)
 72
 73page_4_lbl = Label(
 74    font=terminalio.FONT,
 75    scale=2,
 76    text="The fourth page\nis where it's at",
 77    anchor_point=(0, 0),
 78    anchored_position=(10, 10),
 79)
 80
 81# shapes
 82square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 83circle = Circle(50, 120, r=30, fill=0xDD00DD)
 84triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 85rectangle = Rect(x=80, y=80, width=100, height=50, fill=0x0000DD)
 86
 87triangle.x = 80
 88triangle.y = 70
 89
 90# add everything to their page groups
 91page_1_group.append(square)
 92page_1_group.append(page_1_lbl)
 93page_2_group.append(page_2_lbl)
 94page_2_group.append(circle)
 95page_3_group.append(page_3_lbl)
 96page_3_group.append(triangle)
 97page_4_group.append(page_4_lbl)
 98page_4_group.append(rectangle)
 99
100# add the pages to the layout, supply your own page names
101test_page_layout.add_content(page_1_group, "One")
102test_page_layout.add_content(page_2_group, "Two")
103test_page_layout.add_content(page_3_group, "Thr")
104test_page_layout.add_content(page_4_group, "For")
105
106# add it to the group that is showing on the display
107main_group.append(test_page_layout)
108
109# change page with function by name
110test_page_layout.show_page(page_name="Thr")
111print("showing page index:{}".format(test_page_layout.showing_page_index))
112time.sleep(1)
113
114# change page with function by index
115test_page_layout.show_page(page_index=0)
116print("showing page name: {}".format(test_page_layout.showing_page_name))
117time.sleep(1)
118
119# change page by updating the page name property
120test_page_layout.showing_page_name = "Thr"
121print("showing page index: {}".format(test_page_layout.showing_page_index))
122time.sleep(1)
123
124# change page by updating the page index property
125test_page_layout.showing_page_index = 1
126print("showing page name: {}".format(test_page_layout.showing_page_name))
127time.sleep(5)
128
129another_text = Label(
130    terminalio.FONT,
131    text="And another thing!",
132    scale=2,
133    color=0x00FF00,
134    anchor_point=(0, 0),
135    anchored_position=(100, 100),
136)
137test_page_layout.showing_page_content.append(another_text)
138
139print("starting loop")
140
141prev_change_time = time.monotonic()
142
143while True:
144    now = time.monotonic()
145    if prev_change_time + CHANGE_DELAY <= now:
146        prev_change_time = now
147        # change page by next page function. It will loop by default
148        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"""
  7import displayio
  8import board
  9import terminalio
 10import adafruit_touchscreen
 11from adafruit_display_text.bitmap_label import Label
 12from adafruit_display_shapes.rect import Rect
 13from adafruit_display_shapes.circle import Circle
 14from adafruit_display_shapes.triangle import Triangle
 15from adafruit_displayio_layout.layouts.tab_layout import TabLayout
 16
 17# built-in display
 18display = board.DISPLAY
 19
 20# ------------ Touchscreen setup --------------- #
 21# See: https://learn.adafruit.com/making-a-pyportal-user-interface-displayio/display
 22display = board.DISPLAY  # create the display object
 23
 24screen_width = display.width
 25screen_height = display.height
 26ts = adafruit_touchscreen.Touchscreen(
 27    board.TOUCH_XL,
 28    board.TOUCH_XR,
 29    board.TOUCH_YD,
 30    board.TOUCH_YU,
 31    calibration=((5200, 59000), (5800, 57000)),
 32    size=(screen_width, screen_height),
 33)
 34
 35# create and show main_group
 36main_group = displayio.Group()
 37display.root_group = main_group
 38
 39font = terminalio.FONT
 40
 41# create the page layout
 42test_page_layout = TabLayout(
 43    x=0,
 44    y=0,
 45    display=board.DISPLAY,
 46    tab_text_scale=2,
 47    custom_font=font,
 48    inactive_tab_spritesheet="bmps/inactive_tab_sprite.bmp",
 49    showing_tab_spritesheet="bmps/active_tab_sprite.bmp",
 50    showing_tab_text_color=0x00AA59,
 51    inactive_tab_text_color=0xEEEEEE,
 52    inactive_tab_transparent_indexes=(0, 1),
 53    showing_tab_transparent_indexes=(0, 1),
 54    tab_count=4,
 55)
 56
 57# make page content Groups
 58page_1_group = displayio.Group()
 59page_2_group = displayio.Group()
 60page_3_group = displayio.Group()
 61page_4_group = displayio.Group()
 62
 63# labels
 64page_1_lbl = Label(
 65    font=terminalio.FONT,
 66    scale=2,
 67    text="This is the first page!",
 68    anchor_point=(0, 0),
 69    anchored_position=(10, 10),
 70)
 71page_2_lbl = Label(
 72    font=terminalio.FONT,
 73    scale=2,
 74    text="This page is the\nsecond page!",
 75    anchor_point=(0, 0),
 76    anchored_position=(10, 10),
 77)
 78page_3_lbl = Label(
 79    font=terminalio.FONT,
 80    scale=2,
 81    text="The third page is fun!",
 82    anchor_point=(0, 0),
 83    anchored_position=(10, 10),
 84)
 85
 86page_4_lbl = Label(
 87    font=terminalio.FONT,
 88    scale=2,
 89    text="The fourth page\nis where it's at",
 90    anchor_point=(0, 0),
 91    anchored_position=(10, 10),
 92)
 93
 94# shapes
 95square = Rect(x=20, y=70, width=40, height=40, fill=0x00DD00)
 96circle = Circle(50, 120, r=30, fill=0xDD00DD)
 97triangle = Triangle(50, 0, 100, 50, 0, 50, fill=0xDDDD00)
 98rectangle = Rect(x=80, y=80, width=100, height=50, fill=0x0000DD)
 99
100triangle.x = 80
101triangle.y = 70
102
103# add everything to their page groups
104page_1_group.append(square)
105page_1_group.append(page_1_lbl)
106page_2_group.append(page_2_lbl)
107page_2_group.append(circle)
108page_3_group.append(page_3_lbl)
109page_3_group.append(triangle)
110page_4_group.append(page_4_lbl)
111page_4_group.append(rectangle)
112
113# add the pages to the layout, supply your own page names
114test_page_layout.add_content(page_1_group, "One")
115test_page_layout.add_content(page_2_group, "Two")
116test_page_layout.add_content(page_3_group, "Thr")
117test_page_layout.add_content(page_4_group, "For")
118
119# add it to the group that is showing on the display
120main_group.append(test_page_layout)
121
122
123# add something new after the TabLayout was already created
124another_text = Label(
125    terminalio.FONT,
126    text="And another thing!",
127    scale=2,
128    color=0x00FF00,
129    anchor_point=(0, 0),
130    anchored_position=(100, 100),
131)
132test_page_layout.showing_page_content.append(another_text)
133
134while True:
135    touch = ts.touch_point
136    if touch:
137        test_page_layout.handle_touch_events(touch)