Icon State colour change on last update?

Configuration Frontend
1

Hi all,
I’m currently trying to make picture-elements card that reflects the state of devices on my network, so I can basically get a network overview at a glance. I’ve got icons reflecting the ping state of devices that currently change from the normal green to red should the ping fail. What I’d really like to do is add a third colour state that is orange if the state has changed in the last 24hrs, as when there’s an intermittent issue it’s fairly unlikely that I’ll spot it unless I happen to look at the overview at exactly the correct time.

Network Redacted
Network Redacted1795×767 272 KB

Here’s an extract of the code

panel: true
image: /local/NetworkNew.png
elements:
  - type: state-icon
    entity: binary_sensor.ping_internet
    style:
      top: 6.3%
      left: 6%
      width: 1%
      '--paper-item-icon-color': red
      '--rgb-state-binary-sensor-color': 0,150,0

Would anyone have any cunning ideas how I can do this as all I can think of at the moment is another set of sensors for each ping point that track the state somehow, but I think that’s likely to become a beast to implement. Cheers, Matt

2

Don’t think you’ll be able to achieve this with the default picture elements, so you either need to create more template entities, or start looking into custom cards.

I’d probably create a second problem class entity which turns on when the endpoint is disconnected, with a delay_off set to 24 hours. But maybe messing with custom templates would be more succinct.

3

Take a look at the History_stats integration:

  1. Assume you are monitoring some binary_sensor which is normally ON. Set up a history_stats sensor: if the monitored binary_sensor = OFF starting from 00:00 - then the sensor is increased by 1. I.e. this sensor will give a number of ON->OFF transitions within some defined period (here - a day).
  2. In the Picture elements card: assign an “orange” style to an element if that sensor > 0. Use card-mod to this conditional styling.
4

Hi Ildar,
I’ve been looking at what you suggested, and taken my own view on it slightly (I’ve not used the Historic Sensor you mentioned).

Test code based on your tutorial example, but then modified for my purpose.

type: picture-elements
card_mod:
  style: |
    ha-card {
      {% if (states.binary_sensor.ping_cctv_hik_doorbell.state == 'off') %}
      --my-state-color: red;
      {% elif ((now() - states.binary_sensor.ping_cctv_hik_doorbell.last_changed).total_seconds() / 3600)|float < 24 %}
      --my-state-color: orange;
      {% else %}
      --my-state-color: green;
      {% endif %}
    }
elements:
  - type: state-icon
    entity: binary_sensor.ping_cctv_hik_doorbell
    style:
      top: 50%
      left: 50%
      '--mdc-icon-size': 40%
      '--paper-item-icon-color': var(--my-state-color)
      '--rgb-state-binary-sensor-color': var(--my-state-color)
      transform: translate(-50%,-50%) rotate(0.25turn)
image: /local/white.jpg

This gives me the three colour icon for a single ping sensor (Red - Ping Failed; Orange - Ping healthy but has failed in the last 24hrs; Green - Ping healthy and has been for 24hrs). That’s all great but is there any way I can avoid having to duplicate the card_mod section for each of my sensors?

Cheers, Matt.

5

I am not sure that “last_changed” survives a HA reboot.

Do not think that this “–rgb” variable should be used.

In yaml-mode dashboards you can use methods like:

  1. include:
type: some-card
...
card_mod: !include /config/shared/card_mod/tri_state.yaml

where “tri_state.yaml” is

style:
  ... your card-mod code
  1. yaml-anchors - work in the same yaml-file only:
- type: some-card
  ...
  card_mod: &ref_card_mod_3_state
    style: ...
...
- type: some-card
  ...
  card_mod: *ref_card_mod_3_state

There is also a “secrets” way, it is similar to “include”, but I do not recommend it.
Go to the main card-mod thread for examples of using “secrets”.

In storage-mode dashboards - it is more cumbersome.