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.
You could probably make something with the multiple entity card using a circle icon for entities and a bit of css
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;-)
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?
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 %}
}
7 Likes
I like this community… There is always someone to help finding a solution;-)
Many thanks Mark.
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
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!!
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
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.
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?
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.
Thanks again
Geoff
4 Likes
Looks great. Glad you found a good use for it and tha ks for sharing with others.
Hello Mark,
i know this is a old thread but i was hoping you could help me on using this for a water level sensor. i have 3 float valves attached to a esphome, currently reading wet or dry. i tried adapting for this but i cant get it going.
type: entities
entities:
- entity: binary_sensor.esphome_web_14d058_water_low
entity: binary_sensor.esphome_web_14d058_water_alert
entity: binary_sensor.esphome_web_14d058_water_critical
type: custom:multiple-entity-row
name: water
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('binary_sensor.esphome_web_14d058_water_criticalw')| == wet %} red {% else %} grey {% endif %}
}
div.entity:nth-child(2) state-badge {
color: {% if states('binary_sensor.esphome_web_14d058_water_alert')| == wet %} orange {% else %} grey {% endif %}
}
div.entity:nth-child(3) state-badge {
color: {% if states('binary_sensor.esphome_web_14d058_water_low')| == wet %} green {% else %} grey {% endif %}
}
For a binary sensor, you need to test if it is on or off. It may display other values in the UI based on its device class but it is essentially always on or off. You can also have only 1 entity listed in the top part (afaik). As such, your card should look something like this.
type: entities
entities:
- entity: binary_sensor.esphome_web_14d058_water_alert
type: custom:multiple-entity-row
name: water
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('binary_sensor.esphome_web_14d058_water_criticalw') == 'on' %} red {% else %} grey {% endif %}
}
div.entity:nth-child(2) state-badge {
color: {% if states('binary_sensor.esphome_web_14d058_water_alert') == 'on' %} orange {% else %} grey {% endif %}
}
div.entity:nth-child(3) state-badge {
color: {% if states('binary_sensor.esphome_web_14d058_water_low') == 'on' %} green {% else %} grey {% endif %}
}
Note. Only tested briefly that is does update when all binary sensors change, however, if it doesn’t, the entity at the top should ideally be something that does change on each update (a last updated sensor or something.
1 Like
hey
how do i manage to have more than one entity in the if statement?
I want to have this traffic light green, if the solar battery is charged AND the panels are producing more power than needed by the house.
My wife can’t handle numbers, so i need simple things to show.
what langugage is the {% if thingy?
i manged to trial-and-error the code and it now works:
type: entities
entities:
- entity: sensor.sn_xxx_battery_soc_total
type: custom:multiple-entity-row
name: Strom verplempern?
secondary_info: false
show_state: false
entities:
- icon: mdi:circle
card_mod:
style:
hui-generic-entity-row $: ''
.: |
div.entity:nth-child(1) state-badge {
color: {% if (states('sensor.sn_xxx_battery_soc_total')|int == 100) and ( states('sensor.sn_xxx_metering_power_supplied')|int > 50 ) %} green {% elif (states('sensor.sn_xxx_battery_soc_total')|int >= 80) and (states('sensor.sn_xxx_metering_power_supplied')|int > 50) %} orange {% else %} red {% endif %}
}
that worked great…
once I figured out I didn’t have car-mod installed and got it installed 
During the troubleshooting I also found out that in esphome you can sum binary sensors by using the binary sensor map options. just putting this here for others looking to do things like this.
thank you again for the help, I’m sure I will use this card for more things in the future.
Hello,
I’ve been looking for a traffic light system to show on my HA Dashboard to decide when to switch on the washing machine for instance, or even charge our electric cars depending on the amount of kWh the solar panels are delivering and the level of SoC (state of charge %) of the home battery.
I would only need a red / green light dot.
Thanks in advance and hope it’s not too much of a hassle to ask.
PS. I’m new to the community, so still learning a lot.
Hello,
can someone please help me, why my circle is not red in this simplified example ?
type: entities
entities:
- entity: sensor.heizung_aussentemperatur
type: custom:multiple-entity-row
name: Garten
secondary_info: false
show_state: false
entities:
- icon: mdi:circle
card_mod:
style:
hui-generic-entity-row $: ''
.: |
div.entity:nth-child(1) state-badge {
color: red
}
You are missing the if statement. For a binary sensor, here is a code that works
type: entities
entities:
- entity: sensor.heizung_aussentemperatur
type: custom:multiple-entity-row
name: Garten
secondary_info: false
show_state: false
entities:
- icon: mdi:circle
card_mod:
style:
hui-generic-entity-row $: ""
.: |
div.entity:nth-child(1) state-badge {
color: {% if states('sensor.heizung_aussentemperatur') == "off" %} green {% else %} red {% endif %}
}
PS: Thanks, Mark, for the code 
Easier
color: {{'green' if is_state('binary_sensor.xxxxxxx, 'off') else 'red'}}
1 Like