Home-Assistant/esphome/ha-remote/ha-remote-1.ui.yaml

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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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_font: mdi_icons
                        text_color: 0xC4C6CF
                        text: "\U000F10CD"  # mdi:battery-alert-variant-outline
              - 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"