Merge remote-tracking branch 'origin/hugh/ui-tokens' into main

modules/app_components/__init__.py

@@ -0,0 +1,6 @@
+from .dialog import YesNoDialog
+from .menu import Menu
+from .notification import Notification
+from .tokens import *  # noqa
+
+__all__ = ["YesNoDialog", "Menu", "Notification"]

modules/app_components/dialog.py

@@ -1,9 +1,11 @@
 import asyncio
 
 import display
-from events.input import ButtonDownEvent, BUTTON_TYPES
+from events.input import BUTTON_TYPES, ButtonDownEvent
 from system.eventbus import eventbus
 
+from .tokens import label_font_size, set_color
+
 
 class YesNoDialog:
     def __init__(self, message, app, on_yes=None, on_no=None):
@@ -28,12 +30,13 @@ async def run(self, render_update):
         return self._result
 
     def draw_message(self, ctx):
-        ctx.font_size = 20
+        ctx.font_size = label_font_size
         ctx.text_align = ctx.CENTER
         ctx.text_baseline = ctx.MIDDLE
         text_height = ctx.font_size
 
-        ctx.rgba(1, 1, 1, 1)
+        set_color(ctx, "label")
+
         if isinstance(self.message, list):
             for idx, line in enumerate(self.message):
                 ctx.move_to(0, idx * text_height).text(line)

modules/app_components/menu.py

@@ -4,6 +4,8 @@
 from events.input import BUTTON_TYPES, ButtonDownEvent
 from system.eventbus import eventbus
 
+from .tokens import heading_font_size, label_font_size, line_height, set_color
+
 
 def ease_out_quart(x):
     return 1 - pow(1 - x, 4)
@@ -18,9 +20,9 @@ def __init__(
         select_handler: Union[Callable[[str], Any], None] = None,
         back_handler: Union[Callable, None] = None,
         speed_ms=300,
-        item_font_size=20,
-        item_line_height=30,
-        focused_item_font_size=40,
+        item_font_size=label_font_size,
+        item_line_height=label_font_size * line_height,
+        focused_item_font_size=heading_font_size,
         focused_item_margin=20,
     ):
         self.app = app
@@ -79,13 +81,13 @@ def draw(self, ctx):
         ctx.text_align = ctx.CENTER
         ctx.text_baseline = ctx.MIDDLE
 
-        ctx.rgb(1, 1, 1)
+        set_color(ctx, "label")
         ctx.move_to(
             0, animation_direction * -30 + animation_progress * animation_direction * 30
         ).text(self.menu_items[self.position % len(self.menu_items)])
 
         # Previous menu items
-        ctx.font_size = 20
+        ctx.font_size = self.item_font_size
         for i in range(1, 4):
             if (self.position - i) >= 0:
                 ctx.move_to(

modules/app_components/notification.py

@@ -1,3 +1,6 @@
+from .tokens import label_font_size, set_color
+
+
 class Notification:
     _half_hex_rotation = (2 * 3.141593) / 12
 
@@ -42,25 +45,22 @@ def draw(self, ctx):
         if not self._is_closed():
             ctx.save()
 
-            ctx.font_size = 20
+            ctx.font_size = label_font_size
             ctx.text_align = ctx.CENTER
             ctx.text_baseline = ctx.MIDDLE
 
             if self._port != 0:
                 ctx.rotate(self._half_hex_rotation * (self._port * 2 - 1))
 
-            ctx.gray(0.3).rectangle(
-                -120, -150 - self._animation_state * -30, 240, 30
-            ).fill()
+            set_color(ctx, "mid_green")
+            ctx.rectangle(-120, -150 - self._animation_state * -30, 240, 30).fill()
 
             if self._port != 0:
                 ctx.rotate(3.14)
-                ctx.gray(1).move_to(0, 135 + self._animation_state * -30).text(
-                    self.message
-                )
+                set_color(ctx, "label")
+                ctx.move_to(0, 135 + self._animation_state * -30).text(self.message)
             else:
-                ctx.gray(1).move_to(0, -130 - self._animation_state * -30).text(
-                    self.message
-                )
+                set_color(ctx, "label")
+                ctx.move_to(0, -130 - self._animation_state * -30).text(self.message)
 
             ctx.restore()

modules/app_components/tokens.py

@@ -0,0 +1,39 @@
+# From https://www.emfcamp.org/about/branding
+
+# Display
+display_x = 240
+display_y = 240
+display_height_inches = 1.28
+ppi = display_x / display_height_inches
+
+# Font size
+one_pt = ppi / 72
+ten_pt = 10 * one_pt
+twelve_pt = 12 * one_pt
+eighteen_pt = 18 * one_pt
+twentyfour_pt = 24 * one_pt
+label_font_size = ten_pt
+heading_font_size = eighteen_pt
+
+line_height = 1.5
+
+# Colors
+colors = {
+    "pale_green": (175, 201, 68),
+    "mid_green": (82, 131, 41),
+    "dark_green": (33, 48, 24),
+    "yellow": (294, 226, 0),
+    "orange": (246, 127, 2),
+    "pink": (245, 80, 137),
+    "blue": (46, 173, 217),
+}
+
+ui_colors = {"background": colors["dark_green"], "label": (232, 230, 227)}
+
+
+def clear_background(ctx):
+    ctx.rgb(*colors["dark_green"]).rectangle(-120, -120, display_x, display_y).fill()
+
+
+def set_color(ctx, color):
+    ctx.rgb(*ui_colors.get(color, colors.get(color, color)))

modules/firmware_apps/menu_demo.py

@@ -1,7 +1,7 @@
 from typing import Literal
 
 from app import App
-from app_components.menu import Menu
+from app_components import Menu, Notification, clear_background
 
 main_menu_items = ["numbers", "letters", "words"]
 
@@ -21,13 +21,13 @@ def __init__(self):
             select_handler=self.select_handler,
             back_handler=self.back_handler,
         )
+        self.notification = None
 
     def select_handler(self, item):
         if item in ["numbers", "letters", "words", "main"]:
             self.set_menu(item)
         else:
-            # flash or spin the word or something
-            pass
+            self.notification = Notification('You selected "' + item + '"!')
 
     def set_menu(self, menu_name: Literal["main", "numbers", "letters", "words"]):
         self.menu._cleanup()
@@ -66,12 +66,13 @@ def back_handler(self):
             self.minimise()
         self.set_menu("main")
 
-    def draw_background(self, ctx):
-        ctx.gray(0).rectangle(-120, -120, 240, 240).fill()
-
     def draw(self, ctx):
-        self.draw_background(ctx)
+        clear_background(ctx)
         self.menu.draw(ctx)
+        if self.notification:
+            self.notification.draw(ctx)
 
     def update(self, delta):
         self.menu.update(delta)
+        if self.notification:
+            self.notification.update(delta)

modules/system/eventbus.py

@@ -1,6 +1,7 @@
+import asyncio
+
 from async_queue import Queue as AsyncQueue
 from perf_timer import PerfTimer
-import asyncio
 
 
 class _EventBus:
@@ -97,3 +98,4 @@ async def run(self):
 
 
 eventbus = _EventBus()
+eventbus = _EventBus()