3.3.6 - Spinboxes and More

Changes in 3.3.6

• Fix non-legacy string interpolation values being replaced #28.
• Make template variables available as lower case (value, unit, hold_secs, and offset) and update README to use lowercase template variables.
• Set value to undefined if entity ID isn't in hass states object.
• Account for precision when using value in template.
• Do not run legacy string interpolation code when template is detected.

New Tile Feature - Spinboxes! #21

This release adds spinboxes a la the target temperature feature. In it's default mode, the value of the spinbox can be incremented or decremented until a desired value is reached, and only then will it's tap action be called. This allows you to set values without spamming a service like you would with traditional buttons. That being said, you can also override the default behavior of spinboxes and turn it's increment and decrement buttons into custom button features by adding actions to the increment and decrement fields. You can also use these fields to stylize your spinbox buttons with different icons and text as seen above.

New Action - fire-dom-event #22

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

Momentary Button Mode

Momentary button mode is an alternate button operating mode which fires one action when initially held down and a different action when released. It can be enabled by creating actions momentary_start_action and/or momentary_end_action. Doing so overrides the default single/double/hold tap behavior of buttons. You can include the amount of time the button is held down in fields of momentary_end_action by including HOLD_SECS in the action fields.

Haptics, Custom Timings, and Repeat on Hold

You can now enable haptics on all features! Set haptics to true on a tile feature to do so. You can also now customize button timings for the amount of time you have to trigger a double tap action double_tap_window, and how long you have to hold a button to trigger a hold action hold_time, both in milliseconds.

You can now set a hold action to repeat, and it will repeat it's tap action every 100ms. You can change the repeat interval by setting repeat_delay in milliseconds.

features:
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:thermometer
        label: '{{ VALUE }}{{ UNIT }}'
        range:
          - '{{ state_attr("climate.downstairs_thermostat", "min_temp") }}'
          - '{{ state_attr("climate.downstairs_thermostat", "max_temp") }}'
        step: 1 # defaults to 1
        debounce_time: 1000 # defaults to 1000
        value_from_hass_delay: 5000 # defaults to 1000 but may need to be set higher for devices that take time to update like thermostats to prevent slider/label value bouncing
        value_attribute: temperature
        unit_of_measurement: ' °F'
        tap_action:
          service: climate.set_temperature
          data:
            entity_id: climate.downstairs_thermostat
            temperature: '{{ VALUE }}'
        hold_action:
          action: repeat
        style:
          '--background': var(--tile-color)
          '--icon-color': var(--tile-color)
          flex-flow: row
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:brightness-4
        label: '{{ VALUE }}'
        step: 10
        range: # no default must be set by user if applicable
          - 0
          - 100
        value_attribute: brightness
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            brightness_pct: '{{ VALUE }}'
        decrement:
          icon: mdi:brightness-3
          label: down
          tap_action: # the increment/decrement actions do nothing as shown here because actions are set to none
            action: none # set to call-service to change increment/decrement actions
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: -10
          style:
            flex-flow: row # by default icons are above labels, this makes them in line
          icon_style:
            padding-right: 4px
        increment:
          icon: mdi:brightness-2
          label: up
          tap_action:
            action: none
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: 10
          style:
            flex-flow: row-reverse
          icon_style:
            padding-left: 4px
        style:
          '--light-color': rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
          '--on-color': >-
            {{ "var(--light-color)" if is_state("light.sunroom_ceiling", "on")
            else "initial" }}
          '--background': var(--on-color)
          '--icon-color': var(--on-color)
          '--label-color': var(--on-color)
type: tile
entity: climate.downstairs_thermostat

Other Changes

• Sliders will now properly update if their value is changed by something else after the user has touched them.
• Double tap events no longer have an infinite window if there is no tap action at all.
• VALUE, HOLD_SECS, and UNIT can be used in (almost) all actions, icons, and labels.
• Style tooltip using tooltip_style.
  • Deprecates tooltip.
• Change the amount of time slider and spinbox features wait before allowing for value updates from Home Assistant after using them using value_from_hass_delay (defaults to 1000ms).

