📝 100% Templatable Lovelace Configurations

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

No worries Mate! Glad I could help.

Is it possible to create a templated picture-elements card, where depending on the user (or peferably the resolution of the screen viewing) it uses image A or image B? Is this something I can achieve with this card?

Basically I have a UI built on picture-elements card and want to use one dashboard for multiple devices, based on the resolution (or user) viewing it. This way I can use either image A or image B (which have dimensions identical to the resolution of the device). Without having to write two separate picture-element cards, but just one.

Hey,
im trying to combine an input select with a graph.
the idea being that you can show the average temp for a selected room in the house.

i cant quite get the variables to load into the graph card however?

working graph card:

color_thresholds:
  - color: '#f39c12'
    value: 20
  - color: '#d35400'
    value: 25
  - color: '#c0392b'
    value: 30
entities:
  - sensor.average_temp_jamie_office
hours_to_show: 168
name: Jamie Office Average Temp - Past Week
show:
  average: true
  extrema: true
  labels: true
type: 'custom:mini-graph-card'

input select options:

  room_temp_display:
    name: Display Room Temp Info
    options:
      - Office
      - Living
      - Kitchen
    initial: Office

Office = sensor.average_temp_jamie_office
Living = sensor.average_temp_living_room

My test:

type: vertical-stack
cards:
  - type: entities
    title: My Title
    entities:
      - entity: input_select.room_temp_display
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.room_temp_display''].state'
    entities:
      - input_select.room_temp_display
    card:
      color_thresholds:
        - color: '#f39c12'
          value: 20
        - color: '#d35400'
          value: 25
        - color: '#c0392b'
          value: 30
      entities:
        - '${vars[0] === ''Office'' ? ''sensor.average_temp_jamie_office''': 'vars[0] === ''Living'' ? ''sensor.average_temp_living_room'' }'
      hours_to_show: 168
      name: Jamie Office Average Temp - Past Week
      show:
        average: true
        extrema: true
        labels: true
      type: 'custom:mini-graph-card'

Can someone help me with this card? I’m trying to use this with a picture-element card, where the variabel is the image file and the user. Basically, depending on the user that is logged in, I want it to use either image A or image B as the image (where all the elements will be tied into). This is the base code that I want to template.

      - type: picture-elements   
        image: /local/tablet/uibg-t2.png
        elements:      
          - cards:

I’m trying different stuff, but I can’t seem to wrap my head around this.

use user.name to decide which image to show

I need to use that for variable right? But I don’t understand what to use for entity in this case? Do you maybe have an example how to achieve this code? I studied your examples on Github, but I’m not getting anywhere.

Hey there - I hope someone here can help me - I’m just too stupid to figure it out on my own…

I use the Bar Card and would simply like to make the target: option follow an input_number

type: 'custom:bar-card'
title: Temperature
entities:
  - entity: sensor.climate_dht11_temperature
    min: '10'
    max: '50'
    animation:
      state: 'on'
    target: 30 # <- this should always be the same number as input_number.set_temp
positions:
  minmax: 'off'
  value: inside
  indicator: inside
  icon: outside
  name: 'off'

How do I do that? I’m trying this (and similar configurations) for days now, but have no success :frowning:

EDIT: Ok, I figured part of it out:
What I initially tried to do works like this:

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.set_temp''].state'
entities:
  - sensor.climate_dht11_temperature
  - input_number.set_temp # I've added this, because that way the card refreshes instantly when changing the input_number, not only when the actual temperature changes
card:
  type: 'custom:bar-card'
  title: Temperatur
  animation:
    state: 'on'
  entities:
    - animation:
        state: 'off'
      entity: sensor.klima_dht11_temperature
      max: '50'
      min: '10'
      target: '${vars[0]}'
  positions:
    icon: outside
    indicator: inside
    minmax: 'off'
    name: 'off'
    value: inside

Being completely hyped by the result, I wanted to up my template-game a bit and add variable colours to the mix - and I’m stuck again…

type: 'custom:config-template-card'
variables:
  - 'states[''input_number.set_temp''].state'
entities:
  - sensor.climate_dht11_temperature
  - input_number.set_temp
card:
  type: 'custom:bar-card'
  title: Temperatur
  animation:
    state: 'on'
  entities:
    - animation:
        state: 'off'
      entity: sensor.klima_dht11_temperature
      max: '50'
      min: '10'
      target: '${vars[0]}'      
      severity:
        - color: blue
          from: '0' 
          to: '${vars[0] - 4}'
        - color: turquoise
          from: '${vars[0] - 4}'
          to: '${vars[0] - 2}'
        - color: green              # from here down the colours don't work
          from: '${vars[0] - 2}'
          to: '${vars[0] + 2}'
        - color: orange
          from: '${vars[0] + 2}'
          to: '${vars[0] + 4}'
        - color: red
          from: '${vars[0] + 4}'
          to: '50'
  positions:
    icon: outside
    indicator: inside
    minmax: 'off'
    name: 'off'
    value: inside

All severity colours that are lower than the input_number.set_temp work, as soon as they are higher, it goes green (default colour)

you can use anything for the entity in your case. I’d recommend something the updates less frequently.

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?

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

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

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

?!

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

1 Like

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

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

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:

  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:

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?