From 7939382efcae574ef680a48608bb09a4218cd941 Mon Sep 17 00:00:00 2001 From: Joshua King Date: Sat, 14 Feb 2026 10:25:14 -0500 Subject: [PATCH] Converted to material design --- esphome/ha-remote/ha-remote-1.ui.yaml | 259 +++++++------------------- 1 file changed, 70 insertions(+), 189 deletions(-) diff --git a/esphome/ha-remote/ha-remote-1.ui.yaml b/esphome/ha-remote/ha-remote-1.ui.yaml index dffa03c..f393fa8 100644 --- a/esphome/ha-remote/ha-remote-1.ui.yaml +++ b/esphome/ha-remote/ha-remote-1.ui.yaml @@ -3,7 +3,7 @@ lvgl: - main_display touchscreens: - touch_panel - disp_bg_color: 0x0A1020 + disp_bg_color: 0x141218 style_definitions: - id: glass_orb_cool bg_color: 0x7EC6FF @@ -26,104 +26,45 @@ lvgl: shadow_ofs_x: 0 shadow_ofs_y: 0 - id: glass_header - bg_color: 0x1A2740 - bg_opa: 94% - border_color: 0xA7C8FF - border_width: 1 - border_opa: 35% - radius: 22 + bg_color: 0x1D1B20 + bg_opa: 100% + radius: 24 pad_all: 0 - shadow_color: 0x061022 - shadow_width: 22 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 - id: glass_chip - bg_color: 0xCFE1FF - bg_opa: 92% - border_color: 0xFFFFFF - border_width: 1 - border_opa: 45% - radius: 18 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 8 pad_all: 0 - id: glass_tile_title text_opa: 100% - id: glass_tile_meta - text_opa: 96% + text_opa: 70% - id: glass_tile_icon text_opa: 100% - id: glass_toggle_blue - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x091529 - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_toggle_pink - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x1A0E2B - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_toggle_red - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x2A0A12 - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_toggle_amber - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x2A1A08 - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_toggle_green - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x0B2018 - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_toggle_violet - bg_color: 0x2C364A - bg_opa: 92% - border_color: 0x90A4C3 - border_width: 1 - border_opa: 35% - radius: 24 - shadow_color: 0x1A1230 - shadow_width: 24 - shadow_opa: 0% - shadow_ofs_x: 0 - shadow_ofs_y: 8 + bg_color: 0x2B2930 + bg_opa: 100% + radius: 16 - id: glass_tile_blue bg_color: 0x7BB8FF bg_opa: 92% @@ -268,11 +209,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -310,11 +249,9 @@ lvgl: checkable: true styles: glass_toggle_pink checked: - bg_color: 0xB22FD9 + bg_color: 0xFFD7F1 bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 + text_color: 0x390035 on_click: - homeassistant.service: service: light.toggle @@ -352,11 +289,9 @@ lvgl: checkable: true styles: glass_toggle_red checked: - bg_color: 0xD83452 + bg_color: 0xFFB4AB bg_opa: 100% - border_color: 0xFFE2E8 - border_opa: 90% - text_color: 0x000000 + text_color: 0x690005 on_click: - homeassistant.service: service: light.toggle @@ -498,11 +433,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -539,11 +472,9 @@ lvgl: checkable: true styles: glass_toggle_amber checked: - bg_color: 0xC97700 + bg_color: 0xFFDCBE bg_opa: 100% - border_color: 0xFFF1D6 - border_opa: 90% - text_color: 0x000000 + text_color: 0x2C1600 on_click: - homeassistant.service: service: light.toggle @@ -580,11 +511,9 @@ lvgl: checkable: true styles: glass_toggle_green checked: - bg_color: 0x2EAF7E + bg_color: 0x66F9B9 bg_opa: 100% - border_color: 0xE5FFF5 - border_opa: 90% - text_color: 0x000000 + text_color: 0x003825 on_click: - homeassistant.service: service: switch.toggle @@ -621,11 +550,9 @@ lvgl: checkable: true styles: glass_toggle_violet checked: - bg_color: 0x6C55D9 + bg_color: 0xD0BCFF bg_opa: 100% - border_color: 0xEEE8FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x381E72 on_click: - homeassistant.service: service: switch.toggle @@ -758,10 +685,6 @@ lvgl: x: 22 y: 42 text: "Room Controls" - - label: - x: 22 - y: 62 - text: "Add your kitchen controls here" - button: id: btn_kitchen_sink_light x: 24 @@ -771,11 +694,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -908,10 +829,6 @@ lvgl: x: 22 y: 42 text: "Room Controls" - - label: - x: 22 - y: 62 - text: "Add your upstairs controls here" - button: id: btn_upstairs_airquality_oled x: 24 @@ -921,11 +838,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: switch.toggle @@ -962,11 +877,9 @@ lvgl: checkable: true styles: glass_toggle_pink checked: - bg_color: 0xB22FD9 + bg_color: 0xFFD7F1 bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 + text_color: 0x390035 on_click: - homeassistant.service: service: switch.toggle @@ -1098,10 +1011,6 @@ lvgl: x: 22 y: 42 text: "Room Controls" - - label: - x: 22 - y: 62 - text: "Add your office controls here" - button: id: btn_office_lamp x: 24 @@ -1111,11 +1020,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -1152,11 +1059,9 @@ lvgl: checkable: true styles: glass_toggle_pink checked: - bg_color: 0xB22FD9 + bg_color: 0xFFD7F1 bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 + text_color: 0x390035 on_click: - homeassistant.service: service: light.toggle @@ -1193,11 +1098,9 @@ lvgl: checkable: true styles: glass_toggle_amber checked: - bg_color: 0xC97700 + bg_color: 0xFFDCBE bg_opa: 100% - border_color: 0xFFF1D6 - border_opa: 90% - text_color: 0x000000 + text_color: 0x2C1600 on_click: - homeassistant.service: service: switch.toggle @@ -1234,11 +1137,9 @@ lvgl: checkable: true styles: glass_toggle_green checked: - bg_color: 0x2EAF7E + bg_color: 0x66F9B9 bg_opa: 100% - border_color: 0xE5FFF5 - border_opa: 90% - text_color: 0x000000 + text_color: 0x003825 on_click: - homeassistant.service: service: switch.toggle @@ -1275,11 +1176,9 @@ lvgl: checkable: true styles: glass_toggle_violet checked: - bg_color: 0x6C55D9 + bg_color: 0xD0BCFF bg_opa: 100% - border_color: 0xEEE8FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x381E72 on_click: - homeassistant.service: service: switch.toggle @@ -1411,10 +1310,6 @@ lvgl: x: 22 y: 42 text: "Room Controls" - - label: - x: 22 - y: 62 - text: "Add your garage controls here" - button: id: btn_garage_cam_light x: 24 @@ -1424,11 +1319,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -1465,11 +1358,9 @@ lvgl: checkable: true styles: glass_toggle_pink checked: - bg_color: 0xB22FD9 + bg_color: 0xFFD7F1 bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 + text_color: 0x390035 on_click: - homeassistant.service: service: switch.toggle @@ -1506,11 +1397,9 @@ lvgl: checkable: true styles: glass_toggle_amber checked: - bg_color: 0xC97700 + bg_color: 0xFFDCBE bg_opa: 100% - border_color: 0xFFF1D6 - border_opa: 90% - text_color: 0x000000 + text_color: 0x2C1600 on_click: - homeassistant.service: service: switch.toggle @@ -1656,11 +1545,9 @@ lvgl: checkable: true styles: glass_toggle_blue checked: - bg_color: 0x0B7DFA + bg_color: 0xA8C7FA bg_opa: 100% - border_color: 0xEAF4FF - border_opa: 90% - text_color: 0x000000 + text_color: 0x003258 on_click: - homeassistant.service: service: light.toggle @@ -1697,11 +1584,9 @@ lvgl: checkable: true styles: glass_toggle_pink checked: - bg_color: 0xB22FD9 + bg_color: 0xFFD7F1 bg_opa: 100% - border_color: 0xFFDEFF - border_opa: 90% - text_color: 0x000000 + text_color: 0x390035 on_click: - homeassistant.service: service: switch.toggle @@ -1738,11 +1623,9 @@ lvgl: checkable: true styles: glass_toggle_amber checked: - bg_color: 0xC97700 + bg_color: 0xFFDCBE bg_opa: 100% - border_color: 0xFFF1D6 - border_opa: 90% - text_color: 0x000000 + text_color: 0x2C1600 on_click: - homeassistant.service: service: switch.toggle @@ -1779,11 +1662,9 @@ lvgl: checkable: true styles: glass_toggle_green checked: - bg_color: 0x2EAF7E + bg_color: 0x66F9B9 bg_opa: 100% - border_color: 0xE5FFF5 - border_opa: 90% - text_color: 0x000000 + text_color: 0x003825 on_click: - homeassistant.service: service: switch.toggle