Huge thanks to @irakhlin for their research on spinbox behavior, implementation of fire-dom-event #23, and slider feedback regarding attributes that are arrays.

Patch Version Changes

• Use card context when rendering templates when possible (value, units, tooltip offset, hold seconds).
• Add tooltip CSS properties which can be set by the user either in style or tooltip_style:
  • --tooltip-label, defaults to {{ VALUE }}{{ UNIT }}.
    • VALUE corresponds to the current slider value instead of the final one used in actions.
  • --tooltip-offset, defaults to {{ OFFSET }}px.
    • OFFSET corresponds to the tooltip x offset from center in pixels.
  • --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
  • --tooltip-display, defaults to initial.
    • Deprecated field tooltip will also set this property.
• Value will update once per second if it's value attribute is media_position.
• Fixed issue where value attribute templates were lower cased before rendering.
• Slider on/off rendering improvements.
• Fixed issue where slider animation interval was not clearing.
• Entity ID is now cached after rendering.
• Calculate precision for spinboxes.
• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke display precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Icon and label render logic refactors.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Timer value is now 0 when idle.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.
• Fix non-legacy string interpolation values being replaced #28.
• Make template variables available as lower case (value, unit, hold_secs, and offset) and update README to use lowercase template variables.
• Set value to undefined if entity ID isn't in hass states object.
• Account for precision when using value in template.
• Do not run legacy string interpolation code when template is detected.

What's Changed

• Add fire-dom-event support by @irakhlin in #23

New Contributors

• @irakhlin made their first contribution in #23

Full Changelog: 3.3.0...3.3.6

3.3.3 - Spinboxes and More

Changes in 3.3.3

• Icon and label render logic refactors.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Timer value is now 0 when idle.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.

New Tile Feature - Spinboxes! #21

This release adds spinboxes a la the target temperature feature. In it's default mode, the value of the spinbox can be incremented or decremented until a desired value is reached, and only then will it's tap action be called. This allows you to set values without spamming a service like you would with traditional buttons. That being said, you can also override the default behavior of spinboxes and turn it's increment and decrement buttons into custom button features by adding actions to the increment and decrement fields. You can also use these fields to stylize your spinbox buttons with different icons and text as seen above.

New Action - fire-dom-event #22

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

Momentary Button Mode

Momentary button mode is an alternate button operating mode which fires one action when initially held down and a different action when released. It can be enabled by creating actions momentary_start_action and/or momentary_end_action. Doing so overrides the default single/double/hold tap behavior of buttons. You can include the amount of time the button is held down in fields of momentary_end_action by including HOLD_SECS in the action fields.

Haptics, Custom Timings, and Repeat on Hold

You can now enable haptics on all features! Set haptics to true on a tile feature to do so. You can also now customize button timings for the amount of time you have to trigger a double tap action double_tap_window, and how long you have to hold a button to trigger a hold action hold_time, both in milliseconds.

You can now set a hold action to repeat, and it will repeat it's tap action every 100ms. You can change the repeat interval by setting repeat_delay in milliseconds.

features:
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:thermometer
        label: '{{ VALUE }}{{ UNIT }}'
        range:
          - '{{ state_attr("climate.downstairs_thermostat", "min_temp") }}'
          - '{{ state_attr("climate.downstairs_thermostat", "max_temp") }}'
        step: 1 # defaults to 1
        debounce_time: 1000 # defaults to 1000
        value_from_hass_delay: 5000 # defaults to 1000 but may need to be set higher for devices that take time to update like thermostats to prevent slider/label value bouncing
        value_attribute: temperature
        unit_of_measurement: ' °F'
        tap_action:
          service: climate.set_temperature
          data:
            entity_id: climate.downstairs_thermostat
            temperature: '{{ VALUE }}'
        hold_action:
          action: repeat
        style:
          '--background': var(--tile-color)
          '--icon-color': var(--tile-color)
          flex-flow: row
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:brightness-4
        label: '{{ VALUE }}'
        step: 10
        range: # no default must be set by user if applicable
          - 0
          - 100
        value_attribute: brightness
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            brightness_pct: '{{ VALUE }}'
        decrement:
          icon: mdi:brightness-3
          label: down
          tap_action: # the increment/decrement actions do nothing as shown here because actions are set to none
            action: none # set to call-service to change increment/decrement actions
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: -10
          style:
            flex-flow: row # by default icons are above labels, this makes them in line
          icon_style:
            padding-right: 4px
        increment:
          icon: mdi:brightness-2
          label: up
          tap_action:
            action: none
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: 10
          style:
            flex-flow: row-reverse
          icon_style:
            padding-left: 4px
        style:
          '--light-color': rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
          '--on-color': >-
            {{ "var(--light-color)" if is_state("light.sunroom_ceiling", "on")
            else "initial" }}
          '--background': var(--on-color)
          '--icon-color': var(--on-color)
          '--label-color': var(--on-color)
