ui: add grid function

src/apps/common/request_pin.py

@@ -26,8 +26,8 @@ async def request_pin(code: int = None) -> str:
     matrix = PinMatrix(label, with_zero=True)
     matrix.onchange = onchange
     dialog = ConfirmDialog(matrix)
-    dialog.cancel.area = (0, 240 - 48, 80, 48)
+    dialog.cancel.area = ui.grid(12)
-    dialog.confirm.area = (240 - 80, 240 - 48, 80, 48)
+    dialog.confirm.area = ui.grid(14)
     matrix.onchange()
 
     while True:

src/trezor/ui/__init__.py

@@ -106,12 +106,38 @@ def layout(f):
     return inner
 
 
-def header(title: str, icon: bytes=ICON_RESET, fg: int=BG, bg: int=BG, ifg: int=BG):
+def header(title: str,
+           icon: bytes=ICON_RESET,
+           fg: int=BG,
+           bg: int=BG,
+           ifg: int=BG):
     if icon is not None:
-        display.icon(14, 14, res.load(icon), ifg, bg)
+        display.icon(14, 18, res.load(icon), ifg, bg)
     display.text(44, 35, title, BOLD, fg, bg)
 
 
+VIEWX = const(6)
+VIEWY = const(9)
+VIEW = const(228)  # SCREEN - 2 * VIEWX
+
+
+def grid(i: int,
+         n_x: int=3,
+         n_y: int=5,
+         start_x: int=VIEWX,
+         start_y: int=VIEWY,
+         end_x: int=(VIEWX + VIEW),
+         end_y: int=(VIEWY + VIEW),
+         cells_x: int=1,
+         cells_y: int=1,
+         spacing: int=0):
+    w = (end_x - start_x) // n_x
+    h = (end_y - start_y) // n_y
+    x = (i % n_x) * w
+    y = (i // n_x) * h
+    return (x + start_x, y + start_y, (w - spacing) * cells_x, (h - spacing) * cells_y)
+
+
 class Widget:
     def render(self):
         pass

src/trezor/ui/confirm.py

@@ -16,17 +16,17 @@ class ConfirmDialog(Widget):
     def __init__(self, content, confirm=DEFAULT_CONFIRM, cancel=DEFAULT_CANCEL):
         self.content = content
         if cancel is not None:
-            self.confirm = Button((121, 240 - 48, 119, 48), confirm,
+            self.confirm = Button(ui.grid(8, n_x=2), confirm,
                                   normal_style=ui.BTN_CONFIRM,
                                   active_style=ui.BTN_CONFIRM_ACTIVE)
-            self.cancel = Button((0, 240 - 48, 119, 48), cancel,
+            self.cancel = Button(ui.grid(9, n_x=2), cancel,
                                  normal_style=ui.BTN_CANCEL,
                                  active_style=ui.BTN_CANCEL_ACTIVE)
         else:
-            self.cancel = None
+            self.confirm = Button(ui.grid(4, n_x=1), confirm,
-            self.confirm = Button((0, 240 - 48, 240, 48), confirm,
                                   normal_style=ui.BTN_CONFIRM,
                                   active_style=ui.BTN_CONFIRM_ACTIVE)
+            self.cancel = None
 
     def render(self):
         self.confirm.render()
@@ -52,7 +52,7 @@ class HoldToConfirmDialog(Widget):
 
     def __init__(self, content, hold='Hold to confirm', *args, **kwargs):
         self.content = content
-        self.button = Button((0, 240 - 48, 240, 48), hold,
+        self.button = Button(ui.grid(4, n_x=1), hold,
                              normal_style=ui.BTN_CONFIRM,
                              active_style=ui.BTN_CONFIRM_ACTIVE)
         self.loader = Loader(*args, **kwargs)

src/trezor/ui/pin.py

@@ -6,14 +6,9 @@ from trezor.ui.button import Button, BTN_CLICKED
 
 
 def digit_area(i):
-    width = const(80)
-    height = const(48)
     if i == 9:  # 0-position
         i = 10  # display it in the middle
-    x = (i % 3) * width
+    return ui.grid(i + 3)  # skip the first line
-    y = (i // 3) * height
-    # 48px is offset of input line, -1px is the border size
-    return (x, y + 48, width - 1, height - 1)
 
 
 def generate_digits(with_zero):
@@ -36,19 +31,18 @@ class PinMatrix(ui.Widget):
         # we lay out the buttons top-left to bottom-right, but the order of the
         # digits is defined as bottom-left to top-right (on numpad)
         reordered_digits = self.digits[6:] + self.digits[3:6] + self.digits[:3]
+
         self.pin_buttons = [Button(digit_area(i), str(d))
                             for i, d in enumerate(reordered_digits)]
         self.onchange = None
 
     def render(self):
-
-        header = '*' * len(self.pin) if self.pin else self.label
-
         # clear canvas under input line
         display.bar(0, 0, 205, 48, ui.BG)
 
         # input line with a header
-        display.text_center(120, 30, header, ui.NORMAL, ui.blend(ui.BG, ui.FG, 0.5), ui.BG)
+        header = '*' * len(self.pin) if self.pin else self.label
+        display.text_center(120, 36, header, ui.BOLD, ui.GREY, ui.BG)
 
         # pin matrix buttons
         for btn in self.pin_buttons:

src/trezor/ui/word_select.py

@@ -1,28 +1,29 @@
 from micropython import const
 from trezor import loop
-from trezor import ui, res
+from trezor import ui
 from trezor.ui import Widget
-from trezor.ui.button import Button, BTN_CLICKED, BTN_STARTED, BTN_ACTIVE
+from trezor.ui.button import Button, BTN_CLICKED
+
+_W12 = const(12)
+_W15 = const(15)
+_W18 = const(18)
+_W24 = const(24)
 
-W12 = '12'
-W15 = '15'
-W18 = '18'
-W24 = '24'
 
 class WordSelector(Widget):
 
     def __init__(self, content):
         self.content = content
-        self.w12 = Button((6, 135, 114, 51), W12,
+        self.w12 = Button(ui.grid(8, n_y=4, n_x=4, cells_x=2), str(_W12),
                           normal_style=ui.BTN_KEY,
                           active_style=ui.BTN_KEY_ACTIVE)
-        self.w15 = Button((120, 135, 114, 51), W15,
+        self.w15 = Button(ui.grid(10, n_y=4, n_x=4, cells_x=2), str(_W15),
                           normal_style=ui.BTN_KEY,
                           active_style=ui.BTN_KEY_ACTIVE)
-        self.w18 = Button((6, 186, 114, 51), W18,
+        self.w18 = Button(ui.grid(12, n_y=4, n_x=4, cells_x=2), str(_W18),
                           normal_style=ui.BTN_KEY,
                           active_style=ui.BTN_KEY_ACTIVE)
-        self.w24 = Button((120, 186, 114, 51), W24,
+        self.w24 = Button(ui.grid(14, n_y=4, n_x=4, cells_x=2), str(_W24),
                           normal_style=ui.BTN_KEY,
                           active_style=ui.BTN_KEY_ACTIVE)
 
@@ -34,20 +35,13 @@ class WordSelector(Widget):
 
     def touch(self, event, pos):
         if self.w12.touch(event, pos) == BTN_CLICKED:
-            return W12
+            return _W12
         if self.w15.touch(event, pos) == BTN_CLICKED:
-            return W15
+            return _W15
         if self.w18.touch(event, pos) == BTN_CLICKED:
-            return W18
+            return _W18
         if self.w24.touch(event, pos) == BTN_CLICKED:
-            return W24
+            return _W24
 
     async def __iter__(self):
         return await loop.wait(super().__iter__(), self.content)
-
-
-_STARTED = const(-1)
-_STOPPED = const(-2)
-
-
-