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

herbs · September 17, 2020, 3:35pm

Nice,

It works fine

Thanks a lot !!!

Triqueon · October 20, 2020, 10:38am

I love this. In my opinion, data transformation should take place in the visualization, not as a separate datasource, and this adds that functionality to Home Assistant (god knows why entities don’t all support having an editable template in the first place…), and saves you the trouble of adding separate templated sensors for every visualization you want to do.

I would love to get this to work with numeric values, so we can use it for the Gauge card or similar, and took the liberty to submit a PR for that: https://github.com/gadgetchnnel/lovelace-card-templater/pull/29

pollinolas · November 18, 2020, 8:14pm

hi, could it be that the 0.118 version breaks this card? all the cards that i have don’t work
Greetings

Steven_Rollason · November 18, 2020, 10:10pm

This should be fixed in the latest version, 0.0.14. Can you please try updating and see if it fixes it for you?

habitoti · December 4, 2020, 10:14am

So actually this is exactly what I was looking for (and I wondered why templating is not generally applied in card configuration anyway…).

However I either just do it still wrong or my hopes where too high? I just want to apply some rounding for sensor values in a glance-card (and I don’t want to create additional sensors for that, as this is a pure presentation decision):

type: 'custom:card-templater'
card:
  - type: glance
        show_icon: false
        show_name: false
        entities:
          - entity: sensor.kostal_home_consumption_year
            state_template: {{ states('sensor.kostal_home_consumption_year') | round(0) }}

But it just keeps showing the unchanged sensor value, no rounding taking place. The templating code alone produces the right output in dev. tools.
How would I achieve this?

Regards, habitoti

Steven_Rollason · December 4, 2020, 10:54am

state_template is an option of entities for the card-templater, rather than the templated card. So you need something like this:

type: 'custom:card-templater'
card:
  type: glance
  show_icon: false
  show_name: false
entities:
  - entity: sensor.kostal_home_consumption_year
    state_template: {{ states('sensor.kostal_home_consumption_year') | round(0) }}

This works in this case because card-templater passes its entities option to the templated card. Sometimes (e.g. if you want other entities which aren’t templated) you may need to have it like this instead:

type: 'custom:card-templater'
card:
  type: glance
  show_icon: false
  show_name: false
  entities:
    - entity: sensor.kostal_home_consumption_year
    - entity: sensor.some_other_sensor
entities:
  - entity: sensor.kostal_home_consumption_year
    state_template: {{ states('sensor.kostal_home_consumption_year') | round(0) }}

habitoti · December 4, 2020, 12:56pm

Ok, so ein picked exactly your sample and added it as the last card to a vertical stack:

    - type: 'custom:card-templater'
      card:
        type: glance
        show_icon: false
        show_name: false
      entities:
        - entity: sensor.kostal_home_consumption_year
          state_template: '{{ states("sensor.kostal_home_consumption_year") | round(0) }}'

It doesn’t apply rounding, just produces the unchanged sensor value. So given that the entities are only provided on the card-templater level, but then correctly used on glance card, I suppose it was somehow correctly picked up by card-templater and passed on to glance card, however w/o any processing.
Anything else I could try? (I need to actually enclose the template in quotation, because it otherwise becomes an array with null values after saving…)

arganto · January 9, 2021, 9:14am

If I try to use icon_templating, e.g. /stripped out if then else for this example

type: 'custom:card-templater'
entities:
  - entity: witch.shelly_haustuerklingel_klingelstatus
card:
  type: entities
  title: Haustürklingel
  entities:
    - entity: switch.shelly_haustuerklingel_klingelstatus
      name: aus/an
      icon_template: 'mdi:home'

based on

switch:
  - platform: rest
    name: shelly_haustuerklingel_klingelstatus
    resource: http://192.168.178.55/settings/relay/0
    body_on: 'btn_type=toggle'
    body_off: 'btn_type=detached'
    is_on_template: '{{ value_json.btn_type == "toggle" }}'

and turn on the switch

it “moves/flickers” at least 2 times, sometime more often to “on” afterwards.In the history only one “on” is listed.

If this entity row is in a normal entity card, this does not happen. If this entity is in parallel in the card-templater card and in a standard entity card and if I switch on in the standard card, it does not do this behavior in none of the two cards. If I switch on in the card-templater card it only does this behavior in the card-templater card, the standard card only switches once to on.

Any idea for this behavior/bug?

Steven_Rollason · January 9, 2021, 1:44pm

entities:
  - entity: witch.shelly_haustuerklingel_klingelstatus

I notice that you have witch.shelly_haustuerklingel_klingelstatus there instead of switch.shelly_haustuerklingel_klingelstatus.
Is that just a typo in your post, or do you have it like that in the config itself?
If so, that may be causing issues.

arganto · January 9, 2021, 3:03pm

Eagly eyes. Thx. Was not only a c&p typo here, but it is the same behavior with corrected text. And it is only happening when switching on. off is fine without repeating animation.

Steven_Rollason · January 9, 2021, 6:11pm

I can’t work out exactly what the issue is, but I suspect that it is due to a delay between actually operating the switch in the card and the state changing to on (due to it using a REST API call).
The standard card may have logic to account for this (some sort of debouncing) so the switch doesn’t flick back to off while it’s waiting for the REST API to return the correct state and I would need to implement something similar.

