UI v3

config/lovelace/button_card_templates/v2/default_button.yaml

@@ -0,0 +1,2 @@
+default:
+  template: [regular, with_state_background]

config/lovelace/button_card_templates/v2/devices/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

config/lovelace/button_card_templates/v2/devices/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/v2/devices/cover.yaml

@@ -0,0 +1,5 @@
+cover:
+  icon: >
+    [[[
+      return entity.state === "open" ? "mdi:window-shutter-open" : "mdi:window-shutter";
+    ]]]

config/lovelace/button_card_templates/v2/devices/hallway_dashboard_mode_button.yaml

@@ -0,0 +1,17 @@
+hallway_dashboard_mode:
+  template: [small]
+  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/v2/devices/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.entity_id ]]]"

config/lovelace/button_card_templates/v2/humidity_button.yaml

@@ -0,0 +1,11 @@
+humidity_button:
+  type: custom:button-card
+  template: [regular, 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/v2/mixins/progress_button.yaml

@@ -0,0 +1,64 @@
+progress:
+  variables:
+    min_value: 5
+    max_value: 40
+    normal_value: 19
+    high_value: 23
+    low_color: "var(--primary-color)"
+    normal_color: "var(--color-green)"
+    high_color: "var(--color-red)"
+    degrees: 180
+  triggers_update: all
+  show_state: true
+  show_name: true
+  styles:
+    name:
+      - position: absolute
+      - top: "[[[ return this.___config.show_state ? '65%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_state ? 'initial' : '100%' ]]]"
+      - font-size: 1em
+    state:
+      - position: absolute
+      - top: "[[[ return this.___config.show_name ? '22%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_name ? 'initial' : '100%' ]]]"
+      - font-size: 1.9em
+    icon:
+      - position: absolute
+      - top: 4px
+      - right: -4px
+      - height: 16px
+    img_cell:
+      - position: initial
+    card:
+      - background: >
+          [[[
+            const temp = entity.state;
+
+            const color = temp < variables.normal_value
+              ? variables.low_color
+              : temp < variables.high_value
+                ? variables.normal_color
+                : variables.high_color;
+
+            const min             = variables.min_value;
+            const max             = variables.max_value;
+            const percent         = Math.round((temp - min)/(max - min) * 100);
+            const gradientPercent = 100 - percent;
+
+            const gradient = [
+              `${variables.degrees}deg`,
+              'var(--paper-card-background-color) 0%',
+              `var(--paper-card-background-color) ${gradientPercent}%`,
+              `${color} ${gradientPercent}%`
+            ]
+
+            return `linear-gradient(${gradient.join(',')})`;
+          ]]]

config/lovelace/button_card_templates/v2/mixins/scene_button.yaml

@@ -0,0 +1,24 @@
+scene:
+  variables:
+    scene_color_1:
+    scene_color_2:
+    degrees: 315
+  tap_action:
+    action: call-service
+    service: scene.turn_on
+    service_data:
+      entity_id: "[[[ return entity.entity_id ]]]"
+  styles:
+    card:
+      - background: >
+          [[[
+            const color_1 = variables.scene_color_1;
+            const color_2 = variables.scene_color_2 || variables.scene_color_1;
+            const degrees = variables.degrees;
+
+            return "linear-gradient("
+                + degrees + "deg, "
+                + color_1 + " 7%, "
+                + color_2 + " 7%, "
+                + color_2 + " 11%, var(--paper-card-background-color) 11%)"
+          ]]]

config/lovelace/button_card_templates/v2/mixins/with_state_background_button.yaml

@@ -0,0 +1,30 @@
+with_state_background:
+  state:
+    - value: 'on'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'home'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'recording'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black
+    - value: 'open'
+      styles:
+        card:
+          - background-color: var(--primary-color)
+          - color: black
+        icon:
+          - color: black

config/lovelace/button_card_templates/v2/mixins/with_state_indicator_button.yaml

@@ -0,0 +1,57 @@
+with_state_indicator:
+  variables:
+    state_indicator_id:  # defaults to entity_id
+
+    state_indicator_size: 2px
+    state_indicator_off_size:  # If set, used when the state_indicator entity is off
+
+    # state indicators are used when the entity's state is not 'on'
+    state_indicator_on_color: white
+    state_indicator_off_color: transparent
+
+    # state_on_indicator_s are used when the entity's state is 'on':
+    state_on_indicator_on_color: white
+    state_on_indicator_off_color: transparent
+
+  triggers_update: all  # unfortunately a template doesn't seem to work here :/
+  double_tap_action:
+    action: call-service
+    service: homeassistant.toggle
+    service_data:
+      entity_id: "[[[ return variables.state_indicator_id || entity.entity_id ]]]"
+  styles:
+    name:
+      - transform: >
+          [[[
+            const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
+
+            const size = states[state_indicator_entity].state === 'on'
+              ? variables.state_indicator_size
+              : variables.state_indicator_off_size || variables.state_indicator_size
+
+            return 'translateY(' + size + ')'
+          ]]]
+
+    card:
+      - border-bottom: >-
+          [[[
+            let color;
+            const state_indicator_entity = variables.state_indicator_id || entity.entity_id;
+            const is_state_indicator_on = Boolean(states[state_indicator_entity].state === 'on');
+
+            if (entity.state === 'on') {
+              color = is_state_indicator_on
+                  ? variables.state_on_indicator_on_color
+                  : variables.state_on_indicator_off_color;
+            } else {
+              color = is_state_indicator_on
+                  ? variables.state_indicator_on_color
+                  : variables.state_indicator_off_color;
+            }
+
+            const size = is_state_indicator_on
+              ? variables.state_indicator_size
+              : variables.state_indicator_off_size || variables.state_indicator_size
+
+            return size + ' solid ' + color;
+          ]]]

config/lovelace/button_card_templates/v2/sizes/half_button.yaml

@@ -0,0 +1,10 @@
+half:
+  template: with_state_background
+  size: 30px
+  show_icon: false
+  hold_action:
+    action: more-info
+  styles:
+    card:
+      - height: 45px
+      - font-size: 14px

config/lovelace/button_card_templates/v2/sizes/regular_button.yaml

@@ -0,0 +1,14 @@
+regular:
+  size: 30px
+  hold_action:
+    action: more-info
+  styles:
+    card:
+      - height: 100px
+      - font-size: 14px
+    grid:
+      - height: 90px
+    img_cell:
+      - height: 60px
+    name:
+      - height: 30px

config/lovelace/button_card_templates/v2/sizes/small_button.yaml

@@ -0,0 +1,14 @@
+small:
+  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/v2/sizes/xs_button.yaml

@@ -0,0 +1,10 @@
+xs:
+  size: 20px
+  hold_action:
+    action: more-info
+  styles:
+    card:
+      - height: 70px
+      - font-size: 12px
+    name:
+      - height: 24px