type: tile
entity: climate.downstairs_thermostat

Other Changes

• Sliders will now properly update if their value is changed by something else after the user has touched them.
• Double tap events no longer have an infinite window if there is no tap action at all.
• VALUE, HOLD_SECS, and UNIT can be used in (almost) all actions, icons, and labels.
• Style tooltip using tooltip_style.
  • Deprecates tooltip.
• Change the amount of time slider and spinbox features wait before allowing for value updates from Home Assistant after using them using value_from_hass_delay (defaults to 1000ms).

Huge thanks to @irakhlin for their research on spinbox behavior, implementation of fire-dom-event #23, and slider feedback regarding attributes that are arrays.

Patch Version Changes

• Use card context when rendering templates when possible (value, units, tooltip offset, hold seconds).
• Add tooltip CSS properties which can be set by the user either in style or tooltip_style:
  • --tooltip-label, defaults to {{ VALUE }}{{ UNIT }}.
    • VALUE corresponds to the current slider value instead of the final one used in actions.
  • --tooltip-offset, defaults to {{ OFFSET }}px.
    • OFFSET corresponds to the tooltip x offset from center in pixels.
  • --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
  • --tooltip-display, defaults to initial.
    • Deprecated field tooltip will also set this property.
• Value will update once per second if it's value attribute is media_position.
• Fixed issue where value attribute templates were lower cased before rendering.
• Slider on/off rendering improvements.
• Fixed issue where slider animation interval was not clearing.
• Entity ID is now cached after rendering.
• Calculate precision for spinboxes.
• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke display precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.
• Icon and label render logic refactors.
• Change slider off logic to check entity state instead of assuming the device is off when it's value is 0.
• Timer value is now 0 when idle.
• Decrease flat thumb slider thumb thickness so it looks better when at range minimum value.

What's Changed

• Add fire-dom-event support by @irakhlin in #23

New Contributors

• @irakhlin made their first contribution in #23

Full Changelog: 3.3.0...3.3.3

3.3.2 - Spinboxes and More

Changes in 3.3.2

• Calculate precision for spinboxes.
• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke display precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.

New Tile Feature - Spinboxes! #21

This release adds spinboxes a la the target temperature feature. In it's default mode, the value of the spinbox can be incremented or decremented until a desired value is reached, and only then will it's tap action be called. This allows you to set values without spamming a service like you would with traditional buttons. That being said, you can also override the default behavior of spinboxes and turn it's increment and decrement buttons into custom button features by adding actions to the increment and decrement fields. You can also use these fields to stylize your spinbox buttons with different icons and text as seen above.

New Action - fire-dom-event #22

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

Momentary Button Mode

Momentary button mode is an alternate button operating mode which fires one action when initially held down and a different action when released. It can be enabled by creating actions momentary_start_action and/or momentary_end_action. Doing so overrides the default single/double/hold tap behavior of buttons. You can include the amount of time the button is held down in fields of momentary_end_action by including HOLD_SECS in the action fields.

Haptics, Custom Timings, and Repeat on Hold

You can now enable haptics on all features! Set haptics to true on a tile feature to do so. You can also now customize button timings for the amount of time you have to trigger a double tap action double_tap_window, and how long you have to hold a button to trigger a hold action hold_time, both in milliseconds.

