Service Call Tile Features - Buttons, Sliders, Selectors, and Spinboxes

I actually have an automation that detects when Spotify is running and increases the update frequency when playing or paused. I’m not sure what your media source is, but could something like this possibly work?

alias: Spotify - Refresh Every 5 Seconds While Playing
description: ""
  - platform: state
      - media_player.spotify
    from: idle
condition: []
  - repeat:
        - condition: or
            - condition: state
              entity_id: media_player.spotify
              state: playing
            - condition: state
              entity_id: media_player.spotify
              state: paused
        - delay:
            hours: 0
            minutes: 0
            seconds: 5
            milliseconds: 0
        - service: homeassistant.update_entity
          data: {}
            entity_id: media_player.spotify
mode: single

Using as_timestamp with these tile feature templates wouldn’t work since it uses ha-nunjucks for templating, which only supports a subset of Home Assistant templating functions (but renders instaneously in the front end). Adding pythonic time and timestamp functionality to ha-nunjucks is definitely an option, but I hadn’t gotten around to it since Python and JavaScript/TypeScript handle datetimes differently. There are a few npm packages that add pythonic datetimes to JS but I haven’t dug too much into them. Still the label and other templates only re-render if the hass object or an internal state changes, so I’d have to figure out how to make it re-render once per second anyway (which may end up not being that hard but I’m a backend engineer by trade so it could just be something I don’t know yet).

There’s also a visual bug with input ranges that makes it so that they stop visually updating if they are manually changed, which makes it harder to use for something like this which gets updated a lot by the backend this should hopefully be fixed in the next in progress minor version.

Also here’s a long label template to display the current and total media time.

label: >-
      {{ (VALUE / 60) | int }}:{{ 0 if (VALUE - 60*((VALUE / 60) | int)) < 10
      else "" }}{{ (VALUE - 60*((VALUE / 60) | int)) | int }}/{{
      (state_attr("media_player.spotify", "media_duration") / 60) |
      int }}:{{ 0 if (state_attr("media_player.spotify",
      "media_duration") - 60*((state_attr("media_player.spotify",
      "media_duration") / 60) | int)) < 10 else "" }}{{
      (state_attr("media_player.spotify", "media_duration") -
      60*((state_attr("media_player.spotify", "media_duration") /
      60) | int)) | int }}

Can this frequent rendering be an option to show also a timer countdown? Or is there already a possibility to show it as label somehow?
I tried to use a template for that, but it doesn’t work, I assume, because of the same reasons as above.

Version 3.3.0 adds spinboxes a la the climate target temperature feature! This feature allows you to increment and decrement a value, and only calls the service once you’ve stopped changing the value. You can modify both it’s center icon and label, and the icons and labels of it’s buttons. You can also override it’s buttons to behave like normal buttons.

This release also adds customizable timings for double tap and hold actions, repeat on hold actions with customizable repeat delay, momentary button mode, and a new fire-dom-event action.

This release marks the first code contributions of another developer! irakhlin contributed to the research of spinbox behavior and the actual implementation of the fire-dom-event action.


As of version 3.3.1, if value attribute is set to media_position, it will be updated twice per second using the current time and media position updated at timestamp, and accounts for the media player state and duration. Still the number jumps a little bit when media_position_update_at gets updated, and sometimes it inexplicably skips a second. Also add this style to give the tooltip a more readable value:

      '--tooltip-label': >-
        {{ (VALUE / 60) | int }}:{{ 0 if (VALUE - 60*((VALUE / 60) | int)) < 10
        else "" }}{{ (VALUE - 60*((VALUE / 60) | int)) | int }}

First of all, thanks a lot for this feature!! It’s a great way to improve the UI.

One question though, is it possible to use templating in the icon of the entity itself and its color?

This project only adds to the list of available dashboard card features (formerly called tile features before they were also made available for climate cards). The tile icon and entity content area is out of scope. You can modify the icon and info fields using card-mod.

1 Like

I just cannot get any of these to work.


type: thermostat
entity: climate.midea_ac_152832116330757
  - type: custom:service-call
      - service: script.acds_led
        icon: mdi:led-off


type: tile
entity: climate.midea_ac_152832116330757
  - type: custom:service-call
      - type: button
      - service: script.acds_led
        icon: mdi:led-off

The script of course exists but I still get the “Custom element doesn’t exist: service-call.” error message.

Do I need to install any HACS extension?

Try this, will invert the slider and the tooltip. Its almost like the original tile cover slider, the only thing it becomes grayed out at 0% or closed cover.

              '--color': var(--tile-color)
              direction: rtl
              --tooltip-offset: '{{ -OFFSET }}px'

1 Like

Ok, I figured a work around to fix the slider being grayed out / inactive when cover is closed or set a 0.

I put the range starting from -1 to 100

             - -1
             - 100
            step: 1

Then in the tap action I add template for the position data so it doesn’t send the “-1” position as it doesn’t work for the cover.

              action: call-service
              service: cover.set_cover_position
                position: >-
                  {% set position = VALUE | int %} {{ 0 if position < 0 else "VALUE" }}
            value_attribute: current_position

Last, not only set direction and tooltip-offset, but you have to set the color otherwise will have gray color when cover is close as var(–tile-color) will follow the main tile icon color. I set the original light purple from original tile covers.

              direction: rtl
              '--tooltip-offset': '{{ -OFFSET }}px'

Original on top and custom on the bottom.

Now its behaving like the original slider. Just blinks inactive when you slide to -1, but quickly the slider updates to current positive which is 0 and the slider reappears.

I hope it helps. Thanks for the great work on this project! Its really awesome.

1 Like

I need to rework the logic around slider display when it’s entity is “off”. As it is now it treats a value of 0 equal to the minimum slider range as off but I really should make it determine that purely by entity state. The tile and flat thumb sliders have this off when 0 minimum logic but the line thumb slider doesn’t.

Edit: I’ve tweaked slider off logic in version 3.3.3 so it will only be off when the value is undefined (like idle media players with no volume level attribute), the entity state is off, the value is not greater than the range minimum, or the entity is a timer in idle state.

1 Like

Nice! Thanks for the quick fix.

So all you need to do to make slider look and behave like the original tile cover slider are these changes on style:

              direction: rtl
              '--tooltip-offset': '{{ -OFFSET }}px'
1 Like

I’m trying to change the border-radius of selected selectors and sliders if active. But I didn’t found a way yet. Only for the background and generic style but it seems that is not working for active selectors/sliders. Does anyone have a small hint? thanks