It’s hard to test that theory as I don’t have an REST switches configured, but I’ll see what I can do.

arganto · January 9, 2021, 6:46pm

Great to hear!

Is my first one as well. A shelly 1 for my doorbell to deactivate the bell. And I use the card templater to show different icons if on or off.

lkeays · January 22, 2021, 9:17pm

Edit: Answering myself below - I solved my question

Hi,
I’m trying to find an example for the “tap-action” where I’m trying to “toggle” manually the presence of someone (our cleaners - their presence “stops” all weird automations in the house )

  - type: image
    entity: person.asmert
    tap_action:
      action: call-service
      service: device_tracker.see
      service_data:
        dev_id: asmert
	      location_name: >-
          {%- if is_state('person.asmert', 'on') -%}
            not_home
          {%- else -%}
            home
          {%- endif -%}
    state_image:
      home: /local/ButtonAsmeret.png
      not_home: /local/ButtonAsmeretOFF.png

I’m not sure it’s possible - but basically I wanted to change into a “toggle”. This doesn’t work…

What am I doing wrong - or is it possible?

One day later… I have another try at this and went away from templates and used a condition card instead. So apologie as this becomes out of topic… Pasting my working code:

  - type: conditional
    conditions:
      - entity: person.asmert
        state: 'home'
    elements:
      - type: image
        image: /local/ButtonAsmeret.png
        tap_action:
          action: call-service
          service: device_tracker.see
          service_data:
            dev_id: asmert
            location_name: not_home
        style:
          top: 74.05%
          left: 9.9%
          width: 10%    
  - type: conditional
    conditions:
      - entity: person.asmert
        state: 'not_home'
    elements:
      - type: image
        image: /local/ButtonAsmeretOFF.png
        tap_action:
          action: call-service
          service: device_tracker.see
          service_data:
            dev_id: asmert
            location_name: home
        style:
          top: 74.05%
          left: 9.9%
          width: 10%

Adrian_Stanciu · February 24, 2021, 10:35am

trying to change icon based on state, but with no luck.

type: 'custom:card-templater'
card:
  type: entities
  entities:
    - entity: binary_sensor.living_cold
      attributes:
        icon_template: |-
          {% if is_state("binary_sensor.living_cold", "on")%}
          mdi:temperature-chevron-down
          {% else %}
          mdi:thermometer-half
          {% endif %}
    - entity: binary_sensor.living_oktemp
      attributes:
        icon_template: |-
          {%- if is_state("binary_sensor.living_oktemp","on")-%}
            mdi:thermometer-chevron-up  
          {%- else -%} 
            mdi:thermometer-half 
          {%- endif %}

curtiszm · April 16, 2021, 10:23pm

What am I missing here. I cannot get the images to come up. The card is looking for state 2.
This is the folder where images are: /images/containers

type: 'custom:card-templater'
card:
  type: picture-entity
  name_template: '{{ states.sensor.bio.attributes.days }} days'
  show_name: true
  show_state: true
  entity: sensor.bio
  state_image:
    '0': /local/images/containers/bio_today.png
    '1': /local/images/containers/bio_tomorrow.png
    '2': /local/images/containers/bio_off.png
entities:
  - sensor.bio

tanderson1992 · January 3, 2022, 5:27am

Necro post here. I’m trying to use the card to display a picture from a URL I’ve scraped. The template:

{{states.sensor.kgbi_icon.state }}

displays the desired URL in the developer tools, template. However, the following card doesn’t work, probably due to my syntax:

type: custom:card-templater
card:
  type: picture
  image_template: {{states.sensor.kgbi_icon.state }}
  tap_action:
    action: none
  hold_action:
    action: none

When I press save, the template is replaced by:

  image_template:
    '[object Object]': null

I’ve tried putting single-quotes around the state without any luck. What’s the right way to make this work? I’ve looked through many examples, but none that I could find were using the picture card to load a template URL.

Steven_Rollason · January 3, 2022, 2:35pm

You either need to surround the template in quotes, like this:

image_template: '{{states.sensor.kgbi_icon.state }}'

or use >- like this:

image_template: >- 
  {{states.sensor.kgbi_icon.state }}

tanderson1992 · January 3, 2022, 2:43pm

Unfortunately, as I mentioned above, that isn’t working either. When I add the single quotes, it doesn’t change to null, but it also doesn’t display the image. I’ll keep working on it and see if I can get the image to display.

EDIT: when I inspect the element, I see this is being loaded as the image source:

<img src="http://[mylocalip]:8123/-">

I’ll try restarting HA to see if that has an impact.

Steven_Rollason · January 3, 2022, 3:04pm

You need to use the entities option to tell it which entities to scan for changes (without that it will only refresh the template when the page is reloaded, and even that is temperamental).

So it should look like this:

type: custom:card-templater
card:
  type: picture
  image_template: '{{states.sensor.kgbi_icon.state }}'
  tap_action:
    action: none
  hold_action:
    action: none
entities:
  - sensor.kgbi_icon.state

tanderson1992 · January 3, 2022, 5:09pm

Ah that’s the part I was missing, thanks! The image displays now.