Lovelace card-templater card (Jinja2 card templating in Lovelace!)

Steven_Rollason · July 21, 2020, 6:48am

Would you be able to post the config of the card as text (formatted as a code block) rather than an image? I think you need populate the entities collection for the outer card-templater card, but it’s hard to tell from an image.

JerryCih · July 21, 2020, 7:34am

cards:
  - card:
      entities:
        - sensor.red_bin
      entity: sensor.red_bin
      name_template: '{{ states.sensor.red_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/red1.png
        '1': /local/garbage_bins/red2.png
        '2': /local/garbage_bins/red3.png
      type: picture-entity
    type: 'custom:card-templater'
  - card:
      entities:
        - sensor.green_bin
      entity: sensor.green_bin
      name_template: '{{ states.sensor.green_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/green1.png
        '1': /local/garbage_bins/green2.png
        '2': /local/garbage_bins/green3.png
      type: picture-entity
    type: 'custom:card-templater'
  - card:
      entities:
        - sensor.yellow_bin
      entity: sensor.yellow_bin
      name_template: '{{ states.sensor.yellow_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/yellow1.png
        '1': /local/garbage_bins/yellow2.png
        '2': /local/garbage_bins/yellow3.png
      type: picture-entity
    type: 'custom:card-templater'
  - card:
      entities:
        - sensor.kerbside
      entity: sensor.kerbside
      name_template: '{{ states.sensor.kerbside.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/kerb11.png
        '1': /local/garbage_bins/kerb21.png
        '2': /local/garbage_bins/kerb31.png
      type: picture-entity
    type: 'custom:card-templater'
type: horizontal-stack

Steven_Rollason · July 21, 2020, 3:00pm

You appear to have the entities option nested under the picture-entity card, but this belongs under card-templater like this:

cards:
  - card:
      entity: sensor.red_bin
      name_template: '{{ states.sensor.red_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/red1.png
        '1': /local/garbage_bins/red2.png
        '2': /local/garbage_bins/red3.png
      type: picture-entity
    type: 'custom:card-templater'
    entities:
      - sensor.red_bin
  - card:
      entity: sensor.green_bin
      name_template: '{{ states.sensor.green_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/green1.png
        '1': /local/garbage_bins/green2.png
        '2': /local/garbage_bins/green3.png
      type: picture-entity
    type: 'custom:card-templater'
    entities:
      - sensor.green_bin
  - card:
      entity: sensor.yellow_bin
      name_template: '{{ states.sensor.yellow_bin.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/yellow1.png
        '1': /local/garbage_bins/yellow2.png
        '2': /local/garbage_bins/yellow3.png
      type: picture-entity
    type: 'custom:card-templater'
    entities:
      - sensor.yellow_bin
  - card:
      entity: sensor.kerbside
      name_template: '{{ states.sensor.kerbside.attributes.days }} days'
      show_name: true
      show_state: false
      state_image:
        '0': /local/garbage_bins/kerb11.png
        '1': /local/garbage_bins/kerb21.png
        '2': /local/garbage_bins/kerb31.png
      type: picture-entity
    type: 'custom:card-templater'
    entities:
      - sensor.kerbside
type: horizontal-stack

JerryCih · July 21, 2020, 5:00pm

OMG, thank you, that was it. And I’m trying to fix this for last 4 days Thank you very much

fbcohoas · August 16, 2020, 1:21pm

trying to achieve something really simple in theory, but I keep getting “Error!”:

type: 'custom:card-templater'
card:
  entities:
  - entity: switch.my_hifi
    name_template: {{ sensor.hifi_title_status }}
  type: entities
entities:
  - sensor.hifi_title_status

