If youâre using Plex, thereâs a specific card that does this https://community.home-assistant.io/t/custom-component-card-plex-meets-home-assistant/304349
I had it for a while but them realized that I donât really use the click-to-play functionality, so I removed it again.
i did the same thing for plex, now i change to kodi and trying it.
Im having trouble with adding the config-template-card
Ive managed to get the section working but Im trying to add it so that both the grid cards use the same config-template-card or is this not possible.
Here is a section of the code, it seams that its because the config-template-card only supports card and not cards.
kiosk_mode:
non_admin_settings:
kiosk: true
views:
- title: Temp
path: temperatures
layout:
width: 962
height: 601
icon: ''
badges: []
type: custom:grid-layout
cards:
- type: grid
cards:
- type: custom:config-template-card
variables:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Dining room temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.dining_room_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Garden room temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.garden_room_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Understairs temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.understairs_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
columns: 4
square: false
- type: grid
cards:
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Bathroom temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.bathroom_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: 15
max: 22
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Bedroom temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.bedroom_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: 15
max: 22
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Office temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.office_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: 15
max: 22
forceNiceScale: true
now:
show: true
- type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Outside temperature
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 10
color: blue
- value: 15
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.live_outside_temp
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: 0
max: 22
forceNiceScale: true
now:
show: true
columns: 4
square: false
I know the last section for the - type: grid is not aligned yet but this is how far I got after spending hours on working out the code and couldnât find the answer.
Would be grateful for any advice.
You posted 365 line of a code; if you really need a help - suggest you to simplify the issue to as short as possibleâŚ
Sorry I should have explained better:
The code creates 8 Apexcharts on a tablet in landscape with 4 alone the top and 4 underneath, all displaying the temperature in different rooms.
The code works fine but I would like to be able to change the Y axis min and max numbers in each chart using two input_number helpers with the use of the config-templet-card to change the setting instead of changing each entry in all 8 charts i.e.:
Previous settings:
yaxis:
min: 15
max: 22
What I would like:
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
Iâve managed to get config-template-card to work on one chart:
type: custom:config-template-card
variables:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
But my problem comes in where to place the config_template_card code in my layout to work with all 8 cards.
The structure I have is:
views:
- title:
path:
......etc....
type: custom:grid-layout
cards:
- type: grid
cards:
- type: custom:apexcharts-card
title: Lounge
apex_config:
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
......etc....
# repeated 3 more times across the tablet on 1st row
columns: 4
square: false
- type: grid
cards:
- type: custom:apexcharts-card
title: Bedroom
apex_config:
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
......etc....
# repeated 3 more times across the tablet on 2nd row
columns: 4
square: false
Hope this explains it.
The problem I think is because the config-template-card only supports card and not cards but I donât know whether there is a work around as the documents mention about âDefining global functions in variablesâ and âDashboard wide variablesâ but I wasnât sure how to set that up hence now asking for help.
Using CTC for graphs is not a good idea.
Let me show an example.
type: ctc
entities:
- sensor.some_sensor
- input_number.number
card:
type: history-graph
hours_to_show: >-
${ states['input_number.number'].state }
entities:
- sensor.some_sensor
Here âhours_to_showâ may be changed dynamically.
The card is working properly - but it blinks every time the sensor changes (not to mention a fact that âhistory-graphâ becomes not âstreamlinedâ as w/o CTC).
Now imagine this stack:
type: ctc
entities:
- sensor.some_sensor_1
- sensor.some_sensor_2
- input_number.number
card:
type: vertical-stack
cards:
- type: history-graph
hours_to_show: >-
${ states['input_number.number'].state }
entities:
- sensor.some_sensor_1
- type: history-graph
hours_to_show: >-
${ states['input_number.number'].state }
entities:
- sensor.some_sensor_2
Here BOTH graphs will be redrawn if ANY sensor changes (i.e. blinking more frequently).
(do not bother that I am not using variables here, not related to the âblinkingâ issue)
Now closer to your particular case.
Check this (untested):
title: My dashboard
config_template_card_vars:
HOURS_TO_SHOW: states['input_number.number'].state
....
views:
- ...
cards:
- type: grid or whatever
cards:
- type: ctc
entities:
- sensor.some_sensor_1
- input_number.number
card:
type: history-graph
hours_to_show: >-
${ HOURS_TO_SHOW }
entities:
- sensor.some_sensor_1
- type: ctc
entities:
- sensor.some_sensor_2
- input_number.number
card:
type: history-graph
hours_to_show: >-
${ HOURS_TO_SHOW }
entities:
- sensor.some_sensor_2
Thank you for your help, the variables will only be changed 4 times a year on each season really just to make the graphs more readable.
After your help I was looking to set up the Dashboard wide variables, This is how far Iâve got but its not working
- title: Test1
path: test1
config_template_card_vars:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
badges: []
cards:
- type: custom:config-template-card
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
Iâve also tried placing the variables before views as in the docâs but still not working:
config_template_card_vars:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
views:
- title: Test1
path: test1
badges: []
cards:
- type: custom:config-template-card
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
Whereas this works fine:
- title: test
path: test
subview: false
badges: []
cards:
- type: custom:config-template-card
variables:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
Cracked it after reading the docs again after so many times it clicked.
Though I had but still not working.
config_template_card_vars:
- parseFloat(states["input_number.graph_min_temp"].state)
- parseFloat(states["input_number.graph_max_temp"].state)
views:
- title: Test1
path: test1
config_template_card_vars:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
badges: []
cards:
- type: custom:config-template-card
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
...........
apex_config:
yaxis:
min: ${vars[0]}
max: ${vars[1]}
Thanks again.
I checked my code, it is correct.
Here this is meaningless:
config_template_card_vars:
- parseFloat(states["input_number.graph_min_temp"].state)
- parseFloat(states["input_number.graph_max_temp"].state)
views:
- title: Test1
path: test1
config_template_card_vars:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
badges: []
cards:
- type: custom:config-template-card
entities:
...
because you need to declare variables ONCE on a âdashboard levelâ.
And on a âdashboard levelâ you are using âvars[âŚ]â notation (list), on a wrong âview levelâ - ânameâ notation (dict) - and then calling these vars by namesâŚ
Also, I see no need in using parseFloat here since you are not doing any math.
Sorry this is a result of copying and passing bits of code into the forum and not checking before posting.
In my running code I hadnât tried to declare them twice, it was either way Iâd been testing and getting nowhere.
I have to use parseFloat as the values for min and max need to be returned as numbers, they wonât except strings.
Ill have another look to see if I can work it out.
OK, come back with a feedback.
The code I posted earlier MUST work.
As for parseFloat - these values ARE strings:
option_1: abc
option_2: 123
and they are converted internally properly.
Check my example for âhours_to_showâ.
OK thanks.
This is from the docs from Apexcharts
I couldnât get this working on one apexchart until I looked up how to convert from string to number in the CTC docs and that corrected it. If I change min and max to a fixed number and put that in inverted commas it doesnât work.
Surely you should not put number in commas.
And commas are not added here too:
hours_to_show: >-
${ states['input_number.number'].state }
Finally got this working as is:
title: home
views:
- title: Temp
path: temperatures
# ....
type: custom:grid-layout
cards:
- type: custom:config-template-card
variables:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: grid
cards:
- type: custom:apexcharts-card
# ....
apex_config:
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
- type: custom:apexcharts-card
....... repeated 3 more times
columns: 4
square: false
- type: custom:config-template-card
variables:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: grid
cards:
- type: custom:apexcharts-card
# ....
apex_config:
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
- type: custom:apexcharts-card
....... repeated 3 more times
columns: 4
square: false
Tried without parseFloat and it wouldnât work, min and max need an integer.
I also tried creating âDashboard wide variablesâ but could not get it to work, I searched and couldnât find anywhere anyone else has used config_template_card_vars: in their code.
This guy has some examples on his blog of âconfig_template_card_varsâ [CARD] Config Template Card to boost your dashboards in Home Assistant FR â ArminasTV (domoplus.eu)
Thanks for that, thatâs the only one Ive seen and Ive checked mine against it but mine still doesnât work for some reason.
It does frustrate me when there seems no apparent reason. Rather than playing around in the UI I created a yaml file for the dashboard and thatâs where Iâve been experimenting. Here is my attempt at creating a âDashboard wide variableâ as I understand it for 1 card to test but it docent work:
title: YAML Sandbox
config_template_card_vars:
apex_min_temp: parseFloat(states["input_number.graph_min_temp"].state)
apex_max_temp: parseFloat(states["input_number.graph_max_temp"].state)
views:
- title: Temperature
path: temperature
icon: mdi:thermometer
theme: backend-selected
cards:
- type: custom:config-template-card
entities:
- input_number.graph_min_temp
- input_number.graph_max_temp
card:
type: custom:apexcharts-card
graph_span: 16h
hours_12: true
span:
start: day
offset: +6h
header:
show: true
title: Lounge
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- name: ' '
stroke_width: 2
show:
header_color_threshold: true
color_threshold:
- value: 15
color: blue
- value: 19
color: green
- value: 20
color: yellow
- value: 24
color: red
fill_raw: last
curve: smooth
extend_to: false
entity: sensor.l_temperature
apex_config:
tooltip:
enabled: false
legend:
show: false
yaxis:
min: ${apex_min_temp}
max: ${apex_max_temp}
forceNiceScale: true
now:
show: true
Would love to know why? It must be something simple, but Iâm buggered if I can find it.
Let us simplify the issue a bit.
Use Entities card instead of apexcharts.
Assume the card has 2 rows (sun.sun).
Use these two variables for ânameâ options.
See if it works.
I am proposing this since not everyone using apexcharts.
Righto, I couldnât quite work out what you meant but found this further up the post so copied it over:
This works ok:
title: YAML Sandbox2
# config_template_card_vars:
# Sun: states["sun.sun"]
views:
- type: custom:config-template-card
variables:
Sun: states["sun.sun"]
entities:
- ${Sun.entity_id}
card:
type: entities
entities:
- entity: ${Sun.entity_id}
- entity: sun.sun
name: ${Sun.state}
And this doesnât, displaying no card at all:
title: YAML Sandbox2
config_template_card_vars:
Sun: states["sun.sun"]
views:
- type: custom:config-template-card
# variables:
# Sun: states["sun.sun"]
entities:
- ${Sun.entity_id}
card:
type: entities
entities:
- entity: ${Sun.entity_id}
- entity: sun.sun
name: ${Sun.state}