Initial hallway UI. Button refactoring.

config/advanced-lovelace.yaml

@@ -1,9 +1,3 @@
-custom_header:
-  compact_mode: true
-  chevrons: false
-  indicator_top: true
-  options_hide: true
-
 decluttering_templates: !include_dir_merge_named lovelace/decluttering_templates
 button_card_templates: !include_dir_merge_named lovelace/button_card_templates
 

config/configuration.yaml

@@ -43,6 +43,11 @@ lovelace:
       icon: mdi:flask
       show_in_sidebar: true
       filename: advanced-lovelace.yaml
+    lovelace-hallway:
+      mode: yaml
+      title: Hallway Dashboard
+      icon: mdi:tablet-dashboard
+      filename: hallway-lovelace.yaml
 
 # https://www.home-assistant.io/components/map
 # map:

config/hallway-lovelace.yaml

@@ -0,0 +1,17 @@
+decluttering_templates: !include_dir_merge_named lovelace/decluttering_templates
+button_card_templates: !include_dir_merge_named lovelace/button_card_templates
+popup_cards: !include lovelace/popup_cards.yaml
+
+title: Sarah
+views:
+  - title: Sarah
+    path: hallway_dashboard
+    icon: mdi:tablet-dashboard
+    panel: true
+    cards:
+      - type: custom:state-switch
+        entity: input_select.hallway_dashboard_mode
+        states:
+          Home: !include lovelace/hallway_dashboard/at_home_dashboard.yaml
+          Leaving: !include lovelace/hallway_dashboard/leaving_home_dashboard.yaml
+          "Coming Home": !include lovelace/hallway_dashboard/coming_home_dashboard.yaml

config/lovelace/button_card_templates/ac_button.yaml

@@ -0,0 +1,16 @@
+ac_button:
+  template: default
+  entity: climate.toshiba_ac
+  name: AC
+  state:
+    - value: 'off'
+      operator: '!='
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+  tap_action:
+    action: call-service
+    service: script.toshiba_ac_toggle_cool

config/lovelace/button_card_templates/brita_water_button.yaml

@@ -0,0 +1,53 @@
+brita_water:
+  template: [default, with_state_indicator]
+  name: Brita water
+  entity: script.brita_pour_water
+  custom_fields:
+    remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
+  tap_action:
+    action: toggle
+  styles:
+    card:
+      - background: >
+          [[[
+            const remaining = states['input_number.brita_remaining_liters'].state;
+            const percent = 100 - (remaining / 150 * 100);
+
+            const gradient = [
+              '180deg',
+              'var(--paper-card-background-color) 0%',
+              `var(--paper-card-background-color) ${percent}%`,
+              `var(--primary-color) ${percent}%`
+            ]
+
+            return `linear-gradient(${gradient.join(',')})`;
+          ]]]
+      - color: white
+    name:
+      - color: >
+          [[[
+            const remaining = states['input_number.brita_remaining_liters'].state;
+            const percent = 100 - (remaining / 150 * 100);
+
+            return percent < 75 ? 'black' : 'white';
+          ]]]
+    icon:
+      - color: >
+          [[[
+            const remaining = states['input_number.brita_remaining_liters'].state;
+            const percent = 100 - (remaining / 150 * 100);
+
+            return percent < 25 ? 'black' : 'white';
+          ]]]
+    custom_fields:
+      remaining_liters:
+        - position: absolute
+        - top: 8px
+        - right: 5px
+        - font-size: 12px
+  variables:
+    state_indicator_id: binary_sensor.brita_should_change_filter
+    state_indicator_size: 5px
+    state_indicator_off_size: 0px
+    state_indicator_on_color: var(--color-red)
+    state_on_indicator_on_color: var(--color-red)

config/lovelace/button_card_templates/hallway_dashboard_mode_button.yaml

@@ -0,0 +1,17 @@
+hallway_dashboard_mode:
+  template: [mobile]
+  entity: input_select.hallway_dashboard_mode
+  show_state: true
+  show_name: false
+  styles:
+    state:
+      - position: relative
+      - top: -6px
+    icon:
+      - position: relative
+      - top: -2px
+  tap_action:
+    action: call-service
+    service: input_select.select_next
+    service_data:
+      entity_id: input_select.hallway_dashboard_mode

config/lovelace/button_card_templates/humidity_button.yaml

@@ -0,0 +1,11 @@
+humidity_button:
+  type: custom:button-card
+  template: [small, progress]
+  state_display: "[[[ return Math.round(entity.state) + ' %' ]]]"
+  icon: mdi:water-percent
+  variables:
+    min_value: 25
+    max_value: 90
+    normal_value: 40
+    high_value: 65
+    low_color: "var(--color-red)"

