overseer/Home-Assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch LVGL tile icons from built-in FontAwesome to Material Design Icons

Browse Source 
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>
This commit is contained in:
Joshua King
2026-02-14 09:13:36 -05:00
parent c83884e764
commit 4c4102469b
2 changed files with 88 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
esphome/ha-remote/ha-remote-1.base.yaml
View File

@@ -93,6 +93,17 @@ touchscreen:
id(last_activity_ms) = millis(); id(last_activity_ms) = millis();
- light.turn_on: ha_remote_backlight - 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 --- # --- LVGL UI ---
# Note: On ESP32-S3-Touch-LCD-7, GPIO14 is used by the RGB display bus, # 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. # so it cannot be reused as ADC for battery telemetry in this display mode.

342
esphome/ha-remote/ha-remote-1.ui.yaml
View File

@@ -223,8 +223,13 @@ lvgl:
text_color: 0xEAF2FF text_color: 0xEAF2FF
button: button:
text_color: 0xF6FAFF text_color: 0xF6FAFF
#############################################
# PAGES AND WIDGETS #
#############################################
pages: pages:
#############################################
# Family Room #
#############################################
- id: home - id: home
widgets: widgets:
- obj: - obj:
@@ -239,14 +244,6 @@ lvgl:
x: 22 x: 22
y: 12 y: 12
text: "Family Room" text: "Family Room"
- label:
x: 22
y: 42
text: "Liquid Glass Control"
- label:
x: 22
y: 62
text: "Quick scenes and lighting controls"
- obj: - obj:
x: 560 x: 560
y: 12 y: 12
@@ -262,7 +259,6 @@ lvgl:
x: 22 x: 22
y: 108 y: 108
text: "Tap any card. Screen sleeps after 60s idle." text: "Tap any card. Screen sleeps after 60s idle."
- button: - button:
id: btn_family_room_tv_stand id: btn_family_room_tv_stand
x: 24 x: 24
@@ -287,7 +283,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -328,7 +325,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -369,7 +367,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -385,113 +384,7 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" text: "Tap to toggle"
### ROOM NAV ###
- 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"
- button: - button:
x: 20 x: 20
y: 430 y: 430
@@ -576,7 +469,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Living Room #
#############################################
- id: living_room - id: living_room
widgets: widgets:
- obj: - obj:
@@ -594,10 +489,6 @@ lvgl:
x: 22 x: 22
y: 42 y: 42
text: "Room Controls" text: "Room Controls"
- label:
x: 22
y: 62
text: "Add your lights, scenes, and media controls here"
- button: - button:
id: btn_living_room_main_light id: btn_living_room_main_light
x: 24 x: 24
@@ -622,7 +513,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -638,46 +530,6 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" 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: - button:
id: btn_living_room_patio_light id: btn_living_room_patio_light
x: 532 x: 532
@@ -702,7 +554,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -742,7 +595,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -782,7 +636,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -798,6 +653,7 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" text: "Tap to toggle"
### ROOM NAV ###
- button: - button:
x: 20 x: 20
y: 430 y: 430
@@ -882,7 +738,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Kitchen #
#############################################
- id: kitchen_page - id: kitchen_page
widgets: widgets:
- obj: - obj:
@@ -928,7 +786,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -944,86 +803,7 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" text: "Tap to toggle"
- button: ### ROOM NAV ###
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"
- button: - button:
x: 20 x: 20
y: 430 y: 430
@@ -1108,7 +888,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Upstairs #
#############################################
- id: upstairs - id: upstairs
widgets: widgets:
- obj: - obj:
@@ -1154,7 +936,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1194,7 +977,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1294,7 +1078,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Office #
#############################################
- id: office - id: office
widgets: widgets:
- obj: - obj:
@@ -1340,7 +1126,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1380,7 +1167,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1420,7 +1208,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1460,7 +1249,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1500,7 +1290,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1600,7 +1391,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Garage #
#############################################
- id: garage - id: garage
widgets: widgets:
- obj: - obj:
@@ -1646,7 +1439,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1686,7 +1480,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1726,7 +1521,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0425" # mdi:power
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1742,6 +1538,7 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" text: "Tap to toggle"
### ROOM NAV ###
- button: - button:
x: 20 x: 20
y: 430 y: 430
@@ -1826,7 +1623,9 @@ lvgl:
- label: - label:
align: center align: center
text: "Outside" text: "Outside"
#############################################
# Outside #
#############################################
- id: outside - id: outside
widgets: widgets:
- obj: - obj:
@@ -1872,7 +1671,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0335" # mdi:lightbulb
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1912,7 +1712,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1952,7 +1753,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -1992,7 +1794,8 @@ lvgl:
x: 204 x: 204
y: 16 y: 16
styles: glass_tile_icon styles: glass_tile_icon
text: "" text_font: mdi_icons
text: "\U000F0426" # mdi:power-plug
- label: - label:
x: 18 x: 18
y: 16 y: 16
@@ -2008,6 +1811,7 @@ lvgl:
y: 90 y: 90
styles: glass_tile_meta styles: glass_tile_meta
text: "Tap to toggle" text: "Tap to toggle"
### ROOM NAV ###
- button: - button:
x: 20 x: 20
y: 430 y: 430