Update to the current version

configuration/ui-lovelace/000-default-page-very-last.yaml.bak

@@ -0,0 +1,764 @@
+---
+#name: Home
+#icon: mdi:home
+
+title: Security
+icon: mdi:shield-home
+#panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: vertical-stack
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: mdi:faucet-variant
+                icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_kitchen_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:sofa
+                icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_living_room_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed-king
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_master_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_maxim_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_olivia_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:stairs
+                icon_color: "{% if is_state('binary_sensor.presence_stairwell_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_stairwell_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:garage-variant
+                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_garage_sensor_1
+                tap_action:
+                  action: more-info
+
+      - type: custom:bubble-card
+        entity: alarm_control_panel.home_alarm
+        card_type: button
+        button_type: name
+        name: Security
+        icon: mdi:shield-check
+        show_state: true
+        show_last_changed: true
+        sub_button:
+          - name: Doors
+            icon: mdi:door-open
+            show_state: false
+            show_background: true
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-open-doors'
+          - name: Windows
+            icon: mdi:window-open
+            show_background: true
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-open-windows'
+          - name: Lights
+            icon: mdi:lightbulb-group
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-on-lights'
+          - name: Garage Cover
+            icon: mdi:garage-variant
+            entity: cover.garage_gate
+            tap_action:
+              confirmation:
+                text: open/Close a Garage Cover?
+              action: call-service
+              service: cover.toggle
+              target:
+                entity_id: cover.garage_gate
+          - name: Lock
+            icon: mdi:lock-smart
+            entity: lock.lock_01
+            tap_action:
+              confirmation:
+                text: Lock/Unlock a Lock?
+              action: call-service
+              service: lock.lock
+              target:
+                entity_id: lock.lock_01
+        modules:
+          - badges
+        badges:
+          main_icon:
+            badge_1:
+              icon: mdi:alert-circle-outline
+          sub_button:
+            sub_button_index: 1
+            badge_1:
+              icon: mdi:alert-circle-outline
+              color: red
+              condition:
+                - condition: numeric_state
+                  entity_id: sensor.number_doors_open
+                  above: 0
+        styles: |
+          .bubble-button-background {
+            opacity: 1 !important;
+            background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+          }
+          .bubble-sub-button-1 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-2 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-3 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-4 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-5 {
+            background-color: white !important;
+          }
+
+      - type: horizontal-stack
+        cards:
+          - image: /local/profile_savin_alex.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.alexander_savin
+          - image: /local/profile_savin_tanya.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.tatiana_savin
+      - type: horizontal-stack
+        cards:
+          - image: /local/profile_savin_maxim.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.maxim_savin
+          - image: /local/profile_savin_olivia.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.olivia_savin
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            name: Alexander Savin
+            entity: person.alexander_savin
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            modules:
+              - progress_border
+            progress_border:
+              entity: sensor.alex_s_google_pixel_8_pro_battery_level
+              color: purple
+              backcolor: deep-purple
+            styles: |
+              .bubble-entity-picture {
+                display: flex !important;
+                background-image: url("/local/profile_savin_alex.jpg") !important;
+                background-size: 300%;
+              }
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            name: Tatiana Savin
+            entity: person.tatiana_savin
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            modules:
+              - progress_border
+            progress_border:
+              entity: sensor.tanya_s_google_pixel_8_pro_battery_level
+              color: purple
+              backcolor: deep-purple
+            styles: |
+              .bubble-entity-picture {
+                display: flex !important;
+                background-image: url("/local/profile_savin_tanya.jpg") !important;
+                background-size: 300%;
+              }
+      - type: horizontal-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            name: Maxim Savin
+            entity: person.maxim_savin
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            styles: |
+              .bubble-entity-picture {
+                display: flex !important;
+                background-image: url("/local/profile_savin_maxim.jpg") !important;
+                background-size: 300%;
+              }
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            name: Olivia Savin
+            entity: person.olivia_savin
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            styles: |
+              .bubble-entity-picture {
+                display: flex !important;
+                background-image: url("/local/profile_savin_olivia.jpg") !important;
+                background-size: 300%;
+              }
+
+
+
+      - type: map
+        aspect_ratio: 100%
+        entities:
+          - entity: person.alexander_savin
+          - entity: person.tatiana_savin
+          - entity: person.maxim_savin
+          - entity: person.olivia_savin
+          - entity: device_tracker.subaru_outback_txt
+          - zone.home
+          - zone.npfd
+          - zone.work_kiswe
+          - zone.ymca_berkley_heights
+          - zone.nphs_school
+          - zone.awr_school
+#      - type: map
+#        aspect_ratio: 100%
+#        entities:
+#          - entity: person.maxim
+  - type: vertical-stack
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: 'custom:mushroom-lock-card'
+            name: Main Lock
+            entity: lock.lock_01
+            fill_container: true
+            layout: horizontal
+#            show_name: false
+#            icon: mdi:lock
+#            size: 50px
+#            state:
+#              - value: "locked"
+#                color: rgb(79, 114, 154)
+#                icon: mdi:lock-smart
+#              - value: "unlocked"
+#                color: red
+#                icon: mdi:lock-smart
+            tap_action:
+              action: toggle
+#      - type: custom:mushroom-climate-card
+#        entity: climate.living_room
+#        name: Thermostat
+#        show_temperature_control: true
+#        hvac_modes:
+#          - heat
+#          - cool
+#          - off
+#        layout: vertical
+
+      - type: custom:bubble-card
+        card_type: climate
+        entity: climate.living_room
+        sub_button:
+          - name: HVAC modes menu
+            select_attribute: hvac_modes
+            show_arrow: false
+            state_background: false
+
+#      - type: horizontal-stack
+#        cards:
+#          - type: 'custom:simple-thermostat'
+#            entity: climate.living_room
+#            step_size: 1
+#            header: false
+#            control:
+#              hvac:
+#                'off':
+#                  name: 'Off'
+#                cool:
+#                  name: A/C
+#                heat:
+#                  name: Heat
+#                heat_cool: false
+#            sensors:
+#              - entity: sensor.power_house_6_1d
+#                name: Blower Energy
+#              - entity: sensor.power_house_8_1d
+#                name: AC Energy
+
+      - type: custom:bubble-card
+        card_type: button
+        button_type: switch
+        name: Vacuum
+        entity: vacuum.roborock_s5_max
+        icon: mdi:robot-vacuum
+        show_state: true
+        show_last_changed: true
+        tap_action:
+          action: navigate
+          navigation_path: '#popup-vacuum-cleaner-kitchen'
+        button_action:
+          tap_action:
+            action: more-info
+        sub_button:
+          - name: Return to dock
+            icon: mdi:home
+            show_background: false
+            tap_action:
+              action: call-service
+              service: vacuum.return_to_base
+              target:
+                entity_id: vacuum.roborock_s5_max
+          - name: Pause
+            icon: mdi:pause
+            show_background: false
+            tap_action:
+              action: call-service
+              service: vacuum.pause
+              target:
+                entity_id: vacuum.roborock_s5_max
+          - name: Start
+            icon: mdi:play
+            tap_action:
+              action: call-service
+              service: vacuum.start
+              target:
+                entity_id: vacuum.roborock_s5_max
+        styles: |
+          .bubble-button-card-container {
+            /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
+            background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
+          }
+          /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
+          ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.roborock_s5_max'].attributes.battery_icon)}
+
+  - type: custom:layout-break
+  - type: vertical-stack
+    cards:
+      - type: weather-forecast
+        entity: weather.my_weather_station
+        secondary_info_attribute: humidity
+        show_current: true
+        show_forecast: true
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/frontyard/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/side1/person/best.jpg
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/doorbell/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/entrance/person/best.jpg
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/side2/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/backyard/person/best.jpg
+#      - type: custom:auto-entities
+#        card:
+#          type: entities
+#        filter:
+#        template: "{{states.light | map(attribute='entity_id') | list}}"
+
+
+  - type: vertical-stack
+    cards:
+      - type: 'custom:bubble-card'
+        card_type: pop-up
+        hash: '#popup-open-windows'
+        name: Windows
+        icon: 'mdi:window-open'
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Kitchen
+        icon: mdi:countertop
+        show_state: false
+        sub_button:
+          - name: Kitchen Window
+            entity: binary_sensor.window_kitchen_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Living Room
+        icon: mdi:sofa
+        show_state: false
+        sub_button:
+          - name: Front (Left)
+            entity: binary_sensor.window_living_room_front_left_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+          - name: Front (Center)
+            entity: binary_sensor.window_living_room_front_center_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+          - name: Front (Right)
+            entity: binary_sensor.window_living_room_front_right_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+          - name: Side
+            entity: binary_sensor.window_living_room_side_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-4 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+              ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+              ${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+              ${subButtonIcon[3].setAttribute("icon", hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Master Bedroom
+        icon: mdi:bed-king
+        show_state: false
+        sub_button:
+          - name: Front (Left)
+            entity: binary_sensor.window_bedroom_master_left_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+          - name: Front (Center)
+            entity: binary_sensor.window_bedroom_master_center_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+          - name: Front (Right)
+            entity: binary_sensor.window_bedroom_master_right_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+              ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+              ${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Maxim Bedroom
+        icon: mdi:bed
+        show_state: false
+        sub_button:
+          - name: Window
+            entity: binary_sensor.window_bedroom_max_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Olivia Bedroom
+        icon: mdi:bed
+        show_state: false
+        sub_button:
+          - name: Window
+            entity: binary_sensor.window_bedroom_olivia_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Master Bathroom
+        icon: mdi:shower
+        show_state: false
+        sub_button:
+          - name: Window
+            entity: binary_sensor.window_bathroom_master_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Bedroom Bathroom
+        icon: mdi:shower
+        show_state: false
+        sub_button:
+          - name: Window
+            entity: binary_sensor.window_bathroom_bedroom_01_contact
+            icon: mdi:window-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
+
+
+  - type: vertical-stack
+    cards:
+      - type: 'custom:bubble-card'
+        card_type: pop-up
+        hash: '#popup-open-doors'
+        name: Doors
+        icon: 'mdi:door-open'
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Kitchen
+        icon: mdi:countertop
+        show_state: false
+        sub_button:
+          - name: Kitchen Door
+            entity: binary_sensor.door_kitchen_01
+            icon: mdi:door-sliding
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'mdi:door-sliding-open' : 'mdi:door-sliding')}
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Living Room
+        icon: mdi:sofa
+        show_state: false
+        sub_button:
+          - name: Entrance Door
+            entity: binary_sensor.door_entrance_01
+            icon: mdi:door-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}
+      - type: 'custom:bubble-card'
+        card_type: button
+        button_type: name
+        name: Garage
+        icon: mdi:garage-variant
+        show_state: false
+        sub_button:
+          - name: Garage Gate
+            entity: binary_sensor.door_kitchen_01_contact
+            icon: mdi:garage-variant
+            show_state: false
+            show_background: true
+          - name: Garage Door
+            entity: binary_sensor.door_garage_01_contact
+            icon: mdi:door-closed
+            show_state: false
+            show_background: true
+        styles: |
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:garage-open-variant' : 'mdi:garage-variant')}
+              ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.door_garage_01_contact'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}
+
+  - type: vertical-stack
+    cards:
+      - type: 'custom:bubble-card'
+        card_type: pop-up
+        hash: '#popup-on-lights'
+        name: Doors
+        icon: 'mdi:door-open'
+      - type: custom:auto-entities
+        card:
+          type: grid
+          columns: 1
+          square: false
+        card_param: cards
+        filter:
+          include:
+            - domain: light
+              state: 'on'
+              options:
+                type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                show_attribute: false
+                show_last_changed: true
+                show_state: true
+          exclude: []
+        show_empty: true
+
+  - type: vertical-stack
+    cards:
+      - type: 'custom:bubble-card'
+        card_type: pop-up
+        hash: '#popup-vacuum-cleaner-kitchen'
+        name: Vacuum Cleaner
+        icon: 'mdi:door-open'
+      - type: horizontal-stack
+        cards:
+          - type: custom:xiaomi-vacuum-map-card
+            entity: vacuum.roborock_s5_max
+            map_source:
+              camera: camera.xiaomi_cloud_map_extractor
+            calibration_source:
+              camera: true
+            debug: false
+            map_modes:
+              - template: vacuum_clean_zone
+              - template: vacuum_goto
+              - template: vacuum_clean_zone_predefined
+                predefined_selections:
+                  - zones: [[26600,21200,23600,27000]] # Kitchen
+                  - zones: [[32700,26000,26600,20700]] # Living Room
+            map_locked: true

configuration/ui-lovelace/000-default-page.yaml.bak

@@ -0,0 +1,340 @@
+---
+#name: Home
+#icon: mdi:home
+
+title: Security
+icon: mdi:shield-home
+#panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: vertical-stack
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: mdi:faucet-variant
+                icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_kitchen_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:sofa
+                icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_living_room_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed-king
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_master_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_maxim_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:bed
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_bedroom_olivia_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:stairs
+                icon_color: "{% if is_state('binary_sensor.presence_stairwell_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_stairwell_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: mdi:garage-variant
+                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                entity: binary_sensor.presence_garage_sensor_1
+                tap_action:
+                  action: more-info
+
+      - type: custom:bubble-card
+        card_type: button
+        button_type: name
+        name: Security
+        icon: mdi:shield-check
+        show_state: true
+        show_last_changed: true
+        sub_button:
+          - name: Doors
+            icon: mdi:door-open
+            shiw_state: false
+            show_background: true
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-open-doors'
+          - name: Windows
+            icon: mdi:window-open
+            show_background: true
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-open-windows'
+          - name: Lights
+            icon: mdi:lightbulb-group
+            tap_action:
+              action: navigate
+              navigation_path: '#popup-on-lights'
+        styles: |
+          .bubble-button-background {
+            opacity: 1 !important;
+            background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+          }
+          .bubble-sub-button-1 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-2 {
+            background-color: white !important;
+          }
+          .bubble-sub-button-3 {
+            background-color: white !important;
+          }
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:mushroom-template-card
+            icon: mdi:door-open
+            icon_color: blue
+            badge_icon: "{% if states('sensor.number_doors_open') | int > 0 -%}{{ 'mdi:numeric-' + states('sensor.number_doors_open') + '-circle' }}{%- endif %}"
+            badge_color: red
+            fill_container: false
+            card_mod:
+              style: "ha-card { border: none; background: none; }"
+            tap_action:
+              action: fire-dom-event
+              browser_mod:
+                service: browser_mod.popup
+                data:
+                  title: HTML content
+                  content:
+                    type: glance
+                    entities:
+                      - binary_sensor.door_entrance_01
+                      - binary_sensor.door_kitchen_01
+                      - binary_sensor.door_garage_01_contact
+          - type: custom:mushroom-template-card
+            icon: mdi:window-open
+            icon_color: blue
+            badge_icon: "{% if states('sensor.number_windows_open') | int > 0 -%}{{ 'mdi:numeric-' + states('sensor.number_windows_open') + '-circle' }}{%- endif %}"
+            badge_color: red
+            fill_container: false
+            card_mod:
+              style: "ha-card { border: none; background: none; }"
+          - type: custom:mushroom-template-card
+            icon: mdi:lightbulb
+            icon_color: blue
+            badge_icon: "{% if states('sensor.number_light_on') | int > 0 -%}{{ 'mdi:numeric-' + states('sensor.number_light_on') + '-circle' }}{%- endif %}"
+            badge_color: red
+            fill_container: false
+            card_mod:
+              style: "ha-card { border: none; background: none; }"
+            tap_action:
+              action: fire-dom-event
+              browser_mod:
+                service: browser_mod.popup
+                data:
+                  title: HTML content
+                  content:
+                    type: glance
+                    entities:
+                      - light.aisle_ceiling_01
+                      - light.aisle_ceiling_02
+                      - light.attic_bulb_01
+                      - light.backyard_01
+                      - light.bathroom_bedroom_wall_01
+                      - light.bathroom_living_room_01
+                      - light.bathroom_master_wall_01
+                      - light.bedroom_master_ceiling_01
+                      - light.bedroom_master_ceiling_02
+                      - light.bedroom_master_floor_lamp_01
+                      - light.bedroom_master_floor_lamp_02
+                      - light.bedroom_max_ceiling_01
+                      - light.bedroom_max_table_01
+                      - light.bedroom_olivia_ceiling_01
+                      - light.bedroom_olivia_floor_01
+                      - light.christmas_tree
+                      - light.frontyard_decoration_01
+                      - light.garage_ceiling_01
+                      - light.garage_gate_01
+                      - light.kitchen_decorating_01
+                      - light.kitchen_led_01
+                      - light.kitchen_sink_01
+                      - light.light_bed_bedroom_master_01
+                      - light.light_bed_max_01
+                      - light.light_kitchen_ceiling_01
+                      - light.light_kitchen_ceiling_02
+                      - light.living_room_ceiling_01
+                      - light.living_room_ceiling_02
+                      - light.living_room_ceiling_03
+                      - light.living_room_ceiling_04
+                      - light.living_room_floor_lamp_01
+                      - light.living_room_strip_01
+                      - light.living_room_tiles_01
+                      - light.porch_01
+      - type: custom:mushroom-chips-card
+        chips:
+          - type: template
+            content: "Open Windows ({{ states('sensor.number_windows_open') | int }}) Doors ({{ states('sensor.number_doors_open') | int }}) Light ({{ states('sensor.number_light_on') | int }})"
+      - type: horizontal-stack
+        cards:
+          - image: /local/profile_savin_alex.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.alexander_savin
+          - image: /local/profile_savin_tanya.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.tatiana_savin
+      - type: horizontal-stack
+        cards:
+          - image: /local/profile_savin_maxim.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.maxim_savin
+          - image: /local/profile_savin_olivia.jpg
+            type: picture-entity
+            show_name: false
+            tap_action:
+              action: more-info
+            entity: person.olivia_savin
+      - type: map
+        aspect_ratio: 100%
+        entities:
+          - entity: person.alexander_savin
+          - entity: person.tatiana_savin
+          - entity: person.maxim_savin
+          - entity: person.olivia_savin
+          - entity: device_tracker.subaru_outback_txt
+          - zone.home
+          - zone.npfd
+          - zone.work_kiswe
+          - zone.ymca_berkley_heights
+          - zone.nphs_school
+          - zone.awr_school
+#      - type: map
+#        aspect_ratio: 100%
+#        entities:
+#          - entity: person.maxim
+  - type: vertical-stack
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: 'custom:mushroom-lock-card'
+            name: Main Lock
+            entity: lock.lock_01
+            fill_container: true
+            layout: horizontal
+#            show_name: false
+#            icon: mdi:lock
+#            size: 50px
+#            state:
+#              - value: "locked"
+#                color: rgb(79, 114, 154)
+#                icon: mdi:lock-smart
+#              - value: "unlocked"
+#                color: red
+#                icon: mdi:lock-smart
+            tap_action:
+              action: toggle
+#      - type: custom:mushroom-climate-card
+#        entity: climate.living_room
+#        name: Thermostat
+#        show_temperature_control: true
+#        hvac_modes:
+#          - heat
+#          - cool
+#          - off
+#        layout: vertical
+
+      - type: horizontal-stack
+        cards:
+          - type: 'custom:simple-thermostat'
+            entity: climate.living_room
+            step_size: 1
+            header: false
+            control:
+              hvac:
+                'off':
+                  name: 'Off'
+                cool:
+                  name: A/C
+                heat:
+                  name: Heat
+                heat_cool: false
+            sensors:
+              - entity: sensor.power_house_6_1d
+                name: Blower Energy
+              - entity: sensor.power_house_8_1d
+                name: AC Energy
+#      - type: alarm-panel
+#        entity: alarm_control_panel.alarm
+#        title: Alarm Panel
+#        hide_keypad: false
+#        style: '--alarm-color-disarmed: var(--label-badge-blue);'
+#        states:
+#          - arm_home
+#          - arm_away
+#      - type: thermostat
+#        entity: climate.living_room
+      - type: horizontal-stack
+        cards:
+          - type: custom:xiaomi-vacuum-map-card
+            entity: vacuum.roborock_s5_max
+            map_source:
+              camera: camera.xiaomi_cloud_map_extractor
+            calibration_source:
+              camera: true
+            debug: false
+            map_modes:
+              - template: vacuum_clean_zone
+              - template: vacuum_goto
+              - template: vacuum_clean_zone_predefined
+                predefined_selections:
+                  - zones: [[26600,21200,23600,27000]] # Kitchen
+                  - zones: [[32700,26000,26600,20700]] # Living Room
+            map_locked: true
+  - type: vertical-stack
+    cards:
+      - type: weather-forecast
+        entity: weather.my_weather_station
+        secondary_info_attribute: humidity
+        show_current: true
+        show_forecast: true
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/frontyard/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/side1/person/best.jpg
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/doorbell/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/entrance/person/best.jpg
+      - type: horizontal-stack
+        cards:
+          - type: picture
+            image: https://objects.savin.nyc/api/side2/person/best.jpg
+          - type: picture
+            image: https://objects.savin.nyc/api/backyard/person/best.jpg
+#      - type: custom:auto-entities
+#        card:
+#          type: entities
+#        filter:
+#        template: "{{states.light | map(attribute='entity_id') | list}}"

configuration/ui-lovelace/030-kitchen.yaml

@@ -7,12 +7,15 @@ visible:
   - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
 cards:
   - type: custom:layout-card
-    layout: vertical
+    layout_type: custom:vertical-layout
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
           - type: custom:mushroom-chips-card
             chips:
+
               - type: template
                 icon: "{% if is_state('binary_sensor.presence_kitchen_sensor_2', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
                 icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_2', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
@@ -33,187 +36,178 @@ cards:
                 entity: binary_sensor.door_kitchen_01
                 tap_action:
                   action: more-info
-          - type: custom:stack-in-card
-            cards:
-              - type: grid
-                columns: 2
-                square: false
-                cards:
-                  - type: custom:mushroom-entity-card
-                    entity: input_boolean.kitchen_light_state
-                    name: Kitchen
-                    icon: mdi:lightbulb-group
-                    tap_action:
-                      action: toggle
-                    card_mod:
-                      style: "ha-card { border: none; }"
-                  - type: custom:paper-buttons-row
-                    preset: mushroom
-                    styles:
-                      justify-content: flex-end
-                    base_config:
-                      styles:
-                        button:
-                          margin-top: 12px
-                          margin-right: 12px
-                    buttons:
-                      - layout: icon
-                        icon: mdi:lightbulb-group
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.kitchen_scenes
-                            option: "All"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:countertop-outline
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.kitchen_scenes
-                            option: "Work Zone Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Work Zone Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Work Zone Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:food-turkey
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.kitchen_scenes
-                            option: "Dinning Zone Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Dinning Zone Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Dinning Zone Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:ceiling-light-multiple
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.kitchen_scenes
-                            option: "Ceiling Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:globe-light-outline
-                        tap_action:
-                          action: call-service
-                          service: light.toggle
-                          service_data:
-                            entity_id: light.kitchen_decorating_01
-                        styles:
-                          button:
-                            color: "{% if is_state('light.kitchen_decorating_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('light.kitchen_decorating_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-#                name: Temperature
-                line_color: orange
-                font_size: 60
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_kitchen_01_temperature
-#                    name: Temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-                  icon: false
-#                card_mod:
-#                  style: |
-#                    ha-card {
-#                      background: url("/local/outback.jpg");
-#                      background-size: 100% 400px;
-#                    }
-              - type: custom:mini-graph-card
-                name: Humidity
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_kitchen_01_humidity
-                    name: Humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                name: Illuminance
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.presence_kitchen_light_level_2
-                    name: Illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                name: Ppm25
-                line_color: green
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_kitchen_02_pm25
-                    name: Ppm25
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.kitchen_sink_01
-                name: 'Kitchen Sink #01'
-                icon: mdi:ceiling-light
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.kitchen_led_01
-                name: 'Kitchen LED #01'
-                icon: mdi:led-strip-variant
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.kitchen_ceiling_01
-                name: 'Kitchen Ceiling #1'
-                icon: mdi:dome-light
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.kitchen_ceiling_02
-                name: 'Kitchen Ceiling #2'
-                icon: mdi:dome-light
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
+
+###################################################################################################
+###   KITCHEN CLIMATE   ###########################################################################
+###################################################################################################
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:countertop-outline
+            sub_button:
+              - name: Temp
+                icon: mdi:thermometer-lines
+                entity: sensor.climate_kitchen_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: mdi:water-percent
+                entity: sensor.climate_kitchen_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: mdi:weather-sunny
+                entity: sensor.presence_kitchen_light_level_2
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: PM2.5
+                icon: mdi:blur
+                entity: sensor.climate_kitchen_02_pm25
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+
+      - type: vertical-stack
+        cards:
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Occupancy
+            entity: input_boolean.occupancy_kitchen
+            icon: 'mdi:account-multiple'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: sensor.kitchen_person_count
+                icon: 'mdi:account-group'
+                show_state: false
+                show_background: true
+              - entity: sensor.kitchen_cat_count
+                icon: 'mdi:cat'
+                show_state: false
+                show_background: true
+              - icon: 'mdi:brightness-auto'
+                entity: input_boolean.manually_operated_light_kitchen
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: toggle
+            styles: >
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['sensor.kitchen_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['sensor.kitchen_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+              ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_kitchen'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}
+            modules:
+
+###################################################################################################
+###   KITCHEN LIGHTS   ############################################################################
+###################################################################################################
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            name: Light
+            entity: input_boolean.kitchen_light_state
+            icon: mdi:lightbulb-group
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#popup-kitchen-light'
+            sub_button:
+              - icon: mdi:lightbulb-group
+                entity: scene.kitchen_all
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "All"
+              - icon: mdi:countertop-outline
+                entity: scene.kitchen_work_zone_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Work Zone Only"
+              - icon: mdi:food-turkey
+                entity: scene.kitchen_dinning_zone_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Dinning Zone Only"
+              - icon: mdi:ceiling-light-multiple
+                entity: scene.kitchen_ceiling_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Ceiling Only"
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Work Zone Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Dinning Zone Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+
       - type: custom:layout-break
+
       - type: vertical-stack
         cards:
           - type: 'custom:webrtc-camera'
@@ -221,38 +215,120 @@ cards:
             title: 'Kitchen'
             muted: true
             mode: webrtc,mse
+
       - type: custom:layout-break
+
       - type: vertical-stack
         cards:
-#          - type: entities
-#            title: Lights
-#            show_header_toggle: false
-#            entities:
-#              - entity: timer.app_lighting_kitchen
-#          - type: custom:flipdown-timer-card
-#            entity: timer.app_lighting_kitchen
-#            show_hour: false
-#            show_title: false
-#            show_header: false
-#            duration: "00:01:00"
-#            styles:
-#              rotor:
-#                width: 60px
-#                height: 80px
-#              button:
-#                width: 60px
-#                location: bottom
-          - type: horizontal-stack
-            cards:
-              - type: button
-                name: Occupancy
-                entity: input_boolean.occupancy_kitchen
-              - type: button
-                name: Operating Mode
-                entity: input_boolean.manually_operated_light_kitchen
-              - type: button
-                name: Occupants
-                entity: input_number.occupants_kitchen
-          - type: custom:mini-media-player
+
+###################################################################################################
+###   KITCHEN MAX   ###########################################################   BUBBLE CARD   ###
+###################################################################################################
+          - type: custom:bubble-card
+            card_type: media-player
             entity: media_player.kitchen_max
-            artwork: cover
+            grid_options:
+              rows: 2
+              columns: 12
+            scrolling_effect: false
+            show_icon: true
+            show_state: false
+            show_attribute: false
+            hide:
+              play_pause_button: false
+              power_button: true
+              next_button: false
+              previous_button: false
+              volume_button: false
+            card_layout: large
+            cover_background: true
+            sub_button: []
+            name: "Kitchen Max"
+            force_icon: false
+            show_name: true
+            show_last_changed: false
+            double_tap_action:
+              action: none
+            hold_action:
+              action: none
+            styles: |
+                ha-card div.bubble-media-player-container {
+                  height: 119px !important;
+                }
+                ha-card div.bubble-cover-background {
+                  filter: blur(3px);
+                  opacity: 0.4;
+                }
+                  ha-card div.bubble-media-player {
+                  bottom: 30px;
+                }
+                ha-card div.bubble-media-info-container {
+                  display: inline;
+                  position: absolute;
+                  top: 95px;
+                  left: 16px
+                }
+                ha-card div.bubble-name-container {
+                  display: inline !important;
+                }
+
+                ha-icon.bubble-play-pause-button {
+                  position: absolute;
+                  bottom: -22px;
+                  right: 8px;
+                }
+
+###################################################################################################
+###   KITCHEN LIGHTS   ##############################################################   POPUP   ###
+###################################################################################################
+          - type: vertical-stack
+            cards:
+              - type: custom:bubble-card
+                card_type: pop-up
+                hash: '#popup-kitchen-light'
+                name: Kitchen
+                icon: mdi:fridge
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: Sink
+                entity: light.kitchen_sink_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: LED
+                entity: light.kitchen_led_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #1'
+                entity: light.kitchen_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #2'
+                entity: light.kitchen_ceiling_02
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle

configuration/ui-lovelace/030-kitchen.yaml.bak

@@ -0,0 +1,258 @@
+---
+title: Kitchen
+icon: mdi:countertop
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: "{% if is_state('binary_sensor.presence_kitchen_sensor_2', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_2', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                badge_icon: mdi:numeric-1-circle
+                badge_color: green
+                entity: binary_sensor.presence_kitchen_sensor_2
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_kitchen_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_kitchen_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_kitchen_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.door_kitchen_01', 'on') -%}mdi:door-sliding-open{%- else -%}mdi:door-sliding{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.door_kitchen_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.door_kitchen_01
+                tap_action:
+                  action: more-info
+          - type: custom:stack-in-card
+            cards:
+              - type: grid
+                columns: 2
+                square: false
+                cards:
+                  - type: custom:mushroom-entity-card
+                    entity: input_boolean.kitchen_light_state
+                    name: Kitchen
+                    icon: mdi:lightbulb-group
+                    tap_action:
+                      action: toggle
+                    card_mod:
+                      style: "ha-card { border: none; }"
+                  - type: custom:paper-buttons-row
+                    preset: mushroom
+                    styles:
+                      justify-content: flex-end
+                    base_config:
+                      styles:
+                        button:
+                          margin-top: 12px
+                          margin-right: 12px
+                    buttons:
+                      - layout: icon
+                        icon: mdi:lightbulb-group
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.kitchen_scenes
+                            option: "All"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:countertop-outline
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.kitchen_scenes
+                            option: "Work Zone Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Work Zone Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Work Zone Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:food-turkey
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.kitchen_scenes
+                            option: "Dinning Zone Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Dinning Zone Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Dinning Zone Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:ceiling-light-multiple
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.kitchen_scenes
+                            option: "Ceiling Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.kitchen_light_state', 'on') and is_state('input_select.kitchen_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:globe-light-outline
+                        tap_action:
+                          action: call-service
+                          service: light.toggle
+                          service_data:
+                            entity_id: light.kitchen_decorating_01
+                        styles:
+                          button:
+                            color: "{% if is_state('light.kitchen_decorating_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('light.kitchen_decorating_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+#                name: Temperature
+                line_color: orange
+                font_size: 60
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_kitchen_01_temperature
+#                    name: Temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+                  icon: false
+#                card_mod:
+#                  style: |
+#                    ha-card {
+#                      background: url("/local/outback.jpg");
+#                      background-size: 100% 400px;
+#                    }
+              - type: custom:mini-graph-card
+                name: Humidity
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_kitchen_01_humidity
+                    name: Humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                name: Illuminance
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_kitchen_light_level_2
+                    name: Illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                name: Ppm25
+                line_color: green
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_kitchen_02_pm25
+                    name: Ppm25
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.kitchen_sink_01
+                name: 'Kitchen Sink #01'
+                icon: mdi:ceiling-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.kitchen_led_01
+                name: 'Kitchen LED #01'
+                icon: mdi:led-strip-variant
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.kitchen_ceiling_01
+                name: 'Kitchen Ceiling #1'
+                icon: mdi:dome-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.kitchen_ceiling_02
+                name: 'Kitchen Ceiling #2'
+                icon: mdi:dome-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: 'custom:webrtc-camera'
+            url: 'rtsp://10.10.11.110:8554/kitchen'
+            title: 'Kitchen'
+            muted: true
+            mode: webrtc,mse
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_kitchen
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_kitchen
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_kitchen
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_kitchen
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_kitchen
+          - type: custom:mini-media-player
+            entity: media_player.kitchen_max
+            artwork: cover

configuration/ui-lovelace/040-living-room.yaml

@@ -1,397 +1,528 @@
 ---
 title: Living Room
-icon: mdi:sofa
+icon: 'mdi:sofa'
 panel: true
 visible:
-  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
-  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+  - user: 1614b22cbef54f979741cf8a6b3413ec
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a
 cards:
-  - type: custom:layout-card
-    layout: vertical
+  - type: 'custom:layout-card'
+    layout_type: 'custom:vertical-layout'
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
-          - type: custom:mushroom-chips-card
+          - type: 'custom:mushroom-chips-card'
             chips:
               - type: template
-                icon: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
-                badge_icon: mdi:numeric-1-circle
+                icon: >-
+                  {% if is_state('binary_sensor.presence_living_room_sensor_1',
+                  'on') -%}mdi:account-multiple{%- else
+                  -%}mdi:account-off-outline{%- endif %}
+                icon_color: >-
+                  {% if is_state('binary_sensor.presence_living_room_sensor_1',
+                  'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}
+                badge_icon: 'mdi:numeric-1-circle'
                 badge_color: green
                 entity: binary_sensor.presence_living_room_sensor_1
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_living_room_front_left_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_living_room_front_left_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_left_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_left_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_living_room_front_left_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_living_room_front_center_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_living_room_front_center_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_center_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_center_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_living_room_front_center_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_living_room_front_right_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_living_room_front_right_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_right_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_front_right_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_living_room_front_right_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_living_room_side_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_living_room_side_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_side_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_living_room_side_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_living_room_side_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.smoke_living_room_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.smoke_living_room_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if is_state('binary_sensor.smoke_living_room_01_smoke',
+                  'on') -%}mdi:smoke-detector-variant-alert{%- else
+                  -%}mdi:smoke-detector-variant{%- endif %}
+                icon_color: >-
+                  {% if is_state('binary_sensor.smoke_living_room_01_smoke',
+                  'on') -%}#D40909{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.smoke_living_room_01_smoke
                 tap_action:
                   action: more-info
-          - type: custom:stack-in-card
-            cards:
-              - type: grid
-                columns: 2
-                square: false
-                cards:
-                  - type: custom:mushroom-entity-card
-                    entity: input_boolean.living_room_light_state
-                    name: Living Room
-                    icon: mdi:lightbulb-group
-                    tap_action:
-                      action: toggle
-                    card_mod:
-                      style: "ha-card { border: none; }"
-                  - type: custom:paper-buttons-row
-                    preset: mushroom
-                    styles:
-                      justify-content: flex-end
-                    base_config:
-                      styles:
-                        button:
-                          margin-top: 12px
-                          margin-right: 12px
-                    buttons:
-                      - layout: icon
-                        icon: mdi:lightbulb-group
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.living_room_scenes
-                            option: "All"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:ceiling-light-multiple
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.living_room_scenes
-                            option: "Ceiling Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:floor-lamp-torchiere
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.living_room_scenes
-                            option: "Floor Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Floor Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Floor Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:sofa'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_living_room_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_living_room_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.presence_living_room_light_level
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
       - type: vertical-stack
         cards:
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-#                name: Temperature
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_living_room_01_temperature
-#                    name: Temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Humidity
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_living_room_01_humidity
-#                    name: Humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Illuminance
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.presence_living_room_light_level
-#                    name: Illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.living_room_ceiling_all
-                name: All Ceiling Lings
-                icon: mdi:ceiling-light-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.living_room_floor_lamp_01
-                name: Floor Lamp
-                icon: mdi:floor-lamp-torchiere-outline
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.living_room_ceiling_group_1
-                name: 'Ceiling 1 (Couch)'
-                icon: mdi:ceiling-light-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.living_room_ceiling_group_2
-                name: 'Ceiling 2 (TV)'
-                icon: mdi:ceiling-light-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.living_room_tiles_01
-                name: 'Tile'
-                icon: mdi:star-box-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.living_room_strip_01
-                name: 'LED Strip'
-                icon: mdi:led-strip-variant
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.christmas_tree
-                name: 'Christmas Tree'
-                icon: mdi:string-lights
-                show_brightness_control: false
-                collapsible_controls: false
-                use_light_color: false
-      - type: custom:layout-break
-      - type: vertical-stack
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Occupancy
+            entity: input_boolean.occupancy_living_room
+            icon: 'mdi:account-multiple'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: sensor.living_room_01_person_count
+                icon: 'mdi:account-group'
+                show_state: false
+                show_background: true
+              - entity: sensor.living_room_01_cat_count
+                icon: 'mdi:cat'
+                show_state: false
+                show_background: true
+              - icon: 'mdi:brightness-auto'
+                entity: input_boolean.manually_operated_light_living_room
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: toggle
+            styles: >
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['sensor.living_room_01_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['sensor.living_room_01_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+              ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_living_room'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Light
+            entity: input_boolean.living_room_light_state
+            icon: 'mdi:lightbulb-group'
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#popup-living-room-light'
+            sub_button:
+              - icon: 'mdi:lightbulb-group'
+                entity: scene.living_room_all
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.living_room_scenes
+                    option: All
+              - icon: 'mdi:ceiling-light-multiple'
+                entity: scene.living_room_ceiling_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.living_room_scenes
+                    option: Ceiling Only
+              - icon: 'mdi:ceiling-light-multiple'
+                entity: scene.living_room_ceiling_group_1_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.living_room_scenes
+                    option: Ceiling Group 1 Only
+              - icon: 'mdi:ceiling-light-multiple'
+                entity: scene.living_room_ceiling_group_2_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.living_room_scenes
+                    option: Ceiling Group 2 Only
+              - icon: 'mdi:floor-lamp-torchiere-outline'
+                entity: scene.living_room_floor_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.living_room_scenes
+                    option: Floor Only
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.living_room_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.living_room_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.living_room_scenes'].state === 'Ceiling Group 1 Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${hass.states['input_select.living_room_scenes'].state === 'Ceiling Group 2 Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-5 > ha-icon {
+                color: ${hass.states['input_select.living_room_scenes'].state === 'Floor Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+
+      - type: 'custom:layout-break'
+      - type: 'vertical-stack'
         cards:
           - type: 'custom:webrtc-camera'
             url: 'rtsp://10.10.11.110:8554/living-room-01'
-            title: 'Living Room 1'
+            title: Living Room 1
             muted: true
-            mode: webrtc,mse
+            mode: 'webrtc,mse'
           - type: 'custom:webrtc-camera'
             url: 'rtsp://10.10.11.110:8554/living-room-02'
-            title: 'Living Room 2'
+            title: Living Room 2
             muted: true
-            mode: webrtc,mse
-      - type: custom:layout-break
-      - type: vertical-stack
+            mode: 'webrtc,mse'
+
+      - type: 'custom:layout-break'
+      - type: 'vertical-stack'
         cards:
-#          - type: entities
-#            title: Lights
-#            show_header_toggle: false
-#            entities:
-#              - entity: timer.app_lighting_kitchen
-#          - type: custom:flipdown-timer-card
-#            entity: timer.app_lighting_kitchen
-#            show_hour: false
-#            show_title: false
-#            show_header: false
-#            duration: "00:01:00"
-#            styles:
-#              rotor:
-#                width: 60px
-#                height: 80px
-#              button:
-#                width: 60px
-#                location: bottom
-          - type: horizontal-stack
-            cards:
-              - type: button
-                name: Occupancy
-                entity: input_boolean.occupancy_living_room
-              - type: custom:button-card
-                name: Operating Mode
-                entity: input_boolean.manually_operated_light_living_room
-                state:
-                  - value: 'on'
-                    icon: mdi:hand-front-right
-                    color: orange
-                  - value: 'off'
-                    icon: mdi:brightness-auto
-              - type: button
-                name: Occupants
-                entity: input_number.occupants_living_room
-          - type: custom:mini-media-player
-            entity: media_player.pioneer_vsx_lx505_f5bae6
-            artwork: cover
-#          - type: custom:mini-media-player
-#            entity: media_player.living_room_pair
-#            artwork: cover
-          - type: custom:mini-media-player
+          - type: 'custom:mini-media-player'
             entity: media_player.living_room_speaker
             artwork: cover
-#          - type: custom:mini-media-player
-#            entity: media_player.living_room_max_1
-#            artwork: cover
-#          - type: custom:mini-media-player
-#            entity: media_player.living_room_max_2
-#            artwork: cover
-          - type: custom:mini-media-player
-            entity: media_player.living_room_1
-            artwork: cover
-          - type: custom:mini-media-player
-            entity: media_player.nvidia_shield_tv_living_room
-            artwork: cover
-          - type: media-control
-            entity: media_player.onkyo_receiver
+          - type: 'custom:bubble-card'
+            card_type: button
+            entity: remote.living_room_harmony_hub
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: select.living_room_harmony_hub_activities
+                name: TV
+                icon: 'mdi:television'
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: select.select_option
+                  data:
+                    option: ShTV+AVR+TV
+              - entity: select.living_room_harmony_hub_activities
+                name: Projector
+                icon: 'mdi:projector'
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: select.select_option
+                  data:
+                    option: ShTV+AVR+Prj
+            styles: >
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              /* .bubble-button-card-container { background-color: ${state === 'on' ? 'rgb(255, 150, 0)' : ''} !important; opacity: 1 !important; } */
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['remote.living_room_harmony_hub'].attributes.current_activity === 'ShTV+AVR+TV' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['remote.living_room_harmony_hub'].attributes.current_activity === 'ShTV+AVR+Prj' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
           - type: conditional
             conditions:
-              - condition: state
-                entity: media_player.onkyo_receiver
-                state: "on"
+              - entity: remote.living_room_harmony_hub
+                state: 'on'
             card:
-              type: horizontal-stack
-              cards:
-                - name: Nvidia ShieldTV
-                  entity: script.receiver_switch_to_shield_tv
-                  type: button
-                  icon: mdi:youtube-tv
-                  tap_action:
-                    action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-                  color: "{% if state_attr('media_player.onkyo_receiver', 'source') == 'Nvidia Shield TV' -%}#FFC107{%- else -%}#44739E{%- endif %}"
-                  color_type: icon
-                - name: PS4
-                  entity: script.receiver_switch_to_playstation
-                  type: button
-                  icon: mdi:sony-playstation
-                  tap_action:
-                    action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-                - name: Win11
-                  entity: script.receiver_switch_to_windows
-                  type: button
-                  icon: mdi:microsoft-windows
-                  tap_action:
-                    action: toggle
-                  show_name: false
-                  show_icon: true
+              type: 'custom:bubble-card'
+              card_type: button
+              button_type: switch
+              card_layout: normal
+              name: Pioneer VSX-LX505
+              entity: media_player.onkyo_receiver
+              icon: 'mdi:audio-video'
+              show_state: true
+              show_background: false
+              show_attribute: true
+              attribute: source
+              button_action:
+                tap_action: null
+                action: toggle
+              sub_button:
+                - entity: script.receiver_switch_to_shield_tv
+                  icon: 'mdi:television-classic'
+                  show_background: true
                   show_state: false
-                - name: Cameras
-                  entity: script.receiver_switch_to_security
-                  type: button
-                  icon: mdi:camera-wireless
                   tap_action:
                     action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-          - type: conditional
-            conditions:
-              - condition: state
-                entity: media_player.onkyo_receiver
-                state: "on"
-              - condition: state
-                entity: switch.onkyo_source_nvidia_shield_tv
-                state: "on"
-            card:
-              type: horizontal-stack
-              cards:
-                - name: youtube
-                  entity: switch.android_tv_youtube
-                  type: button
-                  icon: mdi:youtube
+                - entity: script.receiver_switch_to_playstation
+                  icon: 'mdi:controller'
+                  show_background: true
+                  show_state: false
                   tap_action:
                     action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-                - name: Netflix
-                  entity: switch.android_tv_netflix
-                  type: button
-                  icon: mdi:netflix
+                - entity: script.receiver_switch_to_security
+                  icon: 'mdi:camera-metering-matrix'
+                  show_background: true
+                  show_state: false
                   tap_action:
                     action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-                - name: Plex
-                  entity: switch.android_tv_plex
-                  type: button
-                  icon: mdi:plex
+                - entity: script.receiver_switch_to_windows
+                  icon: 'mdi:laptop'
+                  show_background: true
+                  show_state: false
+                  tap_action:
+                    action: toggle
+              styles: |
+                .bubble-button-background {
+                  opacity: 1 !important;
+                  background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+                }
+                .bubble-sub-button-1 {
+                  display: ${hass.states['media_player.onkyo_receiver'].state === 'off' ? 'none' : ''} !important;
+                }
+                .bubble-sub-button-1 > ha-icon {
+                  color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Nvidia Shield TV' ? 'rgb(255, 152, 0)' : '' } !important;
+                }
+                .bubble-sub-button-2 {
+                  display: ${hass.states['media_player.onkyo_receiver'].state === 'off' ? 'none' : ''} !important;
+                }
+                .bubble-sub-button-2 > ha-icon {
+                  color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'PlayStation 4 Pro' ? 'rgb(255, 152, 0)' : '' } !important;
+                }
+                .bubble-sub-button-3 {
+                  display: ${hass.states['media_player.onkyo_receiver'].state === 'off' ? 'none' : ''} !important;
+                }
+                .bubble-sub-button-3 > ha-icon {
+                  color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Unifi Protect' ? 'rgb(255, 152, 0)' : '' } !important;
+                }
+                .bubble-sub-button-4 {
+                  display: ${hass.states['media_player.onkyo_receiver'].state === 'off' ? 'none' : ''} !important;
+                }
+                .bubble-sub-button-4 > ha-icon {
+                  color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Windows 11' ? 'rgb(255, 152, 0)' : '' } !important;
+                }
+          - type: 'custom:bubble-card'
+            card_type: button
+            entity: media_player.nvidia_shield_tv_living_room_2
+            sub_button:
+              - entity: switch.android_tv_youtube
+                icon: 'mdi:youtube'
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+              - entity: switch.android_tv_netflix
+                icon: 'mdi:netflix'
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+              - entity: switch.android_tv_plex
+                icon: 'mdi:plex'
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                display: ${hass.states['media_player.nvidia_shield_tv_living_room_2'].state === 'off' ? 'none' : ''} !important;
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.google.android.youtube.tv' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                display: ${hass.states['media_player.nvidia_shield_tv_living_room_2'].state === 'off' ? 'none' : ''} !important;
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.netflix.ninja' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                display: ${hass.states['media_player.nvidia_shield_tv_living_room_2'].state === 'off' ? 'none' : ''} !important;
+                background-color: white !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.plexapp.android' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+          - type: vertical-stack
+            cards:
+              - type: 'custom:bubble-card'
+                card_type: pop-up
+                hash: '#popup-living-room-light'
+                name: Kitchen
+                icon: 'mdi:fridge'
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: All Ceiling Lights
+                entity: light.living_room_ceiling_all
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: Floor Lamp
+                entity: light.living_room_floor_lamp
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: Ceiling 1 (Couch)
+                entity: light.living_room_ceiling_group_1
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: Ceiling 2 (TV)
+                entity: light.living_room_ceiling_group_2
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: Tile
+                entity: light.living_room_tiles_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: LED Strip
+                entity: light.living_room_strip_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: Christmas Tree
+                entity: light.christmas_tree
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
                   tap_action:
                     action: toggle
-                  hold_action:
-                    action: more-info
-                  show_name: false
-                  show_icon: true
-
-#              - name: Go to sleep
-#                entity: script.sleep
-#                type: button
-#                tap_action:
-#                  action: toggle
-#                  icon: mdi:sleep
-#                hold_action:
-#                  action: more-info
-#                show_name: true
-#                show_icon: true
-          - type: media-control
-            entity: media_player.playstation_4_pro
-          - type: entities
-            entities:
-              - remote.living_room_harmony_hub
-              - select.living_room_harmony_hub_activities

configuration/ui-lovelace/040-living-room.yaml.bak

@@ -0,0 +1,397 @@
+---
+title: Living Room
+icon: mdi:sofa
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                badge_icon: mdi:numeric-1-circle
+                badge_color: green
+                entity: binary_sensor.presence_living_room_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_living_room_front_left_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_living_room_front_left_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_living_room_front_left_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_living_room_front_center_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_living_room_front_center_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_living_room_front_center_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_living_room_front_right_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_living_room_front_right_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_living_room_front_right_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_living_room_side_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_living_room_side_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_living_room_side_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.smoke_living_room_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.smoke_living_room_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.smoke_living_room_01_smoke
+                tap_action:
+                  action: more-info
+          - type: custom:stack-in-card
+            cards:
+              - type: grid
+                columns: 2
+                square: false
+                cards:
+                  - type: custom:mushroom-entity-card
+                    entity: input_boolean.living_room_light_state
+                    name: Living Room
+                    icon: mdi:lightbulb-group
+                    tap_action:
+                      action: toggle
+                    card_mod:
+                      style: "ha-card { border: none; }"
+                  - type: custom:paper-buttons-row
+                    preset: mushroom
+                    styles:
+                      justify-content: flex-end
+                    base_config:
+                      styles:
+                        button:
+                          margin-top: 12px
+                          margin-right: 12px
+                    buttons:
+                      - layout: icon
+                        icon: mdi:lightbulb-group
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.living_room_scenes
+                            option: "All"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:ceiling-light-multiple
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.living_room_scenes
+                            option: "Ceiling Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:floor-lamp-torchiere
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.living_room_scenes
+                            option: "Floor Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Floor Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.living_room_light_state', 'on') and is_state('input_select.living_room_scenes', 'Floor Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+#                name: Temperature
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_living_room_01_temperature
+#                    name: Temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Humidity
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_living_room_01_humidity
+#                    name: Humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Illuminance
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_living_room_light_level
+#                    name: Illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.living_room_ceiling_all
+                name: All Ceiling Lings
+                icon: mdi:ceiling-light-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.living_room_floor_lamp_01
+                name: Floor Lamp
+                icon: mdi:floor-lamp-torchiere-outline
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.living_room_ceiling_group_1
+                name: 'Ceiling 1 (Couch)'
+                icon: mdi:ceiling-light-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.living_room_ceiling_group_2
+                name: 'Ceiling 2 (TV)'
+                icon: mdi:ceiling-light-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.living_room_tiles_01
+                name: 'Tile'
+                icon: mdi:star-box-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.living_room_strip_01
+                name: 'LED Strip'
+                icon: mdi:led-strip-variant
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.christmas_tree
+                name: 'Christmas Tree'
+                icon: mdi:string-lights
+                show_brightness_control: false
+                collapsible_controls: false
+                use_light_color: false
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: 'custom:webrtc-camera'
+            url: 'rtsp://10.10.11.110:8554/living-room-01'
+            title: 'Living Room 1'
+            muted: true
+            mode: webrtc,mse
+          - type: 'custom:webrtc-camera'
+            url: 'rtsp://10.10.11.110:8554/living-room-02'
+            title: 'Living Room 2'
+            muted: true
+            mode: webrtc,mse
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_kitchen
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_kitchen
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_living_room
+              - type: custom:button-card
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_living_room
+                state:
+                  - value: 'on'
+                    icon: mdi:hand-front-right
+                    color: orange
+                  - value: 'off'
+                    icon: mdi:brightness-auto
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_living_room
+          - type: custom:mini-media-player
+            entity: media_player.pioneer_vsx_lx505_f5bae6
+            artwork: cover
+#          - type: custom:mini-media-player
+#            entity: media_player.living_room_pair
+#            artwork: cover
+          - type: custom:mini-media-player
+            entity: media_player.living_room_speaker
+            artwork: cover
+#          - type: custom:mini-media-player
+#            entity: media_player.living_room_max_1
+#            artwork: cover
+#          - type: custom:mini-media-player
+#            entity: media_player.living_room_max_2
+#            artwork: cover
+          - type: custom:mini-media-player
+            entity: media_player.living_room_1
+            artwork: cover
+          - type: custom:mini-media-player
+            entity: media_player.nvidia_shield_tv_living_room
+            artwork: cover
+          - type: media-control
+            entity: media_player.onkyo_receiver
+          - type: conditional
+            conditions:
+              - condition: state
+                entity: media_player.onkyo_receiver
+                state: "on"
+            card:
+              type: horizontal-stack
+              cards:
+                - name: Nvidia ShieldTV
+                  entity: script.receiver_switch_to_shield_tv
+                  type: button
+                  icon: mdi:youtube-tv
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+                  color: "{% if state_attr('media_player.onkyo_receiver', 'source') == 'Nvidia Shield TV' -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                  color_type: icon
+                - name: PS4
+                  entity: script.receiver_switch_to_playstation
+                  type: button
+                  icon: mdi:sony-playstation
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+                - name: Win11
+                  entity: script.receiver_switch_to_windows
+                  type: button
+                  icon: mdi:microsoft-windows
+                  tap_action:
+                    action: toggle
+                  show_name: false
+                  show_icon: true
+                  show_state: false
+                - name: Cameras
+                  entity: script.receiver_switch_to_security
+                  type: button
+                  icon: mdi:camera-wireless
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+          - type: conditional
+            conditions:
+              - condition: state
+                entity: media_player.onkyo_receiver
+                state: "on"
+              - condition: state
+                entity: switch.onkyo_source_nvidia_shield_tv
+                state: "on"
+            card:
+              type: horizontal-stack
+              cards:
+                - name: youtube
+                  entity: switch.android_tv_youtube
+                  type: button
+                  icon: mdi:youtube
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+                - name: Netflix
+                  entity: switch.android_tv_netflix
+                  type: button
+                  icon: mdi:netflix
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+                - name: Plex
+                  entity: switch.android_tv_plex
+                  type: button
+                  icon: mdi:plex
+                  tap_action:
+                    action: toggle
+                  hold_action:
+                    action: more-info
+                  show_name: false
+                  show_icon: true
+
+#              - name: Go to sleep
+#                entity: script.sleep
+#                type: button
+#                tap_action:
+#                  action: toggle
+#                  icon: mdi:sleep
+#                hold_action:
+#                  action: more-info
+#                show_name: true
+#                show_icon: true
+          - type: media-control
+            entity: media_player.playstation_4_pro
+          - type: entities
+            entities:
+              - remote.living_room_harmony_hub
+              - select.living_room_harmony_hub_activities

configuration/ui-lovelace/050-bedroom-master.yaml

@@ -1,283 +1,382 @@
 ---
 title: Master Bedroom
-icon: mdi:bed-king
+icon: 'mdi:bed-king'
 panel: true
 visible:
-  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
-  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+  - user: 1614b22cbef54f979741cf8a6b3413ec
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a
 cards:
-  - type: custom:layout-card
-    layout: vertical
+  - type: 'custom:layout-card'
+    layout_type: 'custom:vertical-layout'
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
-          - type: custom:mushroom-chips-card
+          - type: 'custom:mushroom-chips-card'
             chips:
               - type: template
-                icon: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
-                badge_icon: mdi:numeric-1-circle
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.presence_bedroom_master_sensor_1',
+                  'on') -%}mdi:account-multiple{%- else
+                  -%}mdi:account-off-outline{%- endif %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.presence_bedroom_master_sensor_1',
+                  'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}
+                badge_icon: 'mdi:numeric-1-circle'
                 badge_color: green
                 entity: binary_sensor.presence_bedroom_master_sensor_1
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_bedroom_master_left_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_left_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_left_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_left_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_bedroom_master_left_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_bedroom_master_center_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_center_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_center_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_center_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_bedroom_master_center_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.window_bedroom_master_right_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_right_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_right_01_contact',
+                  'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif
+                  %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.window_bedroom_master_right_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.window_bedroom_master_right_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.door_bedroom_master_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.door_bedroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if is_state('binary_sensor.door_bedroom_master_01_contact',
+                  'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}
+                icon_color: >-
+                  {% if is_state('binary_sensor.door_bedroom_master_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.door_bedroom_master_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.door_bedroom_master_closet_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.door_bedroom_master_closet_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if
+                  is_state('binary_sensor.door_bedroom_master_closet_01_contact',
+                  'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}
+                icon_color: >-
+                  {% if
+                  is_state('binary_sensor.door_bedroom_master_closet_01_contact',
+                  'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.door_bedroom_master_closet_01_contact
                 tap_action:
                   action: more-info
               - type: template
-                icon: "{% if is_state('binary_sensor.smoke_bedroom_master_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
-                icon_color: "{% if is_state('binary_sensor.smoke_bedroom_master_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                icon: >-
+                  {% if is_state('binary_sensor.smoke_bedroom_master_01_smoke',
+                  'on') -%}mdi:smoke-detector-variant-alert{%- else
+                  -%}mdi:smoke-detector-variant{%- endif %}
+                icon_color: >-
+                  {% if is_state('binary_sensor.smoke_bedroom_master_01_smoke',
+                  'on') -%}#D40909{%- else -%}#44739E{%- endif %}
                 entity: binary_sensor.smoke_bedroom_master_01_smoke
                 tap_action:
                   action: more-info
-          - type: custom:stack-in-card
-            cards:
-              - type: grid
-                columns: 2
-                square: false
-                cards:
-                  - type: custom:mushroom-entity-card
-                    entity: input_boolean.bedroom_master_light_state
-                    name: Master Bedroom
-                    icon: mdi:lightbulb-group
-                    tap_action:
-                      action: toggle
-                    card_mod:
-                      style: "ha-card { border: none; }"
-                  - type: custom:paper-buttons-row
-                    preset: mushroom
-                    styles:
-                      justify-content: flex-end
-                    base_config:
-                      styles:
-                        button:
-                          margin-top: 12px
-                          margin-right: 12px
-                    buttons:
-                      - layout: icon
-                        icon: mdi:lightbulb-group
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_master_scenes
-                            option: "All"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:ceiling-light-multiple
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_master_scenes
-                            option: "Ceiling Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:floor-lamp-torchiere
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_master_scenes
-                            option: "Floor Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Floor Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Floor Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:bed-queen-outline
-                        tap_action:
-                          action: call-service
-                          service: light.toggle
-                          service_data:
-                            entity_id: light.bedroom_master_bed_01
-                        styles:
-                          button:
-                            color: "{% if is_state('light.bedroom_master_bed_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('light.bedroom_master_bed_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-#                name: Temperature
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bedroom_master_01_temperature
-#                    name: Temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Humidity
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bedroom_master_01_humidity
-#                    name: Humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Illuminance
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.presence_bedroom_master_light_level
-#                    name: Illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                name: Ppm25
-                line_color: green
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bedroom_master_02_pm25
-                    name: Ppm25
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_master_floor_all
-                name: Bed Lights
-                icon: mdi:lamps
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_master_ceiling_all
-                name: Ceiling Lights
-                icon: mdi:dome-light
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_master_floor_lamp_02
-                name: "Tanya's Bed Light"
-                icon: mdi:ceiling-light-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_master_floor_lamp_01
-                name: "Alex's Bed Light"
-                icon: mdi:ceiling-light-multiple
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:sofa'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_bedroom_master_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_bedroom_master_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.presence_bedroom_master_light_level
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: PM2.5
+                icon: 'mdi:blur'
+                entity: sensor.climate_bedroom_master_02_pm25
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+      - type: vertical-stack
+        cards:
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Occupancy
+            entity: input_boolean.occupancy_bedroom_master
+            icon: 'mdi:account-multiple'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: sensor.bedroom_master_person_count
+                icon: 'mdi:account-group'
+                show_state: false
+                show_background: true
+              - entity: sensor.bedroom_master_cat_count
+                icon: 'mdi:cat'
+                show_state: false
+                show_background: true
+              - icon: 'mdi:brightness-auto'
+                entity: input_boolean.manually_operated_light_bedroom_master
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: toggle
+            styles: >
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['sensor.bedroom_master_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['sensor.bedroom_master_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              } ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_bedroom_master'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Light
+            entity: input_boolean.bedroom_master_light_state
+            icon: 'mdi:lightbulb-group'
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#popup-bedroom-master-light'
+            sub_button:
+              - icon: 'mdi:lightbulb-group'
+                entity: scene.bedroom_master_all
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_master_scenes
+                    option: All
+              - icon: 'mdi:ceiling-light-multiple'
+                entity: scene.bedroom_master_ceiling_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_master_scenes
+                    option: Ceiling Only
+              - icon: 'mdi:floor-lamp-torchiere'
+                entity: scene.bedroom_master_floor_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_master_scenes
+                    option: Floor Only
+              - icon: 'mdi:bed-king-outline'
                 entity: light.bedroom_master_bed_01
-                name: 'Bed Light'
-                icon: mdi:led-strip-variant
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-      - type: custom:layout-break
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: light.toggle
+                  service_data:
+                    entity_id: light.bedroom_master_bed_01
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.bedroom_master_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.bedroom_master_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.bedroom_master_scenes'].state === 'Floor Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${hass.states['light.bedroom_master_bed_01'].state === 'on' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+      - type: 'custom:layout-break'
       - type: vertical-stack
         cards:
           - type: 'custom:webrtc-camera'
             url: 'rtsp://10.10.11.110:8554/bedroom-master'
-            title: 'Master Bedroom'
+            title: Master Bedroom
             muted: true
-            mode: webrtc,mse
-          - type: custom:mushroom-chips-card
-            chips:
-              - type: entity
-                entity:
-              - type: entity
-                entity:
-              - type: entity
-                entity:
-      - type: custom:layout-break
+            mode: 'webrtc,mse'
+      - type: 'custom:layout-break'
       - type: vertical-stack
         cards:
-#          - type: entities
-#            title: Lights
-#            show_header_toggle: false
-#            entities:
-#              - entity: timer.app_lighting_bedroom_master
-#          - type: custom:flipdown-timer-card
-#            entity: timer.app_lighting_bedroom_master
-#            show_hour: false
-#            show_title: false
-#            show_header: false
-#            duration: "00:01:00"
-#            styles:
-#              rotor:
-#                width: 60px
-#                height: 80px
-#              button:
-#                width: 60px
-#                location: bottom
-          - type: horizontal-stack
-            cards:
-              - type: button
-                name: Occupancy
-                entity: input_boolean.occupancy_bedroom_master
-              - type: button
-                name: Operating Mode
-                entity: input_boolean.manually_operated_light_bedroom_master
-              - type: button
-                name: Occupants
-                entity: input_number.occupants_bedroom_master
-          - type: custom:mini-media-player
+          - type: 'custom:mini-media-player'
             entity: media_player.master_bedroom_display
             artwork: cover
-          - type: custom:mini-media-player
+          - type: 'custom:mini-media-player'
             entity: media_player.master_bedroom_pair
             artwork: cover
+          - type: 'custom:bubble-card'
+            card_type: media-player
+            entity: media_player.master_bedroom_display
+            grid_options:
+              rows: 2
+              columns: 12
+            scrolling_effect: false
+            show_icon: true
+            show_state: false
+            show_attribute: false
+            hide:
+              play_pause_button: false
+              power_button: true
+              next_button: false
+              previous_button: false
+              volume_button: false
+            card_layout: large
+            cover_background: true
+            sub_button: []
+            name: Master Bedroom Nest
+            force_icon: false
+            show_name: true
+            show_last_changed: false
+            double_tap_action:
+              action: none
+            hold_action:
+              action: none
+            styles: |
+              ha-card div.bubble-media-player-container {
+                height: 119px !important;
+              }
+              ha-card div.bubble-cover-background {
+                filter: blur(3px);
+                opacity: 0.4;
+              }
+                ha-card div.bubble-media-player {
+                bottom: 30px;
+              }
+              ha-card div.bubble-media-info-container {
+                display: inline;
+                position: absolute;
+                top: 95px;
+                left: 16px
+              }
+              ha-card div.bubble-name-container {
+                display: inline !important;
+              }
+
+              ha-icon.bubble-play-pause-button {
+                position: absolute;
+                bottom: -22px;
+                right: 8px;
+              }
+          - type: vertical-stack
+            cards:
+              - type: 'custom:bubble-card'
+                card_type: pop-up
+                hash: '#popup-bedroom-master-light'
+                name: Master Bedroom
+                icon: 'mdi:bed-king'
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #1'
+                entity: light.bedroom_master_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #2'
+                entity: light.bedroom_master_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Floor #1'
+                entity: light.bedroom_master_floor_lamp_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Floor #2'
+                entity: light.bedroom_master_floor_lamp_02
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle

configuration/ui-lovelace/050-bedroom-master.yaml.bak

@@ -0,0 +1,283 @@
+---
+title: Master Bedroom
+icon: mdi:bed-king
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                badge_icon: mdi:numeric-1-circle
+                badge_color: green
+                entity: binary_sensor.presence_bedroom_master_sensor_1
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_bedroom_master_left_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_left_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_bedroom_master_left_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_bedroom_master_center_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_center_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_bedroom_master_center_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.window_bedroom_master_right_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.window_bedroom_master_right_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.window_bedroom_master_right_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.door_bedroom_master_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.door_bedroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.door_bedroom_master_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.door_bedroom_master_closet_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.door_bedroom_master_closet_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.door_bedroom_master_closet_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.smoke_bedroom_master_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.smoke_bedroom_master_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.smoke_bedroom_master_01_smoke
+                tap_action:
+                  action: more-info
+          - type: custom:stack-in-card
+            cards:
+              - type: grid
+                columns: 2
+                square: false
+                cards:
+                  - type: custom:mushroom-entity-card
+                    entity: input_boolean.bedroom_master_light_state
+                    name: Master Bedroom
+                    icon: mdi:lightbulb-group
+                    tap_action:
+                      action: toggle
+                    card_mod:
+                      style: "ha-card { border: none; }"
+                  - type: custom:paper-buttons-row
+                    preset: mushroom
+                    styles:
+                      justify-content: flex-end
+                    base_config:
+                      styles:
+                        button:
+                          margin-top: 12px
+                          margin-right: 12px
+                    buttons:
+                      - layout: icon
+                        icon: mdi:lightbulb-group
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_master_scenes
+                            option: "All"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:ceiling-light-multiple
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_master_scenes
+                            option: "Ceiling Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:floor-lamp-torchiere
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_master_scenes
+                            option: "Floor Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Floor Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_master_light_state', 'on') and is_state('input_select.bedroom_master_scenes', 'Floor Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:bed-queen-outline
+                        tap_action:
+                          action: call-service
+                          service: light.toggle
+                          service_data:
+                            entity_id: light.bedroom_master_bed_01
+                        styles:
+                          button:
+                            color: "{% if is_state('light.bedroom_master_bed_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('light.bedroom_master_bed_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+#                name: Temperature
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_master_01_temperature
+#                    name: Temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Humidity
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_master_01_humidity
+#                    name: Humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Illuminance
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_bedroom_master_light_level
+#                    name: Illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                name: Ppm25
+                line_color: green
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_master_02_pm25
+                    name: Ppm25
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_master_floor_all
+                name: Bed Lights
+                icon: mdi:lamps
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_master_ceiling_all
+                name: Ceiling Lights
+                icon: mdi:dome-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_master_floor_lamp_02
+                name: "Tanya's Bed Light"
+                icon: mdi:ceiling-light-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_master_floor_lamp_01
+                name: "Alex's Bed Light"
+                icon: mdi:ceiling-light-multiple
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_master_bed_01
+                name: 'Bed Light'
+                icon: mdi:led-strip-variant
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: 'custom:webrtc-camera'
+            url: 'rtsp://10.10.11.110:8554/bedroom-master'
+            title: 'Master Bedroom'
+            muted: true
+            mode: webrtc,mse
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: entity
+                entity:
+              - type: entity
+                entity:
+              - type: entity
+                entity:
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_bedroom_master
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_bedroom_master
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bedroom_master
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bedroom_master
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bedroom_master
+          - type: custom:mini-media-player
+            entity: media_player.master_bedroom_display
+            artwork: cover
+          - type: custom:mini-media-player
+            entity: media_player.master_bedroom_pair
+            artwork: cover

configuration/ui-lovelace/060-bedroom-max.yaml

@@ -1,13 +1,14 @@
----
 title: "Maxim's Bedroom"
-icon: mdi:bed
+icon: 'mdi:bed'
 panel: true
 visible:
-  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
-  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+  - user: 1614b22cbef54f979741cf8a6b3413ec
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a
 cards:
-  - type: custom:layout-card
-    layout: vertical
+  - type: 'custom:layout-card'
+    layout_type: 'custom:vertical-layout'
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
@@ -56,265 +57,238 @@ cards:
                     icon_color: "{% if is_state('fan.bedroom_max', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
                     tap_action:
                       action: toggle
-          - type: custom:stack-in-card
-            cards:
-              - type: grid
-                columns: 2
-                square: false
-                cards:
-                  - type: custom:mushroom-entity-card
-                    entity: input_boolean.bedroom_max_light_state
-                    name: Max Bedroom
-                    icon: mdi:lightbulb-group
-                    tap_action:
-                      action: toggle
-                    card_mod:
-                      style: "ha-card { border: none; }"
-                  - type: custom:paper-buttons-row
-                    preset: mushroom
-                    styles:
-                      justify-content: flex-end
-                    base_config:
-                      styles:
-                        button:
-                          margin-top: 12px
-                          margin-right: 12px
-                    buttons:
-                      - layout: icon
-                        icon: mdi:lightbulb-group
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_max_scenes
-                            option: "All"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:ceiling-light-multiple
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_max_scenes
-                            option: "Ceiling Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:floor-lamp-torchiere
-                        tap_action:
-                          action: call-service
-                          service: input_select.select_option
-                          service_data:
-                            entity_id: input_select.bedroom_max_scenes
-                            option: "Table Only"
-                        styles:
-                          button:
-                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Table Only') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Table Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-                      - layout: icon
-                        icon: mdi:bed-queen-outline
-                        tap_action:
-                          action: call-service
-                          service: light.toggle
-                          service_data:
-                            entity_id: light.bedroom_maxim_bed_01
-                        styles:
-                          button:
-                            color: "{% if is_state('light.bedroom_maxim_bed_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
-                            background-color: "{% if is_state('light.bedroom_maxim_bed_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-#                name: Temperature
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bedroom_max_01_temperature
-#                    name: Temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Humidity
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bedroom_max_01_humidity
-#                    name: Humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-#                name: Illuminance
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.presence_bedroom_maxim_light_level
-#                    name: Illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_max_ceiling_01
-                name: Ceiling Light
-                icon: mdi:ceiling-fan-light
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_max_table_01
-                name: Table Light
-                icon: mdi:floor-lamp
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: horizontal-stack
-            cards:
-              - type: custom:mushroom-light-card
-                entity: light.bedroom_maxim_bed_01
-                name: 'Bed Light'
-                icon: mdi:led-strip-variant
-                show_brightness_control: true
-                collapsible_controls: true
-                use_light_color: true
-          - type: custom:mushroom-fan-card
-            entity: fan.bedroom_maxim
-            name: 'Ceiling Fan'
-            icon_animation: on
-            show_percentage_control: true
-            collapsible_controls: true
-#          - type: custom:stack-in-card
-#            cards:
-#              - type: grid
-#                columns: 2
-#                square: false
-#                cards:
-#                  - type: custom:mushroom-entity-card
-#                    entity: fan.bedroom_max
-#                    name: Fan
-#                    icon: mdi:ceiling-fan-light
-#                    use_light_color: false
-#                    tap_action:
-#                      action: toggle
-#                    card_mod:
-#                      style: "ha-card { border: none }"
-#                  - type: custom:paper-buttons-row
-#                    preset: mushroom
-#                    styles:
-#                      justify-content: flex-end
-#                    base_config:
-#                      styles:
-#                        button:
-#                          margin-top: 12px
-#                          margin-right: 12px
-#                    buttons:
-#                      - layout: icon
-#                        icon: mdi:fan-speed-1
-#                        tap_action:
-#                          action: call-service
-#                          service: fan.set_preset_mode
-#                          service_data:
-#                            entity_id: fan.bedroom_max
-#                            preset_mode: low
-#                        styles:
-#                          button:
-#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'low') %}#FFC107{% else %}#44739E{% endif %}"
-#                      - layout: icon
-#                        icon: mdi:fan-speed-2
-#                        tap_action:
-#                          action: call-service
-#                          service: fan.set_preset_mode
-#                          service_data:
-#                            entity_id: fan.bedroom_max
-#                            preset_mode: medium
-#                        styles:
-#                          button:
-#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'medium') %}#FFC107{% else %}#44739E{% endif %}"
-#                      - layout: icon
-#                        icon: mdi:fan-speed-3
-#                        tap_action:
-#                          action: call-service
-#                          service: fan.set_preset_mode
-#                          service_data:
-#                            entity_id: fan.bedroom_max
-#                            preset_mode: high
-#                        styles:
-#                          button:
-#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'high') %}#FFC107{% else %}#44739E{% endif %}"
-#          - type: horizontal-stack
-#            cards:
-#              - type: entities
-#                show_header_toggle: false
-#                entities:
-#                  - type: custom:mushroom-fan-card
-#                    name: Fan
-#                    entity: fan.bedroom_max
-#                    icon_animation: true
-#                    show_percentage_control: false
-#                    collapsible_controls: true
-#                  - type: custom:fan-mode-button-row
-#                    entity: fan.bedroom_max
-#                    name: Fan
-#                    customTheme: false
-      - type: custom:layout-break
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:bed'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_bedroom_max_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_bedroom_max_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.presence_bedroom_maxim_light_level
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
       - type: vertical-stack
         cards:
-          - type: custom:webrtc-camera
-            url: "rtsp://10.10.11.110:8554/bedroom-max"
-            title: "Maxim's Bedroom"
-            muted: true
-            mode: webrtc,mse
-      - type: custom:layout-break
-      - type: vertical-stack
-        cards:
-#          - type: entities
-#            title: Lights
-#            show_header_toggle: false
-#            entities:
-#              - entity: timer.app_lighting_bedroom_max
-#          - type: custom:flipdown-timer-card
-#            entity: timer.app_lighting_kitchen
-#            show_hour: false
-#            show_title: false
-#            show_header: false
-#            duration: "00:01:00"
-#            styles:
-#              rotor:
-#                width: 60px
-#                height: 80px
-#              button:
-#                width: 60px
-#                location: bottom
-          - type: horizontal-stack
-            cards:
-              - type: button
-                name: Occupancy
-                entity: input_boolean.occupancy_bedroom_max
-              - type: button
-                name: Operating Mode
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Occupancy
+            entity: input_boolean.occupancy_bedroom_max
+            icon: 'mdi:account-multiple'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: sensor.bedroom_max_person_count
+                icon: 'mdi:account-group'
+                show_state: false
+                show_background: true
+              - entity: sensor.bedroom_max_cat_count
+                icon: 'mdi:cat'
+                show_state: false
+                show_background: true
+              - icon: 'mdi:brightness-auto'
                 entity: input_boolean.manually_operated_light_bedroom_max
-              - type: button
-                name: Occupants
-                entity: input_number.occupants_bedroom_max
-          - type: custom:mini-media-player
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: toggle
+            styles: >
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['sensor.bedroom_max_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['sensor.bedroom_max_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              } ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_bedroom_max'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}
+
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Light
+            entity: input_boolean.bedroom_max_light_state
+            icon: 'mdi:lightbulb-group'
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#popup-bedroom-max-light'
+            sub_button:
+              - icon: 'mdi:lightbulb-group'
+                entity: scene.bedroom_max_all
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_max_scenes
+                    option: All
+              - icon: 'mdi:ceiling-light-multiple'
+                entity: scene.bedroom_max_ceiling_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_max_scenes
+                    option: Ceiling Only
+              - icon: 'mdi:floor-lamp-torchiere'
+                entity: scene.bedroom_max_table_only
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.bedroom_max_scenes
+                    option: Floor Only
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.bedroom_max_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.bedroom_max_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.bedroom_max_scenes'].state === 'Table Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Fan
+            entity: fan.bedroom_maxim
+            icon: 'mdi:fan'
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - icon: 'mdi:fan-speed-1'
+                entity: fan.bedroom_maxim
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: fan.set_preset_mode
+                  service_data:
+                    entity_id: fan.bedroom_maxim
+                    option: low
+              - icon: 'mdi:fan-speed-2'
+                entity: fan.bedroom_maxim
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: fan.set_preset_mode
+                  service_data:
+                    entity_id: fan.bedroom_maxim
+                    option: medium
+              - icon: 'mdi:fan-speed-3'
+                entity: fan.bedroom_maxim
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: fan.set_preset_mode
+                  service_data:
+                    entity_id: fan.bedroom_maxim
+                    option: high
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['fan.bedroom_maxim'].attributes.percentage === 33 ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['fan.bedroom_maxim'].attributes.percentage === 66 ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['fan.bedroom_maxim'].attributes.percentage === 100 ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+      - type: 'custom:layout-break'
+      - type: vertical-stack
+        cards:
+          - type: 'custom:webrtc-camera'
+            url: 'rtsp://10.10.11.110:8554/bedroom-max'
+            title: Maxim Bedroom
+            muted: true
+            mode: 'webrtc,mse'
+      - type: 'custom:layout-break'
+      - type: vertical-stack
+        cards:
+          - type: 'custom:mini-media-player'
             entity: media_player.max_s_bedroom_display
             artwork: cover
+          - type: vertical-stack
+            cards:
+              - type: 'custom:bubble-card'
+                card_type: pop-up
+                hash: '#popup-bedroom-maxim-light'
+                name: Maxim Bedroom
+                icon: 'mdi:bed-king'
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #1'
+                entity: light.bedroom_maxim_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Floor #1'
+                entity: light.bedroom_maxim_floor_lamp_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle

configuration/ui-lovelace/060-bedroom-max.yaml.bak

@@ -0,0 +1,320 @@
+---
+title: "Maxim's Bedroom"
+icon: mdi:bed
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                    badge_icon: mdi:numeric-1-circle
+                    badge_color: green
+                    entity: binary_sensor.presence_bedroom_maxim_sensor_1
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.window_bedroom_max_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.window_bedroom_max_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.window_bedroom_max_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bedroom_max_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bedroom_max_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bedroom_max_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.smoke_bedroom_maxim_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.smoke_bedroom_maxim_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.smoke_bedroom_maxim_01_smoke
+                    tap_action:
+                      action: more-info
+              - type: custom:mushroom-chips-card
+                alignment: end
+                chips:
+                  - type: template
+                    entity: light.bedroom_guest_ceiling_01
+                    icon: mdi:ceiling-light
+                    tap_action:
+                      action: toggle
+                    icon_color: "{% if is_state('light.bedroom_max_ceiling_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                  - type: template
+                    entity: fan.bedroom_max
+                    icon: mdi:fan
+                    icon_color: "{% if is_state('fan.bedroom_max', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    tap_action:
+                      action: toggle
+          - type: custom:stack-in-card
+            cards:
+              - type: grid
+                columns: 2
+                square: false
+                cards:
+                  - type: custom:mushroom-entity-card
+                    entity: input_boolean.bedroom_max_light_state
+                    name: Max Bedroom
+                    icon: mdi:lightbulb-group
+                    tap_action:
+                      action: toggle
+                    card_mod:
+                      style: "ha-card { border: none; }"
+                  - type: custom:paper-buttons-row
+                    preset: mushroom
+                    styles:
+                      justify-content: flex-end
+                    base_config:
+                      styles:
+                        button:
+                          margin-top: 12px
+                          margin-right: 12px
+                    buttons:
+                      - layout: icon
+                        icon: mdi:lightbulb-group
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_max_scenes
+                            option: "All"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:ceiling-light-multiple
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_max_scenes
+                            option: "Ceiling Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:floor-lamp-torchiere
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_max_scenes
+                            option: "Table Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Table Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_max_light_state', 'on') and is_state('input_select.bedroom_max_scenes', 'Table Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:bed-queen-outline
+                        tap_action:
+                          action: call-service
+                          service: light.toggle
+                          service_data:
+                            entity_id: light.bedroom_maxim_bed_01
+                        styles:
+                          button:
+                            color: "{% if is_state('light.bedroom_maxim_bed_01', 'on') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('light.bedroom_maxim_bed_01', 'on') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+#                name: Temperature
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_max_01_temperature
+#                    name: Temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Humidity
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_max_01_humidity
+#                    name: Humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Illuminance
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_bedroom_maxim_light_level
+#                    name: Illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_max_ceiling_01
+                name: Ceiling Light
+                icon: mdi:ceiling-fan-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_max_table_01
+                name: Table Light
+                icon: mdi:floor-lamp
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_maxim_bed_01
+                name: 'Bed Light'
+                icon: mdi:led-strip-variant
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: custom:mushroom-fan-card
+            entity: fan.bedroom_maxim
+            name: 'Ceiling Fan'
+            icon_animation: on
+            show_percentage_control: true
+            collapsible_controls: true
+#          - type: custom:stack-in-card
+#            cards:
+#              - type: grid
+#                columns: 2
+#                square: false
+#                cards:
+#                  - type: custom:mushroom-entity-card
+#                    entity: fan.bedroom_max
+#                    name: Fan
+#                    icon: mdi:ceiling-fan-light
+#                    use_light_color: false
+#                    tap_action:
+#                      action: toggle
+#                    card_mod:
+#                      style: "ha-card { border: none }"
+#                  - type: custom:paper-buttons-row
+#                    preset: mushroom
+#                    styles:
+#                      justify-content: flex-end
+#                    base_config:
+#                      styles:
+#                        button:
+#                          margin-top: 12px
+#                          margin-right: 12px
+#                    buttons:
+#                      - layout: icon
+#                        icon: mdi:fan-speed-1
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_max
+#                            preset_mode: low
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'low') %}#FFC107{% else %}#44739E{% endif %}"
+#                      - layout: icon
+#                        icon: mdi:fan-speed-2
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_max
+#                            preset_mode: medium
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'medium') %}#FFC107{% else %}#44739E{% endif %}"
+#                      - layout: icon
+#                        icon: mdi:fan-speed-3
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_max
+#                            preset_mode: high
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_max', 'preset_mode', 'high') %}#FFC107{% else %}#44739E{% endif %}"
+#          - type: horizontal-stack
+#            cards:
+#              - type: entities
+#                show_header_toggle: false
+#                entities:
+#                  - type: custom:mushroom-fan-card
+#                    name: Fan
+#                    entity: fan.bedroom_max
+#                    icon_animation: true
+#                    show_percentage_control: false
+#                    collapsible_controls: true
+#                  - type: custom:fan-mode-button-row
+#                    entity: fan.bedroom_max
+#                    name: Fan
+#                    customTheme: false
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:webrtc-camera
+            url: "rtsp://10.10.11.110:8554/bedroom-max"
+            title: "Maxim's Bedroom"
+            muted: true
+            mode: webrtc,mse
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_bedroom_max
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_kitchen
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bedroom_max
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bedroom_max
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bedroom_max
+          - type: custom:mini-media-player
+            entity: media_player.max_s_bedroom_display
+            artwork: cover

configuration/ui-lovelace/070-bedroom-olivia.yaml.bak

@@ -0,0 +1,655 @@
+---
+title: "Olivia's Bedroom"
+icon: mdi:bed
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                    badge_icon: mdi:numeric-1-circle
+                    badge_color: green
+                    entity: binary_sensor.presence_bedroom_olivia_sensor_1
+                    tap_action:
+                      action: more-info
+#              - type: template
+#                icon: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+#                icon_color: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+#                badge_icon: mdi:numeric-1-circle
+#                badge_color: green
+#                  - type: template
+#                    icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_4', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
+#                    icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_4', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+#                    entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_4
+#                    tap_action:
+#                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.window_bedroom_olivia_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.window_bedroom_olivia_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.window_bedroom_olivia_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bedroom_olivia_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bedroom_olivia_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bedroom_olivia_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bedroom_olivia_closet_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bedroom_olivia_closet_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bedroom_olivia_closet_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.smoke_bedroom_olivia_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.smoke_bedroom_olivia_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.smoke_bedroom_olivia_01_smoke
+                    tap_action:
+                      action: more-info
+              - type: custom:mushroom-chips-card
+                alignment: end
+                chips:
+                  - type: template
+                    entity: light.bedroom_olivia_ceiling_01
+                    icon: mdi:ceiling-light
+                    tap_action:
+                      action: toggle
+                    icon_color: "{% if is_state('light.bedroom_olivia_ceiling_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                  - type: template
+                    entity: fan.bedroom_olivia
+                    icon: mdi:fan
+                    icon_color: "{% if is_state('fan.bedroom_olivia', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    tap_action:
+                      action: toggle
+          - type: custom:stack-in-card
+            cards:
+              - type: grid
+                columns: 2
+                square: false
+                cards:
+                  - type: custom:mushroom-entity-card
+                    entity: input_boolean.bedroom_olivia_light_state
+                    name: Olivia Bedroom
+                    icon: mdi:lightbulb-group
+                    tap_action:
+                      action: toggle
+                    card_mod:
+                      style: "ha-card { border: none; }"
+                  - type: custom:paper-buttons-row
+                    preset: mushroom
+                    styles:
+                      justify-content: flex-end
+                    base_config:
+                      styles:
+                        button:
+                          margin-top: 12px
+                          margin-right: 12px
+                    buttons:
+                      - layout: icon
+                        icon: mdi:lightbulb-group
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_olivia_scenes
+                            option: "All"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'All') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'All') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:ceiling-light-multiple
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_olivia_scenes
+                            option: "Ceiling Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'Ceiling Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'Ceiling Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+                      - layout: icon
+                        icon: mdi:floor-lamp-torchiere
+                        tap_action:
+                          action: call-service
+                          service: input_select.select_option
+                          service_data:
+                            entity_id: input_select.bedroom_olivia_scenes
+                            option: "Floor Only"
+                        styles:
+                          button:
+                            color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'Floor Only') %}#FFC107{% else %}#44739E{% endif %}"
+                            background-color: "{% if is_state('input_boolean.bedroom_olivia_light_state', 'on') and is_state('input_select.bedroom_olivia_scenes', 'Table Only') %}#FFF3D7{% else %}#F4F4F4{% endif %}"
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+#                name: Temperature
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_olivia_01_temperature
+#                    name: Temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Humidity
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bedroom_olivia_01_humidity
+#                    name: Humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+#                name: Illuminance
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_bedroom_olivia_light_level
+#                    name: Illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_olivia_ceiling_01
+                name: Ceiling Light
+                icon: mdi:ceiling-fan-light
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+              - type: custom:mushroom-light-card
+                entity: light.bedroom_olivia_floor_01
+                name: Floor Light
+                icon: mdi:floor-lamp
+                show_brightness_control: true
+                collapsible_controls: true
+                use_light_color: true
+          - type: custom:mushroom-fan-card
+            entity: fan.bedroom_maxim
+            name: 'Ceiling Fan'
+            icon_animation: on
+            show_percentage_control: true
+            collapsible_controls: true
+#          - type: custom:stack-in-card
+#            cards:
+#              - type: grid
+#                columns: 2
+#                square: false
+#                cards:
+#                  - type: custom:mushroom-entity-card
+#                    entity: fan.bedroom_olivia
+#                    name: Fan
+#                    icon: mdi:ceiling-fan-light
+#                    use_light_color: false
+#                    tap_action:
+#                      action: toggle
+#                    card_mod:
+#                      style: "ha-card { border: none }"
+#                  - type: custom:paper-buttons-row
+#                    preset: mushroom
+#                    styles:
+#                      justify-content: flex-end
+#                    base_config:
+#                      styles:
+#                        button:
+#                          margin-top: 12px
+#                          margin-right: 12px
+#                    buttons:
+#                      - layout: icon
+#                        icon: mdi:fan-speed-1
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_olivia
+#                            preset_mode: low
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_olivia', 'preset_mode', 'low') %}#FFC107{% else %}#44739E{% endif %}"
+#                      - layout: icon
+#                        icon: mdi:fan-speed-2
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_olivia
+#                            preset_mode: medium
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_olivia', 'preset_mode', 'medium') %}#FFC107{% else %}#44739E{% endif %}"
+#                      - layout: icon
+#                        icon: mdi:fan-speed-3
+#                        tap_action:
+#                          action: call-service
+#                          service: fan.set_preset_mode
+#                          service_data:
+#                            entity_id: fan.bedroom_olivia
+#                            preset_mode: high
+#                        styles:
+#                          button:
+#                            color: "{% if is_state_attr('fan.bedroom_olivia', 'preset_mode', 'high') %}#FFC107{% else %}#44739E{% endif %}"
+#              - type: entities
+#                show_header_toggle: false
+#                entities:
+#                  - type: custom:fan-mode-button-row
+#                    entity: fan.bedroom_olivia
+#                    name: Fan
+#                    customTheme: false
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:webrtc-camera
+            url: "rtsp://10.10.11.110:8554/bedroom-olivia"
+            title: "Olivia's Bedroom"
+            muted: true
+            mode: webrtc,mse
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: entity
+                entity:
+              - type: entity
+                entity:
+              - type: entity
+                entity:
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_bedroom_olivia
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_bedroom_olivia
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bedroom_olivia
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bedroom_olivia
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bedroom_olivia
+#          - type: custom:mini-media-player
+#            entity: media_player.kitchen_max
+#            artwork: cover
+          - type: custom:plotly-graph
+            refresh_interval: 1
+            hours_to_show: current_day
+            config:
+              modeBarButtonsToRemove:
+                - select2d
+                - lasso2d
+                - toImage
+              displaylogo: false
+            layout:
+              height: 240
+              margin:
+                l: 40
+                r: 20
+                t: 20
+                b: 55
+              showlegend: true
+              xaxis:
+                showticklabels: true
+                dtick: 1000
+                visible: true
+                gridcolor: RGBA(200,200,200,0.15)
+                zerolinecolor: RGBA(200,200,200,0.15)
+                type: number
+                fixedrange: true
+                range:
+                  - 4000
+                  - -4000
+              yaxis:
+                showticklabels: true
+                dtick: 1000
+                visible: true
+                gridcolor: RGBA(200,200,200,0.15)
+                zerolinecolor: RGBA(200,200,200,0.15)
+                scaleanchor: x
+                scaleratio: 1
+                fixedrange: true
+                range:
+                  - 7500
+                  - 0
+            entities:
+              - entity: ''
+                fn_var1: $ex vars.sensor_id = "d158f4";
+                fn_var2: $ex vars.sensor_name_prefix = "sensor.screek_human_sensor_2a_" + vars.sensor_id + "_";
+                fn_var3: $ex vars.number_name_prefix = "number.screek_human_sensor_2a_" + vars.sensor_id + "_";
+                fn_var4: $ex vars.is_inch_unit = hass.states[vars.sensor_name_prefix + "target1_x"].attributes.unit_of_measurement == "in";
+                # name: sensor_id
+              - entity: ''
+                name: Target1
+                marker:
+                  size: 10
+                  symbol: star-diamond
+                line:
+                  shape: spline
+                  width: 5
+                x:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target1_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target1_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { x = x * 25.4 };
+                      return x;
+                    }
+                y:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target1_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target1_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { y = y * 25.4 };
+                      return y;
+                    }
+              - entity: ''
+                name: Target2
+                marker:
+                  size: 10
+                  symbol: star-diamond
+                line:
+                  shape: spline
+                  width: 5
+                x:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target2_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target2_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { x = x * 25.4 };
+                      return x;
+                    }
+                y:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target2_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target2_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { y = y * 25.4 };
+                      return y;
+                    }
+              - entity: ''
+                internal: false
+                name: Target3
+                marker:
+                  size: 10
+                  symbol: star-diamond
+                line:
+                  shape: spline
+                  width: 5
+                x:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target3_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target3_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { x = x * 25.4 };
+                      return x;
+                    }
+                y:
+                  - $ex {
+                      var x = hass.states[vars.sensor_name_prefix + "target3_x"].state;
+                      var y = hass.states[vars.sensor_name_prefix + "target3_y"].state;
+                      if (x == 0 && y == 0) { return -9999 };
+                      if (vars.is_inch_unit) { y = y * 25.4 };
+                      return y;
+                    }
+
+              - entity: ''
+                name: Zone1
+                mode: lines
+                fill: toself
+                fillcolor: RGBA(20,200,0,0.06)
+                line:
+                  color: RGBA(20,200,0,0.2)
+                  shape: line
+                  width: 2
+                x:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_x_begin"].state
+                y:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone1_y_begin"].state
+              - entity: ''
+                name: Zone2
+                mode: lines
+                fill: toself
+                fillcolor: RGBA(200,0,255,0.06)
+                line:
+                  color: RGBA(200,0,255,0.2)
+                  shape: line
+                  width: 2
+                x:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_x_begin"].state
+                y:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone2_y_begin"].state
+              - entity: ''
+                name: Zone3
+                mode: lines
+                fill: toself
+                fillcolor: RGBA(200,120,55,0.06)
+                line:
+                  color: RGBA(200,120,55,0.2)
+                  shape: line
+                  width: 2
+                x:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_x_begin"].state
+                y:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zone3_y_begin"].state
+              - entity: ''
+                name: ExZone
+                mode: lines
+                fill: toself
+                fillcolor: RGBA(255,0,0,0.15)
+                line:
+                  shape: line
+                  width: 1
+                  color: RGBA(255,0,0,0.2)
+                x:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_x_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_x_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_x_begin"].state
+                y:
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_y_end"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_y_begin"].state
+                  - >-
+                    $ex
+                    hass.states[vars.number_name_prefix + "zout1_y_begin"].state
+              - entity: ''
+                name: Coverage
+                mode: lines
+                fill: tonexty
+                fillcolor: rgba(168, 216, 234, 0.15)
+                hoverinfo: none
+                line:
+                  shape: line
+                  width: 0.7
+                  dash: dot
+                x:
+                  - 0
+                  - $ex 7500 * Math.sin((2 * Math.PI)/360 * 60)
+                  - 6500
+                  - 5500
+                  - 4500
+                  - 4000
+                  - 3000
+                  - 2000
+                  - 1000
+                  - 0
+                  - -1000
+                  - -2000
+                  - -3000
+                  - -4000
+                  - -4500
+                  - -5500
+                  - -6500
+                  - $ex -7500 * Math.sin((2 * Math.PI)/360 * 60)
+                  - 0
+                'y':
+                  - 0
+                  - $ex 7500 * Math.cos((2 * Math.PI)/360 * 60)
+                  - $ex Math.sqrt( 7500**2 - 6500**2 )
+                  - $ex Math.sqrt( 7500**2 - 5500**2 )
+                  - $ex Math.sqrt( 7500**2 - 4500**2 )
+                  - $ex Math.sqrt( 7500**2 - 4000**2 )
+                  - $ex Math.sqrt( 7500**2 - 3000**2 )
+                  - $ex Math.sqrt( 7500**2 - 2000**2 )
+                  - $ex Math.sqrt( 7500**2 - 1000**2 )
+                  - 7500
+                  - $ex Math.sqrt( 7500**2 - 1000**2 )
+                  - $ex Math.sqrt( 7500**2 - 2000**2 )
+                  - $ex Math.sqrt( 7500**2 - 3000**2 )
+                  - $ex Math.sqrt( 7500**2 - 4000**2 )
+                  - $ex Math.sqrt( 7500**2 - 4500**2 )
+                  - $ex Math.sqrt( 7500**2 - 5500**2 )
+                  - $ex Math.sqrt( 7500**2 - 6500**2 )
+                  - $ex 7500 * Math.cos((2 * Math.PI)/360 * 60)
+                  - 0
+            raw_plotly_config: true
+
+            title: $ex "Human Sensor 2A " + vars.sensor_id + " Map"

