📝 100% Templatable Lovelace Configurations

Mariusthvdb · February 21, 2023, 10:22am

sure, that is cool.

and yes, it would most definitely be way more efficient to change the names in the UI. Try and avoid as much templating as possible.

It’s a bit of a trend with all of these mushroom cards and the likes, for people to not realize templating comes at a cost. Some more than others. My experience with this card is that it’s very heavy for the system, and should only be use if cant be avoided. Even though it’s using Javascript, which is handled in the frontend.
Its a magic card, but use it wisely…

shouldnt it be:

replace(' Hue', '')

? or are all of your lights in the Wohnzimmer

another thought could be to not use the integration name in the entity_id/friendly_name at all. We can find those in modern day templates with {{integration_entities('hue')}} or per area {{area_entities('wohnzimmer')}}, so taking out the integration name there would be even more functional, in that you could use the same entity_id (which would be the slugified) name…

ThaDuhFeez · March 29, 2023, 7:02pm

Can anyone help me? I can’t seem to get this to work. I want to set dynamic segments. The static ones work. Just not the templates ones.

Suggestions?

type: custom:config-template-card
variables:
  BB-Temp-Min: states['input_number.basement_bedroom_temp_min'].state
  BB-Temp-Max: states['input_number.basement_bedroom_temp_max'].state
entities:
  - sensor.ewelink_th01_temperature
card:
  type: gauge
  entity: sensor.ewelink_th01_temperature
  name: Temp
  needle: true
  segments:
    - from: 0
      color: '#db4437'
    - from: ${BB-Temp-Min}
      color: orange

Ildar_Gabdullin · March 29, 2023, 7:34pm

(untested) try renaming these vars.
Also, (just a guess too) try converting a string value (which a state is) to int.

ThaDuhFeez · March 30, 2023, 11:33am

It was the variable names.

Apparently it doesn’t like (-) hyphens

Ildar_Gabdullin · March 30, 2023, 11:40am

Well, in many languages names cannot include “-”.

ThaDuhFeez · March 30, 2023, 12:59pm

So I got the variable name issue solved.

But now my final segment isn’t working.

I’ve tried adding 2 to the max variable. And I’ve tried creating a new variable and adding 2 to it.

But it just overrides the BBTempMax segment.

type: custom:config-template-card
variables:
  BBTempMin: states['input_number.basement_bedroom_temp_min'].state
  BBTempMax: states['input_number.basement_bedroom_temp_max'].state
  BBTempMax2: states['input_number.basement_bedroom_temp_max'].state + 2
entities:
  - sensor.ewelink_th01_temperature
card:
  type: gauge
  entity: sensor.ewelink_th01_temperature
  name: Temp
  needle: true
  min: 5
  max: 30
  segments:
    - from: 0
      color: '#db4437'
    - from: ${BBTempMin-2}
      color: orange
    - from: ${BBTempMin}
      color: '#43a047'
    - from: ${BBTempMax}
      color: orange
    - from: ${BBTempMax+2}
      color: '#db4437'

Ildar_Gabdullin · March 30, 2023, 1:06pm

I suggest to use Entities card for learning how CTC (config-template-card) works.

  - type: custom:config-template-card
    variables:
      INPUT_NUMBER: states['input_number.test_number']
    entities:
      - ${INPUT_NUMBER.entity_id}
    card:
      type: entities
      entities:
        - entity: ${INPUT_NUMBER.entity_id}
        - entity: sun.sun
          name: ${INPUT_NUMBER.state}
        - entity: sun.sun
          name: ${INPUT_NUMBER.attributes['icon']}

This is a simple example.
Add whatever you want to test for variables’ values & then you may check their results in “name” labels.

theone · April 11, 2023, 1:17pm