config/lovelace/button_card_templates/mobile_button.yaml

@@ -0,0 +1,14 @@
+mobile:
+  size: 24px
+  hold_action:
+    action: more-info
+  styles:
+    card:
+      - height: 70px
+      - font-size: 14px
+    grid:
+      - height: 60px
+    img_cell:
+      - height: 40px
+    name:
+      - height: 24px

config/lovelace/button_card_templates/radiator_button.yaml

@@ -0,0 +1,18 @@
+radiator_button:
+  template: [default]
+  name: "Radiator"
+  icon: mdi:radiator
+  state:
+    - value: 'off'
+      operator: '!='
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+  tap_action:
+    action: call-service
+    service: script.toggle_radiator
+    service_data:
+      entity_id: '[[[ return entity.id ]]]'

config/lovelace/decluttering_templates/cards/ac_button_card.yaml

@@ -1,18 +0,0 @@
-ac_button_card:
-  card:
-    type: custom:button-card
-    template: default
-    entity: climate.toshiba_ac
-    name: AC
-    state:
-      - value: 'off'
-        operator: '!='
-        styles:
-          card:
-            - background-color: var(--primary-color)
-            - color: black
-          icon:
-            - color: black
-    tap_action:
-      action: call-service
-      service: script.toshiba_ac_toggle_cool

config/lovelace/decluttering_templates/cards/brita_water_card.yaml

@@ -1,55 +0,0 @@
-brita_water_card:
-  card:
-    type: custom:button-card
-    template: [default, with_state_indicator]
-    name: Brita water
-    entity: script.brita_pour_water
-    custom_fields:
-      remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
-    tap_action:
-      action: toggle
-    styles:
-      card:
-        - background: >
-            [[[
-              const remaining = states['input_number.brita_remaining_liters'].state;
-              const percent = 100 - (remaining / 150 * 100);
-
-              const gradient = [
-                '180deg',
-                'var(--paper-card-background-color) 0%',
-                `var(--paper-card-background-color) ${percent}%`,
-                `var(--primary-color) ${percent}%`
-              ]
-
-              return `linear-gradient(${gradient.join(',')})`;
-            ]]]
-        - color: white
-      name:
-        - color: >
-            [[[
-              const remaining = states['input_number.brita_remaining_liters'].state;
-              const percent = 100 - (remaining / 150 * 100);
-
-              return percent < 75 ? 'black' : 'white';
-            ]]]
-      icon:
-        - color: >
-            [[[
-              const remaining = states['input_number.brita_remaining_liters'].state;
-              const percent = 100 - (remaining / 150 * 100);
-
-              return percent < 25 ? 'black' : 'white';
-            ]]]
-      custom_fields:
-        remaining_liters:
-          - position: absolute
-          - top: 8px
-          - right: 5px
-          - font-size: 12px
-    variables:
-      state_indicator_id: binary_sensor.brita_should_change_filter
-      state_indicator_size: 5px
-      state_indicator_off_size: 0px
-      state_indicator_on_color: var(--color-red)
-      state_on_indicator_on_color: var(--color-red)

config/lovelace/decluttering_templates/cards/radiator_button_card.yaml

@@ -1,23 +0,0 @@
-radiator_button_card:
-  default:
-    - name: "Radiator"
-  card:
-    type: custom:button-card
-    template: default
-    entity: "[[entity_id]]"
-    name: "[[name]]"
-    icon: mdi:radiator
-    state:
-      - value: 'off'
-        operator: '!='
-        styles:
-          card:
-            - background-color: var(--primary-color)
-            - color: black
-          icon:
-            - color: black
-    tap_action:
-      action: call-service
-      service: script.toggle_radiator
-      service_data:
-        entity_id: "[[entity_id]]"

config/lovelace/hallway_dashboard/at_home_dashboard.yaml

