Traffic light card

Configuration Frontend
#1

Hi,
I’m looking for a traffic light type of card, i.e. a 2-3 dots that can be turned green, red and yellow.
Has anyone seen this?

Thanks.

#2

You could probably make something with the multiple entity card using a circle icon for entities and a bit of css

#3

Thanks Mark. I thought about that, but im looking for 2-3 dots stacked vertically (or horizontally). I can find single dot icons, but not multiple ones.
I’ll keep searching;-)

#4

Well I love a challenge and I have too much time on my hands. Using multiple entity card and card-mod, you can do something quite nice. Is this what you are looking for?

image

Here’s the code. You can put you r/a/g logic in the section at the bottom.

type: entities
entities:
  - entity: sensor.wiser_lts_temperature_kitchen
    type: custom:multiple-entity-row
    name: Kitchen
    secondary_info: false
    show_state: false
    entities:
      - icon: mdi:circle
      - icon: mdi:circle
      - icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if states('sensor.wiser_lts_temperature_kitchen')|int < 18 %} red {% else %} grey {% endif %}
          }
          div.entity:nth-child(2) state-badge {
            color: {% if states('sensor.wiser_lts_temperature_kitchen')|int < 20 %} orange {% else %} grey {% endif %}
          }
          div.entity:nth-child(3) state-badge {
            color: {% if states('sensor.wiser_lts_temperature_kitchen')|int >= 20 %} green {% else %} grey {% endif %}
          }
3 Likes
#5

I like this community… There is always someone to help finding a solution;-)

Many thanks Mark.

#6

hey, first, thank you very much!

can you help me with the card mod template, I want the trigger colors with the current status of my light

123
1231357×764 31.7 KB

I want if the light bulb its red now so show me red
If the light bulb its orange right now so show me the orange circle and same at green color.

thank you very much!!

#7

Assuming you light has an attribute that shows its colour just change the color: line under style to something that evaluates to true or false. Ie

color: {% if state_attr('light.my_light', 'color') == 'red' %}
1 Like
#8

Thanks for this, but it doesn’t work without refreshing the page.
The colors don’t update when my states changes, only after an F5.

#9

The card will update based on the entity on line 3 updating. Does your entity update in relation to your states changing you want to monitor?

#10

Mark, thank you very much for this code.

I have adapted it and it is working well for me as (due to my aviation background) a Warning, Caution and Advisory panel. A one stop, ‘check everything’ page.

Xnapper-2023-02-07-08.33.11
Xnapper-2023-02-07-08.33.111276×790 99.8 KB

Thanks again

Geoff

#11

Looks great. Glad you found a good use for it and tha ks for sharing with others.