📝 100% Templatable Lovelace Configurations

binary_sensor.aqara_raam_bureau is not in your list of entities

ah thats stupid of me :crazy_face: I was not aware that I needed to add all the entities, but off course that makes sense :blush:

Works great now!!!

Thanks for the quick update!!!

1 Like

Hey,

I have almost the exact same use case but my recordings get timestamped as part of the file name. Do you know how i can add this in tot eh card so it always retrieved the most up to date file.

I tried the following but it didn’t work:

card:
  type: iframe
  url: >-
    ${'https://xxxxxxxxxxxxxxxxxxxxxxxxxx.ui.nabu.casa/local/snapshot/recordings/front_door_{{ state_attr('input_datetime.lastmotion_front_door', 'timestamp') | timestamp_custom('%Y%m%d_%H%M') }}.mp4?v='+states['input_datetime.lastmotion_front_door'].state}
entities:
  - input_datetime.lastmotion_front_door
type: 'custom:config-template-card'

Below is a refrence to the shell script timestamp format.

    - service: shell_command.motion_video
      data_template:
        action: "mv"
        camera: "front_door"
        time: "{{ state_attr('input_datetime.lastmotion_front_door', 'timestamp') | timestamp_custom('%Y%m%d_%H%M') }}"

I stole the code form someone else so im not sure how to fix it.

@Eeeeeediot - Have you tried pasting your code into the developers template to ensure it is valid?

One error I see is you don’t place “{{ }}” around internal elements that are already wrapped by this config template.

I modified your url and pasted the below directly into the developer template and found it is interpreted properly …

{{ '/local/snapshot/recordings/front_door_' +
     state_attr('input_datetime.lastmotion_front_door', 'timestamp') |
     timestamp_custom('%Y%m%d_%H%M') +'.mp4?v='
     +states['input_datetime.lastmotion_front_door'].state }}

Result: /local/snapshots/recordings/front_door_20200604_0945.mp4?v=2020-06-04 09:45:39

In the config-template card, you will wrap the code with “${ }” instead of “{{ }}”. I also don’t think you need to specify the external url. Just the local path should suffice.

I hope this helps you, but this is about as far as my limited expertise with this card can go if you still have problems.

Hey, thanks for your help. I’m pretty sure it did work but I ended up just making a ‘lastest’ file and pulling that. Still using the method to refresh it though👍

Version 1.2.0 Released

New Features:

  • Templates can now be used the entities list

Bug Fixes:

  • Resolve setConfig error

Breaking Changes:

  • Minimum Home Assistant installation of 0.110.0

I’m having a problem with this.

I use config-template-card and everything works…

image
…except that I have to refresh the browser to see state changes.

image

Here is my exact config (well it is one of many I have tried but this is the one that I think covers most possible options)

Now, I know this config is convoluted but please humour bear with me.

Briefly, I have an input_text which holds the name of a sensor. The button-card shows the icon, name and state of that sensor.

#=== Controller WiFi Signal
- type: custom:config-template-card
  variables:
    - states['input_text.irrigation_external_sensor_controller_wifi'].state
    - states[states['input_text.irrigation_external_sensor_controller_wifi'].state].state
  entities:
    - input_text.irrigation_external_sensor_controller_wifi
    - states['input_text.irrigation_external_sensor_controller_wifi'].state
    - states[states['input_text.irrigation_external_sensor_controller_wifi'].state].state
  card:
    type: custom:button-card
    entity: "${vars[0]}"
    triggers_update: 
      - "${vars[0]}"
    icon: "${vars[1] == 'unavailable' ? 'mdi:wifi-off' : 'mdi:wifi'}"
    show_state: true
    state_display: >
      [[[
        return states[states['input_text.irrigation_external_sensor_controller_wifi'].state].state;
      ]]]

1 Like

you need to wrap templates in ${} within entities

1 Like

Perfect!
Thank you…

I just cannot get my head around this card. I think it might do what I want but try as I might, I cannot get started.