I have the following 2 cards that work OK:

       - type: conditional
         conditions:
           - entity: timer.{{ entity }}_on_duration_timer
             state_not: 'idle'
           - entity: input_boolean.ui_show_timer_bar_or_time
             state: 'on'
         elements:
           - type: custom:timer-bar-card
             entity: timer.on_duration_timer
             layout: full_row
             text_width: 0%
             style:
               left: {{ left }}%
               top: {{ top + timer_top_offset }}%
               transform: 'translate(-50%, -50%) scale(1.5, 1)'

       - type: conditional
         conditions:
           - entity: timer.{{ entity }}_on_duration_timer
             state_not: 'idle'
           - entity: input_boolean.ui_show_timer_bar_or_time
             state: 'off'
         elements:
           - type: custom:timer-bar-card
             entity: timer.on_duration_timer
             layout: full_row
             text_width: 100%
             style:
               left: {{ left }}%
               top: {{ top + timer_top_offset }}%
               transform: 'translate(-50%, -50%) scale(1, 1)'

I am trying to consolidate them into 1 card using config-template-card but get a “No card configured” error.

      - type: 'custom:config-template-card'
        variables:
          SHOW_BAR: states['input_boolean.ui_show_timer_bar_or_time'].state
        entities:
          - input_boolean.ui_show_timer_bar_or_time
        card:
          type: conditional
          conditions:
            - entity: timer.{{ entity }}_on_duration_timer
              state_not: 'idle'
            - entity: input_boolean.ui_show_timer_bar_or_time
              state: "${ SHOW_BAR }"
          elements:
            - type: custom:timer-bar-card
              entity: timer.on_duration_timer
              layout: full_row
              text_width: "${ SHOW_BAR === 'on' ? '0%' : '100%' }"
              style:
                left: 53%
                top: 33.5%
                transform: 'translate(-50%, -50%) scale(1.5, 1)'

What am I missing?

Ildar_Gabdullin · April 11, 2023, 2:05pm

This is NOT a card, this is an element inside picture-elements card, it is not supposed to be used elsewhere.
If you need to use a conditional card inside CTC - use a CONDITIONAL CARD, not a conditional element.

theone · April 11, 2023, 2:27pm

OK so I changed the code to the following and now it works:

      - type: conditional
        conditions:
          - entity: timer.on_duration_timer
            state_not: 'idle'
        elements:
          - type: 'custom:config-template-card'
            variables:
              SHOW_BAR: states['input_boolean.ui_show_timer_bar_or_time'].state
            entities:
              - input_boolean.ui_show_timer_bar_or_time
            card:
              type: custom:timer-bar-card
              entity: timer.on_duration_timer
              layout: full_row
              text_width: "${ SHOW_BAR === 'on' ? '0%' : '100%' }"
            style:
              left: 53%
              top: 33.5%
              transform: "${ SHOW_BAR === 'on' ? 'translate(-50%, -50%) scale(1.5, 1)' : 'translate(-50%, -50%) scale(1, 1)' }"

Ildar_Gabdullin · April 11, 2023, 2:36pm

Or you may put a conditional CARD inside CTC, and add CTC as an element - if you need to use variables inside conditions.

DanielWolf · April 17, 2023, 5:01pm

what is my problem?
i have installed the frontend.

azel_inc · May 18, 2023, 3:44am

I d like to have the secondary info for the multiple row entities, but cannot get that working. no idea what i am missing. i cpied exactly the code. can you confirm it still works? yes i have card-mod installed

Ildar_Gabdullin · May 18, 2023, 7:06pm

Post a final code what you tried to use.
But if it is not about using config-template-card - better to discuss it in the source thread.

Dingin · May 24, 2023, 11:08am

HI guys, have a question that have me scratching my head,
i have this template that pulls info from the kodi Sensor integrations:

but the results of my sensors when i load Home assistant dont match

Sesnors:

#################################################
########### Home Cinema Sensors KODI  ###########
#################################################
  - platform: template
    sensors:
      kodi_recently_movies_data:
        friendly_name: "Kodi Movies data"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data') }}"
 
  - platform: template
    sensors:
      kodi_recently_movies_1:
        friendly_name: "Kodi Movie 1"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2] }}"
  
  - platform: template
    sensors:
      kodi_recently_movies_2:
        friendly_name: "Kodi Movie 2"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[3] }}"
        
  - platform: template
    sensors:
      kodi_recently_movies_3:
        friendly_name: "Kodi Movie 3"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[4] }}"

  - platform: template
    sensors:
      kodi_recently_movies_4:
        friendly_name: "Kodi Movie 4"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[5] }}"
        
  - platform: template
    sensors:
      kodi_recently_movies_5:
        friendly_name: "Kodi Movie 5"
        icon_template: mdi:movie-roll
        value_template:  "{{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[6] }}"

