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>
This commit is contained in:
Joshua King
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user