Initial hallway UI. Button refactoring.

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 ]]]'