this is pseudocode to signify what I want to achieve (albeit I tried this precise code too, I tried many different combinations using states. and many more, but can’t figure what’s wrong

Steven_Rollason · August 16, 2020, 1:37pm

You either need to surround your template with quotes like:

name_template: '{{ sensor.hifi_title_status }}'

or use this format:

name_template: >-
  {{ sensor.hifi_title_status }}

fbcohoas · August 16, 2020, 2:25pm

Thank you… that was embarassingly simple!
I am not sure why I cannot add something like sensor.hifi_title_status.split(‘,’)[0] tho … it works in the templates tester

it does working with this code tho

'{% set now_playing = states.sensor.hifi_title_status.state_with_unit.split(",")[0] %} 
{{ now_playing }}'

that’s good I guess

Any idea why mini-media-player refreshes much slower when passed through card-templater?

I have 2 cards right now, one with mini-media-player only, and one with mini-media-player inside card-templater.

I can take an action on either card (change source, volume,etc) and it will always show the updated value on the mini-media-player only one within a very few seconds, while the one inside card-templater takes several, like 30 seconds or so.

aidanblack · August 20, 2020, 6:36pm

@Steven_Rollason Thanks for writing and supporting this - great work!

Is there any way to use wildcards in templates? I have a lot of NMap-Tracker entities that show up as device trackers, but I just want to show if they are connected to the network - Home/Away isn’t really appropriate.

Here’s what I have so far - I really want to avoid having to cut and paste the template for 50+ devices:

- type: 'custom:card-templater'
  card:
    entities:
      - entity: device_tracker.a8_a1_59_**_**_**
      - entity: device_tracker.b8_27_eb_**_**_**
      - entity: device_tracker.00_0f_60_**_**_**
      - entity: device_tracker.b8_e8_56_**_**_**
      - entity: device_tracker.1c_65_9d_**_**_**
    title: Computers
    type: entities
  entities:
    - entity: device_tracker.a8_a1_59_**_**_**
      state_template: >
        {{ "On" if states.device_tracker.a8_a1_59_**_**_**.state == "home"
        else "Off" }}

Something like - entity: device_tracker.* or - entity.device_tracker.all?

Steven_Rollason · August 20, 2020, 7:19pm

There’s nothing built-in for this, but you could use this card together with the auto-entities card to do it.

The best way to use it would be to add all those device_trackers to a group called group.nmap_trackers and then the configuration would look like this:

type: 'custom:auto-entities'
card:
  type: 'custom:card-templater'
  card:
    type: entities
filter:
  include:
    - group: group.nmap_trackers
      options:
        state_template: |
          {{ "On" if states.this.entity_id.state == "home" else "Off" }}

This works because of two things:

If you don’t define the entities option on the card you are templating with card-templater, then card-templater will pass its entities option (which, in turn, it is getting from auto-entities) on to it.
auto-entities will automatically replace the text this.entity_id with the entity id of each entity, so states.this.entity_id.state becomes states.device_tracker.whatever.state if the matching entity is device_tracker.whatever for example.

aidanblack · August 21, 2020, 2:58pm

Thank you for that! It almost works…

I think I saw somewhere that entity names that start with a number are a problem?

Steven_Rollason · August 21, 2020, 3:16pm

Try this instead:

state_template: |
          {{ "On" if states("this.entity_id") == "home" else "Off" }}

That should work better with entity ids starting with numbers.

aidanblack · August 21, 2020, 3:20pm

Excellent! Thank you. I was trying this:

{{ "On" if states[states.this.entity_id].state == "home" else "Off" }}

but I wasn’t getting very far. Is there a way to cast variables as different types?

Steven_Rollason · August 21, 2020, 3:36pm

Is there a way to cast variables as different types?

What are you trying to do? You can cast to int, float, or string by doing things like:

{{ states("sensor.whatever") | int }} 
{{ states.sensor.whatever.state | int }}

{{ states("sensor.whatever") | float }}
{{ states.sensor.whatever.state | float }}

{{ states("sensor.whatever") | string }}
{{ states.sensor.whatever.state | string }}

However, a template always actually returns a string (this is a limitation of templates, not specific to this card) so you can’t have a template return anything else other than a string. Although, in this card, I implemented two special cases which are exceptions to this rule:

Any template which returns the string “true” or “false” will be treated as a boolean, this allows you to template boolean options of cards
If you template the entities or state_filter option of a card (e.g. entities_template or state_filter_template) the return value will be parsed as YAML/JSON

aidanblack · August 21, 2020, 3:55pm

I was trying to cast states.this.entity_id | string but I think I see it now… I was using states[...] instead of states(...) to get the entity - old coding habits die hard!

Either way, your solution worked great - thanks again

aidanblack · August 21, 2020, 9:35pm

Last question, I promise…

I got the state text updated and I added the secondary row info for the IP address. Now I am trying to change the color of the icon using Lovelace-Card-Mod, but it looks like the condition isn’t being parsed - it’s not passing it through to the client. I’ve tried several different ways of doing this:

Steven_Rollason · August 21, 2020, 9:54pm

I think there are a couple of issues there:

It should be just is_state("this.entity_id", "home") and not is_state(states("this.entity_id"), 'home')
Putting the style at that level is setting it for the whole card, so it won’t have access to the entity id

If you are still using auto-entities there, you would need the style to be nested under the options section so it will apply to every entity something like this:

options:
  state_template: |
    {{ "Online" if is_state("this.entity_id","home") else "Offline" }}
  style: |
    :host {
      --paper-item-icon-color:
        {%- if is_state("this.entity_id","home") -%}
          green
        {%- endif -%};
    }

aidanblack · August 21, 2020, 10:01pm

Awesome. I was getting there slowly, but I’m completely new to Jinja templates. I had figured out that the style was at the wrong level but I was trying to template the whole style option instead of just the color value.

aidanblack · August 21, 2020, 10:05pm

Final result:

herbs · September 17, 2020, 3:02pm

Hi everyone,

I’m trying to develop a map with self-completion.
Everything seems to work correctly except for the “icon_template” directive.
I have tried several formulations but none of them work.
Could you check my code?
Thank you in advance.

card:
  card:
    type: entities
  type: 'custom:card-templater'
filter:
  include:
    - entity_id: sensor.ds*_access_control
      options:
        icon_template: |
          {% if states.this.entity_id.state == '22' %}
            mdi:door-open
          {% elif states.this.entity_id.state == '23' %}
            mdi:door-closed
          {% else %}
            mdi:help-circle-outline
          {% endif %}
        state_template: |
          {% if states.this.entity_id.state == '22' %}
            Open
          {% elif states.this.entity_id.state == '23' %}
            Close
          {% else %}
            Check
          {% endif %}
        style: |
          :host {
            --paper-item-icon-color:
              {% if is_state("this.entity_id", "22") %}
                orange
              {% elif is_state("this.entity_id", "23") %}
                white
              {% else %}
                red
              {% endif %}
              ;
          }
sort:
  method: name
type: 'custom:auto-entities'

The result

Capture

Steven_Rollason · September 17, 2020, 3:29pm

The way you’re calling it using auto-entities, you are templating the entities rather than the card. That means that to template attributes like icon and name they need to appear under attributes like this:

card:
  card:
    type: entities
  type: 'custom:card-templater'
filter:
  include:
    - entity_id: sensor.ds*_access_control
      options:
        attributes:
          icon_template: |
            {% if states.this.entity_id.state == '22' %}
              mdi:door-open
            {% elif states.this.entity_id.state == '23' %}
              mdi:door-closed
            {% else %}
              mdi:help-circle-outline
            {% endif %}
        state_template: |
          {% if states.this.entity_id.state == '22' %}
            Open
          {% elif states.this.entity_id.state == '23' %}
            Close
          {% else %}
            Check
          {% endif %}
        style: |
          :host {
            --paper-item-icon-color:
              {% if is_state("this.entity_id", "22") %}
                orange
              {% elif is_state("this.entity_id", "23") %}
                white
              {% else %}
                red
              {% endif %}
              ;
          }
sort:
  method: name
type: 'custom:auto-entities'