Skip to content

Mode Switching

Two buttons and a list are all you need for a menu. Button A moves forward, button B moves back, and the % (modulo) operator wraps the index around automatically so the list loops from the last entry back to the first with no extra if checks.

This is a small lab with a big payoff: every menu in the rest of the kit is this exact pattern with a different list.

The Modulo Trick

1
2
mode_index = (mode_index + 1) % len(MODES)   # forward, wraps to 0
mode_index = (mode_index - 1) % len(MODES)   # back, wraps to the end

MicroPython's % returns a non-negative result for a positive divisor, so -1 % 5 is 4 — which means going backward off the front of the list lands you neatly on the last entry. No special case required.

Expression With len(MODES) == 5
(4 + 1) % 5 0 — wrapped forward
(0 - 1) % 5 4 — wrapped back

A List of (name, function) Pairs

The other idea in this lab is storing functions in a tuple alongside their names. A function is just a value in Python, so it can sit in a list exactly like a number can.

1
2
3
4
5
6
7
MODES = (
    ("Rectangle", draw_rectangle),
    ("Circle", draw_circle),
    ("Triangle", draw_triangle),
    ("Lines", draw_lines),
    ("Ring", draw_ring),
)

This Table Grows Into Everything

Pixel thinks it through Five shapes today, seven emotions in a few labs, and eventually a whole table of numbers that describes my entire emotional range. The shape of the code never changes — only what is in the list.

Sample Program Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# Lab 18: Mode Switching

import config
import shapes
from array import array
from utime import sleep

display = config.init_display()
button_a, button_b = config.init_buttons()

WHITE = config.WHITE
BLACK = config.BLACK
NO_FILL = config.NO_FILL
FILL = config.FILL
FONT = config.SMALL_FONT

HALF_WIDTH = config.WIDTH // 2
HALF_HEIGHT = config.HEIGHT // 2


def draw_rectangle():
    display.rect(60, 80, 120, 90, WHITE)


def draw_circle():
    shapes.circle(display, HALF_WIDTH, HALF_HEIGHT, 60, WHITE, NO_FILL)


def draw_triangle():
    points = array('h', [0, -60, 58, 46, -58, 46])
    shapes.poly(display, HALF_WIDTH, HALF_HEIGHT, points, WHITE, NO_FILL)


def draw_lines():
    display.line(50, 70, 190, 180, WHITE)
    display.line(50, 180, 190, 70, WHITE)


def draw_ring():
    # The mode a round screen was made for.
    shapes.ring(display, HALF_WIDTH, HALF_HEIGHT, config.SAFE_RADIUS, WHITE, 3)


MODES = (
    ("Rectangle", draw_rectangle),
    ("Circle", draw_circle),
    ("Triangle", draw_triangle),
    ("Lines", draw_lines),
    ("Ring", draw_ring),
)


def show_mode(index):
    name, draw = MODES[index]
    display.fill(BLACK)
    x = HALF_WIDTH - (len(name) * FONT.WIDTH) // 2
    display.text(FONT, name, x, 28, WHITE, BLACK)
    draw()


def pressed(button):
    if button.value() == 1:
        return False
    sleep(0.02)
    return button.value() == 0


def wait_for_release(button):
    while button.value() == 0:
        sleep(0.01)


mode_index = 0
show_mode(mode_index)

while True:
    if pressed(button_a):
        mode_index = (mode_index + 1) % len(MODES)
        show_mode(mode_index)
        wait_for_release(button_a)

    if pressed(button_b):
        mode_index = (mode_index - 1) % len(MODES)
        show_mode(mode_index)
        wait_for_release(button_b)

    sleep(0.01)

Here's the first mode, which is what you see before pressing anything:

The word Rectangle centered near the top of the round screen, with a plain rectangular outline below it

When a Full Wipe Is Fine

Every mode here starts with display.fill(BLACK), and you can see it happen when you press a button. After all the fuss about avoiding full wipes, why is that acceptable?

Because it happens once per press, not sixty times a second. Knowing when a full wipe is fine is exactly as useful as knowing when it is not:

Situation Full wipe?
A menu that changes when a human presses a button Yes — a few times a minute is invisible
A demo reel changing every two seconds Yes
An animation running at 30 frames per second No — erase only the box that moved
A pupil sweeping back and forth No

Which of These Belongs on a Round Screen?

Pixel giving a tip Step through all five and ask yourself which ones look right and which look like mistakes. The rectangle and the triangle both have corners pointing at a bezel that has none. The ring looks like it was made for this screen, because it was.

Things to Try

  1. Add a sixth mode. Write the function, add one row to MODES, and you are done — no changes to the loop at all.
  2. Reorder the list and confirm the menu order follows. Data, not code.
  3. Time a mode change with ticks_ms(). Most of what you measure is the full wipe, and it is still comfortably fast enough for a button press.
  4. Delete wait_for_release() and hold button A down. You will fly through the whole menu several times a second, which is a useful thing to have seen once.

References