Ring Tile Card: visualise your sensor data

neponn · December 26, 2025, 12:37am

We’ll call it a feature. It’s not to do with the ring_size - it’s the info area, which is visible in sizes 1 and 2. I’ve done it this way for drop-in compatibility with the built-in tile card - you should be able to substitute ring-tile for tile (with ring-size: 1) and get an equivalent result.

The inbuilt tile card relies on the display_precision of the entity to determine how the info area is rendered. So the same techniques you can use to change how the info area looks for a tile card will work for ring-tile card.

I have to confess I don’t love this. Drop-in substitutability is important, but the inconsistency is a bit jarring. I may consider changing this in a future version (#60). Interested in what people think.

scw2wi · December 26, 2025, 8:30am

I understand and I also know how to handle it. For my understanding drop-in compatibility would also exist if additional parameters can overrule the default behavior.

neponn · December 29, 2025, 5:39am

New release - v1.0.6 - Animations and more tweaks!

A few more bug fixes and new features.

New features

Animations

Something nobody asked for… animations! State transitions for indicators and markers have been added for a fun flourish when the state of your rings change. Can be modified with a new CSS variable (--rt-transition) and respects system level “prefers reduced motion” setting.

Scale improvements

Improved the algorithm that figures out ticks and labels for rings with a scale. Also added a new scale config block to tweaks, which you can use to influence the scale rendering algorithm. This is an advanced feature, which should only be needed in specific cases; you won’t always get the expected result.

More detail in the docs.

PR (#63). Thanks @Protoncek for the suggestion.

Expose currently indicated colour

You can now “colourise” any element in the ring to match the currently indicated colour using card_mod. This is achieved by making use of a new CSS variable (--rt-indicated-colour), which exposes the currently indicated colour.

An example is included in the PR (#61).

Thanks @scw2wi for the suggestion.

Bug fixes

Fixed an obscure SVG masking issue affecting markers. Tweaked marker overlap when the indicator is arc (#61)
Fix icon alignment for custom icon sets with unusual viewBox definitions (#59 - thanks @scw2wi)

alexsaas · December 29, 2025, 8:47am

Hi, thanks for the new release. I’ve been following your work for some time now and am delighted to see how you’re pushing your project forward.

I’m still hesitating to install it because I’m still waiting for timer.helpers to be implemented:

github.com/neponn/ring-tile-card

[Feature]: Please add support for timer entities/ helpers

opened 03:39PM - 24 Jun 25 UTC

alexsaas

enhancement

### Is your feature request related to a problem? Please describe. _No response…_ ### Describe the solution you'd like First of all, many thanks for the sensational card. I have been looking for something like this. Unfortunately, timer helpers do not seem to work. It would be great if this could be integrated. So that the elapsed time can be seen using the "ring". ### Describe alternatives you've considered _No response_ ### Additional context _No response_

I can imagine that it’s not easy. Do you see any chance that it will become part of your great card at some point?

neponn · December 29, 2025, 8:54am

Thanks for the kind words @alexsaas. It’s on my list, but to be honest, I need to focus on a few other things in the coming weeks, so it will probably be a while.

In the meantime, have you tried the suggestion I made on the related GitHub issue? I get that it wasn’t elegant, but it might be good if you have a try and tell me what you think. As with most things, there’s more than one way to do this, so a bit of feedback can be helpful.

alexsaas · December 29, 2025, 9:05am

Thank you for your feedback, so I know it hasn’t been forgotten.

No, I haven’t tried the workaround. Please forgive me, but I find it a little too cumbersome with additional helpers and an automation that triggers every second, throughout the entire timer duration.

Please don’t get me wrong, I appreciated your help back then.

scw2wi · December 30, 2025, 8:59am

Thanks for this nice enhancement, ring-tile card is from the beginning already the best HACS gauge and still getting better and better.

Do you have any solution how to show the unit in a consistent style?

In some cases it’s shown below the value, in some cases right of the value, but these cases I have avoided and used the “%” icon on top as unit.

Here are the tweaks I’m using at the moment.

colorize_icon: true
tweaks:
  rt-background-text-opacity: 1
  rt-scale-text-opacity: 1
card_mod:
  style:
    rt-ring-svg $: |
      text.middle  {
        color: var(--rt-indicated-color);
      }

For some minor cosmetics like making the ticks more visible and the number a little bit smaller I’m still testing all the provided CSS variables and the card_mod possibilities.

JulianDH · December 30, 2025, 6:00pm

@neponn Love Ring Tile. Spent last day converting dashboards!

I have three atmospheric pressure sensors. None of the sensors are recognised by Ring Tile to create the standard atmosphere layout. Device class of all is Atmospheric_Pressure and unit hPa. Using latest Ring Tile version

Something not working? Or is it me?

Edit 3: anyone using dynamic icons to reflect pressure state? Template?

neponn · January 1, 2026, 2:18am

Hi again @scw2wi - looking good! You’re not the first to ask for more control over units that currently stay inline (#44). It’s on my list.

In the meantime, you can get the result you want with a bit of a hack.

Change from:

type: custom:ring-tile
entity: sensor.server_ssd
...

To:

type: custom:ring-tile
entity: 
  entity: sensor.server_ssd
  unit_of_measurement: "% "
...

Note the extra space beside the % sign.

Out of curiosity - what is the unit_of_measurement for KNX Bus-Rate? I note that it is also not showing a unit.

Hi @JulianDH, glad you’re enjoying the card!

My apologies - this is an oversight on my part. I have defaults defined for mbar and inHg for pressure sensors, but not hPa. I’ll fix this. In the mean time, you can fix this by adding in the missing config:

type: custom:ring-tile
entity: sensor.weather_pressure_roof
ring_size: 3
min: 980,
max: 1040,
colour:
  983: ha_blue,
  1013: ha_green,
  1043: ha_yellow,

Or you could temporarily change the unit to mbar (since they scale the same) and get the default handling automatically.

type: custom:ring-tile
entity:
  entity: sensor.weather_pressure_roof
  unit_of_measurement: mbar
ring_size: 3

scw2wi · January 1, 2026, 4:27pm

This trick it working perfectly.

So the dashboard is now again one step better.

KNX scale is not yet implemented but it will be a percentage value from maximal load.
I prefer to scale all values between 0 and 100 to have a consistent view.

maurizio53 · January 2, 2026, 6:34pm

Is there a way to have this card works together with auto-entities?
If yes, how? Examples?

Mariusthvdb · January 2, 2026, 6:42pm

why wouldnt there be?
what did you try?

did you search for auto-entities using the card-param?

maurizio53 · January 2, 2026, 6:44pm

yes, i tried but without success…

I tried this:

                      - type: custom:auto-entities
                        card:
                          type: grid
                          columns: 2
                          square: false
                        card_param: cards
                        filter:
                          include:
                            - options:
                                type: custom:ring-tile
                                ring_entity: sensor.pirate*

Be free to correct all the errors you see here…

Mariusthvdb · January 2, 2026, 6:50pm

youre missing the required entity option from the documentation

maurizio53 · January 2, 2026, 6:53pm

Hmmm i followed those docs, but, using the wildcard, i don’t understand how and where to put the entity.

I used this:


                                type: custom:ring-tile
                                entity:
                                  entity: sensor.pirate*

Or this:


                            - options:
                                type: custom:ring-tile
                                entity: sensor.pirate*

EDIT: Ok, i found where is the error…

Now i have this:

                          include:
                            - options:
                                type: custom:ring-tile
                              entity_id: sensor.pirate*

And it works…!

Mariusthvdb · January 2, 2026, 7:53pm

Great. You see, trying makes it work

Lordlinhey · January 19, 2026, 10:48am

Thanks Nick,
I like the simplicity of your design and it works well.

I got all excited when i decided to try and incorporate the the custom:card-templater, because as I was bulding it the configuration card showed exactty what I wanted to achieve.

My code:

type: custom:card-templater
entities:
  - sensor.th_maxs_mins
card:
  type: custom:ring-tile
  entity: sensor.outside_climate_temperature
  ring_entity: sensor.outside_climate_temperature
  ring_size: 3
  colorize_icon: true
  middle_element: ring_value_with_unit
  bottom_element: name
  indicator_color: red
  name: OUTSIDE
  max: 30
  min: 0
  marker_color: blue
  marker2_color: red
  marker_with_unit: top_element
  scale: ticks_with_labels
  marker_template: "{{ state_attr(\"sensor.th_maxs_mins\", \"out_temp_min\")}}"
  marker2_template: "{{ state_attr(\"sensor.th_maxs_mins\", \"out_temp_max\")}}"

Sadly it doesn’t display in the dashboard.
I wonder, is there any future plan to allow this?

neponn · January 19, 2026, 10:34pm

Hi @Lordlinhey - glad you like it!

If I’ve understood what you are trying to do, you should find that your use case is already supported without custom:card-templater (with which I don’t have any experience). markers can be configured to reference the attribute of an entity (as can min and max as well). See the docs on configuration options and referencing entities and attributes.

Try the following (also a few suggested corrections):

type: custom:ring-tile
entity: sensor.outside_climate_temperature
#ring_entity: sensor.outside_climate_temperature   # this isn't needed because it is the same entity
ring_size: 3
colorize_icon: true   # this will be ignored because your config does not include an icon
top_element: marker   # this was back to front; I suggest not including _with_unit
middle_element: value_with_unit    # ring_ isn't needed - your ring_entity and entity are the same
bottom_element: name
#indicator_color: red   # this is not a supported option
name: OUTSIDE
max: 30
min: 0
marker_color: ha_blue   # you might like to try ha_* colours for consistency with HA
marker2_color: ha_red
scale: ticks_with_labels
marker:
  entity: sensor.th_maxs_mins
  attribute: out_temp_min
marker2:
  entity: sensor.th_maxs_mins
  attribute: out_temp_max

Let me know whether this addresses your needs.

stefan1982 · January 20, 2026, 6:19am

Is it possible to change the used font of the text inside the card, and how could one achieve that? Currently for me, it doesn’t inherit my default theme font which bothers me a bit.
I like consistency…

neponn · January 20, 2026, 6:55am

Hi @stefan1982, you can using card_mod to set --rt-font-family.

See the docs.