From f0d6e97cd0cd5aacb08313ba1a6ca2077fa1b600 Mon Sep 17 00:00:00 2001 From: Joshua King Date: Sat, 28 Feb 2026 09:57:19 -0500 Subject: [PATCH] Update chore tracker UI: Change button styles and icons for Jordyn, Declan, and Chloe for improved visibility and consistency. --- esphome/chore-tracker-esphome.yaml | 67 +++++++++---------- .../chore-tracker-dashboard.yaml | 12 ++-- esphome/chore-tracker/chores_config.yaml | 6 +- esphome/chore-tracker/generate.py | 17 +++-- 4 files changed, 49 insertions(+), 53 deletions(-) diff --git a/esphome/chore-tracker-esphome.yaml b/esphome/chore-tracker-esphome.yaml index 580904c..d5f7b0b 100644 --- a/esphome/chore-tracker-esphome.yaml +++ b/esphome/chore-tracker-esphome.yaml @@ -137,12 +137,12 @@ font: id: font_mdi_large size: 48 bpp: 4 - glyphs: 󰂨󰇹󰈙󰉥󰋣󰏧󰖸󰦩󰲙󰾞󱞵󱬥 + glyphs: 󰂨󰄛󰈙󰉥󰋣󰏧󰖸󰦩󰾞󱑷󱚠󱬥 - file: "fonts/materialdesignicons-webfont.ttf" id: font_mdi_small size: 32 bpp: 4 - glyphs: 󰂨󰇹󰈙󰉥󰋣󰏧󰖸󰦩󰲙󰾞󱞵󱬥 + glyphs: 󰂨󰄛󰈙󰉥󰋣󰏧󰖸󰦩󰾞󱑷󱚠󱬥 # ── Switches — backlight raw + one per chore per kid ───────────────────────── switch: @@ -547,9 +547,9 @@ script: lv_label_set_text(id(home_status_jordyn), "\u2713 all done!"); lv_obj_set_style_text_color(id(home_status_jordyn), lv_color_hex(0xFFFFFF), LV_PART_MAIN); } else { - lv_obj_set_style_bg_opa(id(home_btn_jordyn), LV_OPA_TRANSP, LV_PART_MAIN); - lv_obj_set_style_border_color(id(home_btn_jordyn), lv_color_hex(0xFF4757), LV_PART_MAIN); - lv_obj_set_style_border_width(id(home_btn_jordyn), 5, LV_PART_MAIN); + lv_obj_set_style_bg_opa(id(home_btn_jordyn), LV_OPA_COVER, LV_PART_MAIN); + lv_obj_set_style_bg_color(id(home_btn_jordyn), lv_color_hex(0xFF4757), LV_PART_MAIN); + lv_obj_set_style_border_width(id(home_btn_jordyn), 0, LV_PART_MAIN); snprintf(buf, sizeof(buf), "%d left", total - done); lv_label_set_text(id(home_status_jordyn), buf); lv_obj_set_style_text_color(id(home_status_jordyn), lv_color_hex(0xFF4757), LV_PART_MAIN); @@ -648,9 +648,9 @@ script: lv_label_set_text(id(home_status_declan), "\u2713 all done!"); lv_obj_set_style_text_color(id(home_status_declan), lv_color_hex(0xFFFFFF), LV_PART_MAIN); } else { - lv_obj_set_style_bg_opa(id(home_btn_declan), LV_OPA_TRANSP, LV_PART_MAIN); - lv_obj_set_style_border_color(id(home_btn_declan), lv_color_hex(0xFF4757), LV_PART_MAIN); - lv_obj_set_style_border_width(id(home_btn_declan), 5, LV_PART_MAIN); + lv_obj_set_style_bg_opa(id(home_btn_declan), LV_OPA_COVER, LV_PART_MAIN); + lv_obj_set_style_bg_color(id(home_btn_declan), lv_color_hex(0xFF4757), LV_PART_MAIN); + lv_obj_set_style_border_width(id(home_btn_declan), 0, LV_PART_MAIN); snprintf(buf, sizeof(buf), "%d left", total - done); lv_label_set_text(id(home_status_declan), buf); lv_obj_set_style_text_color(id(home_status_declan), lv_color_hex(0xFF4757), LV_PART_MAIN); @@ -740,9 +740,9 @@ script: lv_label_set_text(id(home_status_chloe), "\u2713 all done!"); lv_obj_set_style_text_color(id(home_status_chloe), lv_color_hex(0xFFFFFF), LV_PART_MAIN); } else { - lv_obj_set_style_bg_opa(id(home_btn_chloe), LV_OPA_TRANSP, LV_PART_MAIN); - lv_obj_set_style_border_color(id(home_btn_chloe), lv_color_hex(0xFF4757), LV_PART_MAIN); - lv_obj_set_style_border_width(id(home_btn_chloe), 5, LV_PART_MAIN); + lv_obj_set_style_bg_opa(id(home_btn_chloe), LV_OPA_COVER, LV_PART_MAIN); + lv_obj_set_style_bg_color(id(home_btn_chloe), lv_color_hex(0xFF4757), LV_PART_MAIN); + lv_obj_set_style_border_width(id(home_btn_chloe), 0, LV_PART_MAIN); snprintf(buf, sizeof(buf), "%d left", total - done); lv_label_set_text(id(home_status_chloe), buf); lv_obj_set_style_text_color(id(home_status_chloe), lv_color_hex(0xFF4757), LV_PART_MAIN); @@ -872,10 +872,9 @@ lvgl: y: 130 width: 200 height: 210 - bg_color: 0xFFFFFF - bg_opa: TRANSP - border_color: 0xFF4757 - border_width: 5 + bg_color: 0xFF4757 + bg_opa: COVER + border_width: 0 radius: 24 on_click: then: @@ -884,21 +883,21 @@ lvgl: - label: align: CENTER y: -45 - text: "󰇹" + text: "󰄛" text_font: font_mdi_large - label: align: CENTER y: 22 text: "Jordyn" text_font: font_name - text_color: 0x2D3436 + text_color: 0xFFFFFF - label: id: home_status_jordyn align: CENTER y: 66 text: "not done" text_font: font_tiny - text_color: 0xFF4757 + text_color: 0xFFFFFF - button: id: home_btn_declan @@ -906,10 +905,9 @@ lvgl: y: 130 width: 200 height: 210 - bg_color: 0xFFFFFF - bg_opa: TRANSP - border_color: 0xFF4757 - border_width: 5 + bg_color: 0xFF4757 + bg_opa: COVER + border_width: 0 radius: 24 on_click: then: @@ -918,21 +916,21 @@ lvgl: - label: align: CENTER y: -45 - text: "󰲙" + text: "󱑷" text_font: font_mdi_large - label: align: CENTER y: 22 text: "Declan" text_font: font_name - text_color: 0x2D3436 + text_color: 0xFFFFFF - label: id: home_status_declan align: CENTER y: 66 text: "not done" text_font: font_tiny - text_color: 0xFF4757 + text_color: 0xFFFFFF - button: id: home_btn_chloe @@ -940,10 +938,9 @@ lvgl: y: 130 width: 200 height: 210 - bg_color: 0xFFFFFF - bg_opa: TRANSP - border_color: 0xFF4757 - border_width: 5 + bg_color: 0xFF4757 + bg_opa: COVER + border_width: 0 radius: 24 on_click: then: @@ -952,21 +949,21 @@ lvgl: - label: align: CENTER y: -45 - text: "󱞵" + text: "󱚠" text_font: font_mdi_large - label: align: CENTER y: 22 text: "Chloe" text_font: font_name - text_color: 0x2D3436 + text_color: 0xFFFFFF - label: id: home_status_chloe align: CENTER y: 66 text: "not done" text_font: font_tiny - text_color: 0xFF4757 + text_color: 0xFFFFFF - id: page_jordyn @@ -989,7 +986,7 @@ lvgl: y: 22 width: 172 align: TOP_MID - text: "󰇹" + text: "󰄛" text_font: font_mdi_large - label: x: 0 @@ -1264,7 +1261,7 @@ lvgl: y: 22 width: 172 align: TOP_MID - text: "󰲙" + text: "󱑷" text_font: font_mdi_large - label: x: 0 @@ -1503,7 +1500,7 @@ lvgl: y: 22 width: 172 align: TOP_MID - text: "󱞵" + text: "󱚠" text_font: font_mdi_large - label: x: 0 diff --git a/esphome/chore-tracker/chore-tracker-dashboard.yaml b/esphome/chore-tracker/chore-tracker-dashboard.yaml index 2d6892f..d2ddb78 100644 --- a/esphome/chore-tracker/chore-tracker-dashboard.yaml +++ b/esphome/chore-tracker/chore-tracker-dashboard.yaml @@ -13,7 +13,7 @@ views: cards: - type: markdown content: > - ### 󰇹 Jordyn + ### 󰄛 Jordyn {{ 'All done!' if states('sensor.jordyn_all_chores_done') == 'True' else states('sensor.jordyn_chores_done_today') ~ '/5 chores done' @@ -21,7 +21,7 @@ views: - type: markdown content: > - ### 󰲙 Declan + ### 󱑷 Declan {{ 'All done!' if states('sensor.declan_all_chores_done') == 'True' else states('sensor.declan_chores_done_today') ~ '/4 chores done' @@ -29,7 +29,7 @@ views: - type: markdown content: > - ### 󱞵 Chloe + ### 󱚠 Chloe {{ 'All done!' if states('sensor.chloe_all_chores_done') == 'True' else states('sensor.chloe_chores_done_today') ~ '/6 chores done' @@ -44,7 +44,7 @@ views: target: entity_id: input_button.reset_all_chores - type: entities - title: "󰇹 Jordyn's Chores" + title: "󰄛 Jordyn's Chores" entities: - entity: switch.chore_tracker_jordyn_make_bed name: "󰋣 Make Bed" @@ -73,7 +73,7 @@ views: target: entity_id: input_button.jordyn_reset_chores - type: entities - title: "󰲙 Declan's Chores" + title: "󱑷 Declan's Chores" entities: - entity: switch.chore_tracker_declan_make_bed name: "󰋣 Make Bed" @@ -99,7 +99,7 @@ views: target: entity_id: input_button.declan_reset_chores - type: entities - title: "󱞵 Chloe's Chores" + title: "󱚠 Chloe's Chores" entities: - entity: switch.chore_tracker_chloe_make_bed name: "󰋣 Make Bed" diff --git a/esphome/chore-tracker/chores_config.yaml b/esphome/chore-tracker/chores_config.yaml index e229541..f600c91 100644 --- a/esphome/chore-tracker/chores_config.yaml +++ b/esphome/chore-tracker/chores_config.yaml @@ -40,7 +40,7 @@ settings: # kids: - name: Jordyn - avatar: "\U000F01F9" # mdi:cat + avatar: "\U000F011B" # mdi:cat color: "4D96FF" color_dark: "2A6FCC" chores: @@ -56,7 +56,7 @@ kids: icon: "\U000F0265" # mdi:paw - name: Declan - avatar: "\U000F0C99" # mdi:dog + avatar: "\U000F1477" # mdi:wizard-hat color: "C77DFF" color_dark: "8B42CC" chores: @@ -70,7 +70,7 @@ kids: icon: "\U000F05B8" # mdi:trash-can - name: Chloe - avatar: "\U000F17B5" # mdi:teddy-bear + avatar: "\U000F16A0" # mdi:robot-confused-outline color: "FF6B9D" color_dark: "CC3A6F" chores: diff --git a/esphome/chore-tracker/generate.py b/esphome/chore-tracker/generate.py index f0ac321..62fb622 100644 --- a/esphome/chore-tracker/generate.py +++ b/esphome/chore-tracker/generate.py @@ -341,10 +341,9 @@ def _gen_lvgl_pages(kids: list) -> str: y: {btn_y} width: {btn_w} height: {btn_h} - bg_color: 0xFFFFFF - bg_opa: TRANSP - border_color: 0xFF4757 - border_width: 5 + bg_color: 0xFF4757 + bg_opa: COVER + border_width: 0 radius: 24 on_click: then: @@ -360,14 +359,14 @@ def _gen_lvgl_pages(kids: list) -> str: y: 22 text: "{kid['name']}" text_font: font_name - text_color: 0x2D3436 + text_color: 0xFFFFFF - label: id: home_status_{ks} align: CENTER y: 66 text: "not done" text_font: font_tiny - text_color: 0xFF4757 + text_color: 0xFFFFFF """ @@ -639,9 +638,9 @@ def _gen_scripts(kids: list) -> str: lv_label_set_text(id(home_status_{ks}), "\\u2713 all done!"); lv_obj_set_style_text_color(id(home_status_{ks}), lv_color_hex(0xFFFFFF), LV_PART_MAIN); }} else {{ - lv_obj_set_style_bg_opa(id(home_btn_{ks}), LV_OPA_TRANSP, LV_PART_MAIN); - lv_obj_set_style_border_color(id(home_btn_{ks}), lv_color_hex(0xFF4757), LV_PART_MAIN); - lv_obj_set_style_border_width(id(home_btn_{ks}), 5, LV_PART_MAIN); + lv_obj_set_style_bg_opa(id(home_btn_{ks}), LV_OPA_COVER, LV_PART_MAIN); + lv_obj_set_style_bg_color(id(home_btn_{ks}), lv_color_hex(0xFF4757), LV_PART_MAIN); + lv_obj_set_style_border_width(id(home_btn_{ks}), 0, LV_PART_MAIN); snprintf(buf, sizeof(buf), "%d left", total - done); lv_label_set_text(id(home_status_{ks}), buf); lv_obj_set_style_text_color(id(home_status_{ks}), lv_color_hex(0xFF4757), LV_PART_MAIN);