Ring Tile Card: visualise your sensor data

Share your Projects! Dashboards & Frontend
, , ,
1

Hi there,

I thought it was time to share a project I’ve been working on for a while. I love Home Assistant’s tile card - they have made it easy to quickly build great looking dashboards. But I’ve always felt that sensor tiles needed something more. So I built ring-tile card, based on Home Assistant’s tile card.

You can use ring-tile to bring your sensor tile cards to life.

image
image1034×406 34 KB

You can make the ring the star of the show for new, bigger tiles. Here’s a cluster of weather sensors.

image
image1050×852 58.1 KB

Or a cluster of sensors to monitor a server.

image
image1030×458 37.4 KB

Or you can go really big to make whole new dashboards - good for wall displays. ring-tile looks great in dark mode too!

wall-display
wall-display1920×1438 137 KB

I’m super excited to know what you think and how you make use of ring-tile cards!

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Full documentation:

PS: frontend development is new to me, and definitely a very part-time side-hustle. So apologies in advance if things break and / or I am slow to respond.

40 Likes
2

Brilliant. Tried to make something like this with trickery. This is some much better! No I need to tweet all my dashboards again :wink:

One little snafu. Sometimes when in editing mode the card does not open in edit mode because pencil doesn’t show sand you have to reload the page.

It would be great if you could also show the value of an unrelated entity.

Keep it up!

1 Like
3

Hey that’s great - so pleased to hear you like them!

I’ve noticed the same snafu - I will have to investigate. I must admit I had thought the problem affected all cards, not just ring-tile, but I will take a closer look.

On the unrelated entity, it might be that this is already covered, depending on what you have in mind. You can use a combination of entity, which affects the info area and ring_entity, which affects the rendering of the ring. These can be two entirely separate entities.

Here is an example in which I wanted to represent the Wi-Fi signal strength of an ESPHome irrigation controller with the ring, but show the name of the connected Wi-Fi access point in the info area:

Screenshot 2025-06-09 at 8.27.21 pm
Screenshot 2025-06-09 at 8.27.21 pm510×130 7.48 KB

type: custom:ring-tile
ring_entity: sensor.irrigation_signal_strength
entity: sensor.irrigation_ssid
name: Wi-Fi connection

There’s another example in the docs.

Lastly, if you want to show entity state as a number in the ring, you can choose between showing the value (which maps to entity) and ring_value (which maps to ring_entity). More info.

Let me know if you are trying to achieve something else.

1 Like
4

Coming back to this:

One little snafu. Sometimes when in editing mode the card does not open in edit mode because pencil doesn’t show sand you have to reload the page.

It would appear this is a recent bug with the Home Assistant GUI editor (perhaps since 2025.5.2).

I am seeing this issue with all cards, not just ring-tile card.

1 Like
5

image
image318×393 41.2 KB

Thanks to you I have been able to rework my local weather panel to this. The temperature now show expected high and low, current temp as well as trend. I would lover to show trend as an arrow icon. This would mean the ability to use a template. This is currently not possible but could be a good addition to this card.

4 Likes
6

Can you share your yaml?

7 
type: grid
cards:
  - type: custom:ring-tile
    entity: sensor.netatmo_thuis_binnen_buiten_temperature_trend
    ring_entity: sensor.netatmo_thuis_binnen_buiten_temperature
    marker: sensor.buienradar_minimum_temperature_1d
    marker2: sensor.buienradar_temperature_1d
    marker_color: slate
    marker2_color: darkred
    top_element: icon
    middle_element: ring_value_with_unit
    ring_size: 2
    ring_only: true
    min: sensor.buienradar_minimum_temperature_1d
  - type: custom:ring-tile
    entity: sensor.netatmo_thuis_binnen_regenmeter_rain
    ring_entity: sensor.netatmo_thuis_binnen_regenmeter_rain_today
    name: Rain
    marker: sensor.buienradar_minimum_rain_1d
    ring_size: 2
    ring_only: true
    top_element: icon
    middle_element: value_with_unit
    min: 0
    max: sensor.buienradar_maximum_rain_1d
  - type: custom:ring-tile
    entity: sensor.netatmo_hg91_wind_strength
    marker: sensor.buienradar_wind_direction
    ring_type: compass
    indicator: pointer
    ring_only: true
    ring_size: 2
    top_element: icon
  - type: custom:ring-tile
    entity: sensor.netatmo_thuis_binnen_humidity
    ring_size: 2
    ring_only: true
    top_element: icon
  - type: custom:ring-tile
    entity: sensor.netatmo_thuis_binnen_buiten_temperature_trend
    ring_entity: sensor.netatmo_hg91_pressure
    scale: ticks
    icon: phu:air-presure
    ring_size: 2
    ring_only: true
    indicator: pointer
    top_element: icon
    middle_element: ring_value_with_unit
    bottom_element: value
    name: Pressure
    max: 1101
  - show_name: false
    show_icon: true
    type: button
    entity: weather.hoge_gouwe
    grid_options:
      columns: 4
      rows: 2
    show_state: true

There you go!
1 Like
8

Hey - awesome! Thanks for sharing - looks great!

Trend arrows are an interesting idea. I’m curious to hear more about what would work for you. Would you use a custom sensor to detect the trend, or have ring-tile compute the trend based on the recent history of the entity? Do you have any examples of where you’ve done something like this in the past?

