📝 100% Templatable Lovelace Configurations

Sort of having the same problem. what’s wrong with this code? It’s the last line that gives me a problem. the line above it works fine, but I want to change the image based on the source of the tv. help is very much appreciated.

  - title: k1
    cards:
    - type: custom:config-template-card
      title: "My Floorplan"
      variables:
        LIGHT_STATE: 'states[''light.keuken_lichten''].state'
        GARAGE_STATE: 'states[''cover.raam_rechts''].state'
#        TV_SOURCE: states['media_player.samsung_tv'].attributes.source
      entities:
        - light.keuken_lichten
        - cover.raam_rechts
        - person.nick
        - media_player.samsung_tv
      card:
      
        type: picture-elements
        image: /local/floorplan2/appartement/transparant.png
        elements:
              
          - type: image
            entity: light.keuken_lichten
            style:
              left: 50%
              top: 50%
              width: 10%
            tap_action:
              action: toggle
            hold_action:
              action: more-info
#            image: '${LIGHT_STATE === ''on'' ? ''/local/floorplan2/tvs/samsung2.gif'' : ''/local/floorplan2/tvs/tenet.gif''}'
              image: "${states['media_player.samsung_tv'].attributes['source'] === 'Netflix' ? '/local/floorplan2/tvs/netflix.gif' : '/local/floorplan2/tvs/tenet.gif'}"

Just stumbled across this and tried to spit out buttons in a loop. I know this is a pointless example but I’m trying to understand. My simplified example, that doesn’t work is…

type: 'custom:config-template-card'
entities: 
 - media_player.sonos_deck
 - media_player.sonos_ceiling_speakers
variables:
  Deck: media_player.sonos_deck
  CeilingSpeakers: media_player.sonos_ceiling_speakers
card:
  type: entities
  cards:
    type: horizontal-stack
    cards: |-
      ${var cards = []; vars.forEach(entity_id => {
        cards.push({'type': 'custom:button-card', entity': entity_id});
       }
      }); cards}

No error but no output either. I was hoping to see two buttons.

May be I am wrong, but:

Should it be:
image: '${st
???

Also, instead of this:

try this (it works for me):
states[''media_player.samsung_tv'']

using this now:

this.hass.states['media_player.samsung_tv'].attributes['media_title']

works fine. Thanks

HI all
Can someone help me to check this sensor i have been cracking my head for two days and i still dont see the error, in the developer tools template all shows as its supposed but i cant make it work in the sensor it self.

"{{ state_attr('sensor.plex_recently_added', 'data')[1]['aired'] }}" 
**"1987-11-20"**

"{{ state_attr('sensor.plex_recently_added', 'data')[1]['title'] }}"
 **"Date With an Angel"**

"{{ state_attr('sensor.plex_recently_added', 'data')[1]['poster'] }}" 
 **"/local/upcoming-media-card-images/plex/Plex_Recently_Added/p173500.jpg"**

{{ state_attr('sensor.plex_recently_added', 'data')[1]['aired'].split("-")[0] }} 
**1987**

"{ "library_name": "Movies", "title": "{{ state_attr('sensor.plex_recently_added', 'data')[1]['title'] }}", "Year": "{{ state_attr('sensor.plex_recently_added', 'data')[1]['aired'].split("-")[0] }}" }"
 **"{ "library_name": "Movies", "title": "Date With an Angel", "Year": "1987" }"**

My sensor


  - platform: template
    sensors:
      plex_movie_to_play:
        friendly_name: "play movie"
        icon_template: mdi:movie-roll
        value_template: "{{ "library_name": "Movies", "title": "{{ state_attr('sensor.plex_recently_added', 'data')[1]['title'] }}", "Year": "{{ state_attr('sensor.plex_recently_added', 'data')[1]['aired'].split("-")[0] }}" }"}}
       

