📝 100% Templatable Lovelace Configurations

Share your Projects! Dashboards & Frontend
,
403

I kind of figured out what happens

The easiest way to reproduce the issue is using the markdown card:

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.ziel_temperatur''].state'
entities:
  - input_number.ziel_temperatur # it's set to 29.5
card:
  type: markdown
  content: >-
    "${vars[0] - 10 }"

This correctly shows 19.5
image

Trying to add to the variable, adds the number in the period places!

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.ziel_temperatur''].state'
entities:
  - input_number.ziel_temperatur
card:
  type: markdown
  content: >-
    "${vars[0] + 10 }"

it attaches 10 to the period places, resulting in 29.510
image

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.ziel_temperatur''].state'
entities:
  - input_number.ziel_temperatur
card:
  type: markdown
  content: >-
    "${vars[0] + 681 }"

results in 29.5681
image

What’s happening here? What am I doing wrong?

404

you’re trying to add a string and a number. Try

"${parseFloat(vars[0]) + 10 }"
1 Like
405

I have no idea what that means, but it works!
Thank you!

I guess, I should also rephrase

"${vars[0] - 10 }"

to

"${parseFloat(vars[0]) - 10 }"

?!

406

It is a Javascript function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

1 Like
407

Hey man, can you tell me more about those cards with min/max value, for pressure for example. ?

408

It’s the custom mini-graph-card: Lovelace: mini graph card

409

May be its a well-known issue.
Found a problem with config-template-card.
Two or more cards are not distributed properly on the screen - all of them are placed in one column.

How to reproduce:

  1. Add Speedtest integration.
  2. Create an empty tab.
  3. Add a new card:
type: 'custom:config-template-card'
entities:
  - sensor.speedtest_download
  - sensor.speedtest_upload
  - sensor.speedtest_ping
card:
  type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.speedtest_download
      hours_to_show: 24
    - type: history-graph
      entities:
        - entity: sensor.speedtest_upload
      hours_to_show: 24
    - type: history-graph
      entities:
        - entity: sensor.speedtest_ping
      hours_to_show: 24

  1. The created card is like this:

    1
    1498×704 39.4 KB

  2. Then duplicate this card.
    Two…three cards are enough to see the issue.
    All cards are placed in one column.

In this example there is no “variables” section - my actual code was like this:

...
variables:
  - 'states[''input_select.graph_hours_to_show_speedtest'']'
...
card:
  type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.speedtest_download
      hours_to_show: '${vars[0].state}'

I excluded that variable just to simplify the case.

Update:
Registered as a new issue:

Update:
This issue happens only with config-template-card.
To check this you can remove config-template-card from my example:

type: vertical-stack
cards:
  - type: history-graph
    entities:
      - entity: sensor.speedtest_download
    hours_to_show: 24
    refresh_interval: 0
  - type: history-graph
    entities:
      - entity: sensor.speedtest_upload
    hours_to_show: 24
  - type: history-graph
    entities:
      - entity: sensor.speedtest_ping
    hours_to_show: 2

and create 2-3 same cards - these cards are distributed in several columns:

1
11500×774 114 KB

411

Once again I’ve reached the limits of my understanding of Templating …

I have a couple of utility_meters and would like to show their last_period states in a pie_chart
Extracting the last_period state in a template sensor wors flawless like this:

  - platform: template
    sensors:
      ac_01_month_energy_draw_last:
        friendly_name: 'AC01 last month'
        unit_of_measurement: 'kWh'
        value_template: '{{ states.sensor.ac_01_month_energy_draw.attributes.last_period | float }}'

However, I really want to avoid creating dozens of template sensors…

so I tried this:

entities:
  - input_number.total_power_consumption_last_month
type: 'custom:config-template-card'
variables:
  - '{{ states.sensor.ac_01_month_energy_draw.attributes.last_period | float }}'
card:
  entities:
    - entity: '${vars[0]}'
      name: AC01
  title: Power Consumption Last Month
  total_amount: input_number.total_power_consumption_last_month
  type: 'custom:pie-chart-card'
  unknownText: else

But it doesn’t work :confused:

How do I propperly phrase the variables?

412

I wonder if I can use this to make a template out of this

              - type: vertical-stack
                cards: 
                  - type: "custom:vertical-stack-in-card"
                    cards:
                      - type: "custom:button-card"
                        name: Living Spots Boekenkast
                        entity: light.livingspotsbureau_dim
                        template: light_card
                        show_label: true
                        label: >
                          [[[
                            var bri = states['light.livingspotsbureau_dim'].attributes.brightness;
                            var bripercent = Math.round((bri/255)*100)
                            return 'Dimmer: ' + (bripercent ? bripercent : '0') + '%';
                          ]]]
                        styles:
                          label:
                            - color: gray
                            - font-size: 9px
                            - padding: 0px 5px
                      - type: custom:slider-entity-row
                        entity: light.livingspotsbureau_dim
                        full_row: true
                        hide_state: true

dimmables

413

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'}"
414

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.

415

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'']

416

using this now:

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

works fine. Thanks

417

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!!

418

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

419

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

420

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.

421

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

423

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?

424

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.

GateMonitor_Status+
GateMonitor_Status+522×657 46.4 KB