battery icon update

Updated battery icon
moved battery icon to bottom
2026-02-14 11:40:06 -05:00 · 2026-02-14 11:31:45 -05:00 · 2026-02-14 11:25:38 -05:00 · 2026-02-14 11:20:47 -05:00 · 2026-02-14 11:08:07 -05:00 · 2026-02-14 10:25:14 -05:00
5 changed files with 7189 additions and 1462 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,9 @@
 !*.md
 !*.sh
 !*.js*
+!*.txt*
+!*.json*
+!*.ui.yaml

 # Whitelist subdirectory yaml files
 !*/*.yaml
--- a/esphome/ha-remote/ha-remote-1.base.yaml
+++ b/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.
--- a/esphome/ha-remote/ha-remote-1.bindings.yaml
+++ b/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);
-            auto *btn1 = id(btn_family_room_standing_lamp);
-            auto *btn2 = id(btn_living_room_standing_lamp);
-            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));
+            const lv_color_t text_color = (x == "on") ? lv_color_hex(0x3D0002) : lv_color_hex(0xE3E2E6);
+            auto *btn = id(btn_family_room_standing_lamp);
+            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_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));
-            lv_obj_set_style_text_color(btn2, text_color, static_cast<lv_style_selector_t>(LV_PART_MAIN | LV_STATE_DEFAULT));
+            if (x == "on") {
+                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));

--- a/esphome/ha-remote/ha-remote-1.ui.yaml
+++ b/esphome/ha-remote/ha-remote-1.ui.yaml
--- a/ha-entities.txt
+++ b/ha-entities.txt
Author	SHA1	Message	Date
Joshua King	c3bf64281c	battery icon update	2026-02-14 11:40:06 -05:00
Joshua King	ab4a22e20c	Updated battery icon	2026-02-14 11:31:45 -05:00
Joshua King	19c088f81f	moved battery icon to bottom	2026-02-14 11:25:38 -05:00
Joshua King	9151032d80	Updates to ui	2026-02-14 11:20:47 -05:00
Joshua King	049130b7fd	refactor to use material design	2026-02-14 11:08:07 -05:00
Joshua King	7939382efc	Converted to material design	2026-02-14 10:25:14 -05:00
Joshua King	4a4cf43413	Removed unused references	2026-02-14 09:18:42 -05:00
Joshua King	5ef090652a	Updates	2026-02-14 09:14:05 -05:00
Joshua King	4c4102469b	Switch LVGL tile icons from built-in FontAwesome to Material Design Icons 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>	2026-02-14 09:13:36 -05:00