Ring Tile Card: visualise your sensor data

[Mariusthvdb (Marius)]

@vinceskahan

Heavens no, not annoyed

ok, sorry for my misunderstanding,

@vinceskahan

decluttering-card templates methodology is the way to go. It made a huge impact simplifying the 16 button cards

you shouldnt use decluttering on custom:button-card, button-card uses its own config templates which are perfect.

if all of your ring-tile cards are on the same view, why not use a yaml anchor and reuse that in the same yaml file. Just trying to reduce as many custom cards as possible

if you really like to use decluttering, you can just throw in the complete config of those tiles, and use the entity as variable

cant imagine that not to work, what was the yaml you tried it with?

@vinceskahan

                  - type: custom:decluttering-card
                    template: my-template-name-here
                    entity: sensor.br2_2
                    name: BR2

note that your example is not correct. name and entity should be set as variables, and then injected in the decluttering template as such
maybe read the documentation for decluttering

[mynolix1986]

I was thinking the same, but the card wouldn’t accept the styling:

with this:

          rose:
            card:
              type: custom:ring-tile
              entity: sensor.jc_heights_wind_direction
              marker: sensor.jc_heights_wind_direction
              ring_type: compass_n
              ring_size: 3
              top_element: marker_dir
              middle_element: value_with_unit
              card_mod:
                style: |
                  ha-card {
                    background: none !important;
                  }

this is a custom field in a button card.

[vinceskahan]

@Mariusthvdb

maybe read the documentation for decluttering

I know we have different cultures, but that reply ‘is’ pretty annoying to me here in the US, and the winking emoji makes it much worse. Really. I’m not laughing.

@Mariusthvdb

you shouldnt use decluttering on custom:button-card, button-card uses its own config templates which are perfect.

Again, we are separated by a common language here. Using the decluttering card works. If button-card has its own different templating, a pointer to a working example would be quite helpful. Anything that works to me is perfect enough.

@Mariusthvdb

if all of your ring-tile cards are on the same view, why not use a yaml anchor and reuse that in the same yaml file. Just trying to reduce as many custom cards as possible

if you really like to use decluttering, you can just throw in the complete config of those tiles, and use the entity as variable

I have no idea what you said there in either sentence. Again, you are saying things that are very skeletal and FAR beyond my understanding of how to configure HA. As I think I said earlier, the HA documentation is very confusing to me almost all the time.

FWIW - the ring cards have different colorization settings so they’re not reusable ‘completely’ just ‘mostly’.

I thought I tried templating the ring-card and passing in the entity and name, so my example above might be a little off. I will give that another try when I get a chance.

Thanks again.

[VietNgoc (Ngoc John)]

@vinceskahan

I know we have different cultures, but that reply ‘is’ pretty annoying to me here in the US, and the winking emoji makes it much worse. Really. I’m not laughing.

LOL Is it so difficult for your culture to read a few paragraphs of instructions in the documentation?

[neponn (Nick)]

Hey everyone - let’s keep the discussion friendly please.

It appears there is a need to solve how card_mod styling works with parent cards, such as decluttering as used by @vinceskahan and the one @mynolix1986 is using (which is?).

I don’t have experience with using these parent cards, so it would be helpful to see some YAML examples that show both the ring-tile card config and the parent card config so that I can have a go at replicating the problem.

[dcapslock (Darryn Capes-Davis)]

@neponn

It appears there is a need to solve how card_mod styling works with parent cards

An option is to apply card-mod directly thus applying directly and providing a class hook for theming.

Here is what Browser Mod does. Note the empty style passed if no style, which will mean theme class only is applied.

js/plugin/popups.ts

[dcapslock (Darryn Capes-Davis)]

@neponn

I don’t have experience with using these parent cards, so it would be helpful to see some YAML examples that show both the ring-tile card config and the parent card config so that I can have a go at replicating the problem.

Card dependent due to how cards may use shadow roots or not.

[neponn (Nick)]

Oh right - thanks @dcapslock - I hadn’t realised I could do that. Super helpful - thanks.

[Mariusthvdb (Marius)]

@vinceskahan