I’m looking to do a glances card, with attributes added below the state. Is that possible?

image

Hi @iantrich,

On Home Assistant 0.111.2
Trying to get icons changed dynamically in picture-glance or picture-element card within config-template card in lovelace, however, it looks like the update is not happening unless I refresh the webpage.

The card itself is working and the icon changes when I change from within the “icon” statement, meaning the logic itself within ${} works.

Could this be a problem similar to https://github.com/home-assistant/frontend/pull/3949 ?

entities:
  - input_boolean.media_player
type: 'custom:config-template-card'
variables:
  - 'states[''input_boolean.media_player''].state'
card:
  type: picture-elements
  elements:
    - type: state-icon
      icon: '${vars[0] === "on" ? "mdi:radio" : "mdi:speaker"}'
      entity: input_boolean.media_player
      style:
        top: 32%
        left: 40%
  image: 'https://demo.home-assistant.io/stub_config/floorplan.png'

Can I use a template to create a variable? I cannot get it to work so maybe not or else I am doing something wrong.

{{ states.sensor  
   | selectattr('attributes.unit_of_measurement', '==', '°C')
   | selectattr('attributes.sensor type', '==', 'LYWSDCGQ')
   | map(attribute='name') | list}}

produces a list like

[‘room1’, ‘room2’]

Can I access that with vars[0][0] for instance?

Hi everyone, I need help with dynamic opacity. I would like to change the opacity depending on the state of the sensors but it isn’t working.

- type: 'custom:config-template-card'
             entities:
              - media_player.bedroom_tv
              - light.spalnia_parent_79
              - light.spalnia_led_parent_82
             style: 
               top: 44%
               left: 79.5%
               width: 3.5%
               opacity: >-
                ${this.hass.states['light.spalnia_parent_79'].state === 'on' || this.hass.states['light.spalnia_led_parent_82'].state === 'on'? 
                 1 : 0.4}
             card:
                   type: 'picture-entity'
                   entity: media_player.bedroom_tv
                   show_name: false
                   show_state: false
                   state_image:
                    "on": >-
                      ${this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Live TV'? 
                      '/local/ui/devices/tv_source_lovelace/LIVE TV.png' : 
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'YouTube'?
                      '/local/ui/devices/tv_source_lovelace/Youtube.png' :
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Веб-браузер'?
                      '/local/ui/devices/tv_source_lovelace/browser.png' : 
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'LG Content Store'?
                      '/local/ui/devices/tv_source/google_films.png' :
                       this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Фото и видео'?
                      '/local/ui/devices/tv_source/image_viewer.png' :
                       this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Netflix'?
                      '/local/ui/devices/tv_source/netflix.png' :
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'LG Channels'?
                      '/local/ui/devices/tv_source_lovelace/LG chanels.png' : '/local/ui/devices/tv_source/tv_application.png'}
                    "off": /local/ui/floorplan_v2/transparent_square.png?v=2
                   style: >-
                    ha-card {
                        box-shadow: none;
                        background: transparent;
                    }

Guys, this makes no mistakes, but this is displayed without transparency. I have no ideas.
Can anyone help me with dynamic opacity?

- type: 'custom:config-template-card'
             entities:
              - media_player.bedroom_tv
              - light.spalnia_parent_79
              - light.spalnia_led_parent_82
             style: 
               top: 44%
               left: 79.5%
               width: 3.5%
               opacity: >-
                ${this.hass.states['light.spalnia_parent_79'].state === 'on' || this.hass.states['light.spalnia_led_parent_82'].state === 'on'? 
                 1 : 0.4}
             card:
                   type: 'picture-entity'
                   entity: media_player.bedroom_tv
                   show_name: false
                   show_state: false
                   state_image:
                    "on": >-
                      ${this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Live TV'? 
                      '/local/ui/devices/tv_source_lovelace/LIVE TV.png' : 
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'YouTube'?
                      '/local/ui/devices/tv_source_lovelace/Youtube.png' :
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Веб-браузер'?
                      '/local/ui/devices/tv_source_lovelace/browser.png' : 
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'LG Content Store'?
                      '/local/ui/devices/tv_source/google_films.png' :
                       this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Фото и видео'?
                      '/local/ui/devices/tv_source/image_viewer.png' :
                       this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'Netflix'?
                      '/local/ui/devices/tv_source/netflix.png' :
                      this.hass.states['media_player.bedroom_tv'].attributes['source'] === 'LG Channels'?
                      '/local/ui/devices/tv_source_lovelace/LG chanels.png' : '/local/ui/devices/tv_source/tv_application.png'}
                    "off": /local/ui/floorplan_v2/transparent_square.png?v=2
                   style: >-
                    ha-card {
                        box-shadow: none;
                        background: transparent;
                    }