You can now set a hold action to repeat, and it will repeat it's tap action every 100ms. You can change the repeat interval by setting repeat_delay in milliseconds.

features:
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:thermometer
        label: '{{ VALUE }}{{ UNIT }}'
        range:
          - '{{ state_attr("climate.downstairs_thermostat", "min_temp") }}'
          - '{{ state_attr("climate.downstairs_thermostat", "max_temp") }}'
        step: 1 # defaults to 1
        debounce_time: 1000 # defaults to 1000
        value_from_hass_delay: 5000 # defaults to 1000 but may need to be set higher for devices that take time to update like thermostats to prevent slider/label value bouncing
        value_attribute: temperature
        unit_of_measurement: ' °F'
        tap_action:
          service: climate.set_temperature
          data:
            entity_id: climate.downstairs_thermostat
            temperature: '{{ VALUE }}'
        hold_action:
          action: repeat
        style:
          '--background': var(--tile-color)
          '--icon-color': var(--tile-color)
          flex-flow: row
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:brightness-4
        label: '{{ VALUE }}'
        step: 10
        range: # no default must be set by user if applicable
          - 0
          - 100
        value_attribute: brightness
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            brightness_pct: '{{ VALUE }}'
        decrement:
          icon: mdi:brightness-3
          label: down
          tap_action: # the increment/decrement actions do nothing as shown here because actions are set to none
            action: none # set to call-service to change increment/decrement actions
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: -10
          style:
            flex-flow: row # by default icons are above labels, this makes them in line
          icon_style:
            padding-right: 4px
        increment:
          icon: mdi:brightness-2
          label: up
          tap_action:
            action: none
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: 10
          style:
            flex-flow: row-reverse
          icon_style:
            padding-left: 4px
        style:
          '--light-color': rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
          '--on-color': >-
            {{ "var(--light-color)" if is_state("light.sunroom_ceiling", "on")
            else "initial" }}
          '--background': var(--on-color)
          '--icon-color': var(--on-color)
          '--label-color': var(--on-color)
type: tile
entity: climate.downstairs_thermostat

Other Changes

• Sliders will now properly update if their value is changed by something else after the user has touched them.
• Double tap events no longer have an infinite window if there is no tap action at all.
• VALUE, HOLD_SECS, and UNIT can be used in (almost) all actions, icons, and labels.
• Style tooltip using tooltip_style.
  • Deprecates tooltip.
• Change the amount of time slider and spinbox features wait before allowing for value updates from Home Assistant after using them using value_from_hass_delay (defaults to 1000ms).

Huge thanks to @irakhlin for their research on spinbox behavior, implementation of fire-dom-event #23, and slider feedback regarding attributes that are arrays.

Patch Version Changes

• Use card context when rendering templates when possible (value, units, tooltip offset, hold seconds).
• Add tooltip CSS properties which can be set by the user either in style or tooltip_style:
  • --tooltip-label, defaults to {{ VALUE }}{{ UNIT }}.
    • VALUE corresponds to the current slider value instead of the final one used in actions.
  • --tooltip-offset, defaults to {{ OFFSET }}px.
    • OFFSET corresponds to the tooltip x offset from center in pixels.
  • --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
  • --tooltip-display, defaults to initial.
    • Deprecated field tooltip will also set this property.
• Value will update once per second if it's value attribute is media_position.
• Fixed issue where value attribute templates were lower cased before rendering.
• Slider on/off rendering improvements.
• Fixed issue where slider animation interval was not clearing.
• Entity ID is now cached after rendering.
• Calculate precision for spinboxes.
• Update ha-nunjucks to 1.2.3.
  • Numbers and numerical strings are no longer cast to numbers by templates, which broke display precision.
• Add special value_attribute logic for elapsed when the entity domain is timer similar to media_position.
• Setting a slider's tap_action.action to none makes it read only.
• Include config/entry in template context as config, including rendered entity ID as entity.
  • Does not work recursively, so other values that are templates will not display correctly.

What's Changed

• Add fire-dom-event support by @irakhlin in #23

New Contributors

• @irakhlin made their first contribution in #23

Full Changelog: 3.3.0...3.3.2

