From 4c4102469b1e68ad5c021508a5bcd094ee924c6d Mon Sep 17 00:00:00 2001 From: Joshua King Date: Sat, 14 Feb 2026 09:13:36 -0500 Subject: [PATCH] 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 --- esphome/ha-remote/ha-remote-1.base.yaml | 11 + esphome/ha-remote/ha-remote-1.ui.yaml | 350 ++++++------------------ 2 files changed, 88 insertions(+), 273 deletions(-) diff --git a/esphome/ha-remote/ha-remote-1.base.yaml b/esphome/ha-remote/ha-remote-1.base.yaml index 64f507a..c1d8751 100644 --- a/esphome/ha-remote/ha-remote-1.base.yaml +++ b/esphome/ha-remote/ha-remote-1.base.yaml @@ -93,6 +93,17 @@ 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: + - "\U000F0335" # mdi:lightbulb + - "\U000F0425" # mdi:power + - "\U000F0426" # mdi:power-plug + # --- 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. diff --git a/esphome/ha-remote/ha-remote-1.ui.yaml b/esphome/ha-remote/ha-remote-1.ui.yaml index bdc9420..dffa03c 100644 --- a/esphome/ha-remote/ha-remote-1.ui.yaml +++ b/esphome/ha-remote/ha-remote-1.ui.yaml @@ -223,8 +223,13 @@ lvgl: text_color: 0xEAF2FF button: text_color: 0xF6FAFF - +############################################# +# PAGES AND WIDGETS # +############################################# pages: +############################################# +# Family Room # +############################################# - id: home widgets: - obj: @@ -239,14 +244,6 @@ lvgl: x: 22 y: 12 text: "Family Room" - - label: - x: 22 - y: 42 - text: "Liquid Glass Control" - - label: - x: 22 - y: 62 - text: "Quick scenes and lighting controls" - obj: x: 560 y: 12 @@ -258,11 +255,10 @@ lvgl: id: battery_label align: center text: " n/a" - - label: - x: 22 - y: 108 - text: "Tap any card. Screen sleeps after 60s idle." - + - label: + x: 22 + y: 108 + text: "Tap any card. Screen sleeps after 60s idle." - button: id: btn_family_room_tv_stand x: 24 @@ -287,7 +283,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -328,7 +325,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -369,7 +367,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -385,113 +384,7 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" - - - button: - x: 24 - y: 286 - width: 244 - height: 136 - styles: glass_tile_amber - on_click: - - homeassistant.service: - service: scene.turn_on - data: - entity_id: scene.movie_time - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "SCENE" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Movie Time" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Dim and set mood" - - - button: - x: 278 - y: 286 - width: 244 - height: 136 - styles: glass_tile_green - on_click: - - homeassistant.service: - service: scene.turn_on - data: - entity_id: scene.good_night - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "SCENE" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Good Night" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Evening shutdown" - - - button: - id: btn_family_room_standing_fan_outlet - x: 532 - y: 286 - width: 244 - height: 136 - checkable: true - styles: glass_toggle_violet - checked: - bg_color: 0x6C55D9 - bg_opa: 100% - border_color: 0xEEE8FF - border_opa: 90% - text_color: 0x000000 - on_click: - - homeassistant.service: - service: switch.toggle - data: - entity_id: switch.standing_fan_socket_1 - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "OUTLET" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Standing Fan" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Tap to toggle" +### ROOM NAV ### - button: x: 20 y: 430 @@ -576,7 +469,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Living Room # +############################################# - id: living_room widgets: - obj: @@ -594,10 +489,6 @@ lvgl: x: 22 y: 42 text: "Room Controls" - - label: - x: 22 - y: 62 - text: "Add your lights, scenes, and media controls here" - button: id: btn_living_room_main_light x: 24 @@ -622,7 +513,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -638,46 +530,6 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" - - button: - id: btn_living_room_standing_lamp - x: 278 - y: 122 - width: 244 - height: 136 - checkable: true - styles: glass_toggle_pink - checked: - bg_color: 0xB22FD9 - bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 - on_click: - - homeassistant.service: - service: light.toggle - data: - entity_id: light.living_room_lamp_1 - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "LIGHT" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Standing Lamp" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Tap to toggle" - button: id: btn_living_room_patio_light x: 532 @@ -702,7 +554,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -742,7 +595,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -782,7 +636,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -798,6 +653,7 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" +### ROOM NAV ### - button: x: 20 y: 430 @@ -882,7 +738,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Kitchen # +############################################# - id: kitchen_page widgets: - obj: @@ -928,7 +786,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -944,86 +803,7 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" - - button: - id: btn_kitchen_dnd_switch - x: 278 - y: 122 - width: 244 - height: 136 - checkable: true - styles: glass_toggle_pink - checked: - bg_color: 0xB22FD9 - bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 - on_click: - - homeassistant.service: - service: switch.toggle - data: - entity_id: switch.kitchen_do_not_disturb_switch - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "SWITCH" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Kitchen DND" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Tap to toggle" - - button: - id: btn_kitchen_camera_motion - x: 532 - y: 122 - width: 244 - height: 136 - checkable: true - styles: glass_toggle_amber - checked: - bg_color: 0xC97700 - bg_opa: 100% - border_color: 0xFFF1D6 - border_opa: 90% - text_color: 0x000000 - on_click: - - homeassistant.service: - service: switch.toggle - data: - entity_id: switch.kitchen_camera_motion_detection - widgets: - - label: - x: 204 - y: 16 - styles: glass_tile_icon - text: "" - - label: - x: 18 - y: 16 - styles: glass_tile_meta - text: "SWITCH" - - label: - x: 18 - y: 56 - styles: glass_tile_title - text: "Cam Motion" - - label: - x: 18 - y: 90 - styles: glass_tile_meta - text: "Tap to toggle" +### ROOM NAV ### - button: x: 20 y: 430 @@ -1108,7 +888,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Upstairs # +############################################# - id: upstairs widgets: - obj: @@ -1154,7 +936,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -1194,7 +977,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -1294,7 +1078,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Office # +############################################# - id: office widgets: - obj: @@ -1340,7 +1126,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -1380,7 +1167,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -1420,7 +1208,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -1460,7 +1249,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -1500,7 +1290,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -1600,7 +1391,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Garage # +############################################# - id: garage widgets: - obj: @@ -1646,7 +1439,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -1686,7 +1480,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -1726,7 +1521,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0425" # mdi:power - label: x: 18 y: 16 @@ -1742,6 +1538,7 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" +### ROOM NAV ### - button: x: 20 y: 430 @@ -1826,7 +1623,9 @@ lvgl: - label: align: center text: "Outside" - +############################################# +# Outside # +############################################# - id: outside widgets: - obj: @@ -1872,7 +1671,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 @@ -1912,7 +1712,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -1952,7 +1753,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -1992,7 +1794,8 @@ lvgl: x: 204 y: 16 styles: glass_tile_icon - text: "" + text_font: mdi_icons + text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 @@ -2008,6 +1811,7 @@ lvgl: y: 90 styles: glass_tile_meta text: "Tap to toggle" +### ROOM NAV ### - button: x: 20 y: 430