Also - I’m interested in the way the wind compass rendered for you. The wind direction marker seems to have rendered as a dot, rather than an arrow. I can’t immediately think of how that could be done - I’ve tried the YAML you pasted, but I get a different result. Is the dot preferred?

Thanks again for sharing - cool to see the different ways these get used.

9

For barometric pressure my weather station provides a sensor with a text value as it does for temperature. However I decided I preferred to show min and max temps instead of trend. If I could add trend as an icon as top_element that would be cool. As to the compass showing a point instead of an arrow I would prefer an arrow but can’t find the right setting. All in all your card is proving to be quite useful.

Cheers.
Lex

10

This is EXACTLY what I was looking for recently! Can’t wait to try it out.

I was using Entity Progress Card for the time being (GitHub - francois-le-ko4la/lovelace-entity-progress-card: Entity progress card for Home Assistant), but this is more what I was after.

I would recommend looking at the source for Entity Progress Card for their UI configuration as it works really well and could probably be used similarly with this card (just an assumption as I am not a programmer :no_mouth:).

Keep up the awesome work!

11

This is such a great card! Is it possible to make the entity name larger? Text size variable or cardmod?

12

Hi Nick,

One more. It would be great to have ‘tap-action’ added as an option.

Cheers,
Lex

13

Hey Lex,

A few things for me to catch up on.

I get what you have in mind with providing a trend arrow option for top_element - sounds like a good idea. I’ll add it to my list of things to do (GitHub issue).

Compass should show a marker arrow by default, so if it’s not, you may have found a bug. The following YAML should work:

  - type: custom:ring-tile
    entity: sensor.netatmo_hg91_wind_strength
    marker: sensor.buienradar_wind_direction
    ring_type: compass
    ring_only: true
    ring_size: 2
    top_element: icon

If this still isn’t working, let me know your device / operating system / browser version etc and I’ll see if I can reproduce. One thing to check is that your wind direction entity (sensor.buienradar_wind_direction) produces a compass angle in degrees.

As it happens, tap_action is implemented, but because I haven’t tested it thoroughly yet, I haven’t documented it. Give it a try. Examples:

Default case (more info):

tap_action:
  action: more_info

Navigate:

tap_action:
  action: navigate
  navigation_path: /dashboards/weather

URL (limited to the ring only):

icon_tap_action:
  action: url
  url: https://github.com/neponn/ring-tile-card

The usual config options for tap_action should work, but as I mention, not fully tested so things may break.

1 Like
14

Hey thanks @bigbeefy - glad you like it.

I hadn’t discovered Entity Progress Card - that’s a super cool card - might use it on my dashboards at some point!

UI config is my highest priority task - as you suggest, I’ll take a look at how Entity Progress Card does it. Will probably take me a while…

And thanks @kexan82!

Easiest way to increase the entity name font-size is with card_mod. Example:

card_mod:
  style: 
    rt-info $: | 
      .info span {
        font-size: 20px !important;
      }
2 Likes
15

I just set this card up but am finding that some config options are being ignored.

All 3 cards have the same config other than the entity…

image
image463×139 7.23 KB

type: custom:ring-tile
entity: sensor.dream_machine_pro_dream_machine_pro_cpu_temperature
name: CPU Temp
min: 0
max: 110
colour:
  30%: ha_blue
  50%: ha_yellow
  70%: ha_red

type: custom:ring-tile
entity: sensor.dream_machine_pro_cpu_utilization
name: CPU Usage
min: 0
max: 100
bottom_element: min_max
colour:
  30%: ha_blue
  50%: ha_yellow
  70%: ha_red

type: custom:ring-tile
entity: sensor.dream_machine_pro_memory_utilization
name: RAM Usage
min: 0
max: 100
bottom_element: min_max
colour:
  30%: ha_blue
  50%: ha_yellow
  70%: ha_red

The first one has the min / max at the bottom but the other 2 dont…

16

Hey @sparkydave,

That’s because of the way I’ve done the default handling. Temperature sensors default to ring_type: open, whereas % sensors default to ring_type: closed. If you want to have min / max labelling, you need to use ring_type: open, so add that line to your YAML for the two % sensors.

Hope that helps.

17

Ah ok, thanks.

I just changed it per your suggestion and now they all look the same… except for one of the ring not following the same gradient. I guess that’s another default I need to look into?

image
image434×128 4.23 KB

18

That’s right. Temperature sensors default to indicator: dot, whereas % sensors default to indicator: arc. I find that “level” metrics (eg temperature) work best with a dot, while “consumption” metrics (like %) benefit from an arc to better represent usage. But of course do what works best for you!

Worth reading the docs. The config page describes all the options, including default handling. You’ll also find more in depth descriptions of ring_type, indicator and so on.

1 Like
19

There’s SO much there! Honestly an awesome card. Thanks mate

1 Like
20

This is great! There are already so many possibilities, and about the only thing missing for me at the moment is templating support.

I have no idea how hard it is to add it for every option, but it’d be great if you could do that.

One of the use cases for me is setting a dynamic marker color based on whether the absolute humidity outside is lower than inside, indicating that it’s worth it to air the room.

But there are countless possibilities once every option can be templated.

2 Likes