3.3.1 - Spinboxes and More

Changes in 3.3.1

• Use card context when rendering templates when possible (value, units, tooltip offset, hold seconds).
• Add tooltip CSS properties which can be set by the user either in style or tooltip_style:
  • --tooltip-label, defaults to {{ VALUE }}{{ UNIT }}.
    • VALUE corresponds to the current slider value instead of the final one used in actions.
  • --tooltip-offset, defaults to {{ OFFSET }}px.
    • OFFSET corresponds to the tooltip x offset from center in pixels.
  • --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
  • --tooltip-display, defaults to initial.
    • Deprecated field tooltip will also set this property.
• Value will update once per second if it's value attribute is media_position.
• Fixed issue where value attribute templates were lower cased before rendering.
• Slider on/off rendering improvements.
• Fixed issue where slider animation interval was not clearing.
• Entity ID is now cached after rendering.

New Tile Feature - Spinboxes! #21

This release adds spinboxes a la the target temperature feature. In it's default mode, the value of the spinbox can be incremented or decremented until a desired value is reached, and only then will it's tap action be called. This allows you to set values without spamming a service like you would with traditional buttons. That being said, you can also override the default behavior of spinboxes and turn it's increment and decrement buttons into custom button features by adding actions to the increment and decrement fields. You can also use these fields to stylize your spinbox buttons with different icons and text as seen above.

New Action - fire-dom-event #22

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

Momentary Button Mode

Momentary button mode is an alternate button operating mode which fires one action when initially held down and a different action when released. It can be enabled by creating actions momentary_start_action and/or momentary_end_action. Doing so overrides the default single/double/hold tap behavior of buttons. You can include the amount of time the button is held down in fields of momentary_end_action by including HOLD_SECS in the action fields.

Haptics, Custom Timings, and Repeat on Hold

You can now enable haptics on all features! Set haptics to true on a tile feature to do so. You can also now customize button timings for the amount of time you have to trigger a double tap action double_tap_window, and how long you have to hold a button to trigger a hold action hold_time, both in milliseconds.

You can now set a hold action to repeat, and it will repeat it's tap action every 100ms. You can change the repeat interval by setting repeat_delay in milliseconds.

features:
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:thermometer
        label: '{{ VALUE }}{{ UNIT }}'
        range:
          - '{{ state_attr("climate.downstairs_thermostat", "min_temp") }}'
          - '{{ state_attr("climate.downstairs_thermostat", "max_temp") }}'
        step: 1 # defaults to 1
        debounce_time: 1000 # defaults to 1000
        value_from_hass_delay: 5000 # defaults to 1000 but may need to be set higher for devices that take time to update like thermostats to prevent slider/label value bouncing
        value_attribute: temperature
        unit_of_measurement: ' °F'
        tap_action:
          service: climate.set_temperature
          data:
            entity_id: climate.downstairs_thermostat
            temperature: '{{ VALUE }}'
        hold_action:
          action: repeat
        style:
          '--background': var(--tile-color)
          '--icon-color': var(--tile-color)
          flex-flow: row
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:brightness-4
        label: '{{ VALUE }}'
        step: 10
        range: # no default must be set by user if applicable
          - 0
          - 100
        value_attribute: brightness
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            brightness_pct: '{{ VALUE }}'
        decrement:
          icon: mdi:brightness-3
          label: down
          tap_action: # the increment/decrement actions do nothing as shown here because actions are set to none
            action: none # set to call-service to change increment/decrement actions
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: -10
          style:
            flex-flow: row # by default icons are above labels, this makes them in line
          icon_style:
            padding-right: 4px
        increment:
          icon: mdi:brightness-2
          label: up
          tap_action:
            action: none
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: 10
          style:
            flex-flow: row-reverse
          icon_style:
            padding-left: 4px
        style:
          '--light-color': rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
          '--on-color': >-
            {{ "var(--light-color)" if is_state("light.sunroom_ceiling", "on")
            else "initial" }}
          '--background': var(--on-color)
          '--icon-color': var(--on-color)
          '--label-color': var(--on-color)
