Custom Button Card and Lovelace gen jinja show icon if any device in list is on

Configuration Frontend
1

Hi there,

I’m trying to get more into templating and jinja and am a little stuck on a topic. I have dynamic button-card that will show icons for room when changes occur. (if a motion or door is active, display the icon in a portion of the card). for checking a single entity, i worked that out. but i’m having issues trying to figure out how to do this for lights in a room.

what i want to write up is:
" if any of these lights in the lights[“entities”] list are active, display this icon mdi:lightbulb, else display mdi:blank"

if anyone has accomplished something like this i would greatly appreciate some recommendations

here is an excerpt of my kitchen room config

- name: Kitchen
  icon: mdi:silverware-variant
  temperature: sensor.kitchen_temperature
  door: binary_sensor.kitchen_french_doors
  motion: binary_sensor.kitchen_motion
  media_player: media_player.kitchen
  lights:
    entities:
      - entity: light.kitchen_accent_dimmers
      - entity: light.kitchen_downlights
      - entity: light.dining_lights

and in my lovelace yaml. the motion portion works. but not sure how to write up to look through the lights entities list i have in my config above

custom_fields:
  {% if room["motion"] %}
  motion: >-
    [[[
      var motion = '';
      {% if room["motion"] %}
        if(states['{{ room["motion"] }}'].state == 'on'){
          {% if room["motion"].split('.')[0] == 'binary_sensor' %}
            motion += '<ha-icon style="height: 20px; color: var(--champs-theme-accent)" icon="mdi:motion-sensor"></ha-icon><br>';
          {% endif %}
        }
      {% endif %}
      return motion;
    ]]]
  {% endif %}

  {% if room["lights"] %}
  lights: >
    [[[
      if (states['{{ room["lights"]["entities"] }}'].state == 'on')
        return `<ha-icon
          icon="mdi:lightbulb-multiple"
          style="width: 40px; height: 40px; ">
          </ha-icon>`
        else
          return `<ha-icon
            icon="mdi:blank"
            style="width: 40px; height: 40px; ">
            </ha-icon>`
          ]]]
  {% endif %}
2 
var lights = {{ room.lights.entities | map(attribute='entity') | list }};
var cnt = 0;
lights.forEach(entity_id => {
  var entity = states[entity_id];
  if (entity && entity.state && entity.state === 'on')
    cnt = cnt + 1;
});
var icon = (cnt > 1) ? 'lightbulb-multiple' : 'blank';
return `<ha-icon
  icon="mdi:${icon}"
  style="width: 40px; height: 40px; ">
  </ha-icon>`
3

and i know i can achieve the same outcome by adding those lights to a group, and just listing the group in a key:value pair in the config, so i could use the same code like i do for a motion or door, but really wondering if there is way to check if any of the entities in that list in my config file are on.

otherwise, if i make a change to what devices are in the room (kitchen in this example) i would have to make updates to two different files, vs just one.

4

You’re welcome to steal code from my repo. I do this crap everywhere.

EDIT: The images are out of date… don’t look at them. UI looks completely different from the auto-gen stuff inside the lovelace folder.

5

thanks @petro

this works for showing the icon, however it doesn’t auto update on state change. i have to refresh the page to see the icon appear/disappear.

i tried to apply the

triggers_update:
but it doesn’t seem to actually update

would this be appropriate or something else?

here is what i have now:

type: custom:button-card
triggers_update:
  - {{ room.lights.entities | map(attribute='entity') | list }}
  - {{ room["door"] }}
  - {{ room["motion"] }}
custom_fields:
  {% if room["lights"] %}
  lights: >
    [[[
      var lights = {{ room.lights.entities | map(attribute='entity') | list }};
      var cnt = 0;
      lights.forEach(entity_id => {
        var entity = states[entity_id];
        if (entity && entity.state && entity.state === 'on')
          cnt = cnt + 1;
        });
        var icon = (cnt > 1) ? 'lightbulb-multiple' : 'blank';
        return `<ha-icon
          icon="mdi:${icon}"
          style="width: 40px; height: 40px; ">
          </ha-icon>`
      ]]]
  {% endif %}

i’m guessing this is wrong

6

triggers update should be this:

triggers_update:
{%- for entity_id in room.lights.entities | map(attribute='entity') %}
  - {{ entity_id }}
{%- endfor %}
  - {{ room.door }}
  - {{ room.motion }}
7

ahh that makes sense.

also took me a few to figure out why i was only getting icons showing when i had more than one device, but that was a simple fix of just updating the var icon = (cnt > 1) to var icon = (cnt >= 1)

thank you very much. i’m really loving the combo of lovelace_gen, button cards, and now also layout cards and state-switch cards. i’m learning a ton.

in your original code snippet, could you please explain the second use/ need of entity.state in the if condition? i get confused hopping between jinja/templates and when /where to use each but perhaps this isn’t the place for that

if (entity && entity.state && entity.state === 'on')

regardless, thanks for the assist!

8

and your config is intense! i’ll need to spend some nights digging into how your doing things there. much more advanced than my usage of these things, but great inspiration

9

first check is against entity, making sure it exists. Second check makes sure the property ‘state’ exists on the entity object. 3rd checks to see if the value of state is equal to on. It’s for safety. If the first condition fails JS will not check the remainder.

10

I tried to make my configuration expandable. Meaning I only have to add to the configuration and it will auto place my cards in the correct spot. Ultimate laziness.

11

makes total sense. nice!

12

and i totally get you here. that is my reason for redoing my whole system to utilize these components as well. after 7 years of tinkering and manually making changes, it’s time to better automate the config and have a single place to just define the devices