my end goal is to extract the poster part.

any help on why this is happening would be very appreciated!
thanks all

Quick edit:

It seams that the only thing i need is to wait for the first sensor to obtain its data, is there a way i can delay or force refresh a template sensor after x amount of time?

here i refined the template a bit:
Kodi sensors for:
Poster
{{ state_attr(‘sensor.kodi_recently_added_movies’, ‘data’).split(’{’)[9].split(‘poster": "’)[1].split(’"},’)[0]}}
Name
{{ state_attr(‘sensor.kodi_recently_added_movies’, ‘data’).split(’{’)[9].split(’“title”: “’)[1].split(’”,’)[0]}}
Fanart
{{ state_attr(‘sensor.kodi_recently_added_movies’, ‘data’).split(’{’)[9].split(‘fanart": "’)[1].split(’"},’)[0]}}

Jaspov · June 3, 2023, 10:11am

GaryOkie:

I just accessed github to help with updating the readme, but I see you have already done so. Nice.

The example you’ve provided is quite complex, which is good to show the capabilities, but it was a bit overwhelming for me to understand fully.

Here’s a very simple example which has solved a problem that many have struggled with - how to ensure a webpage url is updated so the browser refresh occurs automatically.
card:
  type: iframe
  url: >-
    ${'https://myhassio.duckdns.org:8123/local/recordings/front_door.mp4?v='+states['input_text.mp4_timestamp'].state}
entities:
  - input_text.mp4_timestamp
type: 'custom:config-template-card'
The webhook in your card senses any update to the timestamp entity, and within seconds, I see the lovelace iframe card updated with the most current mp4 (or image, whatever…)

Love it!

Trying to have a short mp4 clip in my dashboard and found this post. Where exactly would I store this? tried configuration.yaml but that is not accepted.

GaryOkie · June 3, 2023, 6:47pm

So you edit your dashboard (3 vertical dots); “+ Add Card” ; Select the “Webpage” card; Select “Show code editor”, then enter this code there.

Do not include the beginning “card:” as that is a given when adding a new card this way.

Jaspov · June 3, 2023, 8:26pm

Thanks! Highly appreciated!!

Dingin · June 10, 2023, 11:12pm

Hi all,
Quick question, i got this sensors that work fine from 1 to 5 but 6 and 7 shows unavailable.

#################################################
########### Home Cinema Sensors KODI  ###########
#################################################

##Movie 1
  - platform: template
    sensors:
      kodi_recently_movies_1:
        friendly_name: "Kodi Movie 1 Poster"
        icon_template: mdi:movie-roll
        value_template: >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2].split('poster": "')[1].split('"},')[0]}}

      kodi_recently_movies_name_1:
        friendly_name: "Kodi Movie 1 name"
        icon_template: mdi:movie-roll
        value_template: >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[2].split('"title": "')[1].split('",')[0]}} 

      kodi_recently_movies_2:
        friendly_name: "Kodi Movie 2"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[3].split('poster": "')[1].split('"},')[0]}}

      kodi_recently_movies_3:
        friendly_name: "Kodi Movie 3"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[4].split('poster": "')[1].split('"},')[0]}}

      kodi_recently_movies_4:
        friendly_name: "Kodi Movie 4"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[5].split('poster": "')[1].split('"},')[0]}}
        
      kodi_recently_movies_5:
        friendly_name: "Kodi Movie 5"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[6].split('poster": "')[1].split('"},')[0]}}

      kodi_recently_movies_6:
        friendly_name: "Kodi Movie 6"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[7].split('poster": "')[1].split('"},')[0]}}
        
      kodi_recently_movies_7:
        friendly_name: "Kodi Movie 7"
        icon_template: mdi:movie-roll
        value_template:  >-
          {{ state_attr('sensor.kodi_recently_added_movies', 'data').split('{')[8].split('poster": "')[1].split('"},')[0]}}

the information exist

so why is it limiting me to 5 sensors?

Thank you all

Ildar_Gabdullin · June 10, 2023, 11:32pm

How is this related to config-template-card?