type: tile
entity: climate.downstairs_thermostat

Other Changes

• Sliders will now properly update if their value is changed by something else after the user has touched them.
• Double tap events no longer have an infinite window if there is not tap action at all.
• VALUE, HOLD_SECS, and UNIT can be used in (almost) all actions, icons, and labels.
• Style tooltip using tooltip_style.
  • Deprecates tooltip.
• Change the amount of time slider and spinbox features wait before allowing for value updates from Home Assistant after using them using value_from_hass_delay (defaults to 1000ms).

Huge thanks to @irakhlin for their research on spinbox behavior, implementation of fire-dom-event #23, and slider feedback regarding attributes that are arrays.

Patch Version Changes

• Use card context when rendering templates when possible (value, units, tooltip offset, hold seconds).
• Add tooltip CSS properties which can be set by the user either in style or tooltip_style:
  • --tooltip-label, defaults to {{ VALUE }}{{ UNIT }}.
    • VALUE corresponds to the current slider value instead of the final one used in actions.
  • --tooltip-offset, defaults to {{ OFFSET }}px.
    • OFFSET corresponds to the tooltip x offset from center in pixels.
  • --tooltip-transform, defaults to translateX(var(--tooltip-offset)).
  • --tooltip-display, defaults to initial.
    • Deprecated field tooltip will also set this property.
• Value will update once per second if it's value attribute is media_position.
• Fixed issue where value attribute templates were lower cased before rendering.
• Slider on/off rendering improvements.
• Fixed issue where slider animation interval was not clearing.
• Entity ID is now cached after rendering.

What's Changed

• Add fire-dom-event support by @irakhlin in #23

New Contributors

• @irakhlin made their first contribution in #23

Full Changelog: 3.2.2...3.3.1

3.3.0 - Spinboxes and More

New Tile Feature - Spinboxes! #21

This release adds spinboxes a la the target temperature feature. In it's default mode, the value of the spinbox can be incremented or decremented until a desired value is reached, and only then will it's tap action be called. This allows you to set values without spamming a service like you would with traditional buttons. That being said, you can also override the default behavior of spinboxes and turn it's increment and decrement buttons into custom button features by adding actions to the increment and decrement fields. You can also use these fields to stylize your spinbox buttons with different icons and text as seen above.

New Action - fire-dom-event #22

You can now fire DOM events as an action! This is useful for opening browser mod popup cards. See the README for a quick example and the browser mod documentation for more information.

Momentary Button Mode

Momentary button mode is an alternate button operating mode which fires one action when initially held down and a different action when released. It can be enabled by creating actions momentary_start_action and/or momentary_end_action. Doing so overrides the default single/double/hold tap behavior of buttons. You can include the amount of time the button is held down in fields of momentary_end_action by including HOLD_SECS in the action fields.

Haptics, Custom Timings, and Repeat on Hold

You can now enable haptics on all features! Set haptics to true on a tile feature to do so. You can also now customize button timings for the amount of time you have to trigger a double tap action double_tap_window, and how long you have to hold a button to trigger a hold action hold_time, both in milliseconds.

You can now set a hold action to repeat, and it will repeat it's tap action every 100ms. You can change the repeat interval by setting repeat_delay in milliseconds.