i get:
bad indentation of a mapping entry at line 150, column 53:
… te: "{{ “library_name”: “Movies”, “title”: "{{ state_attr('senso …

this is for the plex service:
this one works like this and the idea is to have the media_content_id from a template
tap_action:
entity_id: media_player.plex_tv_livingroom
media_content_type: movie
media_content_id: ‘{ “library_name”: “Movies”, “title”: “Date With an Angel” }’

thanks for your help!!

Just checked the latest update of the card.
I think it is a good step forward to provide a possibility to use this card for a single entity row.
But I cannot use styles (card-mod) in this case.
Please check this: 🔹 Card-mod - Add css styles to any lovelace card

Hello all, there must be something I don’t understand. I tried to use this plugin in order to change the icon based on the state of my sensor here is the code I entered in the UI

type: 'custom:config-template-card'
variables:
  ENTREE_STATE: 'states[''binary_sensor.window_door_sensor_entree''].state'
  JARDIN_STATE: 'states[''binary_sensor.openclose_portejardin''].state'
entities:
  - entity: binary_sensor.window_door_sensor_entree
  - entity: binary_sensor.openclose_portejardin
  - entity: binary_sensor.openclose_11
card:
  type: entities
  entities:
    - entity: binary_sensor.window_door_sensor_entree
      icon: '${ENTREE_STATE === ''off'' ? ''mdi:door'' : ''mdi:door-open'' }'
    - entity: binary_sensor.openclose_portejardin
      icon: '${JARDIN_STATE === ''off'' ? ''mdi:door'' : ''mdi:door-open'' }'
    - entity: binary_sensor.openclose_11
  title: Ouvertures_test
  state_color: true

my issue is that when I open the door, nothing happened (the “standard” card is working fine and shows the icon in other color)

Thanks
Nicolas

Is there a way to manipulate (e.g. the icon, the text) only one row in a normal entity card? Saw the row option and example

type: entities
entities:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
    row:
      type: section
      label: "${vars[0] === 'on' ? 'Light On' : 'Light Off'}"
  - entity: light.bed_light

But currently I’m not able to insert a customized entity row, but only a section as in this example.

Though with this example and row, it is possible to place/add someting like

    - entity: "${LIGHT_STATE === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
      icon: "${GARAGE_STATE === 'open' ? 'mdi:hotel' : '' }"

in the standard entity card.

Wonder why this is not standard behavior of lovelace config. Templating should just be possible everywhere…

Hi!
I love the card, thank you!

I have been using it to display graphs. By using an input_number controlled via a slider, I could select the number of days to display on the graph.
I want to move to the next step, use a input_select to select the entity I want to display on the graph. Any clue how I can do so that the user select a friendly name and the card understands an entity_id?

I was wondering if this card can help me to display an entity state containing json-formatted text, in tabular format in LL, perhaps in combination with existing cards like Ian’s List Card or the Flex Table Card, but I don’t understand all this well enough to make it work.

Any pointers or thoughts you may have on how to (best) do this will be highly appreciated.

Background:
I have a couple of ESP32’s out there that can be configured through MQTT to function in a certain way, and they can report this configuration back as a json-formatted MQTT message. I would like to show this configuration in a LL card as text, simiilar to how HA shows additional information when the Entity WiFi status is displayed (indicated by the arrow in the screen capture below).
So basically I’d like to display the name/value pairs as text, in tabular format, optionally with some basic formatting to display the names in bold etc.

I understand that I can create entities for each name/value pair, use templates to extract the values, and display them in the traditional way. But I prefer to not go this route, with the associated overhead of setting up these entities for each device and maintaining them should the sketch change.

Below is an example of the json data to display in tabular format:

{
   "CAM_enabled":true,
   "PIR_enabled":true,
   "PIR_delay":20,
   "ReportState":true,
   "ReportWiFi":false,
   "TempInterval":600,
   "StateInterval":600
}

Below: How HA displays the additional information below the WiFi entity status.

I think you can as they will all be attributes. I did a card using this template to show MQTT status info my esp as well. I would have liked to use list or flex table card but neither of those show the icon. You can see the MQTT card I cobbled together in this thread. Anyway I think you can do it not with json but by using the state-attr

Hey all,
not sure where im going wrong, if someone can help?

im trying to have the content update, based on the drop down value, as per this example below.
The reason is that I want to have a “friendly name” in the drop down, however that calls an entity to be used in the card.

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.room_temp_display2
        name: Select Sensor
    show_header_toggle: false
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.room_temp_display2
    card:
      type: markdown
      content: '"${vars[0] }"'
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.room_temp_display2''].state'
    entities:
      - input_select.room_temp_display2
    card:
      type: markdown
      content: '"${ if (vars[0] === ''Jamie Office'') return ''abc'' else ''123'';}"'

Alright, so I’m trying to use this custom template to take an input_number from HA and use it as the Target VALUE to control the color_thresholds on a mini-graph. Here’s what I’m using but i’m not getting anywhere.

type: 'custom:config-template-card'
variables:
  - states['input_number.temp_target'].state
entities:
  - '${vars[0]}'
cards:
  type: horizontal-stack
  cards:
     type: 'custom:mini-graph-card'
     entity:
        - sensor.tent_temperature
     name_adaptive_color: 'true'
     icon_adaptive_color: true
     hours_to_show: 24
     points_per_hour: 60
     show:
       labels: false
       color_thresholds:
           - value: '${vars[0]} - 20'
             color: '#82EEFD'
           - value: '${vars[0]} - 15'
             color: '#63C5DA'
           - value: '${vars[0]} - 10'
             color: '#1164b4'
           - value: '${vars[0]} - 5'
             color: '#005FFF'
           - value: '${vars[0]}'
             color: '#00FF00'
           - value: '${vars[0]} + 5'
             color: '#FFB111'
           - value: '${vars[0]} + 10'
             color: '#FF5E00'
           - value: '${vars[0]} + 15'
             color: '#FF0000'
       color_thresholds_transition: smooth
       font_size: 50
       line_width: 4```

Alternatively I tried this as well.

type: ‘custom:config-template-card’
variables:
Target_Temp: states[‘input_number.temp_target’].state
Current_Temp: states[‘sensor.tent_temperature’].state
entities:

  • ‘${vars[1]}’
    cards:
    type: ‘custom:mini-graph-card’
    entity:
    • ‘${vars[1]}’
      name_adaptive_color: ‘true’
      icon_adaptive_color: true
      hours_to_show: 24
      points_per_hour: 60
      show:
      labels: false
      color_thresholds:
      • value: ‘${Target_Temp} - 20’
        color: ‘#82EEFD
      • value: ‘${Target_Temp} - 15’
        color: ‘#63C5DA
      • value: ‘${Target_Temp} - 10’
        color: ‘#1164b4
      • value: ‘${Target_Temp} - 5’
        color: ‘#005FFF
      • value: ‘${Target_Temp}’
        color: ‘#00FF00
      • value: ‘${Target_Temp} + 5’
        color: ‘#FFB111
      • value: ‘${Target_Temp} + 10’
        color: ‘#FF5E00
      • value: ‘${Target_Temp} + 15’
        color: ‘#FF0000
        color_thresholds_transition: smooth
        font_size: 50
        line_width: 4

In your code there are errors like:

  1. "color_thresholds" cannot be inside "show" group.
  2. Not "cards" but "card" inside "config-template-card".
  3. Not "type: 'custom:mini-graph-card'" but "- type: 'custom:mini-graph-card'".
  4. Not "entity" but "entities".
  5. This is may be not an error - do you need to use “config-template-card” not just for “mini-graph-card” but for “horizontal-stack”?
  6. State is a “string”, you must convert it to a number before any math operations.
  7. You specified variable as a “state” - then you are trying to use it as entity_id, this is wrong.

Please check this code and then make necessary corrections:

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.test_number'']'
entities:
  - '${vars[0].entity_id}'
card:
  type: vertical-stack
  cards:
    - type: entities
      entities:
        - input_number.test_number
    - type: 'custom:mini-graph-card'
      entities:
        - entity: sensor.cleargrass_1_co2
      hours_to_show: 6
      points_per_hour: 60
      show:
        labels: false
        fill: true
        name_adaptive_color: true
        icon_adaptive_color: true
      color_thresholds_transition: hard
      font_size: 50
      line_width: 4
      height: 500
      color_thresholds:
        - value: '${parseFloat(vars[0].state) - 100}'
          color: red
        - value: '${parseFloat(vars[0].state) - 75}'
          color: green
        - value: '${parseFloat(vars[0].state) - 50}'
          color: magenta
        - value: '${parseFloat(vars[0].state) - 10}'
          color: cyan
        - value: '${parseFloat(vars[0].state)}'
          color: orange
        - value: '${parseFloat(vars[0].state) + 10}'
          color: violet
        - value: '${parseFloat(vars[0].state) + 75}'
          color: blue
        - value: '${parseFloat(vars[0].state) + 100}'
          color: brown

1 Like

Hi All,

WONDERFULL CARD!!!

This working:

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_test''].state'
  NAME: states['input_select.crypto_test'].attributes.friendly_name
entities:
  - input_select.crypto_test
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${NAME}'
  series:
    - entity: '${CRYPTO}'
      name: Buy
      attribute: buy
    - entity: '${CRYPTO}'
      name: Sell
      attribute: sell

output of CRYPTO will be, depends on what I selected in the input_selct.crypto_test:

sensor.eur_1inch
sensor.eur_ada
sensor.eur_bnb
sensor.eur_doge

The card below will pick up those names so I can use them as entities. Select the right attribute and done.

Only thing what I can’t let work is get the friendly_name of the sensors into a variabel so I can add them in the title: part.

Can someone assist me with this?

The output of NAME:
Crypto Test

But this is the friendly_name of the input_select.

Try this:

NAME: states['input_select.crypto_test'].attributes['friendly_name']

Tried that, but get the friendly_name of the input_select. And not from the value “the sensor”

NAME: states[CRYPTO].attributes['friendly_name']

is not working. thought use the variable to get the attribute.

Also , what I can see:

This is a state.
Then you are trying to use it as an “entity_id” - which is wrong.

Should be this:

type: 'custom:config-template-card'
variables:
  CRYPTO: 'states[''input_select.crypto_test'']'
entities:
  - '${CRYPTO.entity_id}'
card:
  type: 'custom:apexcharts-card'
  config_templates: bandwidth_chart
  header:
    title: '${CRYPTO.attributes[''friendly_name'']}'
  series:
    - entity: '${CRYPTO.entity_id}'
      name: Buy
      attribute: buy
    - entity: '${CRYPTO.entity_id}'
      name: Sell
      attribute: sell

Surely it will not.

This isn’t working also.
Still get the friendly_name of the input_select.
the part:

    - entity: '${CRYPTO.entity_id}'
      name: Buy
      attribute: buy
    - entity: '${CRYPTO.entity_id}'
      name: Sell
      attribute: sell

keeps loading. So doen’t work.
Ill try to find out to make it work.