that reply ‘is’ pretty annoying to me here in the US, and the winking emoji makes it much worse. Really. I’m not laughing.

haha, well I did.

Since you obviously refuse to do as suggested, otherwise you wouldnt have posted this

@vinceskahan

                  - type: custom:decluttering-card
                    template: my-template-name-here
                    entity: sensor.br2_2
                    name: BR2

but, since you apparently only want ready-made configs for you

@vinceskahan

how exactly to do a decluttering card for ring-tile, including a template and an example card,

and we’re here not to spoon-feed, Ill leave you to it

dont start with

@vinceskahan

that reply ‘is’ pretty annoying to me here in the US

or I’ll start posting emoji’s again

sorry Neponn, Ill refrain from commenting further

[neponn (Nick)]

Hi everyone,

A quick shoutout to @smartmatic, host of the Smart-Live YouTube channel, who has just posted a great video about ring-tile card.

The channel is in German, so I confess I had to rely on YouTube’s auto-translate (amusing at the best of times), but the video gives a fantastic walkthrough of how to use and configure ring-tile card. If you prefer to watch, rather than read the docs, this might be the video for you!

As noted in the video, YAML configuration is not for everyone. I am working on GUI config in the background, but I’ve got a bunch of travel coming up, so it will be a month or two before it’s ready.

In any case - enjoy the video!

Mit der Ring Tile Card für Home Assistant DEIN Dashboard aufwerten!

[nightfever]

I love the card, but I really really miss a configurable tap-action.

[Reflex (Björn H)]

+1 on that one. To open a customized popup diagram would be fantastic.

[neponn (Nick)]

Hi both. It’s on my to do list, but apologies - I’m travelling at the moment and it will be a while before I get time catch up on a few of these.

[somansch (Andreas)]

First of all, THANKS for this great card. I already replaced a lot of former elements to this card. The only missing is “Compass”. I’m currently using the custom:compass-card, which gives me an option to make color-coding based on windspeed. Is there an option in your card to achieve the same? I would like to have a color change of angle based on windspeed. This is my actual config:

type: custom:ring-tile
entity: sensor.xxx_windgeschwindigkeit
marker: sensor.xxx_windrichtung
ring_type: compass_n
ring_size: 2
ring_only: true
marker_colour: var(--my-blue)
max_decimals: 0

[matt.pregent]

Is there a way to change the font size of the middle element?

[neponn (Nick)]

Hi @somansch - great that you like it!

compass-card provides many more options that ring-tile card - I don’t intend to go to the same level of customisability. Right now, there are no built in ways to change colour based on windspeed, although it would be possible to hack something together with card_mod.

Out of curiosity, what element would you like to colour with respect to windspeed?

---

Hi @matt.pregent - no there is not a way to change the font size of the middle element, although you might be able to hack something together with card_mod. As I’ve mentioned earlier in this thread, a key design principle has been to keep the design clean and configuration simple. Take a look back at the previous discussion for more info.

[scw2wi (Walter Schlögl)]

Does anybody know how to colorize the value instead of the icon?

I would prefer this when ring_only ist set to true,
because the value is shown pretty big and the icon much smaller.
A possibility to show the value a little bit smaller would also be fine.

I am redesigning my monitoring from gauge-card-pro to ring-tile,
and it already looks much better, not only because of the ticks_with_labels.

[hampenpampen]

Hi there,
I am trying to make the background around the dot indicator transparent (using style open ring). Something in the line of:

card_mod:
  style:
    rt-ring-svg $: |
      g.dot dot-outline {
        background: none;
      }

Does anyone know the correct code to make this working?

[dcapslock (Darryn Capes-Davis)]

@hampenpampen

Does anyone know the correct code to make this working?

Try

card_mod:
  style:
    rt-ring-svg $: |
      svg .indicators {
        --card-background-color: none;
      }

[nanomonster]

@neponn I just installed the ring tile card. It’s great! I like it a lot. Good job!

I only have one question: maybe I missed it but I didn’t find any mention of whether or not you can customize the “click-on” behavior of the card? I’m using it mostly for thermostat devices, so basically, if possible, I would like to have the matching thermostat controller card pop-up when clicking instead of the sensor history. Cheers!