Update chore tracker UI: Change button styles and icons for Jordyn, Declan, and Chloe for improved visibility and consistency.

2026-02-28 09:57:19 -05:00
parent 7af2d0681c
commit f0d6e97cd0
4 changed files with 49 additions and 53 deletions
--- 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
--- 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"
--- 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:
--- 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);