Ring Tile Card: visualise your sensor data

[dcapslock (Darryn Capes-Davis)]

@neponn

I hadn’t heard about UIX. Looks like a super cool project. I haven’t yet had a chance to investigate, but I get your point - I’ll do some testing, then shift docs from card_mod to UIX (#72)

Version 5.3.0 of UIX just released. 5.3.0 now how DOM inspection helpers so you can get assistance in how to set your UIX selectors.

e.g. without much fuss, I looked for the dot of the ring-tile-card, then used uix_path($0) to get the following…

Then easily added my CSS to get a pulsing indicator dot - which could be extended with a template to pulse only when on a certain value condition.

uix:
  style:
    rt-ring-svg $: |
      svg g.indicators {
        animation: pulse 1s infinite;
      }
      @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
      }

[neponn (Nick)]

Wow @dcapslock - that’s awesome. Anything that means less clicking drop down arrows in the Chrome element inspector is a fine thing!

[MarkDEdwards]

@neponn Would you consider allowing two entities within the center of a ring? I’d love to have a wind indicator with both wind speed and wind gust in the middle. So the main ring would be driven by wind speed and the additional entity would show wind gusts as a numeric value.

[neponn (Nick)]

Thanks for the suggestion @MarkDEdwards. I have to confess, my initial reaction is that I’m not that keen to try to pack more in. But I’m curious to hear your thoughts… do you have ideas about how it would be laid out? I would suggest it would have to be limited to larger rings to maintain legibility.

[marthepar]

It would also be useful if the top, middle and bottom elements all had the same configurable options with the added option for all of “can be dynamically determined by providing the name of a sensor” as is the case with Min and Max

[neponn (Nick)]

@marthepar – it’s probably reasonable to make the options for top, middle and bottom elements more consistent, but I’m not keen on enabling all three elements to be individually configured as entities / attributes. That would lead to inevitable configuration confusion / complexity. But thanks for the suggestion.

[Mariusthvdb (Marius)]

this must be too simple… however, I need some help

type: custom:ring-tile
entity: sensor.netto_verbruik
ring_size: 2
indicator: arc
ring_only: true
min: -7500
max: 7500
colour:
  "0": blue
  "-7500": gold
top_element: none
bottom_element: icon
middle_element: value_with_unit
icon: mdi:flash

shows like

while Id like the indicator to start from the 0 position top center going either clockwise - positive (consumption) or counter-clockwise - negative (production) of (solar) energy

like this:

How can I set options to do so?

also, I 'hacked my way into the elements, because there is no single ‘unit’ option for the middle element.

btw setting a marker at 0 shows that is correct at the top center, so the colorization is not correct?

maybe a FR would be in place?

[neponn (Nick)]

Hi @Mariusthvdb - that’s a cool use case - good idea. Unfortunately, I can’t think of a way to do that with the current implementation, so it will have to be a feature. Maybe something like indicator: arc_from_zero or similar. I’ll give it some thought.

On your second question - I’m not quite sure I understand. What hacking did you need to do (and why) and what were you expecting in terms of colourisation? Looking at your grad definition, for a value of 755 W, I would expect the icon to be coloured blue, which it is?

[Mariusthvdb (Marius)]

@neponn

What hacking did you need to do (and why)

that was in regards to the elements I seek to be shown. I want expecting the W t be shown as singled out unit, and as part of the state, hence I set that to none

as for the color there, Id expect the color on the 755, not start in the left side, but start from the top middle section, and yes then be blue. just like the 829 gauge being brown there. the essential bit is the starting point. It should either go left, or go right, and always from the top center.

added a screenshot with stock gauge now also, which I hope makes clear what I am after (concerning the colors, not the rest of the design obviously)