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.show(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

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.show(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

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 green and purple rectangles and a
 6"Hello World" label. Displayed with Blinka_Displayio_PyGameDisplay
 7"""
 8import displayio
 9import terminalio
10from adafruit_display_text import label
11from blinka_displayio_pygamedisplay import PyGameDisplay
12
13
14# Make the display context. Change size if you want
15from adafruit_displayio_layout.layouts.grid_layout import GridLayout
16
17display = PyGameDisplay(width=320, height=240)
18main_group = displayio.Group()
19display.show(main_group)
20
21layout = GridLayout(
22    x=10,
23    y=10,
24    width=320,
25    height=100,
26    grid_size=(2, 2),
27    cell_padding=8,
28)
29_labels = []
30
31_labels.append(
32    label.Label(
33        terminalio.FONT, scale=2, x=0, y=0, text="Hello", background_color=0x770077
34    )
35)
36layout.add_content(_labels[0], grid_position=(0, 0), cell_size=(1, 1))
37_labels.append(
38    label.Label(
39        terminalio.FONT, scale=2, x=0, y=0, text="World", background_color=0x007700
40    )
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 display.running:
50    pass

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.show(my_group)
34
35# Start the main loop
36while True:
37
38    p = ts.touch_point  # get any touches on the screen
39
40    if p:  # Check each switch if the touch point is within the switch touch area
41        # If touched, then flip the switch with .selected
42        if my_switch.contains(p):
43            my_switch.selected(p)
44
45    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.show(my_group)
106
107
108# Start the main loop
109while True:
110
111    p = ts.touch_point  # get any touches on the screen
112
113    if p:  # Check each switch if the touch point is within the switch touch area
114        # If touched, then flip the switch with .selected
115        if my_switch.contains(p):
116            my_switch.selected(p)
117
118        elif my_switch2.contains(p):
119            my_switch2.selected(p)
120
121        elif my_switch3.contains(p):
122            my_switch3.selected(p)
123
124        elif my_switch4.contains(p):
125            my_switch4.selected(p)
126
127        elif my_switch5.contains(p):
128            my_switch5.selected(p)
129
130        elif my_switch6.contains(p):
131            my_switch6.selected(p)
132
133        elif my_switch7.contains(p):
134            my_switch7.selected(p)
135
136        elif my_switch8.contains(p):
137            my_switch8.selected(p)
138
139    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.show(my_group)  # add high level Group to the display
101display.auto_refresh = True
102
103while True:
104
105    p = ts.touch_point
106    # print("touch_point p: {}".format(p)) # print the touch point
107
108    if p:  # if touched, check if any of the widgets was triggered
109        if my_flip1.contains(p):
110            my_flip1.selected(p)
111            time.sleep(0.15)  # add a short delay to reduce accidental press
112        elif my_flip2.contains(p):
113            my_flip2.selected(p)
114            time.sleep(0.15)  # add a short delay to reduce accidental press
115        elif my_flip3.contains(p):
116            my_flip3.selected(p)
117            time.sleep(0.15)  # add a short delay to reduce accidental press
118
119    time.sleep(0.01)  # small delay seems to improve touch response

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.show(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)