diff --git a/esphome/ha-remote/ha-remote-1.base.yaml b/esphome/ha-remote/ha-remote-1.base.yaml index c1d8751..ecbe160 100644 --- a/esphome/ha-remote/ha-remote-1.base.yaml +++ b/esphome/ha-remote/ha-remote-1.base.yaml @@ -100,9 +100,18 @@ font: size: 24 bpp: 4 glyphs: + # Tile icons - "\U000F0335" # mdi:lightbulb - "\U000F0425" # mdi:power - "\U000F0426" # mdi:power-plug + # Navigation bar icons + - "\U000F04B9" # mdi:sofa + - "\U000F06B5" # mdi:lamp + - "\U000F04DE" # mdi:stove + - "\U000F12BD" # mdi:stairs-up + - "\U000F1239" # mdi:desk + - "\U000F06D9" # mdi:garage + - "\U000F0531" # mdi:tree # --- LVGL UI --- # Note: On ESP32-S3-Touch-LCD-7, GPIO14 is used by the RGB display bus, diff --git a/esphome/ha-remote/ha-remote-1.bindings.yaml b/esphome/ha-remote/ha-remote-1.bindings.yaml index f8cf204..30dc62c 100644 --- a/esphome/ha-remote/ha-remote-1.bindings.yaml +++ b/esphome/ha-remote/ha-remote-1.bindings.yaml @@ -14,7 +14,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_family_room_tv_stand); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -28,7 +28,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x390035) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_small_family_room_lamp); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -42,7 +42,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x690005) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_family_room_standing_lamp); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -56,7 +56,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_living_room_main_light); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -74,11 +74,16 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t off_color = lv_color_hex(0xE3E2E6); auto *btn1 = id(btn_living_room_patio_light); auto *btn2 = id(btn_outside_patio_light); - lv_obj_set_style_text_color(btn1, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - lv_obj_set_style_text_color(btn2, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); + if (x == "on") { + lv_obj_set_style_text_color(btn1, lv_color_hex(0x2C1600), static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); + lv_obj_set_style_text_color(btn2, lv_color_hex(0x003258), static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); + } else { + lv_obj_set_style_text_color(btn1, off_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); + lv_obj_set_style_text_color(btn2, off_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); + } - platform: homeassistant id: ts_kitchen_sink_light entity_id: light.kitchen_sink_light @@ -90,7 +95,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_kitchen_sink_light); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -104,7 +109,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_office_lamp); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -118,7 +123,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x390035) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_office_led_strip); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -132,7 +137,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_garage_cam_light); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -146,7 +151,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x2C1600) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_office_echo_plug); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -160,7 +165,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003825) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_office_end_table_lamp_outlet); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -174,7 +179,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x381E72) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_office_wax_warmer_outlet); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -188,7 +193,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x390035) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_outside_lamppost_outlet_1); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -202,7 +207,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x2C1600) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_outside_lamppost_outlet_2); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -216,7 +221,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003825) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_outside_porch_decor_outlet); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -230,7 +235,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003825) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_living_room_garland_switch); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -244,7 +249,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x381E72) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_living_room_calendar_switch); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -258,7 +263,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x003258) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_upstairs_airquality_oled); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -272,7 +277,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x390035) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_upstairs_camera_motion); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -286,7 +291,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x390035) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_garage_fume_exhaust_fan); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); - platform: homeassistant @@ -300,7 +305,7 @@ text_sensor: state: checked: !lambda return x == "on"; - lambda: |- - const lv_color_t text_color = (x == "on") ? lv_color_hex(0x000000) : lv_color_hex(0xEAF2FF); + const lv_color_t text_color = (x == "on") ? lv_color_hex(0x2C1600) : lv_color_hex(0xE3E2E6); auto *btn = id(btn_garage_resin_printer_heater); lv_obj_set_style_text_color(btn, text_color, static_cast(LV_PART_MAIN | LV_STATE_DEFAULT)); diff --git a/esphome/ha-remote/ha-remote-1.ui.yaml b/esphome/ha-remote/ha-remote-1.ui.yaml index f393fa8..78d3966 100644 --- a/esphome/ha-remote/ha-remote-1.ui.yaml +++ b/esphome/ha-remote/ha-remote-1.ui.yaml @@ -5,212 +5,144 @@ lvgl: - touch_panel disp_bg_color: 0x141218 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 + # ── Top App Bar ── + - id: md3_header bg_color: 0x1D1B20 bg_opa: 100% - radius: 24 + border_width: 0 + radius: 0 pad_all: 0 - - id: glass_chip + 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 - - id: glass_tile_title + # ── Text Styles ── + - id: md3_title + text_color: 0xE3E2E6 text_opa: 100% - - id: glass_tile_meta - text_opa: 70% - - id: glass_tile_icon + - id: md3_meta + text_color: 0xC4C6CF text_opa: 100% - - id: glass_toggle_blue + - 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 - - id: glass_toggle_pink + shadow_width: 0 + - id: md3_card_pink bg_color: 0x2B2930 bg_opa: 100% + border_color: 0x49454F + border_width: 1 + border_opa: 100% radius: 16 - - id: glass_toggle_red + shadow_width: 0 + - id: md3_card_red bg_color: 0x2B2930 bg_opa: 100% + border_color: 0x49454F + border_width: 1 + border_opa: 100% radius: 16 - - id: glass_toggle_amber + shadow_width: 0 + - id: md3_card_amber bg_color: 0x2B2930 bg_opa: 100% + border_color: 0x49454F + border_width: 1 + border_opa: 100% radius: 16 - - id: glass_toggle_green + shadow_width: 0 + - id: md3_card_green bg_color: 0x2B2930 bg_opa: 100% + border_color: 0x49454F + border_width: 1 + border_opa: 100% radius: 16 - - id: glass_toggle_violet + shadow_width: 0 + - id: md3_card_violet bg_color: 0x2B2930 bg_opa: 100% + border_color: 0x49454F + border_width: 1 + border_opa: 100% radius: 16 - - 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 + 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: 0xEAF2FF + text_color: 0xE3E2E6 button: - text_color: 0xF6FAFF -############################################# -# PAGES AND WIDGETS # -############################################# + text_color: 0xE3E2E6 pages: ############################################# -# Family Room # +# Family Room # ############################################# - id: home widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - id: status_label - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 text: "Family Room" - obj: - x: 560 + x: 590 y: 12 - width: 194 - height: 58 - styles: glass_chip + width: 186 + height: 40 + styles: md3_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." + text: " n/a" + - button: id: btn_family_room_tv_stand x: 24 - y: 138 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -221,36 +153,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "TV Stand" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" - button: id: btn_small_family_room_lamp x: 278 - y: 138 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_pink + styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% + border_color: 0xFFD7F1 + border_opa: 100% text_color: 0x390035 on_click: - homeassistant.service: @@ -261,36 +195,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Small Lamp" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" - button: id: btn_family_room_standing_lamp x: 532 - y: 138 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_red + styles: md3_card_red checked: bg_color: 0xFFB4AB bg_opa: 100% + border_color: 0xFFB4AB + border_opa: 100% text_color: 0x690005 on_click: - homeassistant.service: @@ -301,140 +237,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Standing Lamp" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" -### ROOM NAV ### - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Living Room # ############################################# - id: living_room widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 text: "Living Room" - - label: - x: 22 - y: 42 - text: "Room Controls" + - button: id: btn_living_room_main_light x: 24 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -445,35 +508,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Main Light" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_living_room_patio_light x: 532 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_amber + styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% + border_color: 0xFFDCBE + border_opa: 100% text_color: 0x2C1600 on_click: - homeassistant.service: @@ -484,35 +550,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Patio Light" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_living_room_garland_switch x: 24 - y: 270 + y: 228 width: 244 height: 136 checkable: true - styles: glass_toggle_green + styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% + border_color: 0x66F9B9 + border_opa: 100% text_color: 0x003825 on_click: - homeassistant.service: @@ -523,35 +592,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Front Garland" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_living_room_calendar_switch x: 278 - y: 270 + y: 228 width: 244 height: 136 checkable: true - styles: glass_toggle_violet + styles: md3_card_violet checked: bg_color: 0xD0BCFF bg_opa: 100% + border_color: 0xD0BCFF + border_opa: 100% text_color: 0x381E72 on_click: - homeassistant.service: @@ -562,140 +634,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Calendar" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" -### ROOM NAV ### - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Kitchen # ############################################# - id: kitchen_page widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 text: "Kitchen" - - label: - x: 22 - y: 42 - text: "Room Controls" + - button: id: btn_kitchen_sink_light x: 24 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -706,140 +905,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Sink Light" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" -### ROOM NAV ### - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Upstairs # ############################################# - id: upstairs widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 text: "Upstairs" - - label: - x: 22 - y: 42 - text: "Room Controls" + - button: id: btn_upstairs_airquality_oled x: 24 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -850,35 +1176,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "AQ OLED" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_upstairs_camera_motion x: 278 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_pink + styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% + border_color: 0xFFD7F1 + border_opa: 100% text_color: 0x390035 on_click: - homeassistant.service: @@ -889,139 +1218,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Cam Motion" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Office # ############################################# - id: office widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 - text: "Office (Basement)" - - label: - x: 22 - y: 42 - text: "Room Controls" + x: 24 + y: 20 + text_color: 0xE3E2E6 + text: "Office" + - button: id: btn_office_lamp x: 24 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -1032,35 +1489,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Office Lamp 2" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_office_led_strip x: 278 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_pink + styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% + border_color: 0xFFD7F1 + border_opa: 100% text_color: 0x390035 on_click: - homeassistant.service: @@ -1071,35 +1531,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "LED Strip" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_office_echo_plug x: 532 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_amber + styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% + border_color: 0xFFDCBE + border_opa: 100% text_color: 0x2C1600 on_click: - homeassistant.service: @@ -1110,35 +1573,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Echo Plug" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_office_end_table_lamp_outlet x: 24 - y: 270 + y: 228 width: 244 height: 136 checkable: true - styles: glass_toggle_green + styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% + border_color: 0x66F9B9 + border_opa: 100% text_color: 0x003825 on_click: - homeassistant.service: @@ -1149,35 +1615,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "End Table Lamp" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_office_wax_warmer_outlet x: 278 - y: 270 + y: 228 width: 244 height: 136 checkable: true - styles: glass_toggle_violet + styles: md3_card_violet checked: bg_color: 0xD0BCFF bg_opa: 100% + border_color: 0xD0BCFF + border_opa: 100% text_color: 0x381E72 on_click: - homeassistant.service: @@ -1188,139 +1657,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Wax Warmer" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Garage # ############################################# - id: garage widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 text: "Garage" - - label: - x: 22 - y: 42 - text: "Room Controls" + - button: id: btn_garage_cam_light x: 24 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -1331,35 +1928,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Saturn Cam Light" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_garage_fume_exhaust_fan x: 278 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_pink + styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% + border_color: 0xFFD7F1 + border_opa: 100% text_color: 0x390035 on_click: - homeassistant.service: @@ -1370,35 +1970,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Fume Fan" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_garage_resin_printer_heater x: 532 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_amber + styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% + border_color: 0xFFDCBE + border_opa: 100% text_color: 0x2C1600 on_click: - homeassistant.service: @@ -1409,144 +2012,267 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0425" # mdi:power - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "SWITCH" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Resin Heater" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" -### ROOM NAV ### - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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 # +# Outside # ############################################# - id: outside widgets: - obj: - x: 14 - y: 14 - width: 772 - height: 84 - styles: glass_header + x: 0 + y: 0 + width: 800 + height: 64 + styles: md3_header widgets: - label: - x: 22 - y: 12 + x: 24 + y: 20 + text_color: 0xE3E2E6 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 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_blue + styles: md3_card_blue checked: bg_color: 0xA8C7FA bg_opa: 100% + border_color: 0xA8C7FA + border_opa: 100% text_color: 0x003258 on_click: - homeassistant.service: @@ -1557,35 +2283,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0335" # mdi:lightbulb - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "LIGHT" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Patio Light" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_outside_lamppost_outlet_1 x: 278 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_pink + styles: md3_card_pink checked: bg_color: 0xFFD7F1 bg_opa: 100% + border_color: 0xFFD7F1 + border_opa: 100% text_color: 0x390035 on_click: - homeassistant.service: @@ -1596,35 +2325,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Lamppost 1" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_outside_lamppost_outlet_2 x: 532 - y: 122 + y: 80 width: 244 height: 136 checkable: true - styles: glass_toggle_amber + styles: md3_card_amber checked: bg_color: 0xFFDCBE bg_opa: 100% + border_color: 0xFFDCBE + border_opa: 100% text_color: 0x2C1600 on_click: - homeassistant.service: @@ -1635,35 +2367,38 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Lamppost 2" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" + - button: id: btn_outside_porch_decor_outlet x: 24 - y: 270 + y: 228 width: 244 height: 136 checkable: true - styles: glass_toggle_green + styles: md3_card_green checked: bg_color: 0x66F9B9 bg_opa: 100% + border_color: 0x66F9B9 + border_opa: 100% text_color: 0x003825 on_click: - homeassistant.service: @@ -1674,106 +2409,232 @@ lvgl: - label: x: 204 y: 16 - styles: glass_tile_icon + styles: md3_icon text_font: mdi_icons text: "\U000F0426" # mdi:power-plug - label: x: 18 y: 16 - styles: glass_tile_meta + styles: md3_meta text: "OUTLET" - label: x: 18 y: 56 - styles: glass_tile_title + styles: md3_title text: "Porch Decor 1" - label: x: 18 y: 90 - styles: glass_tile_meta + styles: md3_meta text: "Tap to toggle" -### ROOM NAV ### - - button: - x: 20 - y: 430 - width: 100 - height: 40 - styles: room_nav_btn - on_click: - - lvgl.page.show: home + + - obj: + x: 0 + y: 408 + width: 800 + height: 72 + styles: md3_nav_bar 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" + - button: + x: 1 + y: 0 + width: 114 + 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: 115 + y: 0 + width: 114 + 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: 229 + y: 0 + width: 114 + 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: 343 + y: 0 + width: 114 + 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: 457 + y: 0 + width: 114 + 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: 571 + y: 0 + width: 114 + 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: 685 + y: 0 + width: 114 + 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"