overseer/Home-Assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joshua King
2026-02-28 13:05:45 -05:00
parent 338025d55b
commit d6c2b189ef
3 changed files with 72 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
esphome/chore-tracker-esphome.yaml
View File

@@ -637,7 +637,7 @@ lvgl:
- label: - label:
x: 0 x: 0
y: 36 y: 36
width: 800 width: 776
align: TOP_MID align: TOP_MID
text: "Chore Tracker" text: "Chore Tracker"
text_font: font_title text_font: font_title
@@ -645,14 +645,14 @@ lvgl:
- label: - label:
x: 0 x: 0
y: 90 y: 90
width: 800 width: 776
align: TOP_MID align: TOP_MID
text: "Tap a name to check off chores" text: "Tap a name to check off chores"
text_font: font_small text_font: font_small
text_color: 0xB2BEC3 text_color: 0xB2BEC3
- button: - button:
x: 640 x: 640
y: 424 y: 428
width: 148 width: 148
height: 40 height: 40
bg_color: 0xFF4757 bg_color: 0xFF4757
@@ -778,7 +778,7 @@ lvgl:
y: 0 y: 0
width: 172 width: 172
height: 480 height: 480
bg_color: 0x4D96FF bg_color: 0x5F5980
border_width: 0 border_width: 0
radius: 0 radius: 0
pad_all: 0 pad_all: 0
@@ -804,7 +804,7 @@ lvgl:
y: 132 y: 132
width: 144 width: 144
height: 16 height: 16
bg_color: 0x2A6FCC bg_color: 0x2F3061
indicator: indicator:
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
value: 0 value: 0
@@ -830,7 +830,7 @@ lvgl:
text_color: 0xFFFFFF text_color: 0xFFFFFF
- button: - button:
x: 14 x: 14
y: 364 y: 374
width: 144 width: 144
height: 44 height: 44
bg_color: 0xFF4757 bg_color: 0xFF4757
@@ -846,10 +846,10 @@ lvgl:
text_font: font_small text_font: font_small
- button: - button:
x: 14 x: 14
y: 420 y: 424
width: 144 width: 144
height: 44 height: 44
bg_color: 0x2A6FCC bg_color: 0x2F3061
radius: 14 radius: 14
on_click: on_click:
then: then:
@@ -865,8 +865,8 @@ lvgl:
- button: - button:
id: card_jordyn_put_on_underwear id: card_jordyn_put_on_underwear
x: 182 x: 182
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -891,7 +891,7 @@ lvgl:
y: -34 y: -34
text: "󰋣" text: "󰋣"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0x4D96FF text_color: 0x5F5980
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -901,9 +901,9 @@ lvgl:
- button: - button:
id: card_jordyn_brush_teeth id: card_jordyn_brush_teeth
x: 388 x: 387
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -928,7 +928,7 @@ lvgl:
y: -34 y: -34
text: "󰦩" text: "󰦩"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0x4D96FF text_color: 0x5F5980
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -938,9 +938,9 @@ lvgl:
- button: - button:
id: card_jordyn_fill_water_bowls id: card_jordyn_fill_water_bowls
x: 594 x: 592
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -965,7 +965,7 @@ lvgl:
y: -34 y: -34
text: "󰆫" text: "󰆫"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0x4D96FF text_color: 0x5F5980
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -976,8 +976,8 @@ lvgl:
- button: - button:
id: card_jordyn_restock_cat_food_cans id: card_jordyn_restock_cat_food_cans
x: 182 x: 182
y: 158 y: 160
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1002,7 +1002,7 @@ lvgl:
y: -34 y: -34
text: "󱜜" text: "󱜜"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0x4D96FF text_color: 0x5F5980
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -1021,7 +1021,7 @@ lvgl:
y: 0 y: 0
width: 172 width: 172
height: 480 height: 480
bg_color: 0xC77DFF bg_color: 0x720026
border_width: 0 border_width: 0
radius: 0 radius: 0
pad_all: 0 pad_all: 0
@@ -1047,7 +1047,7 @@ lvgl:
y: 132 y: 132
width: 144 width: 144
height: 16 height: 16
bg_color: 0x8B42CC bg_color: 0x4F000B
indicator: indicator:
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
value: 0 value: 0
@@ -1073,7 +1073,7 @@ lvgl:
text_color: 0xFFFFFF text_color: 0xFFFFFF
- button: - button:
x: 14 x: 14
y: 364 y: 374
width: 144 width: 144
height: 44 height: 44
bg_color: 0xFF4757 bg_color: 0xFF4757
@@ -1089,10 +1089,10 @@ lvgl:
text_font: font_small text_font: font_small
- button: - button:
x: 14 x: 14
y: 420 y: 424
width: 144 width: 144
height: 44 height: 44
bg_color: 0x8B42CC bg_color: 0x4F000B
radius: 14 radius: 14
on_click: on_click:
then: then:
@@ -1108,8 +1108,8 @@ lvgl:
- button: - button:
id: card_declan_take_morning_pill id: card_declan_take_morning_pill
x: 182 x: 182
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1134,7 +1134,7 @@ lvgl:
y: -34 y: -34
text: "󰐂" text: "󰐂"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0xC77DFF text_color: 0x720026
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -1144,9 +1144,9 @@ lvgl:
- button: - button:
id: card_declan_scoop_dog_poop id: card_declan_scoop_dog_poop
x: 388 x: 387
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1171,7 +1171,7 @@ lvgl:
y: -34 y: -34
text: "󰇷" text: "󰇷"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0xC77DFF text_color: 0x720026
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -1190,7 +1190,7 @@ lvgl:
y: 0 y: 0
width: 172 width: 172
height: 480 height: 480
bg_color: 0xFF6B9D bg_color: 0x73683B
border_width: 0 border_width: 0
radius: 0 radius: 0
pad_all: 0 pad_all: 0
@@ -1216,7 +1216,7 @@ lvgl:
y: 132 y: 132
width: 144 width: 144
height: 16 height: 16
bg_color: 0xCC3A6F bg_color: 0x583E23
indicator: indicator:
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
value: 0 value: 0
@@ -1242,7 +1242,7 @@ lvgl:
text_color: 0xFFFFFF text_color: 0xFFFFFF
- button: - button:
x: 14 x: 14
y: 364 y: 374
width: 144 width: 144
height: 44 height: 44
bg_color: 0xFF4757 bg_color: 0xFF4757
@@ -1258,10 +1258,10 @@ lvgl:
text_font: font_small text_font: font_small
- button: - button:
x: 14 x: 14
y: 420 y: 424
width: 144 width: 144
height: 44 height: 44
bg_color: 0xCC3A6F bg_color: 0x583E23
radius: 14 radius: 14
on_click: on_click:
then: then:
@@ -1277,8 +1277,8 @@ lvgl:
- button: - button:
id: card_chloe_fill_kitty_feeders id: card_chloe_fill_kitty_feeders
x: 182 x: 182
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1303,7 +1303,7 @@ lvgl:
y: -34 y: -34
text: "󰊩" text: "󰊩"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0xFF6B9D text_color: 0x73683B
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -1313,9 +1313,9 @@ lvgl:
- button: - button:
id: card_chloe_scoop_kitty_litter id: card_chloe_scoop_kitty_litter
x: 388 x: 387
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1340,7 +1340,7 @@ lvgl:
y: -34 y: -34
text: "󰇷" text: "󰇷"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0xFF6B9D text_color: 0x73683B
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17
@@ -1350,9 +1350,9 @@ lvgl:
- button: - button:
id: card_chloe_replace_kitty_litter_bags id: card_chloe_replace_kitty_litter_bags
x: 594 x: 592
y: 10 y: 12
width: 196 width: 195
height: 138 height: 138
bg_color: 0xFFFFFF bg_color: 0xFFFFFF
border_color: 0xEEEEEE border_color: 0xEEEEEE
@@ -1377,7 +1377,7 @@ lvgl:
y: -34 y: -34
text: "󰇷" text: "󰇷"
text_font: font_mdi_small text_font: font_mdi_small
text_color: 0xFF6B9D text_color: 0x73683B
- label: - label:
align: CENTER align: CENTER
y: 17 y: 17

12
esphome/chore-tracker/chores_config.yaml
View File

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

27
esphome/chore-tracker/generate.py
View File

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