Refactor chore tracker UI: Adjust button dimensions, colors, and positions for improved layout and readability

esphome/chore-tracker/chores_config.yaml

@@ -41,8 +41,8 @@ settings:
 kids:
   - name: Jordyn
     avatar: "\U000F011B"       # mdi:cat
-    color: "4D96FF"
-    color_dark: "2A6FCC"
+    color: "5F5980" # #5F5980 is a nice light blue, but it's a bit hard to read when used as a background colour for the sidebar. So I use a darker version of the same colour for the sidebar background.
+    color_dark: "2F3061" # #2F3061 is a darker version of #5F5980, and is easier to read when used as a background colour for the sidebar.
     chores:
       - name: Put on underwear
         icon: "\U000F02E3"     # mdi:bed
@@ -55,8 +55,8 @@ kids:
 
   - name: Declan
     avatar: "\U000F1477"       # mdi:wizard-hat
-    color: "C77DFF"
-    color_dark: "8B42CC"
+    color: "720026" # #720026 is a deep red, used for the kid's sidebar background.
+    color_dark: "4F000B" # #4F000B is a darker version of #720026, easier to read when used as a background colour for the sidebar.
     chores:
       - name: Take morning pill
         icon: "\U000F0402"     # mdi:pill
@@ -65,8 +65,8 @@ kids:
 
   - name: Chloe
     avatar: "\U000F16A3"       # mdi:robot-excited
-    color: "FF6B9D"
-    color_dark: "CC3A6F"
+    color: "73683B" # #73683B is a light brown, used for the kid's sidebar background.
+    color_dark: "583E23" # #583E23 is a darker version of #73683B, easier to read when used as a background colour for the sidebar.
     chores:
       - name: Fill kitty feeders
         icon: "\U000F02A9"     # mdi:bowl-outline

esphome/chore-tracker/generate.py

@@ -37,6 +37,10 @@ except ImportError:
 # Helpers
 # ─────────────────────────────────────────────────────────────────────────────
 
+# Screen padding — space kept clear around all edges (pixels)
+PAD = 12
+
+
 def slug(name: str) -> str:
     return name.lower().replace(" ", "_").replace("-", "_")
 
@@ -326,10 +330,11 @@ def _gen_lvgl_pages(kids: list) -> str:
 
     # ── HOME PAGE ─────────────────────────────────────────────────────────────
     n       = len(kids)
-    btn_w   = min(200, max(140, (760 - 20 * (n - 1)) // n))
+    usable_w = 800 - PAD * 2
+    btn_w   = min(200, max(140, (usable_w - 40 - 20 * (n - 1)) // n))
     total_w = btn_w * n + 20 * (n - 1)
-    start_x = (800 - total_w) // 2
-    btn_y   = 130
+    start_x = PAD + (usable_w - total_w) // 2
+    btn_y   = PAD + 118
     btn_h   = 210
 
     reset_all_calls = "\n".join(
@@ -384,7 +389,7 @@ def _gen_lvgl_pages(kids: list) -> str:
         - label:
             x: 0
             y: 36
-            width: 800
+            width: {800 - PAD * 2}
             align: TOP_MID
             text: "Chore Tracker"
             text_font: font_title
@@ -392,14 +397,14 @@ def _gen_lvgl_pages(kids: list) -> str:
         - label:
             x: 0
             y: 90
-            width: 800
+            width: {800 - PAD * 2}
             align: TOP_MID
             text: "Tap a name to check off chores"
             text_font: font_small
             text_color: 0xB2BEC3
         - button:
             x: 640
-            y: 424
+            y: 428
             width: 148
             height: 40
             bg_color: 0xFF4757
@@ -425,16 +430,16 @@ def _gen_lvgl_pages(kids: list) -> str:
         rows      = (n_chores + cols - 1) // cols
         sidebar_w = 172
         gap       = 10
-        content_w = 800 - sidebar_w - gap * 2
+        content_w = 800 - sidebar_w - gap - 12  # right pad
         card_w    = (content_w - gap * (cols - 1)) // cols
-        card_h    = min(138, (480 - gap * (rows + 1)) // rows)
+        card_h    = min(138, (480 - PAD - gap * (rows + 1)) // rows)
 
         card_widgets = ""
         for idx, chore in enumerate(chores):
             row    = idx // cols
             col    = idx % cols
             x      = sidebar_w + gap + col * (card_w + gap)
-            y      = gap + row * (card_h + gap)
+            y      = 12 + row * (card_h + gap)
             e      = eid(kid, chore)
             icon_y  = -(card_h // 4)
             label_y =  card_h // 8
@@ -541,7 +546,7 @@ def _gen_lvgl_pages(kids: list) -> str:
                   text_color: 0xFFFFFF
               - button:
                   x: 14
-                  y: 364
+                  y: {480 - PAD - 44 - 6 - 44}
                   width: {sidebar_w - 28}
                   height: 44
                   bg_color: 0xFF4757
@@ -557,7 +562,7 @@ def _gen_lvgl_pages(kids: list) -> str:
                         text_font: font_small
               - button:
                   x: 14
-                  y: 420
+                  y: {480 - PAD - 44}
                   width: {sidebar_w - 28}
                   height: 44
                   bg_color: 0x{kid['color_dark']}