@@ -0,0 +1,246 @@
+type: custom:layout-card
+layout: horizontal
+max_columns: 2
+cards:
+  # Column 1
+  - type: vertical-stack
+    cards:
+      - type: vertical-stack
+        cards:
+          - type: horizontal-stack
+            cards:
+              - type: custom:button-card
+                template: half
+                icon: none
+                entity: light.all
+                name: All
+              - type: custom:button-card
+                template: half
+                icon: none
+                entity: light.ceiling
+                name: Ceiling
+          - type: horizontal-stack
+            cards:
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.living_room
+                name: Living room
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.living_room_main
+                name: Main
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.light_avatar_small_2
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.living_room_ambient
+                name: Ambient
+          - type: horizontal-stack
+            cards:
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.master_bedroom
+                name: Bedroom
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.master_bedroom_main
+                name: Main
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.bed_led
+                name: Bed
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.bedside
+                name: Bedside
+          - type: horizontal-stack
+            cards:
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.tuya_kitchen
+                name: Kitchen
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.tuya_hallway_main
+                name: Hallway
+              - type: custom:button-card
+                template: [mobile, with_state_background]
+                entity: light.hallway_entrance
+                name: Entrance
+
+      - type: custom:decluttering-card
+        template: media_with_controls
+        variables:
+          - player: media_player.master_bedroom
+          - player_name: Bedroom
+          - title: ""
+
+  # Column 2
+  - type: vertical-stack
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: [hallway_dashboard_mode]
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: input_boolean.speech_notifications
+            name: Speech
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: binary_sensor.house_mode
+            tap_action:
+              action: call-service
+              service: input_select.select_next
+              service_data:
+                entity_id: input_select.house_mode
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: input_boolean.guest_mode
+            tap_action:
+              action: toggle
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: mobile
+            entity: media_player.living_room_tv
+            name: TV
+            icon: mdi:television
+            tap_action:
+              action: toggle
+            state:
+              - value: 'playing'
+                styles: &on_styles
+                  card:
+                    - background-color: var(--primary-color)
+                    - color: black
+                  icon:
+                    - color: black
+              - value: 'standby'
+                styles: *on_styles
+              - value: 'on'
+                styles: *on_styles
+              - value: 'home'
+                styles: *on_styles
+              - value: 'idle'
+                styles: *on_styles
+
+          - type: custom:button-card
+            template: [mobile, with_state_background, with_state_indicator]
+            entity: switch.titanium
+            variables:
+              state_indicator_id: automation.titanium_turn_off_when_idle
+
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: sensor.synology_type_volume_1
+            name: Platinum
+            icon: mdi:nas
+            tap_action:
+              action: more-info
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: binary_sensor.pi_hole_enabled
+            name: Pi-Hole
+            icon: mdi:pi-hole
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: [ac_button, mobile]
+          - type: custom:button-card
+            template: [radiator_button, mobile]
+            entity: climate.living_room_radiator_mode
+            name: "Living room"
+          - type: custom:button-card
+            template: [radiator_button, mobile]
+            entity: climate.bedroom_radiator_mode
+            name: "Bedroom"
+          - type: custom:button-card
+            template: [radiator_button, mobile]
+            entity: climate.kitchen_radiator_mode
+            name: "Kitchen"
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: switch.camera
+            name: Camera
+          - type: custom:button-card
+            template: [mobile, with_state_indicator]
+            entity: fan.philips_airpurifier
+            variables:
+              state_indicator_id: binary_sensor.purifier_filter_needs_change
+              state_indicator_size: 5px
+              state_indicator_off_size: 0px
+              state_indicator_on_color: var(--color-red)
+              state_on_indicator_on_color: var(--color-red)
+          - type: custom:button-card
+            template: [mobile, with_state_background]
+            entity: vacuum.vacuum
+            name: Vacuum
+          - type: custom:button-card
+            template: [brita_water, mobile]
+
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.multisensor_6_temperature
+            name: Living room
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.bedroom_weather_temperature
+            name: Bedroom
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.kitchen_weather_temperature
+            name: Kitchen
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.bathroom_weather_temperature
+            name: Bathroom
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.hallway_weather_temperature
+            name: Hallway
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+          - type: custom:button-card
+            template: [xs, progress]
+            entity: sensor.guest_bedroom_weather_temperature
+            name: G. Bedroom
+            state_display: "[[[ return Math.round(entity.state) + ' °C' ]]]"
+
+      - type: horizontal-stack
+        cards:
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.multisensor_6_relative_humidity
+            name: Living room
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.bedroom_weather_humidity
+            name: Bedroom
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.kitchen_weather_humidity
+            name: Kitchen
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.bathroom_weather_humidity
+            name: Bathroom
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.hallway_weather_humidity
+            name: Hallway
+          - type: custom:button-card
+            template: [humidity_button, xs]
+            entity: sensor.guest_bedroom_weather_humidity
+            name: G. Bedroom

config/lovelace/hallway_dashboard/coming_home_dashboard.yaml

@@ -0,0 +1,6 @@
+type: custom:layout-card
+layout: horizontal
+max_columns: 2
+cards:
+  - type: custom:button-card
+    template: [hallway_dashboard_mode]

config/lovelace/hallway_dashboard/leaving_home_dashboard.yaml

