Ring Tile Card: visualise your sensor data

neponn · June 28, 2025, 2:42pm

Thanks @Chykan! Impressive array of fitness sensors you’ve got going there!

Badges are something that I’ve been thinking about - reckon they would be cool (#4). Not high on the priority list right now, though.

Thanks @Protoncek!

It might pay to check the docs. To answer your questions:

I’m not quite sure what you have in mind, but sounds a bit like a marker - here’s an example or look it up in the config options
You don’t lose colours when you use a pointer, they just become quite faint - this is done to keep things clear. You can change that if you like - see the second example in the advanced section about using card_mod to alter CSS variables
I don’t think I will add pointer variations. A key goal for ring-tile card is to keep the visual design clean and consistent. You can change the pointer colour though (using card_mod)

Protoncek · June 28, 2025, 4:55pm

Ok, thanks a lot! I didn’t even think that marker can be variable… silly me…
Ok, card-mod can do wonders, yes. I’m not a great fan of it, because it quickly become pretty complicated (to complicated for me to figure it out) and in the past it broke a few times with HA update (but many addons do occasionally…). But with examples i managed to achieve more color

Roelv · June 28, 2025, 6:33pm

Alright, thanks for the help!
When I got some spare time left soon I’m going to try some more ideas

Victorize · June 28, 2025, 8:12pm

Hi,
Just started using this card and I really like it. Love the minimalist styling!
I’m however trying to do a custom size for my dashboard. So, if I select ring_size: 3 for example the div.container size is 154x154px. I would like to resize the container size with the ring element to be 120x120px.
I have tried using rt-ring-svg $: | with card-mod to try and target the container size but I’m a noob with the CSS/DOM syntax structure when using card-mod.
Can anyone more experienced, guide me to the correct code to target the container size properly please.
Perhaps I’m just approaching it completely wrong. Any insights would be greatly appreciated.
Thanks

Chykan · June 29, 2025, 6:43am

Being able to convert a unit with a template within the card would be useful. i.e. Seconds to Minutes or Hours.

Also being able to import data from another sensor as the min: and max: values.

- type: custom:ring-tile
            entity: sensor.whoop_andrew_resting_heart_rate
            ring_size: 3
            min: 0
            max: "{{states('sensor.whoop_andrew_max_heart_rate')}}"

neponn · June 29, 2025, 4:57pm

Thanks @Victorize.

So you can change the size using card_mod, but we’re getting a bit off-piste here. This will work:

type: custom:ring-tile
entity: sensor.your_sensor
ring_size: 3
card_mod:
  style: |
    rt-ring-svg {
      width: 120px !important;
      height: 120px !important;
    }

However, if you use an icon in your config, it’s likely to show up in the wrong place. This has to do with the way I’m rendering the icon to take advantage of Home Assistant’s cool icon caching solution (saves bandwidth, but costs frustration).

Hi @Chykan,

If you want to change units, best to use a template helper to define a new sensor with your preferred units (or use the Home Assistant GUI to change display units). There’s an example of using template helpers earlier in this thread.

min and max can be dynamically set to another entity. Check the docs. Example and config specifics.

Victorize · June 29, 2025, 8:31pm

Thanks a million @neponn!
Exactly what I needed. And so simple as well.
I see what you mean about the icon being in the wrong position but I can live without the icon as I will have a label for the gauge anyways.

Thanks again!

Chykan · June 29, 2025, 8:54pm

Thanks for the tips. Was avoiding creating a new sensor to fill my database. Will check out the GUI unit conversion, did not realise that was a function (unless it just changes the unit with no conversion).

I have to congratulate you @neponn for the simplicity in adjusting this card.

Very minimal code to get good results.
Card scales perfectly on all screen sizes even when squished
Good choice in using HA tile card as a base

Just a note, colour thresholds used in other cards translate a bit differently but it is intuitive.

color thresholds

color_thresholds:
              - value: 0
                color: gray
              - value: 12
                color: dodgerblue
              - value: 16
                color: limegreen
              - value: 20
                color: lime
              - value: 30
                color: gold
              - value: 40
                color: orange
              - value: 50
                color: red

VS

this card

          color:
              '11.9': gray
              '16': dodgerblue
              '20': limegreen
              '30': yellowgreen
              '40': gold
              '50': orange
              '60': red

- type: custom:ring-tile
            entity: sensor.whoop_andrew_resting_heart_rate
            ring_size: 3
            min: 0
            max: sensor.whoop_andrew_max_heart_rate
            color:
              '118': white
              '140': lightcyan
              '151': skyblue
              '161': limegreen
              '172': orange
              '200': orangered
          - type: custom:ring-tile
            entity: sensor.whoop_andrew_sleep_respiratory_rate
            ring_size: 3
            min: 0
            max: 70
            color:
              '11.9': gray
              '16': dodgerblue
              '20': limegreen
              '30': yellowgreen
              '40': gold
              '50': orange
              '60': red
          - type: custom:ring-tile
            entity: sensor.whoop_andrew_day_average_heart_rate
            ring_size: 3
            min: 0
            max: sensor.whoop_andrew_max_heart_rate
            color:
              '118': white
              '140': lightcyan
              '151': skyblue
              '161': limegreen
              '172': orange
              '200': orangered
          - type: custom:ring-tile
            entity: sensor.whoop_andrew_day_max_heart_rate
            ring_size: 3
            min: 0
            max: sensor.whoop_andrew_max_heart_rate
            color:
              '118': white
              '140': lightcyan
              '151': skyblue
              '161': limegreen
              '172': orange
              '200': orangered
          - type: custom:ring-tile
            entity: sensor.whoop_andrew_spo2
            ring_size: 3
            min: 0
            max: 100
            color:
              '90': dodgerblue
              '95': orange
              '100': limegreen

Tee · July 1, 2025, 11:41am

Love the look of this card.
Thanks for the tip on opacity

Ector73 · July 3, 2025, 12:39pm

Many thanks Nick. I saw this great card and redesigned my weather dashboard. And this is the result:

neponn · July 3, 2025, 4:51pm

Looks amazing! Thanks for sharing!

baudneo · July 5, 2025, 6:35pm

Hi, this is great, the only suggestion I have is to allow setting the value through a jinja template OR set an entity as its source. I would like to use an entity attr as the data source.

I saw that you were talking about adding templating. Just thought I would throw this idea in there.

Something like:

type: custom:ring-tile
# value or entity required
#entity:
value: {{ state_attr('sensor.was_110_temperatures', 'temp2') }}

I know I can create a template sensor helper, but it would be great to be able to set the value via a template and configure state-class and such.

neponn · July 6, 2025, 10:21am

Hey @baudneo. Glad you like it! Templating is low on the priority list right now, but I do plan to add support for attributes relatively soon. state_class and so on should be set at the entity level, not in the front end.

baudneo · July 6, 2025, 6:49pm

How will you know the state class of the attr though? Some entities might have attrs that arent the same state class as the entity exposing the attrs (yes this is wrong, but it happens). If the card assumes the same state class as the entity, wont it show incorrectly?

Example: entity has a state class of termperature and exposes temperature attrs, RX/TX SNR, TX/RX voltage and some other stats on an optical XGS-PON interface.

Reflex · July 6, 2025, 9:26pm

Love this card! It’s really improved the look of my main dashboard a lot.

Why is only the value in the ring using the value in max_decimals?

Mariusthvdb · July 7, 2025, 12:21pm

Hi Nick,

next that earlier mentioned (and raised) issue of the source map, I now also notice that there are 2 external connections made when loading this resource:

tbh, I am not sure what that exactly means, but Ive never seen something like that before in my custom cards, and not a big fan of loading external stuff. Let alone from G…

is this something that can be avoided?