Thanks for the very useful “card”.

I am struggling to setup a custom bar card with dynamic maximum.
Let me explain:
I have a custom timer whose value is set by a input_number (input_number.finestra_motion_detection_luci_cucina)
I would like to display the current status of the timer with a custom bar-card with the max value set dynamically based on the input_number.
The actual value comes from a nodered exposed timer (sensor.actual_finestra_mobile_motion_detection_luce_cucina)

      - type: "custom:config-template-card"
        entities:
            - input_number.finestra_motion_detection_luci_cucina
        variables: 
            - states['input_number.finestra_motion_detection_luci_cucina'].state
        card:
            type: custom:bar-card
            entities:
            - entity: sensor.actual_finestra_mobile_motion_detection_luce_cucina
              min: 0
              max: '${vars[0]}'

What happens is that the current state of the timer is not refreshed but only populated when I refresh the page.
Is there a way to force the refresh / another way of doing this.

TX

solved:
double quotes needed

 max:"${vars[0]}"

Hi Gary. This is exactly what I’ve been looking for, except I’m at a loss as to how to get the code correct for refreshing my weather widget! Do you think you could help a novice like me with the code?

Here’s what I have working at the moment (with no refresh obviously). What should my entity be and how do I structure the syntax in in the URL line with the state suffixed?


          - card:
              type: iframe
              url: >-
                ${'https://services.metservice.com/weather-widget/widget?params=blue|large|portrait|days-3|modern&loc=christchurch'}
            entities:
             - xxx.xxx_xxx
            type: 'custom:config-template-card'

Hi @KiwiAndy -

I would have thought a weather widget would already provide the means to automatically refresh. Since this one apparently doesn’t, you will need to determine how often you want the widget to refresh and set up an HA entity that changes at that interval.

One way to do this is through an input_text entity that is updated via a time_pattern trigger. When this config-template card recognizes that entity changes it will invoke the iframe/url again - this time with a timestamp that should force the browser to refresh the page.

*configuration.yaml *

input_text:
  weather_timestamp:
    initial: "00:00:00"

*automation.yaml *

- id: weather_update
  alias:  update weather_timestamp every 30 minutes
  trigger:    
    platform: time_pattern
    minutes: "/30"
  action:
    - service: input_text.set_value 
      data_template:
        entity_id: input_text.weather_timestamp
        value: "{{ now().strftime('%H:%M:%S') }}"

Lovelace

card:
  type: iframe
  url: >-
    ${'https://services.metservice.com/weather-widget/widget?params=blue|large|portrait|days-3|modern&loc=christchurch?v='+states['input_text.weather_timestamp'].state}
entities:
  - input_text.weather_timestamp
type: 'custom:config-template-card'

Wow, thanks so much for this @GaryOkie. Exactly what was after - and yes a bit strange the weather widget doesn’t self-update. I’m on the road at the moment, but I’ll put this code in to action tomorrow and let you know how it goes. Cheers.

@GaryOkie, looks like your code works a dream thx. Fyi, and others benefit ,for my convoluted URL, you had a “?” Instead of a “&” before the “v=“ - because I’ve got prior parameters in the line. Otherwise it appears to do the trick nicely!

1 Like