battery icon update

Replace LV_SYMBOL_CHARGE/POWER with MDI lightbulb, power, and power-plug
glyphs for clearer device-type distinction. Add MDI webfont config to
base.yaml. Also clean up unused widgets and add section comments to UI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -8,6 +8,9 @@
 !*.md
 !*.sh
 !*.js*
+!*.txt*
+!*.json*
+!*.ui.yaml
 
 # Whitelist subdirectory yaml files
 !*/*.yaml

esphome/ha-remote/ha-remote-1.base.yaml

@@ -93,6 +93,36 @@ touchscreen:
           id(last_activity_ms) = millis();
       - light.turn_on: ha_remote_backlight
 
+# --- MDI Icon Font ---
+font:
+  - file: "https://raw.githubusercontent.com/Templarian/MaterialDesign-Webfont/master/fonts/materialdesignicons-webfont.ttf"
+    id: mdi_icons
+    size: 24
+    bpp: 4
+    glyphs:
+      # Tile icons
+      - "\U000F0335"  # mdi:lightbulb
+      - "\U000F0425"  # mdi:power
+      - "\U000F0426"  # mdi:power-plug
+      # Battery status icons
+      - "\U000F0079"  # mdi:battery
+      - "\U000F12A1"  # mdi:battery-low
+      - "\U000F12A2"  # mdi:battery-medium
+      - "\U000F12A3"  # mdi:battery-high
+      - "\U000F12A4"  # mdi:battery-charging-low
+      - "\U000F12A5"  # mdi:battery-charging-medium
+      - "\U000F12A6"  # mdi:battery-charging-high
+      - "\U000F0091"  # mdi:battery-unknown
+      - "\U000F10CD"  # mdi:battery-alert-variant-outline
+      # Navigation bar icons
+      - "\U000F04B9"  # mdi:sofa
+      - "\U000F06B5"  # mdi:lamp
+      - "\U000F04DE"  # mdi:stove
+      - "\U000F12BD"  # mdi:stairs-up
+      - "\U000F1239"  # mdi:desk
+      - "\U000F06D9"  # mdi:garage
+      - "\U000F0531"  # mdi:tree
+
 # --- LVGL UI ---
 # Note: On ESP32-S3-Touch-LCD-7, GPIO14 is used by the RGB display bus,
 # so it cannot be reused as ADC for battery telemetry in this display mode.

esphome/ha-remote/ha-remote-1.bindings.yaml

@@ -14,7 +14,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_family_room_tv_stand);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -28,7 +28,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x22001F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_small_family_room_lamp);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -41,16 +41,10 @@ text_sensor:
             id: btn_family_room_standing_lamp
             state:
               checked: !lambda return x == "on";
-        - lvgl.widget.update:
-            id: btn_living_room_standing_lamp
-            state:
-              checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x3D0002) : lv_color_hex(0xE3E2E6);
-            auto *btn1 = id(btn_family_room_standing_lamp);
+            auto *btn = id(btn_family_room_standing_lamp);
-            auto *btn2 = id(btn_living_room_standing_lamp);
+            lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
-            lv_obj_set_style_text_color(btn1, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
-            lv_obj_set_style_text_color(btn2, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
     id: ts_living_room_light_2
     entity_id: light.living_room_light_2
@@ -62,7 +56,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_living_room_main_light);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -80,11 +74,16 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t off_color = lv_color_hex(0xE3E2E6);
             auto *btn1 = id(btn_living_room_patio_light);
             auto *btn2 = id(btn_outside_patio_light);
-            lv_obj_set_style_text_color(btn1, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+            if (x == "on") {
-            lv_obj_set_style_text_color(btn2, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+                lv_obj_set_style_text_color(btn1, lv_color_hex(0x1A0C00), static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+                lv_obj_set_style_text_color(btn2, lv_color_hex(0x001A33), static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+            } else {
+                lv_obj_set_style_text_color(btn1, off_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+                lv_obj_set_style_text_color(btn2, off_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+            }
   - platform: homeassistant
     id: ts_kitchen_sink_light
     entity_id: light.kitchen_sink_light
@@ -96,7 +95,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_kitchen_sink_light);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -110,7 +109,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_office_lamp);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -124,7 +123,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x22001F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_office_led_strip);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -138,23 +137,9 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_garage_cam_light);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
-  - platform: homeassistant
-    id: ts_family_room_standing_fan_outlet
-    entity_id: switch.standing_fan_socket_1
-    internal: true
-    on_value:
-      then:
-        - lvgl.widget.update:
-            id: btn_family_room_standing_fan_outlet
-            state:
-              checked: !lambda return x == "on";
-        - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
-            auto *btn = id(btn_family_room_standing_fan_outlet);
-            lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
     id: ts_office_echo_plug
     entity_id: switch.office_echo_plug
@@ -166,7 +151,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x1A0C00) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_office_echo_plug);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -180,7 +165,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001F15) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_office_end_table_lamp_outlet);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -194,7 +179,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x1E0F3F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_office_wax_warmer_outlet);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -208,7 +193,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x22001F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_outside_lamppost_outlet_1);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -222,7 +207,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x1A0C00) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_outside_lamppost_outlet_2);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -236,7 +221,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001F15) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_outside_porch_decor_outlet);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -250,7 +235,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001F15) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_living_room_garland_switch);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -264,37 +249,9 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x1E0F3F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_living_room_calendar_switch);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
-  - platform: homeassistant
-    id: ts_kitchen_dnd_switch
-    entity_id: switch.kitchen_do_not_disturb_switch
-    internal: true
-    on_value:
-      then:
-        - lvgl.widget.update:
-            id: btn_kitchen_dnd_switch
-            state:
-              checked: !lambda return x == "on";
-        - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
-            auto *btn = id(btn_kitchen_dnd_switch);
-            lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
-  - platform: homeassistant
-    id: ts_kitchen_camera_motion
-    entity_id: switch.kitchen_camera_motion_detection
-    internal: true
-    on_value:
-      then:
-        - lvgl.widget.update:
-            id: btn_kitchen_camera_motion
-            state:
-              checked: !lambda return x == "on";
-        - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
-            auto *btn = id(btn_kitchen_camera_motion);
-            lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
     id: ts_upstairs_airquality_oled
     entity_id: switch.airqualitysensor_3_oled_power
@@ -306,7 +263,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x001A33) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_upstairs_airquality_oled);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -320,7 +277,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x22001F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_upstairs_camera_motion);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -334,7 +291,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x22001F) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_garage_fume_exhaust_fan);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
   - platform: homeassistant
@@ -348,7 +305,7 @@ text_sensor:
             state:
               checked: !lambda return x == "on";
         - lambda: |-
-            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF);
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x1A0C00) : lv_color_hex(0xE3E2E6);
             auto *btn = id(btn_garage_resin_printer_heater);
             lv_obj_set_style_text_color(btn, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));