substitutions: device_name: ha-family-room-remote friendly_name: "Family Room HA Remote" esphome: name: ${device_name} friendly_name: ${friendly_name} on_boot: priority: -10 then: - light.turn_on: ha_remote_backlight - lvgl.page.show: home - lambda: |- id(last_activity_ms) = millis(); esp32: board: esp32-s3-devkitc-1 framework: type: esp-idf logger: level: WARN api: encryption: key: !secret api_encryption_key # Enable over-the-air updates ota: - platform: esphome password: !secret ota_password wifi: ssid: !secret wifi_iot_ssid password: !secret wifi_password power_save_mode: NONE fast_connect: true # Enable fallback hotspot (captive portal) in case wifi connection fails ap: ssid: "${friendly_name} Fallback" password: !secret fallback_password captive_portal: psram: mode: octal speed: 80MHz i2c: sda: 8 scl: 9 # CH422G I/O expander (Waveshare uses it for LCD reset/backlight/touch reset) ch422g: - id: ch422g_hub # --- Backlight control (CH422G IO2 is common for Waveshare LCD BL) --- switch: - platform: gpio name: "LCD Backlight Raw" id: lcd_backlight_raw restore_mode: ALWAYS_ON pin: ch422g: ch422g_hub number: 2 mode: output: true # A nicer HA-exposed control (so you can also automate it from HA) light: - platform: binary name: "HA Remote Backlight" output: lcd_backlight_out id: ha_remote_backlight output: - platform: template id: lcd_backlight_out type: binary write_action: - if: condition: lambda: return state; then: - switch.turn_on: lcd_backlight_raw else: - switch.turn_off: lcd_backlight_raw # --- Inactivity tracking (dim/off + wake on touch) --- globals: - id: last_activity_ms type: uint32_t restore_value: no initial_value: '0' interval: - interval: 1s then: - lambda: |- if (id(last_activity_ms) == 0) id(last_activity_ms) = millis(); # Turn off backlight ONCE at 2 minutes idle. - if: condition: lambda: |- const uint32_t idle_s = (millis() - id(last_activity_ms)) / 1000; return idle_s == 120; then: - light.turn_off: ha_remote_backlight # --- Display --- display: - platform: mipi_rgb model: ESP32-S3-TOUCH-LCD-7-800X480 id: main_display update_interval: never auto_clear_enabled: false reset_pin: ch422g: ch422g_hub number: 3 mode: output: true # --- Touch --- touchscreen: platform: gt911 id: touch_panel update_interval: 120ms reset_pin: ch422g: ch422g_hub number: 1 mode: output: true on_touch: then: - lambda: |- id(last_activity_ms) = millis(); - light.turn_on: ha_remote_backlight # --- 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. text_sensor: - platform: wifi_info ip_address: name: "HA Remote IP" id: ip_addr - platform: homeassistant id: ts_family_room_tv_stand entity_id: light.family_room_tv_stand internal: true on_value: then: - lvgl.widget.update: id: btn_family_room_tv_stand 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_tv_stand); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_small_family_room_lamp entity_id: light.small_family_room_lamp internal: true on_value: then: - lvgl.widget.update: id: btn_small_family_room_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 *btn = id(btn_small_family_room_lamp); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_living_room_lamp_1 entity_id: light.living_room_lamp_1 internal: true on_value: then: - lvgl.widget.update: 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); const uint32_t count1 = lv_obj_get_child_cnt(btn1); for (uint32_t i = 0; i < count1; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn1, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } const uint32_t count2 = lv_obj_get_child_cnt(btn2); for (uint32_t i = 0; i < count2; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn2, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_living_room_light_2 entity_id: light.living_room_light_2 internal: true on_value: then: - lvgl.widget.update: id: btn_living_room_main_light 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_living_room_main_light); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_patio_light_1 entity_id: light.patio_light_1 internal: true on_value: then: - lvgl.widget.update: id: btn_living_room_patio_light state: checked: !lambda return x == "on"; - lvgl.widget.update: id: btn_outside_patio_light 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_living_room_patio_light); auto *btn2 = id(btn_outside_patio_light); const uint32_t count1 = lv_obj_get_child_cnt(btn1); for (uint32_t i = 0; i < count1; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn1, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } const uint32_t count2 = lv_obj_get_child_cnt(btn2); for (uint32_t i = 0; i < count2; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn2, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_kitchen_sink_light entity_id: light.kitchen_sink_light internal: true on_value: then: - lvgl.widget.update: id: btn_kitchen_sink_light 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_sink_light); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_office_lamp_2 entity_id: light.office_lamp_2 internal: true on_value: then: - lvgl.widget.update: id: btn_office_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 *btn = id(btn_office_lamp); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_office_led_strip entity_id: light.led_strip_controller_led_strip_controller internal: true on_value: then: - lvgl.widget.update: id: btn_office_led_strip 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_office_led_strip); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } - platform: homeassistant id: ts_garage_cam_light entity_id: light.esp32_saturn4_cam_esp32_saturn4_cam_light internal: true on_value: then: - lvgl.widget.update: id: btn_garage_cam_light 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_garage_cam_light); const uint32_t count = lv_obj_get_child_cnt(btn); for (uint32_t i = 0; i < count; i++) { lv_obj_set_style_text_color(lv_obj_get_child(btn, i), text_color, LV_PART_MAIN | LV_STATE_DEFAULT); } lvgl: displays: - main_display touchscreens: - touch_panel disp_bg_color: 0x0A1020 style_definitions: - id: glass_orb_cool bg_color: 0x7EC6FF bg_opa: 0% radius: 120 border_width: 0 shadow_color: 0x7EC6FF shadow_width: 42 shadow_opa: 0% shadow_ofs_x: 0 shadow_ofs_y: 0 - id: glass_orb_warm bg_color: 0xFFB8D0 bg_opa: 0% radius: 120 border_width: 0 shadow_color: 0xFFB8D0 shadow_width: 42 shadow_opa: 0% 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 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 pad_all: 0 - id: glass_tile_title text_opa: 100% - id: glass_tile_meta text_opa: 96% - 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 - 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 - 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 - 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 - 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 - 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 - id: glass_tile_blue bg_color: 0x7BB8FF bg_opa: 92% border_color: 0xE6F1FF 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 text_color: 0xF4F8FF - id: glass_tile_pink bg_color: 0xD99CFF bg_opa: 92% border_color: 0xF7E7FF 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 text_color: 0xFFF8FF - id: glass_tile_amber bg_color: 0xFFD29A bg_opa: 92% border_color: 0xFFF0D9 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 text_color: 0xFFF9EE - id: glass_tile_green bg_color: 0x9BE2C6 bg_opa: 92% border_color: 0xE4FFF3 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 text_color: 0xF3FFF9 - id: glass_tile_red bg_color: 0xFF9FAF bg_opa: 92% border_color: 0xFFE8EC border_width: 1 border_opa: 38% radius: 24 shadow_color: 0x2A0A12 shadow_width: 24 shadow_opa: 0% shadow_ofs_x: 0 shadow_ofs_y: 8 text_color: 0xFFF5F7 - id: glass_tile_violet bg_color: 0xB8A8FF bg_opa: 92% border_color: 0xF0EAFF 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 text_color: 0xF7F3FF - id: room_nav_btn bg_color: 0x22324A bg_opa: 96% border_color: 0x8FB3E8 border_width: 1 border_opa: 35% radius: 12 text_color: 0xF2F7FF - id: room_stub_card bg_color: 0x1A2740 bg_opa: 96% border_color: 0xA7C8FF border_width: 1 border_opa: 35% radius: 20 pad_all: 0 theme: label: text_color: 0xEAF2FF button: text_color: 0xF6FAFF pages: - id: home widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: id: status_label 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 width: 194 height: 58 styles: glass_chip widgets: - label: id: battery_label align: center text: " n/a" - label: x: 22 y: 108 text: "Tap any card. Screen sleeps after 60s idle." - button: id: btn_family_room_tv_stand x: 24 y: 138 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.family_room_tv_stand 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: "TV Stand" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: id: btn_small_family_room_lamp x: 278 y: 138 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.small_family_room_lamp 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: "Small Lamp" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: id: btn_family_room_standing_lamp x: 532 y: 138 width: 244 height: 136 checkable: true styles: glass_toggle_red checked: bg_color: 0xD83452 bg_opa: 100% border_color: 0xFFE2E8 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: 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: x: 532 y: 286 width: 244 height: 136 styles: glass_tile_violet on_click: - light.toggle: ha_remote_backlight widgets: - label: x: 204 y: 16 styles: glass_tile_icon text: "" - label: x: 18 y: 16 styles: glass_tile_meta text: "DISPLAY" - label: x: 18 y: 56 styles: glass_tile_title text: "Backlight" - label: x: 18 y: 90 styles: glass_tile_meta text: "Manual toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: living_room widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Living Room" - label: 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 y: 122 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.living_room_light_2 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: "Main Light" - label: x: 18 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 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: light.toggle data: entity_id: light.patio_light_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: "Patio Light" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: kitchen_page widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Kitchen" - label: 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 y: 122 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.kitchen_sink_light 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: "Sink Light" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: upstairs widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Upstairs" - label: x: 22 y: 42 text: "Room Controls" - label: x: 22 y: 62 text: "Add your upstairs controls here" - obj: x: 24 y: 122 width: 752 height: 292 styles: room_stub_card widgets: - label: align: center text: "No upstairs light entities found yet" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: office widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Office (Basement)" - label: 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 y: 122 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.office_lamp_2 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: "Office Lamp 2" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: id: btn_office_led_strip 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.led_strip_controller_led_strip_controller 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: "LED Strip" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: garage widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Garage" - label: 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 y: 122 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.esp32_saturn4_cam_esp32_saturn4_cam_light 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: "Saturn Cam Light" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside" - id: outside widgets: - obj: x: 14 y: 14 width: 772 height: 84 styles: glass_header widgets: - label: x: 22 y: 12 text: "Outside" - label: x: 22 y: 42 text: "Room Controls" - label: x: 22 y: 62 text: "Add your outdoor controls here" - button: id: btn_outside_patio_light x: 24 y: 122 width: 244 height: 136 checkable: true styles: glass_toggle_blue checked: bg_color: 0x0B7DFA bg_opa: 100% border_color: 0xEAF4FF border_opa: 90% text_color: 0x000000 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.patio_light_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: "Patio Light" - label: x: 18 y: 90 styles: glass_tile_meta text: "Tap to toggle" - button: x: 20 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: home widgets: - label: align: center text: "Family" - button: x: 130 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: living_room widgets: - label: align: center text: "Living" - button: x: 240 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: kitchen_page widgets: - label: align: center text: "Kitchen" - button: x: 350 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: upstairs widgets: - label: align: center text: "Upstairs" - button: x: 460 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: office widgets: - label: align: center text: "Office" - button: x: 570 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: garage widgets: - label: align: center text: "Garage" - button: x: 680 y: 430 width: 100 height: 40 styles: room_nav_btn on_click: - lvgl.page.show: outside widgets: - label: align: center text: "Outside"