Trying to use Jinja in a card, getting error: missed comma between flow collection entries

[Dal]

Hi.
I’m trying to create a grid card that is auto populated with buttons.
Each button is a hue scene for a specific light.
The code works fine in Developer Tools → Template, but when I try to create a card, I’m getting the error:

Configuration errors detected:

    missed comma between flow collection entries (4:2)

The whole code looks like this:

type: grid
cards:

{% set light = states.light['kontor_hr'] %}

{%- set scenes = state_attr(light.entity_id, 'hue_scenes') -%}
{%- if scenes -%}

{% for scene in scenes -%}
  - type: button
    tap_action:
      action: call-service
      service: hue.activate_scene
      service_data: {}
      target:
        entity_id: {{ scene }}
    icon_height: 30px
    show_name: false
    show_state: true
    hold_action:
      action: call-service
      service: light.turn_off
      target:
        entity_id: {{ light.name }}
      show_name: false
      show_icon: false
   - entity: {{ light.entity_id }}
{% endfor %}
{%- endif %}

columns: 3
square: true

What am I missing?

[petro]

You can’t use templates like that. Templates can only be used in a single field. Also, the frontend typically does not accept templates.

Your best option is to use the template to generate your yaml, then paste the yaml into the page. You can also attempt to use lovelace_gen, however it does not have access to hass jinja. So functions like state_attr will not work.

Lastly, you could also use auto-entities, which should handle something similar to your current configuration but you have to change the yaml to work with the auto-entities format.

[Dal]

Hmm, I was so happy I finally got this working in the Template editor, and hoping it was just a matter of adapting the code into a card

Auto Entities look intriguing, thanks for the tip

[Dal]

Looked into auto entities, but I’m not able to list scenes for one light only:

type: custom:auto-entities
card:
  type: entities
filter:
  include:
    domain: scene
    entity_id: light.kontor_hr
    options:
      tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: this.entity_id

The two filter seems to run in OR, and not in AND

[petro]

just use templating

[Dal]

I tried, but wasn’t able to solve it.
Either the documentation is lacking, or I am (probably me :sadface)

[petro]

it’s the bottom example in the docs

[Dal]

I tried this:

type: 'custom:auto-entities'
card:
  type: entities
  entities:
    - type: section
      label: Scenes for Kontor
    {% set scenes = state_attr('light.kontor_hr', 'hue_scenes') %}
    {% for scene in scenes -%}
      - type: button
        tap_action:
          action: call-service
          service: hue.hue_activate_scene
          service_data:
            entity_id: light.kontor_hr
            scene_name: "{{ scene }}"
        name: "{{ scene }}"
    {% endfor %}
  show_empty: false
  filter:
    include:
      - entity_id: light.kontor_hr

But this gives me the error:

Configuration errors detected:

    bad indentation of a mapping entry (7:5)

     4 |   entities:
     5 |     - type: section
     6 |       label: Scenes for Kontor
     7 |     {% set scenes = state_attr('ligh ...

And no matter where I move the indentations, I can never get it working.
Help is appreciated

Thanks

[petro]

Your filter isn’t using a template like the example… You just made up stuff again.

[Dal]

I appreciate that you are answering, but just saying that I’m wrong isn’t helpful at all.
It should be clear now that I’m out of my depth, but you seem to have a grasp on this. So why not come with an example instead of simply saying I’m wrong? Or better yet; the solution

Thanks

[petro]

Because you aren’t reading the example in the documentation. You’re just making things up. I already told you that you can’t template outside a field, yet you tried it again.

type: custom:auto-entities
card:
  type: entities
filter:
  template: |
    {% for light in states.light %}
      {% if light.state == "on" %}
        {{ light.entity_id}},
      {% endif %}
    {% endfor %}

or:

template: "{{states.light | selectattr('state', '==', 'on') | map(attribute='entity_id') | list}}"

Notice how it’s in filter, and the template is in template.

[petro]

type: 'custom:auto-entities'
card:
  type: entities
  show_empty: false
  entities:
      - type: button
  filter:
    template: >
      {% set scenes = state_attr('light.kontor_hr', 'hue_scenes') %}
      {% for scene in scenes -%}
        {
          'name': "{{ scene }}",
          'tap_action': {
            'action': 'call-service',
            'service': 'hue.hue_activate_scene',
            'service_data': {
              'entity_id': 'light.kontor_hr',
              'scene_name': "{{ scene }}",
            }
          }
        },
      {% endfor %}

[Dal]

Thank you for this:
However it gives me the error “No filters specified”.
But then again, I’m not sure this would ever work, since it does not list the entity_id of the scenes, only the parent light.

But based on your input, I was actually able to make a card that lists what I want. It still needs some tweaking, and I need to figure out how to use different picture for the different buttons, but:

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 2
card_param: cards
filter:
  include:
    - entity_id: scene.kontor*
      options:
        type: custom:button-card
        show_entity_picture: true
        entity_picture: /local/hue-icons/hue-icon_lyst.png
        show_name: false
        name: nothing_yeet
        tap_action:
          action: call-service
          service: hue.activate_scene
          service_data:
            entity_id: this.entity_id
        double_tap_action:
          action: call-service
          service: light.turn_off
          service_data:
            entity_id: light.kontor_hr

Gives this output:

3 working buttons

We still need to figure out how to use different pictures for different scenes somehow.
I have created pictures for different scenes and name them the same as the scene name
Maybe it is possible to strip the scene entity name so only the scene name remains.
Example: strip scene.kontor_hr_golden_pond so only golden_pond remains

That way we could create something like this
entity_picture: /local/hue-icons/hue-icon_{{stripped_entity_name]]_lyst.png

I also think it would be wise to remove the text from the picture and use a stripped show_name instead.
That way the icons could be used by others than me

I’m not sure where to put this discussion.
It it surely not a jinja2 discussion.
I have gotten som answers in the Auto-Entities discussions. Maybe I’ll continue the discussion there.
Although we are probably in the custom:button-card area now

Thanks again for helping out, I really appreciate it