lvgl: displays: - main_display touchscreens: - touch_panel disp_bg_color: 0x141218 style_definitions: # ── Top App Bar ── - id: md3_header bg_color: 0x1D1B20 bg_opa: 100% border_width: 0 radius: 0 pad_all: 0 shadow_width: 0 # ── Status Chip ── - id: md3_chip bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 8 pad_all: 0 # ── Text Styles ── - id: md3_title text_color: 0xE3E2E6 text_opa: 100% - id: md3_meta text_color: 0xC4C6CF text_opa: 100% - id: md3_icon text_color: 0xC4C6CF text_opa: 100% # ── Card Variants ── - id: md3_card_blue bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 - id: md3_card_pink bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 - id: md3_card_red bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 - id: md3_card_amber bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 - id: md3_card_green bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 - id: md3_card_violet bg_color: 0x2B2930 bg_opa: 100% border_color: 0x49454F border_width: 1 border_opa: 100% radius: 16 shadow_width: 0 # ── Bottom Navigation ── - id: md3_nav_bar bg_color: 0x2B2930 bg_opa: 100% border_width: 0 radius: 0 pad_all: 0 shadow_width: 0 - id: md3_nav_item bg_opa: 0% border_width: 0 radius: 0 text_color: 0xC4C6CF pad_all: 0 theme: label: text_color: 0xE3E2E6 button: text_color: 0xE3E2E6 pages: ############################################# # Family Room # ############################################# - id: home widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Family Room" - button: id: btn_family_room_tv_stand x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.family_room_tv_stand widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "TV Stand" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_small_family_room_lamp x: 278 y: 80 width: 244 height: 136 checkable: true styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% border_color: 0xFFD7F1 border_opa: 100% text_color: 0x22001F on_click: - homeassistant.service: service: light.toggle data: entity_id: light.small_family_room_lamp widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Small Lamp" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_family_room_standing_lamp x: 532 y: 80 width: 244 height: 136 checkable: true styles: md3_card_red checked: bg_color: 0xFFB4AB bg_opa: 100% border_color: 0xFFB4AB border_opa: 100% text_color: 0x3D0002 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.living_room_lamp_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Standing Lamp" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Living Room # ############################################# - id: living_room widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Living Room" - button: id: btn_living_room_main_light x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.living_room_light_2 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Main Light" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_living_room_patio_light x: 532 y: 80 width: 244 height: 136 checkable: true styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% border_color: 0xFFDCBE border_opa: 100% text_color: 0x1A0C00 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.patio_light_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Patio Light" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_living_room_garland_switch x: 24 y: 228 width: 244 height: 136 checkable: true styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% border_color: 0x66F9B9 border_opa: 100% text_color: 0x001F15 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.big_family_room_lamp widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "Front Garland" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_living_room_calendar_switch x: 278 y: 228 width: 244 height: 136 checkable: true styles: md3_card_violet checked: bg_color: 0xD0BCFF bg_opa: 100% border_color: 0xD0BCFF border_opa: 100% text_color: 0x1E0F3F on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.digital_calendar widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "Calendar" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Kitchen # ############################################# - id: kitchen_page widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Kitchen" - button: id: btn_kitchen_sink_light x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.kitchen_sink_light widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Sink Light" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Upstairs # ############################################# - id: upstairs widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Upstairs" - button: id: btn_upstairs_airquality_oled x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.airqualitysensor_3_oled_power widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "AQ OLED" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_upstairs_camera_motion x: 278 y: 80 width: 244 height: 136 checkable: true styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% border_color: 0xFFD7F1 border_opa: 100% text_color: 0x22001F on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.upstairs_camera_motion_detection widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "Cam Motion" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Office # ############################################# - id: office widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Office" - button: id: btn_office_lamp x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.office_lamp_2 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Office Lamp 2" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_office_led_strip x: 278 y: 80 width: 244 height: 136 checkable: true styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% border_color: 0xFFD7F1 border_opa: 100% text_color: 0x22001F on_click: - homeassistant.service: service: light.toggle data: entity_id: light.led_strip_controller_led_strip_controller widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "LED Strip" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_office_echo_plug x: 532 y: 80 width: 244 height: 136 checkable: true styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% border_color: 0xFFDCBE border_opa: 100% text_color: 0x1A0C00 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.office_echo_plug widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "Echo Plug" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_office_end_table_lamp_outlet x: 24 y: 228 width: 244 height: 136 checkable: true styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% border_color: 0x66F9B9 border_opa: 100% text_color: 0x001F15 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.office_end_table_lamp_socket_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "End Table Lamp" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_office_wax_warmer_outlet x: 278 y: 228 width: 244 height: 136 checkable: true styles: md3_card_violet checked: bg_color: 0xD0BCFF bg_opa: 100% border_color: 0xD0BCFF border_opa: 100% text_color: 0x1E0F3F on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.office_wax_warmer_socket_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "Wax Warmer" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Garage # ############################################# - id: garage widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Garage" - button: id: btn_garage_cam_light x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 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: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Saturn Cam Light" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_garage_fume_exhaust_fan x: 278 y: 80 width: 244 height: 136 checkable: true styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% border_color: 0xFFD7F1 border_opa: 100% text_color: 0x22001F on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.fume_exhaust_fan widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "Fume Fan" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_garage_resin_printer_heater x: 532 y: 80 width: 244 height: 136 checkable: true styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% border_color: 0xFFDCBE border_opa: 100% text_color: 0x1A0C00 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.resin_printer_heater widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 styles: md3_title text: "Resin Heater" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Outside" ############################################# # Outside # ############################################# - id: outside widgets: - obj: x: 0 y: 0 width: 800 height: 64 styles: md3_header widgets: - label: x: 24 y: 20 text_color: 0xE3E2E6 text: "Outside" - button: id: btn_outside_patio_light x: 24 y: 80 width: 244 height: 136 checkable: true styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% border_color: 0xA8C7FA border_opa: 100% text_color: 0x001A33 on_click: - homeassistant.service: service: light.toggle data: entity_id: light.patio_light_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 styles: md3_title text: "Patio Light" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_outside_lamppost_outlet_1 x: 278 y: 80 width: 244 height: 136 checkable: true styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% border_color: 0xFFD7F1 border_opa: 100% text_color: 0x22001F on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.lamppost_outlets_socket_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "Lamppost 1" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_outside_lamppost_outlet_2 x: 532 y: 80 width: 244 height: 136 checkable: true styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% border_color: 0xFFDCBE border_opa: 100% text_color: 0x1A0C00 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.lamppost_outlets_socket_2 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "Lamppost 2" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - button: id: btn_outside_porch_decor_outlet x: 24 y: 228 width: 244 height: 136 checkable: true styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% border_color: 0x66F9B9 border_opa: 100% text_color: 0x001F15 on_click: - homeassistant.service: service: switch.toggle data: entity_id: switch.washing_machine_socket_1 widgets: - label: x: 204 y: 16 styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 styles: md3_title text: "Porch Decor 1" - label: x: 18 y: 90 styles: md3_meta text: "Tap to toggle" - obj: x: 0 y: 408 width: 800 height: 72 styles: md3_nav_bar widgets: - obj: x: 8 y: 16 width: 84 height: 40 styles: md3_chip widgets: - label: align: center text: "\U000F0079" # mdi:battery - button: x: 100 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: home widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04B9" # mdi:sofa - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Family" - button: x: 200 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: living_room widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06B5" # mdi:lamp - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Living" - button: x: 300 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: kitchen_page widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F04DE" # mdi:stove - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Kitchen" - button: x: 400 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: upstairs widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F12BD" # mdi:stairs-up - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Upstairs" - button: x: 500 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: office widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F1239" # mdi:desk - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Office" - button: x: 600 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: garage widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 0% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xC4C6CF text: "\U000F06D9" # mdi:garage - label: align: top_mid y: 46 text_color: 0xC4C6CF text: "Garage" - button: x: 700 y: 0 width: 100 height: 72 styles: md3_nav_item on_click: - lvgl.page.show: outside widgets: - obj: x: 29 y: 4 width: 56 height: 32 bg_color: 0x17488B bg_opa: 100% radius: 16 border_width: 0 - label: align: top_mid y: 10 text_font: mdi_icons text_color: 0xD5E3FF text: "\U000F0531" # mdi:tree - label: align: top_mid y: 46 text_color: 0xE3E2E6 text: "Outside"