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 
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
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
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
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. ?
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:
- Add Speedtest integration.
- Create an empty tab.
- 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
-
The created card is like this:
-
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 
How do I propperly phrase the variables?
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
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.