diff --git a/esphome/chore-tracker-esphome.yaml b/esphome/chore-tracker-esphome.yaml index d014048..bab5dd5 100644 --- a/esphome/chore-tracker-esphome.yaml +++ b/esphome/chore-tracker-esphome.yaml @@ -637,7 +637,7 @@ lvgl: - label: x: 0 y: 36 - width: 800 + width: 776 align: TOP_MID text: "Chore Tracker" text_font: font_title @@ -645,14 +645,14 @@ lvgl: - label: x: 0 y: 90 - width: 800 + width: 776 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 @@ -778,7 +778,7 @@ lvgl: y: 0 width: 172 height: 480 - bg_color: 0x4D96FF + bg_color: 0x5F5980 border_width: 0 radius: 0 pad_all: 0 @@ -804,7 +804,7 @@ lvgl: y: 132 width: 144 height: 16 - bg_color: 0x2A6FCC + bg_color: 0x2F3061 indicator: bg_color: 0xFFFFFF value: 0 @@ -830,7 +830,7 @@ lvgl: text_color: 0xFFFFFF - button: x: 14 - y: 364 + y: 374 width: 144 height: 44 bg_color: 0xFF4757 @@ -846,10 +846,10 @@ lvgl: text_font: font_small - button: x: 14 - y: 420 + y: 424 width: 144 height: 44 - bg_color: 0x2A6FCC + bg_color: 0x2F3061 radius: 14 on_click: then: @@ -865,8 +865,8 @@ lvgl: - button: id: card_jordyn_put_on_underwear x: 182 - y: 10 - width: 196 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -891,7 +891,7 @@ lvgl: y: -34 text: "󰋣" text_font: font_mdi_small - text_color: 0x4D96FF + text_color: 0x5F5980 - label: align: CENTER y: 17 @@ -901,9 +901,9 @@ lvgl: - button: id: card_jordyn_brush_teeth - x: 388 - y: 10 - width: 196 + x: 387 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -928,7 +928,7 @@ lvgl: y: -34 text: "󰦩" text_font: font_mdi_small - text_color: 0x4D96FF + text_color: 0x5F5980 - label: align: CENTER y: 17 @@ -938,9 +938,9 @@ lvgl: - button: id: card_jordyn_fill_water_bowls - x: 594 - y: 10 - width: 196 + x: 592 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -965,7 +965,7 @@ lvgl: y: -34 text: "󰆫" text_font: font_mdi_small - text_color: 0x4D96FF + text_color: 0x5F5980 - label: align: CENTER y: 17 @@ -976,8 +976,8 @@ lvgl: - button: id: card_jordyn_restock_cat_food_cans x: 182 - y: 158 - width: 196 + y: 160 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1002,7 +1002,7 @@ lvgl: y: -34 text: "󱜜" text_font: font_mdi_small - text_color: 0x4D96FF + text_color: 0x5F5980 - label: align: CENTER y: 17 @@ -1021,7 +1021,7 @@ lvgl: y: 0 width: 172 height: 480 - bg_color: 0xC77DFF + bg_color: 0x720026 border_width: 0 radius: 0 pad_all: 0 @@ -1047,7 +1047,7 @@ lvgl: y: 132 width: 144 height: 16 - bg_color: 0x8B42CC + bg_color: 0x4F000B indicator: bg_color: 0xFFFFFF value: 0 @@ -1073,7 +1073,7 @@ lvgl: text_color: 0xFFFFFF - button: x: 14 - y: 364 + y: 374 width: 144 height: 44 bg_color: 0xFF4757 @@ -1089,10 +1089,10 @@ lvgl: text_font: font_small - button: x: 14 - y: 420 + y: 424 width: 144 height: 44 - bg_color: 0x8B42CC + bg_color: 0x4F000B radius: 14 on_click: then: @@ -1108,8 +1108,8 @@ lvgl: - button: id: card_declan_take_morning_pill x: 182 - y: 10 - width: 196 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1134,7 +1134,7 @@ lvgl: y: -34 text: "󰐂" text_font: font_mdi_small - text_color: 0xC77DFF + text_color: 0x720026 - label: align: CENTER y: 17 @@ -1144,9 +1144,9 @@ lvgl: - button: id: card_declan_scoop_dog_poop - x: 388 - y: 10 - width: 196 + x: 387 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1171,7 +1171,7 @@ lvgl: y: -34 text: "󰇷" text_font: font_mdi_small - text_color: 0xC77DFF + text_color: 0x720026 - label: align: CENTER y: 17 @@ -1190,7 +1190,7 @@ lvgl: y: 0 width: 172 height: 480 - bg_color: 0xFF6B9D + bg_color: 0x73683B border_width: 0 radius: 0 pad_all: 0 @@ -1216,7 +1216,7 @@ lvgl: y: 132 width: 144 height: 16 - bg_color: 0xCC3A6F + bg_color: 0x583E23 indicator: bg_color: 0xFFFFFF value: 0 @@ -1242,7 +1242,7 @@ lvgl: text_color: 0xFFFFFF - button: x: 14 - y: 364 + y: 374 width: 144 height: 44 bg_color: 0xFF4757 @@ -1258,10 +1258,10 @@ lvgl: text_font: font_small - button: x: 14 - y: 420 + y: 424 width: 144 height: 44 - bg_color: 0xCC3A6F + bg_color: 0x583E23 radius: 14 on_click: then: @@ -1277,8 +1277,8 @@ lvgl: - button: id: card_chloe_fill_kitty_feeders x: 182 - y: 10 - width: 196 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1303,7 +1303,7 @@ lvgl: y: -34 text: "󰊩" text_font: font_mdi_small - text_color: 0xFF6B9D + text_color: 0x73683B - label: align: CENTER y: 17 @@ -1313,9 +1313,9 @@ lvgl: - button: id: card_chloe_scoop_kitty_litter - x: 388 - y: 10 - width: 196 + x: 387 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1340,7 +1340,7 @@ lvgl: y: -34 text: "󰇷" text_font: font_mdi_small - text_color: 0xFF6B9D + text_color: 0x73683B - label: align: CENTER y: 17 @@ -1350,9 +1350,9 @@ lvgl: - button: id: card_chloe_replace_kitty_litter_bags - x: 594 - y: 10 - width: 196 + x: 592 + y: 12 + width: 195 height: 138 bg_color: 0xFFFFFF border_color: 0xEEEEEE @@ -1377,7 +1377,7 @@ lvgl: y: -34 text: "󰇷" text_font: font_mdi_small - text_color: 0xFF6B9D + text_color: 0x73683B - label: align: CENTER y: 17 diff --git a/esphome/chore-tracker/chores_config.yaml b/esphome/chore-tracker/chores_config.yaml index 2a27baa..97fb41d 100644 --- a/esphome/chore-tracker/chores_config.yaml +++ b/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 diff --git a/esphome/chore-tracker/generate.py b/esphome/chore-tracker/generate.py index 0e7d9ca..40087c7 100644 --- a/esphome/chore-tracker/generate.py +++ b/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']}