features:
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:thermometer
        label: VALUE
        range:
          - '{{ state_attr("climate.downstairs_thermostat", "min_temp") }}'
          - '{{ state_attr("climate.downstairs_thermostat", "max_temp") }}'
        step: 1 # defaults to 1
        debounce_time: 1000 # defaults to 1000
        value_from_hass_delay: 5000 # defaults to 1000 but may need to be set higher for devices that take time to update like thermostats to prevent slider/label value bouncing
        value_attribute: temperature
        unit_of_measurement: ' °F'
        tap_action:
          service: climate.set_temperature
          data:
            entity_id: climate.downstairs_thermostat
            temperature: VALUE
        hold_action:
          action: repeat
        style:
          '--background': var(--tile-color)
          '--icon-color': var(--tile-color)
          flex-flow: row
  - type: custom:service-call
    entries:
      - type: spinbox
        icon: mdi:brightness-4
        label: VALUE
        step: 10
        range: # no default must be set by user if applicable
          - 0
          - 100
        value_attribute: brightness
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            brightness_pct: VALUE
        decrement:
          icon: mdi:brightness-3
          label: down
          tap_action: # the increment/decrement actions do nothing as shown here because actions are set to none
            action: none # set to call-service to change increment/decrement actions
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: -10
          style:
            flex-flow: row # by default icons are above labels, this makes them in line
          icon_style:
            padding-right: 4px
        increment:
          icon: mdi:brightness-2
          label: up
          tap_action:
            action: none
            service: light.turn_on
            data:
              entity_id: light.sunroom_ceiling
              brightness_step_pct: 10
          style:
            flex-flow: row-reverse
          icon_style:
            padding-left: 4px
        style:
          '--light-color': rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
          '--on-color': >-
            {{ "var(--light-color)" if is_state("light.sunroom_ceiling", "on")
            else "initial" }}
          '--background': var(--on-color)
          '--icon-color': var(--on-color)
          '--label-color': var(--on-color)
type: tile
entity: climate.downstairs_thermostat

Other Changes

• Sliders will now properly update if their value is changed by something else after the user has touched them.
• Double tap events no longer have an infinite window if there is not tap action at all.
• VALUE, HOLD_SECS, and UNIT can be used in (almost) all actions, icons, and labels.
• Style tooltip using tooltip_style.
  • Deprecates tooltip.
• Change the amount of time slider and spinbox features wait before allowing for value updates from Home Assistant after using them using value_from_hass_delay (defaults to 1000ms).

Huge thanks to @irakhlin for their research on spinbox behavior, implementation of fire-dom-event #23, and slider feedback regarding attributes that are arrays.

What's Changed

• Add fire-dom-event support by @irakhlin in #23

New Contributors

• @irakhlin made their first contribution in #23

Full Changelog: 3.2.2...3.3.0

3.2.2 - Slider Improvements

Changes in 3.2.2

• value_attribute can now use attributes that are arrays, like hs_color[0] #20.
• Service call data can now include VALUE and templates in array data #20.

Slider Tooltip #15

Sliders now show a tooltip with the current value when held down on, similar to vanilla tile sliders. You can disable this by setting tooltip to false. If unit_of_measurement is provided, it will also appear in the tooltip.

The slider has also been refactored so it should perform a bit better, and shouldn't prematurely update it's value right after it sends an action, causing it to rubber band between the old and new values. The logic for turning the slider on and off has also been improved so it should update faster.

Label Improvements

If you include VALUE in the slider label, it will also now update as you move the slider instead of when you release it. You can now also use VALUE and UNIT inside of label templates for more control of how they appear. If you include VALUE in a label outside of a template it will still be replaced by the current feature value, and if you also define unit_of_measurement it will now appear right after VALUE rather than at the end of the label.

Other Changes

• Firefox flat thumb slider style fixes.

Patch Version Changes

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.
• Prevent touchpad center action from firing at the end of a multi touch action.
• value_attribute can now use attributes that are arrays, like hs_color[0] #20.
• Service call data can now include VALUE and templates in array data #20.

Full Changelog: 3.1.8...3.2.2

3.2.1 - Slider Improvements

Changes in 3.2.1

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.

Slider Tooltip #15

Sliders now show a tooltip with the current value when held down on, similar to vanilla tile sliders. You can disable this by setting tooltip to false. If unit_of_measurement is provided, it will also appear in the tooltip.

The slider has also been refactored so it should perform a bit better, and shouldn't prematurely update it's value right after it sends an action, causing it to rubber band between the old and new values. The logic for turning the slider on and off has also been improved so it should update faster.

Label Improvements

If you include VALUE in the slider label, it will also now update as you move the slider instead of when you release it. You can now also use VALUE and UNIT inside of label templates for more control of how they appear. If you include VALUE in a label outside of a template it will still be replaced by the current feature value, and if you also define unit_of_measurement it will now appear right after VALUE rather than at the end of the label.

Other Changes

• Firefox flat thumb slider style fixes.

Patch Version Changes

