Simple test¶
Ensure your device works with this simple test.
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.
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.
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
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
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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
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)