configuration/ui-lovelace/080-bathrooms.yaml

@@ -1,138 +1,138 @@
 ---
 title: Bathrooms
-icon: mdi:shower
+icon: 'mdi:shower'
 panel: true
 visible:
-  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
-  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+  - user: 1614b22cbef54f979741cf8a6b3413ec
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a
 cards:
-  - type: custom:layout-card
-    layout: vertical
+  - type: 'custom:layout-card'
+    layout_type: 'custom:vertical-layout'
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
           - type: horizontal-stack
             cards:
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 chips:
                   - type: template
-                    icon: "{% if is_state('binary_sensor.presence_03_presence', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.presence_03_presence', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
-                    badge_icon: mdi:numeric-1-circle
+                    icon: >-
+                      {% if is_state('binary_sensor.presence_03_presence', 'on')
+                      -%}mdi:account-multiple{%- else
+                      -%}mdi:account-off-outline{%- endif %}
+                    icon_color: >-
+                      {% if is_state('binary_sensor.presence_03_presence', 'on')
+                      -%} #FFC107 {%- else -%} #44739E {%- endif %}
+                    badge_icon: 'mdi:numeric-1-circle'
                     badge_color: green
                     entity: binary_sensor.presence_03_presence
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.bathroom_master_01_home_security_motion_detection', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.bathroom_master_01_home_security_motion_detection', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
-                    entity: binary_sensor.bathroom_master_01_home_security_motion_detection
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.bathroom_master_01_home_security_motion_detection',
+                      'on') -%}mdi:motion-sensor{%- else
+                      -%}mdi:motion-sensor-off{%- endif %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.bathroom_master_01_home_security_motion_detection',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
+                    entity: >-
+                      binary_sensor.bathroom_master_01_home_security_motion_detection
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.window_bathroom_master_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.window_bathroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.window_bathroom_master_01_contact',
+                      'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%-
+                      endif %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.window_bathroom_master_01_contact',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: binary_sensor.window_bathroom_master_01_contact
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.door_bathroom_master_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.door_bathroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_master_01_contact',
+                      'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif
+                      %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_master_01_contact',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: binary_sensor.door_bathroom_master_01_contact
                     tap_action:
                       action: more-info
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 alignment: end
                 chips:
                   - type: template
-                    icon: mdi:ceiling-light
-                    icon_color: "{% if is_state('light.bathroom_master_wall_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:ceiling-light'
+                    icon_color: >-
+                      {% if is_state('light.bathroom_master_wall_01', 'on')
+                      -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: light.bathroom_master_wall_01
                     tap_action:
                       action: toggle
                   - type: template
-                    icon: mdi:fan
-                    icon_color: "{% if is_state('fan.bathroom_master', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:fan'
+                    icon_color: >-
+                      {% if is_state('fan.bathroom_master', 'on') -%}#FFC107{%-
+                      else -%}#44739E{%- endif %}
                     entity: fan.bathroom_master
                     tap_action:
                       action: toggle
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_master_01_temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_master_01_humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.motion_bathroom_master_01_illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: tile
-                entity: light.bathroom_master_wall_01
-                icon: mdi:lamp
-                color: orange
-                features:
-                  - type: "light-brightness"
-                tap_action:
-                  action: toggle
-                hold_action:
-                  action: more-info
-#          - type: horizontal-stack
-#            cards:
-#              - type: custom:button-card
-#                name: Fan
-#                entity: fan.master_bathroom
-#                show_state: false
-#                styles:
-#                  card:
-#                    - height: 140px
-#                    - width: 140px
-#                  icon:
-#                    - animation: >
-#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
-
-#              - type: custom:flipdown-timer-card
-#                entity: timer.app_lighting_bedroom_olivia
-#                show_hour: false
-#                show_title: false
-#                show_header: false
-#                duration: "00:01:00"
-#                styles:
-#                  rotor:
-#                    width: 60px
-#                    height: 80px
-#                  button:
-#                    width: 60px
-#                    location: bottom
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:shower'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_bathroom_master_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_bathroom_master_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.motion_bathroom_master_01_illuminance
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: slider
+            name: Light
+            entity: light.bathroom_master_wall_01
+            icon: 'mdi:lamp'
+            show_state: true
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: toggle
           - type: horizontal-stack
             cards:
               - type: button
@@ -144,136 +144,116 @@ cards:
               - type: button
                 name: Occupants
                 entity: input_number.occupants_bathroom_master
-#          - type: horizontal-stack
-#            cards:
-#              - type: custom:mini-media-player
-#                entity: media_player.master_bathroom
-#                artwork: cover
-
-      - type: custom:layout-break
+      - type: 'custom:layout-break'
       - type: vertical-stack
         cards:
           - type: horizontal-stack
             cards:
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 chips:
                   - type: template
-                    icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
-                    entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7',
+                      'on') -%}mdi:motion-sensor{%- else
+                      -%}mdi:motion-sensor-off{%- endif %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
+                    entity: >-
+                      binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.window_bathroom_bedroom_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.window_bathroom_bedroom_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.window_bathroom_bedroom_01_contact',
+                      'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%-
+                      endif %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.window_bathroom_bedroom_01_contact',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: binary_sensor.window_bathroom_bedroom_01_contact
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.door_bathroom_bedroom_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.door_bathroom_bedroom_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_bedroom_01_contact',
+                      'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif
+                      %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_bedroom_01_contact',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: binary_sensor.door_bathroom_bedroom_01_contact
                     tap_action:
                       action: more-info
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 alignment: end
                 chips:
                   - type: template
-                    icon: mdi:ceiling-light
-                    icon_color: "{% if is_state('light.bathroom_bedroom_wall_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:ceiling-light'
+                    icon_color: >-
+                      {% if is_state('light.bathroom_bedroom_wall_01', 'on')
+                      -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: light.bathroom_bedroom_wall_01
                     tap_action:
                       action: toggle
                   - type: template
-                    icon: mdi:fan
-                    icon_color: "{% if is_state('fan.bathroom_bedroom', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:fan'
+                    icon_color: >-
+                      {% if is_state('fan.bathroom_bedroom', 'on') -%}#FFC107{%-
+                      else -%}#44739E{%- endif %}
                     entity: fan.bathroom_bedroom
                     tap_action:
                       action: toggle
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_bedroom_01_temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_bedroom_01_humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.motion_bathroom_bedroom_01_illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: tile
-                entity: light.bathroom_bedroom_wall_01
-                icon: mdi:lamp
-                color: orange
-                features:
-                  - type: "light-brightness"
-                tap_action:
-                  action: toggle
-                hold_action:
-                  action: more-info
-#          - type: horizontal-stack
-#            cards:
-#              - type: custom:button-card
-#                name: Fan
-#                entity: fan.master_bedroom_bathroom
-#                show_state: false
-#                state:
-#                  - value: "locked"
-#                    color: green
-#                    icon: mdi:lock
-#                  - value: "unlocked"
-#                    color: red
-#                    icon: mdi:lock-open-variant
-#                styles:
-#                  card:
-#                    - height: 140px
-#                    - width: 140px
-#                  icon:
-#                    - animation: >
-#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
-
-#              - type: custom:flipdown-timer-card
-#                entity: timer.app_lighting_bathroom_bedroom
-#                show_hour: false
-#                show_title: false
-#                show_header: false
-#                duration: "00:01:00"
-#                styles:
-#                  rotor:
-#                    width: 60px
-#                    height: 80px
-#                  button:
-#                    width: 60px
-#                    location: bottom
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:shower'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_bathroom_bedroom_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_bathroom_bedroom_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.motion_bathroom_bedroom_01_illuminance
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: slider
+            name: Light
+            entity: light.bathroom_bedroom_wall_01
+            icon: 'mdi:lamp'
+            show_state: true
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: toggle
           - type: horizontal-stack
             cards:
               - type: button
@@ -285,122 +265,103 @@ cards:
               - type: button
                 name: Occupants
                 entity: input_number.occupants_bathroom_bedroom
-      - type: custom:layout-break
+      - type: 'custom:layout-break'
       - type: vertical-stack
         cards:
           - type: horizontal-stack
             cards:
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 chips:
-#              - type: template
-#                icon: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
-#                icon_color: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
-#                badge_icon: mdi:numeric-1-circle
-#                badge_color: green
                   - type: template
-                    icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
-                    entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6',
+                      'on') -%}mdi:motion-sensor{%- else
+                      -%}mdi:motion-sensor-off{%- endif %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
+                    entity: >-
+                      binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6
                     tap_action:
                       action: more-info
                   - type: template
-                    icon: "{% if is_state('binary_sensor.door_bathroom_living_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
-                    icon_color: "{% if is_state('binary_sensor.door_bathroom_living_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_living_01_contact',
+                      'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif
+                      %}
+                    icon_color: >-
+                      {% if
+                      is_state('binary_sensor.door_bathroom_living_01_contact',
+                      'on') -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: binary_sensor.door_bathroom_living_01_contact
                     tap_action:
                       action: more-info
-              - type: custom:mushroom-chips-card
+              - type: 'custom:mushroom-chips-card'
                 alignment: end
                 chips:
                   - type: template
-                    icon: mdi:ceiling-light
-                    icon_color: "{% if is_state('light.bathroom_living_room_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:ceiling-light'
+                    icon_color: >-
+                      {% if is_state('light.bathroom_living_room_01', 'on')
+                      -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: light.bathroom_living_room_01
                     tap_action:
                       action: toggle
                   - type: template
-                    icon: mdi:fan
-                    icon_color: "{% if is_state('fan.bathroom_living_room', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    icon: 'mdi:fan'
+                    icon_color: >-
+                      {% if is_state('fan.bathroom_living_room', 'on')
+                      -%}#FFC107{%- else -%}#44739E{%- endif %}
                     entity: fan.bathroom_living_room
                     tap_action:
                       action: toggle
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_living_01_temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_bathroom_living_01_humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.motion_bathroom_living_01_illuminance
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: tile
-                entity: light.bathroom_living_room_01
-                icon: mdi:lamp
-                color: orange
-                features:
-                  - type: "light-brightness"
-                tap_action:
-                  action: toggle
-                hold_action:
-                  action: more-info
-#          - type: horizontal-stack
-#            cards:
-#              - type: custom:button-card
-#                name: Fan
-#                entity: fan.living_room_bathroom
-#                show_state: false
-#                styles:
-#                  card:
-#                    - height: 140px
-#                    - width: 140px
-#                  icon:
-#                    - animation: >
-#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
-
-#              - type: custom:flipdown-timer-card
-#                entity: timer.app_lighting_bathroom_living
-#                show_hour: false
-#                show_title: false
-#                show_header: false
-#                duration: "00:01:00"
-#                styles:
-#                  rotor:
-#                    width: 60px
-#                    height: 80px
-#                  button:
-#                    width: 60px
-#                    location: bottom
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:toilet'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_bathroom_living_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_bathroom_living_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.motion_bathroom_living_01_illuminance
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: slider
+            name: Light
+            entity: light.bathroom_living_room_01
+            icon: 'mdi:lamp'
+            show_state: true
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: toggle
           - type: horizontal-stack
             cards:
               - type: button

configuration/ui-lovelace/080-bathrooms.yaml.bak

@@ -0,0 +1,414 @@
+---
+title: Bathrooms
+icon: mdi:shower
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.presence_03_presence', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.presence_03_presence', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                    badge_icon: mdi:numeric-1-circle
+                    badge_color: green
+                    entity: binary_sensor.presence_03_presence
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.bathroom_master_01_home_security_motion_detection', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.bathroom_master_01_home_security_motion_detection', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.bathroom_master_01_home_security_motion_detection
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.window_bathroom_master_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.window_bathroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.window_bathroom_master_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bathroom_master_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bathroom_master_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bathroom_master_01_contact
+                    tap_action:
+                      action: more-info
+              - type: custom:mushroom-chips-card
+                alignment: end
+                chips:
+                  - type: template
+                    icon: mdi:ceiling-light
+                    icon_color: "{% if is_state('light.bathroom_master_wall_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: light.bathroom_master_wall_01
+                    tap_action:
+                      action: toggle
+                  - type: template
+                    icon: mdi:fan
+                    icon_color: "{% if is_state('fan.bathroom_master', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: fan.bathroom_master
+                    tap_action:
+                      action: toggle
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_master_01_temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_master_01_humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.motion_bathroom_master_01_illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: tile
+                entity: light.bathroom_master_wall_01
+                icon: mdi:lamp
+                color: orange
+                features:
+                  - type: "light-brightness"
+                tap_action:
+                  action: toggle
+                hold_action:
+                  action: more-info
+#          - type: horizontal-stack
+#            cards:
+#              - type: custom:button-card
+#                name: Fan
+#                entity: fan.master_bathroom
+#                show_state: false
+#                styles:
+#                  card:
+#                    - height: 140px
+#                    - width: 140px
+#                  icon:
+#                    - animation: >
+#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
+
+#              - type: custom:flipdown-timer-card
+#                entity: timer.app_lighting_bedroom_olivia
+#                show_hour: false
+#                show_title: false
+#                show_header: false
+#                duration: "00:01:00"
+#                styles:
+#                  rotor:
+#                    width: 60px
+#                    height: 80px
+#                  button:
+#                    width: 60px
+#                    location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bathroom_master
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bathroom_master
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bathroom_master
+#          - type: horizontal-stack
+#            cards:
+#              - type: custom:mini-media-player
+#                entity: media_player.master_bathroom
+#                artwork: cover
+
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_7
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.window_bathroom_bedroom_01_contact', 'on') -%}mdi:window-open{%- else -%}mdi:window-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.window_bathroom_bedroom_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.window_bathroom_bedroom_01_contact
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bathroom_bedroom_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bathroom_bedroom_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bathroom_bedroom_01_contact
+                    tap_action:
+                      action: more-info
+              - type: custom:mushroom-chips-card
+                alignment: end
+                chips:
+                  - type: template
+                    icon: mdi:ceiling-light
+                    icon_color: "{% if is_state('light.bathroom_bedroom_wall_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: light.bathroom_bedroom_wall_01
+                    tap_action:
+                      action: toggle
+                  - type: template
+                    icon: mdi:fan
+                    icon_color: "{% if is_state('fan.bathroom_bedroom', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: fan.bathroom_bedroom
+                    tap_action:
+                      action: toggle
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_bedroom_01_temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_bedroom_01_humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.motion_bathroom_bedroom_01_illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: tile
+                entity: light.bathroom_bedroom_wall_01
+                icon: mdi:lamp
+                color: orange
+                features:
+                  - type: "light-brightness"
+                tap_action:
+                  action: toggle
+                hold_action:
+                  action: more-info
+#          - type: horizontal-stack
+#            cards:
+#              - type: custom:button-card
+#                name: Fan
+#                entity: fan.master_bedroom_bathroom
+#                show_state: false
+#                state:
+#                  - value: "locked"
+#                    color: green
+#                    icon: mdi:lock
+#                  - value: "unlocked"
+#                    color: red
+#                    icon: mdi:lock-open-variant
+#                styles:
+#                  card:
+#                    - height: 140px
+#                    - width: 140px
+#                  icon:
+#                    - animation: >
+#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
+
+#              - type: custom:flipdown-timer-card
+#                entity: timer.app_lighting_bathroom_bedroom
+#                show_hour: false
+#                show_title: false
+#                show_header: false
+#                duration: "00:01:00"
+#                styles:
+#                  rotor:
+#                    width: 60px
+#                    height: 80px
+#                  button:
+#                    width: 60px
+#                    location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bathroom_bedroom
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bathroom_bedroom
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bathroom_bedroom
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:mushroom-chips-card
+                chips:
+#              - type: template
+#                icon: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+#                icon_color: "{% if is_state('binary_sensor.presence_01_presence', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+#                badge_icon: mdi:numeric-1-circle
+#                badge_color: green
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_6
+                    tap_action:
+                      action: more-info
+                  - type: template
+                    icon: "{% if is_state('binary_sensor.door_bathroom_living_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                    icon_color: "{% if is_state('binary_sensor.door_bathroom_living_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: binary_sensor.door_bathroom_living_01_contact
+                    tap_action:
+                      action: more-info
+              - type: custom:mushroom-chips-card
+                alignment: end
+                chips:
+                  - type: template
+                    icon: mdi:ceiling-light
+                    icon_color: "{% if is_state('light.bathroom_living_room_01', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: light.bathroom_living_room_01
+                    tap_action:
+                      action: toggle
+                  - type: template
+                    icon: mdi:fan
+                    icon_color: "{% if is_state('fan.bathroom_living_room', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                    entity: fan.bathroom_living_room
+                    tap_action:
+                      action: toggle
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_living_01_temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_bathroom_living_01_humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.motion_bathroom_living_01_illuminance
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: tile
+                entity: light.bathroom_living_room_01
+                icon: mdi:lamp
+                color: orange
+                features:
+                  - type: "light-brightness"
+                tap_action:
+                  action: toggle
+                hold_action:
+                  action: more-info
+#          - type: horizontal-stack
+#            cards:
+#              - type: custom:button-card
+#                name: Fan
+#                entity: fan.living_room_bathroom
+#                show_state: false
+#                styles:
+#                  card:
+#                    - height: 140px
+#                    - width: 140px
+#                  icon:
+#                    - animation: >
+#                        [[[ return 'rotating ' + (states['sensor.air_purifier_fan_speed'].state) + 's linear infinite'  ]]]
+
+#              - type: custom:flipdown-timer-card
+#                entity: timer.app_lighting_bathroom_living
+#                show_hour: false
+#                show_title: false
+#                show_header: false
+#                duration: "00:01:00"
+#                styles:
+#                  rotor:
+#                    width: 60px
+#                    height: 80px
+#                  button:
+#                    width: 60px
+#                    location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_bathroom_living
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_bathroom_living
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_bathroom_living

configuration/ui-lovelace/090-garage.yaml

@@ -6,8 +6,10 @@ visible:
   - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
   - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
 cards:
-  - type: custom:layout-card
-    layout: vertical
+  - type: 'custom:layout-card'
+    layout_type: 'custom:vertical-layout'
+    layout:
+      max_cols: 3
     cards:
       - type: vertical-stack
         cards:
@@ -21,12 +23,6 @@ cards:
                 entity: binary_sensor.presence_garage_sensor_1
                 tap_action:
                   action: more-info
-#              - type: template
-#                icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
-#                icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
-#                entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8
-#                tap_action:
-#                  action: more-info
               - type: template
                 icon: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
                 icon_color: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
@@ -45,76 +41,178 @@ cards:
                 entity: binary_sensor.smoke_garage_01_smoke
                 tap_action:
                   action: more-info
-          - type: horizontal-stack
-            cards:
-              - type: custom:mini-graph-card
-                line_color: orange
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_garage_01_temperature
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: blue
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.climate_garage_01_humidity
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-              - type: custom:mini-graph-card
-                line_color: red
-                font_size: 75
-                font_size_header: 12
-                entities:
-                  - entity: sensor.presence_garage_light_level
-                hours_to_show: 24
-                points_per_hour: 4
-                align_icon: state
-                align_state: left
-                show:
-                  name: false
-          - type: horizontal-stack
-            cards:
-              - type: tile
-                entity: light.garage_ceiling_01
-                icon: mdi:ceiling-light
-                color: orange
-                features:
-                  - type: "light-brightness"
+
+          - type: 'custom:bubble-card'
+            card_type: separator
+            icon: 'mdi:bed'
+            sub_button:
+              - name: Temp
+                icon: 'mdi:thermometer-lines'
+                entity: sensor.climate_garage_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: 'mdi:water-percent'
+                entity: sensor.climate_garage_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: 'mdi:weather-sunny'
+                entity: sensor.presence_garage_light_level
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+
+      - type: vertical-stack
+        cards:
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Occupancy
+            entity: input_boolean.occupancy_garage
+            icon: 'mdi:account-multiple'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - entity: sensor.garage_person_count
+                icon: 'mdi:account-group'
+                show_state: false
+                show_background: true
+              - entity: sensor.garage_cat_count
+                icon: 'mdi:cat'
+                show_state: false
+                show_background: true
+              - icon: 'mdi:brightness-auto'
+                entity: input_boolean.manually_operated_light_garage
+                show_state: false
+                show_background: true
                 tap_action:
                   action: toggle
-                hold_action:
-                  action: more-info
-              - type: tile
-                entity: cover.garage_gate
-                features:
-                  - type: "cover-open-close"
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['sensor.garage_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['sensor.garage_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+              ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_garage'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}
+
+
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Light
+            entity: input_boolean.garage_light_state
+            icon: 'mdi:lightbulb-group'
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#popup-garage-light'
+            sub_button:
+              - icon: 'phu:ceiling-round'
+                entity: scene.garage_ceiling_only
+                show_state: false
+                show_background: true
                 tap_action:
-                  action: toggle
-                  confirmation:
-                    text: Are you sure you want to operate Garage Door?
-          - type: horizontal-stack
-            cards:
-              - type: tile
-                entity: lock.subaru_outback_txt_lock
-                features:
-                  - type: "lock-commands"
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.garage_scenes
+                    option: Ceiling Only
+            styles: |
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.garage_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+
+      - type: vertical-stack
+        cards:
+          - type: 'custom:bubble-card'
+            card_type: button
+            button_type: switch
+            name: Garage Gate
+            entity: cover.garage_gate
+            icon: 'mdi:garage-variant'
+            show_state: false
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - icon: 'mdi:arrow-up-thick'
+                show_state: false
+                show_background: true
                 tap_action:
-                  action: toggle
-                  confirmation:
-                    text: Are you sure you want to lock Subaru?
-              - type: tile
-                entity: switch.subaru_outback_txt_ignition
+                  action: call-service
+                  service: cover.open_cover
+                  service_data:
+                    entity_id: cover.garage_gate
+              - icon: 'mdi:stop'
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: cover.stop_cover
+                  service_data:
+                    entity_id: cover.garage_gate
+              - icon: 'mdi:arrow-down-thick'
+                show_state: false
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: cover.close_cover
+                  service_data:
+                    entity_id: cover.garage_gate
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-2 {
+                background-color: white !important;
+              }
+              .bubble-sub-button-3 {
+                background-color: white !important;
+              }
+
       - type: custom:layout-break
       - type: vertical-stack
         cards:
@@ -125,38 +223,29 @@ cards:
                 title: 'Garage'
                 muted: true
                 mode: webrtc,mse
+
       - type: custom:layout-break
       - type: vertical-stack
         cards:
-#          - type: entities
-#            title: Lights
-#            show_header_toggle: false
-#            entities:
-#              - entity: timer.app_lighting_garage
-#          - type: custom:flipdown-timer-card
-#            entity: timer.app_lighting_garage
-#            show_hour: false
-#            show_title: false
-#            show_header: false
-#            duration: "00:01:00"
-#            styles:
-#              rotor:
-#                width: 60px
-#                height: 80px
-#              button:
-#                width: 60px
-#                location: bottom
-          - type: horizontal-stack
-            cards:
-              - type: button
-                name: Occupancy
-                entity: input_boolean.occupancy_garage
-              - type: button
-                name: Operating Mode
-                entity: input_boolean.manually_operated_light_garage
-              - type: button
-                name: Occupants
-                entity: input_number.occupants_garage
           - type: custom:mini-media-player
             entity: media_player.garage
             artwork: cover
+
+          - type: vertical-stack
+            cards:
+              - type: 'custom:bubble-card'
+                card_type: pop-up
+                hash: '#popup-garage-light'
+                name: Garage
+                icon: 'mdi:garage-variant'
+              - type: 'custom:bubble-card'
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #1'
+                entity: light.garage_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle

configuration/ui-lovelace/090-garage.yaml.bak

@@ -0,0 +1,162 @@
+---
+title: Garage
+icon: mdi:garage-variant
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
+cards:
+  - type: custom:layout-card
+    layout: vertical
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:mushroom-chips-card
+            chips:
+              - type: template
+                icon: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
+                badge_icon: mdi:numeric-1-circle
+                badge_color: green
+                entity: binary_sensor.presence_garage_sensor_1
+                tap_action:
+                  action: more-info
+#              - type: template
+#                icon: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8', 'on') -%}mdi:motion-sensor{%- else -%}mdi:motion-sensor-off{%- endif %}"
+#                icon_color: "{% if is_state('binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+#                entity: binary_sensor.dome_z_wave_plus_motion_detector_with_light_sensor_and_flexible_magnetic_mount_home_security_motion_detection_8
+#                tap_action:
+#                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.door_garage_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.cover_garage_01_contact', 'on') -%}mdi:garage-open-variant{%- else -%}mdi:garage-variant{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.cover_garage_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.cover_garage_01_contact
+                tap_action:
+                  action: more-info
+              - type: template
+                icon: "{% if is_state('binary_sensor.smoke_garage_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
+                icon_color: "{% if is_state('binary_sensor.smoke_garage_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
+                entity: binary_sensor.smoke_garage_01_smoke
+                tap_action:
+                  action: more-info
+          - type: horizontal-stack
+            cards:
+              - type: custom:mini-graph-card
+                line_color: orange
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_garage_01_temperature
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: blue
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.climate_garage_01_humidity
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+              - type: custom:mini-graph-card
+                line_color: red
+                font_size: 75
+                font_size_header: 12
+                entities:
+                  - entity: sensor.presence_garage_light_level
+                hours_to_show: 24
+                points_per_hour: 4
+                align_icon: state
+                align_state: left
+                show:
+                  name: false
+          - type: horizontal-stack
+            cards:
+              - type: tile
+                entity: light.garage_ceiling_01
+                icon: mdi:ceiling-light
+                color: orange
+                features:
+                  - type: "light-brightness"
+                tap_action:
+                  action: toggle
+                hold_action:
+                  action: more-info
+              - type: tile
+                entity: cover.garage_gate
+                features:
+                  - type: "cover-open-close"
+                tap_action:
+                  action: toggle
+                  confirmation:
+                    text: Are you sure you want to operate Garage Door?
+          - type: horizontal-stack
+            cards:
+              - type: tile
+                entity: lock.subaru_outback_txt_lock
+                features:
+                  - type: "lock-commands"
+                tap_action:
+                  action: toggle
+                  confirmation:
+                    text: Are you sure you want to lock Subaru?
+              - type: tile
+                entity: switch.subaru_outback_txt_ignition
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: 'custom:webrtc-camera'
+                url: 'rtsp://10.10.11.110:8554/garage'
+                title: 'Garage'
+                muted: true
+                mode: webrtc,mse
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+#          - type: entities
+#            title: Lights
+#            show_header_toggle: false
+#            entities:
+#              - entity: timer.app_lighting_garage
+#          - type: custom:flipdown-timer-card
+#            entity: timer.app_lighting_garage
+#            show_hour: false
+#            show_title: false
+#            show_header: false
+#            duration: "00:01:00"
+#            styles:
+#              rotor:
+#                width: 60px
+#                height: 80px
+#              button:
+#                width: 60px
+#                location: bottom
+          - type: horizontal-stack
+            cards:
+              - type: button
+                name: Occupancy
+                entity: input_boolean.occupancy_garage
+              - type: button
+                name: Operating Mode
+                entity: input_boolean.manually_operated_light_garage
+              - type: button
+                name: Occupants
+                entity: input_number.occupants_garage
+          - type: custom:mini-media-player
+            entity: media_player.garage
+            artwork: cover

configuration/ui-lovelace/200-testing.yaml.bak

@@ -0,0 +1,703 @@
+# ${card.querySelector('.bubble-state').innerText = "It's currently " + hass.states['weather.forecast_home'].state} # Change Entity Status string change show_state to false
+---
+title: Testing
+icon: mdi:test-tube
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+cards:
+  - type: custom:layout-card
+    layout_type: custom:vertical-layout
+    layout:
+      max_cols: 3
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: separator
+#            name: Kitchen
+            icon: mdi:countertop-outline
+            sub_button:
+              - name: Temp
+                icon: mdi:thermometer-lines
+                entity: sensor.climate_kitchen_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: mdi:water-percent
+                entity: sensor.climate_kitchen_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: mdi:weather-sunny
+                entity: sensor.presence_kitchen_light_level_2
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: PM2.5
+                icon: mdi:blur
+                entity: sensor.climate_kitchen_02_pm25
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: slider
+            card_layout: normal
+            name: Light
+            entity: input_boolean.kitchen_light_state
+            icon: mdi:lightbulb-group
+            show_state: true
+            show_background: true
+            button_action:
+              tap_action:
+              action: toggle
+            sub_button:
+              - icon: mdi:lightbulb-group
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "All"
+              - icon: mdi:countertop-outline
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Work Zone Only"
+              - icon: mdi:food-turkey
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Dinning Zone Only"
+              - icon: mdi:ceiling-light-multiple
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Ceiling Only"
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: rgb(229, 229, 229) !important;
+              }
+              .bubble-sub-button-1 {
+                background: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : 'grey'} !important;
+              }
+              .bubble-sub-button-2 {
+                background: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Work Zone Only' ? 'rgb(255, 152, 0)' : 'grey'} !important;
+              }
+              .bubble-sub-button-3 {
+                background: white !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Dinning Zone Only' ? 'rgb(255, 152, 0)' : 'grey'} !important;
+              }
+              .bubble-sub-button-4 {
+                background: white !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : 'grey'} !important;
+              }
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:countertop-outline
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.kitchen_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+                tap_action:
+                  action: data
+                  entity_id: image.kitchen_person
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.kitchen_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:sofa
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.living_room_01_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.living_room_01_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:sofa
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.living_room_02_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.living_room_02_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:stairs
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.stairway_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.stairway_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed-king
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_master_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_master_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_max_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_max_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_olivia_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_olivia_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:garage-variant
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.garage_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.garage_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:home-circle-outline
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.pergola_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.pergola_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            name: Vacuum
+            entity: vacuum.roborock_s5_max
+            icon: mdi:robot-vacuum
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_background: false
+                show_attribute: true
+                attribute: battery_level
+              - name: Return to dock
+                icon: mdi:home
+                show_background: false
+                tap_action:
+                  action: call-service
+                  service: vacuum.return_to_base
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+              - name: Pause
+                icon: mdi:pause
+                show_background: false
+                tap_action:
+                  action: call-service
+                  service: vacuum.pause
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+              - name: Start
+                icon: mdi:play
+                tap_action:
+                  action: call-service
+                  service: vacuum.start
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+            styles: >-
+              .bubble-button-card-container {
+              /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
+                background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
+              }
+              /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
+              ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.roborock_s5_max'].attributes.battery_icon)}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #1'
+            entity: sensor.ups_cyberpower_01_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_01_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_01_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_01_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_01_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_01_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_01_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #2'
+            entity: sensor.ups_cyberpower_02_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_02_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_02_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_02_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_02_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_02_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_02_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #3'
+            entity: sensor.ups_cyberpower_03_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_03_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_03_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_03_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_03_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_03_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_03_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #4'
+            entity: sensor.ups_cyberpower_04_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_04_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_04_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_04_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_04_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : state === 'ONBATT' ? 'rgb(255, 221, 153)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_04_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_04_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Energy
+            entity: sensor.power_house_total_1mon
+            icon: mdi:transmission-tower
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#energy'
+            sub_button:
+             - entity: sensor.power_house_total_1d
+               show_background: false
+               show_state: true
+             - entity: sensor.power_house_total_1mon
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Gas
+            entity: sensor.power_house_total_1mon
+            icon: mdi:meter-gas
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#gas'
+            sub_button:
+             - entity: sensor.gas_daily
+               show_background: false
+               show_state: true
+             - entity: sensor.gas_monthly
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Water
+            entity: sensor.water_monthly
+            icon: mdi:cup-water
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#water'
+            sub_button:
+             - entity: sensor.water_daily
+               show_background: false
+               show_state: true
+             - entity: sensor.water_monthly
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            card_layout: normal
+            name: Pioneer VSX-LX505
+            entity: media_player.onkyo_receiver
+            icon: mdi:audio-video
+            show_state: true
+            button_action:
+              tap_action:
+              action: toggle
+            sub_button:
+             - entity: script.receiver_switch_to_shield_tv
+               icon: mdi:television-classic
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+             - entity: script.receiver_switch_to_playstation
+               icon: mdi:controller
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+             - entity: script.receiver_switch_to_security
+               icon: mdi:camera-metering-matrix
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+             - entity: script.receiver_switch_to_windows
+               icon: mdi:laptop
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+
+          - type: custom:bubble-card
+            card_type: climate
+            entity: climate.living_room
+            sub_button:
+              - name: HVAC modes menu
+                select_attribute: hvac_modes
+                show_arrow: false
+                state_background: false
+          - type: custom:bubble-card
+            card_type: button
+            button_type: name
+            name: Kitchen
+            icon: mdi:fridge
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#kitchen'
+          - type: vertical-stack
+            cards:
+              - type: custom:bubble-card
+                card_type: pop-up
+                hash: '#kitchen'
+                name: Kitchen
+                icon: mdi:fridge
+                entity: light.kitchen_sink_01

configuration/ui-lovelace/200-testing.yaml.bak_2

@@ -0,0 +1,836 @@
+# ${card.querySelector('.bubble-state').innerText = "It's currently " + hass.states['weather.forecast_home'].state} # Change Entity Status string change show_state to false
+
+# bubble-feedback-container margin
+
+---
+title: Testing
+icon: mdi:test-tube
+panel: true
+visible:
+  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
+cards:
+  - type: custom:layout-card
+    layout_type: custom:vertical-layout
+    layout:
+      max_cols: 3
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: separator
+#            name: Kitchen
+            icon: mdi:countertop-outline
+            sub_button:
+              - name: Temp
+                icon: mdi:thermometer-lines
+                entity: sensor.climate_kitchen_01_temperature
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Humidity
+                icon: mdi:water-percent
+                entity: sensor.climate_kitchen_01_humidity
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Light Level
+                icon: mdi:weather-sunny
+                entity: sensor.presence_kitchen_light_level_2
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: PM2.5
+                icon: mdi:blur
+                entity: sensor.climate_kitchen_02_pm25
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+            styles: |
+              .bubble-feedback-container {
+                margin: 0px;
+              }
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            card_layout: normal
+            name: Light
+            entity: input_boolean.kitchen_light_state
+            icon: mdi:lightbulb-group
+            show_state: true
+            show_background: false
+            tap_action:
+              action: toggle
+            button_action:
+              tap_action:
+                action: navigate
+                navigation_path: '#kitchen'
+            sub_button:
+              - icon: mdi:lightbulb-group
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "All"
+              - icon: mdi:countertop-outline
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Work Zone Only"
+              - icon: mdi:food-turkey
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Dinning Zone Only"
+              - icon: mdi:ceiling-light-multiple
+                show_background: true
+                tap_action:
+                  action: call-service
+                  service: input_select.select_option
+                  service_data:
+                    entity_id: input_select.kitchen_scenes
+                    option: "Ceiling Only"
+            styles: |
+              .bubble-sub-button-1 {
+                background: white !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-2 {
+                background: white !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Work Zone Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-3 {
+                background: white !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Dinning Zone Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+              .bubble-sub-button-4 {
+                background: white !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${hass.states['input_select.kitchen_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
+              }
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:countertop-outline
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.kitchen_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+                tap_action:
+                  action: data
+                  entity_id: image.kitchen_person
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.kitchen_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:sofa
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.living_room_01_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.living_room_01_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:sofa
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.living_room_02_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.living_room_02_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:stairs
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.stairway_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.stairway_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed-king
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_master_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_master_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_max_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_max_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:bed
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.bedroom_olivia_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.bedroom_olivia_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:garage-variant
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.garage_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.garage_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+          - type: custom:bubble-card
+            card_type: separator
+            icon: mdi:home-circle-outline
+            sub_button:
+              - name: People
+                icon: mdi:account-group
+                entity: sensor.pergola_person_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+              - name: Cats
+                icon: mdi:cat
+                entity: sensor.pergola_cat_count
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+                show_attribute: false
+
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            name: Vacuum
+            entity: vacuum.roborock_s5_max
+            icon: mdi:robot-vacuum
+            show_state: true
+            show_last_changed: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Return to dock
+                icon: mdi:home
+                show_background: false
+                tap_action:
+                  action: call-service
+                  service: vacuum.return_to_base
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+              - name: Pause
+                icon: mdi:pause
+                show_background: false
+                tap_action:
+                  action: call-service
+                  service: vacuum.pause
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+              - name: Start
+                icon: mdi:play
+                tap_action:
+                  action: call-service
+                  service: vacuum.start
+                  target:
+                    entity_id: vacuum.roborock_s5_max
+            styles: >-
+              .bubble-button-card-container {
+              /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
+                background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
+              }
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #1'
+            entity: sensor.ups_cyberpower_01_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_01_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_01_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_01_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_01_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_01_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_01_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #2'
+            entity: sensor.ups_cyberpower_02_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_02_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_02_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_02_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_02_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_02_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_02_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #3'
+            entity: sensor.ups_cyberpower_03_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_03_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_03_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_03_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_03_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_03_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_03_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: 'CyberPower UPS #4'
+            entity: sensor.ups_cyberpower_04_status
+            icon: mdi:power-plug-battery
+            show_state: true
+            show_attribute: true
+            tap_action:
+              action: more-info
+            button_action:
+              tap_action:
+                action: more-info
+            sub_button:
+              - name: Battery
+                entity: sensor.ups_cyberpower_04_battery_level
+                icon: mdi:battery
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Time Left
+                entity: sensor.ups_cyberpower_04_time_left
+                icon: mdi:timer
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Load
+                entity: sensor.ups_cyberpower_04_load_percentage
+                icon: mdi:battery-arrow-down
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+              - name: Transfers
+                entity: sensor.ups_cyberpower_04_transfers
+                icon: mdi:sync
+                show_name: false
+                show_icon: true
+                show_state: true
+                show_background: false
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : state === 'ONBATT' ? 'rgb(255, 221, 153)' : '' } !important;
+              }
+              ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_04_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_04_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )}
+
+      - type: custom:layout-break
+      - type: vertical-stack
+        cards:
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Energy
+            entity: sensor.power_house_total_1mon
+            icon: mdi:transmission-tower
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#energy'
+            sub_button:
+             - entity: sensor.power_house_total_1d
+               show_background: false
+               show_state: true
+             - entity: sensor.power_house_total_1mon
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Gas
+            entity: sensor.gas_monthly
+            icon: mdi:meter-gas
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#gas'
+            sub_button:
+             - entity: sensor.gas_daily
+               show_background: false
+               show_state: true
+             - entity: sensor.gas_monthly
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            card_layout: large-2-rows
+            name: Water
+            entity: sensor.water_monthly
+            icon: mdi:cup-water
+            show_state: true
+            button_action:
+              tap_action:
+              action: navigate
+              navigation_path: '#water'
+            sub_button:
+             - entity: sensor.water_daily
+               show_background: false
+               show_state: true
+             - entity: sensor.water_monthly
+               show_state: true
+               show_background: false
+               icon: mdi:calendar-week
+
+# remote.living_room_harmony_hub
+#
+# activity_list: ShTV+AVR+TV, ShTV+AVR+Prj
+# current_activity: ShTV+AVR+TV
+# activity_starting: null
+# devices_list: LG TV, Pioneer AV Receiver VSX-LX505, LG Projector, Nvidia Shield TV Pro 2019
+# last_activity: ShTV+AVR+TV
+# friendly_name: Living Room Harmony Hub
+# supported_features: 4
+
+
+
+# source_list: Windows 11, PlayStation 4 Pro, Nvidia Shield TV, Unifi Protect, TV/Nothing, Sonos, ChromeCast/Network, Bluetooth
+# volume_level: 1
+# is_volume_muted: false
+# source: PlayStation 4 Pro
+# sound_mode: DOLBY ATMOS/DOLBY SURROUND ··· PLII/PLIIx MOVIE
+# video_out: yes,out
+# video_information: 
+# video_input_port: HDMI 2
+# input_resolution: 4K(3840x2160) 59 Hz
+# input_color_schema: RGB
+# input_color_depth: 24bit
+# output_resolution: 4K(3840x2160) 59 Hz
+# output_color_schema: RGB
+# output_color_depth: 24bit
+# friendly_name: VSX-LX505
+# supported_features: 69516
+
+          - type: custom:bubble-card
+            card_type: button
+            button_type: switch
+            card_layout: normal
+            name: Pioneer VSX-LX505
+            entity: media_player.onkyo_receiver
+            icon: mdi:audio-video
+            show_state: true
+            show_background: false
+            show_attribute: true
+            attribute: source
+            button_action:
+              tap_action:
+              action: toggle
+            sub_button:
+              - entity: script.receiver_switch_to_shield_tv
+                icon: mdi:television-classic
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+              - entity: script.receiver_switch_to_playstation
+                icon: mdi:controller
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+              - entity: script.receiver_switch_to_security
+                icon: mdi:camera-metering-matrix
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+              - entity: script.receiver_switch_to_windows
+                icon: mdi:laptop
+                show_background: true
+                show_state: false
+                tap_action:
+                  action: toggle
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Nvidia Shield TV,' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'PlayStation 4 Pro' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Unifi Protect, TV/Nothing' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-4 > ha-icon {
+                color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Windows 11' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+
+# media_player.playstation_4_pro
+#
+# playing
+#
+# source_list: BATTLEFIELD 4, Battlefield™ 1, Call of Duty®: Modern Warfare® 2 Campaign Remastered, DIABLO III: REAPER OF SOULS – ULTIMATE EVIL EDITION, DiRT Rally, Fall Guys, Fortnite, Gran Turismo® 7, Gran Turismo™SPORT, Grand Theft Auto V (PS4™), Terraria: PS4™ Edition, XCOM® 2
+# media_content_id: CUSA00419
+# media_content_type: game
+# media_title: Grand Theft Auto V (PS4™)
+# source: Grand Theft Auto V (PS4™)
+# entity_picture: /api/media_player_proxy/media_player.playstation_4_pro?token=007ca02b0380f3ac9c545f072bbc59c1d0630ff327babffc223e2ef6bf940f71&cache=5cf70801995f315e
+# friendly_name: PlayStation 4 Pro
+# supported_features: 6529
+
+
+          - type: custom:bubble-card
+            card_type: button
+            entity: media_player.nvidia_shield_tv_living_room_2
+            sub_button:
+             - entity: switch.android_tv_youtube
+               icon: mdi:youtube
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+             - entity: switch.android_tv_netflix
+               icon: mdi:netflix
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+             - entity: switch.android_tv_plex
+               icon: mdi:plex
+               show_background: true
+               show_state: false
+               tap_action:
+                 action: toggle
+            styles: |
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
+              }
+              .bubble-sub-button-1 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.google.android.youtube.tv,' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-2 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.netflix.ninja' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+              .bubble-sub-button-3 > ha-icon {
+                color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.plexapp.android' ? 'rgb(255, 152, 0)' : '' } !important;
+              }
+
+          - type: custom:bubble-card
+            card_type: climate
+            entity: climate.living_room
+            sub_button:
+              - name: HVAC modes menu
+                select_attribute: hvac_modes
+                show_arrow: false
+                state_background: false
+
+
+          - type: vertical-stack
+            cards:
+              - type: custom:bubble-card
+                card_type: pop-up
+                hash: '#kitchen'
+                name: Kitchen
+                icon: mdi:fridge
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: Sink
+                entity: light.kitchen_sink_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: LED
+                entity: light.kitchen_led_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #1'
+                entity: light.kitchen_ceiling_01
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle
+              - type: custom:bubble-card
+                card_type: button
+                button_type: slider
+                name: 'Ceiling #2'
+                entity: light.kitchen_ceiling_02
+                show_state: true
+                tap_action:
+                  action: toggle
+                button_action:
+                  tap_action:
+                    action: toggle