• Mouse and touch event handlers are now always added to the element to fix support on environments such as the MacOS Home Assistant app (which says it has touch event handlers even if the devices does not have a touch screen) and tablets with desktop browsers.
• Prevent context menu from appearing when using touch hold actions on desktop browsers.
• Prevent touchpad center action from firing at the end of a multi touch action.

Full Changelog: 3.1.8...3.2.1

3.2.0 - Slider Improvements

Slider Tooltip #15

Sliders now show a tooltip with the current value when held down on, similar to vanilla tile sliders. You can disable this by setting tooltip to false. If unit_of_measurement is provided, it will also appear in the tooltip.

The slider has also been refactored so it should perform a bit better, and shouldn't prematurely update it's value right after it sends an action, causing it to rubber band between the old and new values. The logic for turning the slider on and off has also been improved so it should update faster.

Label Improvements

If you include VALUE in the slider label, it will also now update as you move the slider instead of when you release it. You can now also use VALUE and UNIT inside of label templates for more control of how they appear. If you include VALUE in a label outside of a template it will still be replaced by the current feature value, and if you also define unit_of_measurement it will now appear right after VALUE rather than at the end of the label.

Other Fixes

• Firefox flat thumb slider style fixes.

Full Changelog: 3.1.8...3.2.0

3.1.8 - Better Buttons With Home Assistant Actions

Changes in 3.1.8

• Fix entity ID auto population when data/target entity ID field is an array.

Do more with buttons!

This release is focused on improving buttons and custom actions. Custom actions now follow Home Assistant actions syntax, and supports most actions defined there.

The following actions are supported:

• call-service
• navigate
• url
• assist
• more-info
• none

Buttons now support not only tap actions, but double tap and hold actions.

features:
  - type: custom:service-call
    entries:
      - icon: mdi:power
        label: '{{ states("light.sunroom_ceiling") }}'
        style:
          '--color': |-
            {% if is_state("light.sunroom_ceiling", ["on"]) %}
              rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
            {% else %}
              initial
            {% endif %}
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: red
        double_tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: green
        hold_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: blue
type: tile
entity: binary_sensor.sun_room
color: accent

Other changes:

• Label font weight set to bold.
• Added show option.
• Improved default slider/selector actions and autofill_entity_id logic.

Patch version changes:

• Do not trigger buttons or slider actions when touch action scrolling #16.
• Make touchmove handlers passive.
• Further slider scrolling detection improvements.
• Support for older webviews that do not support the structuredClone function #18.
• Merge data, target, and service_data fields into data if any exist rather than on action type.
• Fix entity ID auto population when data/target entity ID field is an array.

Full Changelog: 3.0.9...3.1.8

3.1.7 - Better Buttons With Home Assistant Actions

Do more with buttons!

This release is focused on improving buttons and custom actions. Custom actions now follow Home Assistant actions syntax, and supports most actions defined there.

The following actions are supported:

• call-service
• navigate
• url
• assist
• more-info
• none

Buttons now support not only tap actions, but double tap and hold actions.

features:
  - type: custom:service-call
    entries:
      - icon: mdi:power
        label: '{{ states("light.sunroom_ceiling") }}'
        style:
          '--color': |-
            {% if is_state("light.sunroom_ceiling", ["on"]) %}
              rgb({{ state_attr("light.sunroom_ceiling", "rgb_color") }})
            {% else %}
              initial
            {% endif %}
        tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: red
        double_tap_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: green
        hold_action:
          action: call-service
          service: light.turn_on
          data:
            entity_id: light.sunroom_ceiling
            color_name: blue
type: tile
entity: binary_sensor.sun_room
color: accent

Other changes:

• Label font weight set to bold.
• Added show option.
• Improved default slider/selector actions and autofill_entity_id logic.

Patch version changes:

• Do not trigger buttons or slider actions when touch action scrolling #16.
• Make touchmove handlers passive.
• Further slider scrolling detection improvements.
• Support for older webviews that do not support the structuredClone function #18.
• Merge data, target, and service_data fields into data if any exist rather than on action type.

Full Changelog: 3.0.9...3.1.7