@@ -0,0 +1,6 @@
+type: custom:layout-card
+layout: horizontal
+max_columns: 2
+cards:
+  - type: custom:button-card
+    template: [hallway_dashboard_mode]

config/lovelace/home_dashboard/bedroom_dashboard.yaml

@@ -79,10 +79,9 @@
           - type: horizontal-stack
             title: Climate
             cards:
-              - type: custom:decluttering-card
-                template: radiator_button_card
-                variables:
-                  - entity_id: climate.bedroom_radiator_mode
+              - type: custom:button-card
+                template: radiator_button
+                entity: climate.bedroom_radiator_mode
               - type: custom:button-card
                 template: [default, with_state_indicator]
                 entity: fan.philips_airpurifier

config/lovelace/home_dashboard/kitchen_dashboard.yaml

@@ -48,12 +48,11 @@
           - type: horizontal-stack
             title: Devices
             cards:
-              - type: custom:decluttering-card
-                template: radiator_button_card
-                variables:
-                  - entity_id: climate.kitchen_radiator_mode
-              - type: custom:decluttering-card
-                template: brita_water_card
+              - type: custom:button-card
+                template: radiator_button
+                entity: climate.kitchen_radiator_mode
+              - type: custom:button-card
+                template: [brita_water, mobile]
               - type: custom:button-card
                 template: default
                 entity: media_player.nvidia_shield

config/lovelace/home_dashboard/living_room_dashboard.yaml

@@ -93,12 +93,11 @@
                 icon: mdi:pi-hole
           - type: horizontal-stack
             cards:
-              - type: custom:decluttering-card
-                template: radiator_button_card
-                variables:
-                  - entity_id: climate.living_room_radiator_mode
-              - type: custom:decluttering-card
-                template: ac_button_card
+              - type: custom:button-card
+                template: radiator_button
+                entity: climate.living_room_radiator_mode
+              - type: custom:button-card
+                template: ac_button
               - type: custom:button-card
                 template: [small, progress]
                 entity: sensor.desk_outlet_power

config/lovelace/home_dashboard/main_dashboard.yaml

@@ -132,23 +132,20 @@
 
               - type: horizontal-stack
                 cards:
-                  - type: custom:decluttering-card
-                    template: ac_button_card
-                  - type: custom:decluttering-card
-                    template: radiator_button_card
-                    variables:
-                      - entity_id: climate.living_room_radiator_mode
-                      - name: "Living room"
-                  - type: custom:decluttering-card
-                    template: radiator_button_card
-                    variables:
-                      - entity_id: climate.bedroom_radiator_mode
-                      - name: "Bedroom"
-                  - type: custom:decluttering-card
-                    template: radiator_button_card
-                    variables:
-                      - entity_id: climate.kitchen_radiator_mode
-                      - name: "Kitchen"
+                  - type: custom:button-card
+                    template: ac_button
+                  - type: custom:button-card
+                    template: radiator_button
+                    entity: climate.living_room_radiator_mode
+                    name: "Living room"
+                  - type: custom:button-card
+                    template: radiator_button
+                    entity: climate.bedroom_radiator_mode
+                    name: "Bedroom"
+                  - type: custom:button-card
+                    template: radiator_button
+                    entity: climate.kitchen_radiator_mode
+                    name: "Kitchen"
               - type: horizontal-stack
                 cards:
                   - type: custom:button-card
@@ -168,8 +165,8 @@
                     template: default
                     entity: vacuum.vacuum
                     name: Vacuum
-                  - type: custom:decluttering-card
-                    template: brita_water_card
+                  - type: custom:button-card
+                    template: [brita_water, mobile]
 
       # Column 2
       - type: vertical-stack
@@ -232,7 +229,7 @@
                         entity: binary_sensor.kitchen_motion_occupancy
                         name: Kitchen
                         variables:
-                          state_indicator_id: automation.lighting_kitchen_day_mode_motion_turn_lights_on
+                          state_indicator_id: automation.lighting_kitchen_motion_on
                       - type: custom:button-card
                         template: [default, with_state_indicator]
                         entity: binary_sensor.hallway_motion_occupancy
@@ -304,7 +301,7 @@
                 template: media_with_controls
                 variables:
                   - player: media_player.master_bedroom
-                  - player_name: Bathroom
+                  - player_name: Bedroom
 
               - type: custom:decluttering-card
                 template: sonos_media_player_small

config/packages/devices/hallway/hallway_tablet.yaml

@@ -0,0 +1,9 @@
+input_select:
+  hallway_dashboard_mode:
+    name: Hallway dashboard mode
+    icon: mdi:tablet-dashboard
+    options:
+      - "Home"
+      - "Leaving"
+      - "Coming Home"
+