iantrich / config-template-card Goto Github PK
View Code? Open in Web Editor NEW📝 Templatable Lovelace Configurations
License: MIT License
config-template-card's People
Contributors
Stargazers
Watchers
Forkers
arsaboo romrider triay54 bnowajenstu graemeallen trnvtha lpchaim jesserockz jpeletier omgimalexis jenseo faizalps501 fcassirer pilyo1 sasozagoranski ettiennebosch kamtschatka gtjadsonsantos d3wy devenlu rick45 raceland-automacao-lda racelandshop smonesi anonimato404 rubicon ocerot fabio0366 ericleigh007 moocsec 2468171796 keshiyong shaineoneal obaldius moenaxel swiergot pcexpert007 johnstofa rumbu13 catchdave hb542628277 dkindt bytebai920 biakss 36953288 chun950yi justinfagnani kevinuup gabrielasebastian eduhiratuka jbtorres70 hausmeisterabe kplus87config-template-card's Issues
cant find in HACS or find config-template-card.js
hi, looking forward to trying out this addon :)
Unfortunately i cant install it! Please excuse my ignorance, but i have the same issue as another user (config-template-card.js missing #20) that i cant find the file called "config-template-card.js". and i don't understand the answer given that it is "in the release". The closest file i can find is "config-template-card.ts" in the "src" folder. Is this what is meant?
I am running Home Assistant version core-2021.1.5 on a raspberry pi 4 with latest versions of all software,
thank you for your help
(justinfagnani): consider whether it's even worth it to
Deep press template
Is your feature request related to a problem? Please describe.
The card says 100% templatable, but it can’t template deep_press (or at least it doesn’t accept it).
Describe the solution you'd like
I’d love for us to be able to use an input_select with a ‘true’ or ‘false’ option to set if a card should have deep_press or not.
The reason behind this is because I am doing exactly what you asked for. Going completely nuts on lovelace with your template card. Making almost everything configurable through the interface. This is the only piece currently missing.
Describe alternatives you've considered
I have tried other template cards like the jinja template card and I have tried different ways to template with direct state or an if/else statement. Deep_press will accept the first word in the line. (So if the first word is true it will use true) it looks like it doesn’t do much with the template. I have only tried this on button-card
Additional context
It would be really amazing if this could be possible as I use somewhat a same kind of method to set border radius and box shadow and that works like a charm. The card works fine on everything else btw and thank you for that.
Allow templates in entities
Allow templates in entities
This could be very useful in the following example situation.
An input_text holds the name of a sensor and it is the sensor that needs to be watched for state changes (not the input_text)?
e.g.
The state of input_text.my_sensor_name is the name of a sensor like 'sensor.my_sensor'.
type: custom:config-template-card
variables:
- states['input_text.my_sensor_name'].state
entities:
# I want to watch sensor.my_sensor
- sensor.time
Cannot click on entities (i.e., more info not working)
So, after adding the template cards, we are not able to click the entities to open the more-info cards.
Auto refreshing of values raising exception
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
Last working release (if known):
Browser and Operating System:
Windows 10 (Edge, Chrome, Firefox) + Android (Home Assistant APP)
Description of problem:
Auto refresh of values doesn't work (initial loading or f5 works). The lovelace entities are auto generated by https://github.com/thomasloven/lovelace-auto-entities
Javascript errors shown in the web inspector (if applicable):
Uncaught (in promise) TypeError: this._config.entities.forEach is not a function
at HTMLElement.shouldUpdate (config-template-card.js:3290)
at HTMLElement.performUpdate (config-template-card.js:2414)
at HTMLElement._enqueueUpdate (config-template-card.js:2369)
Additional information:
Lovelace:
type: 'custom:auto-entities'
card:
type: grid
columns: 6
card_param: cards
filter:
include:
- entity_id: /sensor.server_/
options:
type: 'custom:config-template-card'
entities: this.entity_id
card:
type: gauge
entity: this.entity_id
max: 100
config-template-card.js missing
I might be blind but where do i find the js if i dont use HACS? i have searched everywhere , isnt it supposed to be in the file list or linked to where it is?
States don't automatically update in the UI, refresh required
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue: 1.1.1
Last working release (if known):
Browser and Operating System: Chrome (79.0.3945.130 (Official Build) (64-bit)) / Windows 10
Description of problem:
Using the below config, I am able to adjust the slider and change the light without any issue, however the brightness is not updated in the UI. If the light is off, and I slide the slider halfway, the light will come on at 50%, the UI still says "Off." On refresh, it'll correctly report 50%. This is one of many examples -- state doesn't update on entities wrapped in the config-template-card.
- type: "custom:config-template-card"
entities:
- sensor.master_bedroom
card:
type: "custom:hui-entities-card"
title: "Ken"
show_header_toggle: false
entities:
- type: custom:slider-entity-row
entity: light.bedroom
name: Lights
Doing the same thing with the below config works fine (unwrapping from config-template-card) -- the state is updated immediately after I change the position of the slider, without requiring a refresh.
- type: "custom:hui-entities-card"
title: "Ken"
show_header_toggle: false
entities:
- type: custom:slider-entity-row
entity: light.bedroom
name: Lights
States Not Automatically Updating in UI - Only works on page refresh
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
1.3.0
Last working release (if known):
Unknown. Trying this for the first time.
Browser and Operating System:
MacOS Big Sur 11.0.1
Safari: Version 14.0.1 (16610.2.11.51.8)
or
Chrome: Version 87.0.4280.67 (Official Build) (x86_64)
Description of problem:
Similar to #21, I'm seeing issue with the card not updating automatically. When I refresh the page manually, the card behavior updates correctly, but not until refresh happens.
It's very possible that I'm using the entities: attribute incorrectly. I've tried a couple of different configurations.
I've tried to enter the chrome debugger and I've been able to find references in the shouldUpdate function where the hass and oldHass objects do have true and false for is_volume_muted but changed still comes back as false.
Am I doing something wrong or changes not picked up correctly in state attributes?
Here are the configs I've tried:
Using list vars:
type: 'custom:config-template-card'
variables:
- 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
- '${vars[0]}'
card:
type: 'custom:roku-card'
entity: media_player.roku_ultra
tv: true
volume_mute:
tap_action:
action: call-service
service: media_player.volume_mute
service_data:
entity_id: media_player.living_room_receiver
is_volume_muted: '${!vars[0]}'
Using Named Vars:
type: 'custom:config-template-card'
variables:
MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
- '${MUTE_STATE}'
card:
type: 'custom:roku-card'
entity: media_player.roku_ultra
tv: true
volume_mute:
tap_action:
action: call-service
service: media_player.volume_mute
service_data:
entity_id: media_player.living_room_receiver
is_volume_muted: '${!MUTE_STATE}'
Explicit reference in entities:
type: 'custom:config-template-card'
variables:
MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
- media_player.living_room_receiver
card:
type: 'custom:roku-card'
entity: media_player.roku_ultra
tv: true
volume_mute:
tap_action:
action: call-service
service: media_player.volume_mute
service_data:
entity_id: media_player.living_room_receiver
is_volume_muted: '${!MUTE_STATE}'
Explicit reference in entities to the state attribute
type: 'custom:config-template-card'
variables:
MUTE_STATE: 'states[''media_player.living_room_receiver''].attributes.is_volume_muted'
entities:
- 'states['media_player.living_room_receiver'].attributes.is_volume_muted'
card:
type: 'custom:roku-card'
entity: media_player.roku_ultra
tv: true
volume_mute:
tap_action:
action: call-service
service: media_player.volume_mute
service_data:
entity_id: media_player.living_room_receiver
is_volume_muted: '${!MUTE_STATE}'
Card throws exception "Cannot read property 'includes' of null"
Checklist:
- [ x] I updated to the latest version available
- [ x] I cleared the cache of my browser
Release with the issue:
1.3.0
Last working release (if known):
Browser and Operating System:
I am using Chrome and Windows, but should not matter
Description of problem:
There is an exception flickering all the time, because the "template" parameter for the _evaluateTemplate function is either null or an object with the property "entity"(like this: {entity: ""})
Javascript errors shown in the web inspector (if applicable):
5VM33232 config-template-card.js:3372 Uncaught (in promise) TypeError: Cannot read property 'includes' of null
at HTMLElement._evaluateTemplate (VM33232 config-template-card.js:3372)
at VM33232 config-template-card.js:3294
at Array.forEach (<anonymous>)
at HTMLElement.shouldUpdate (VM33232 config-template-card.js:3290)
at HTMLElement.performUpdate (VM33232 config-template-card.js:2414)
at HTMLElement._enqueueUpdate (VM33232 config-template-card.js:2369)
Additional information:
The null check at this location is rather simple, but I am not sure if the object should go through the rest of the function or not.
I am guessing not?
if (!template || !template.includes || !template.includes('${')) {
return template;
}
Passed entities inside template
Is your feature request related to a problem? Please describe.
I'm using auto-entities to render a list of my Steam friends based on their online/offline status. The Steam integration now includes the banner image of the game they're playing, and I want those image to show up in HA using multiple picture-element cards.
Since the picture-element card cannot accept a template as the image URL, I'm trying to use config-template-card to wrap it. Auto-entities would pass all my Steam friends to config-template-card, which in turn would pass the image state attribute to picture-elements.
Describe the solution you'd like
I'd like to use configuration that looks something like this (emphasis on the "image" line):
type: custom:config-template-card
card:
type: picture-entity
title: Currently played games
image: '${this.entities[0].attributes.some_url}'
entities:
- sensor.steam_xxxxxxxxxxxxxxxxxxx1
- sensor.steam_xxxxxxxxxxxxxxxxxxx2
- sensor.steam_xxxxxxxxxxxxxxxxxxx3Describe alternatives you've considered
I tried using the templated entities fearture, but what I'd like to do is kind of the opposite idea.
Additional context
I realise I could specify all my friends in the vars array. The reason I don't want to use variables here is because I already have the list of entities specified elsewhere, so duplicating that list of entities would make the configuration unbearable to maintain.
How can i use this plugin in a vertical-stack card?
Checklist:
- I updated to the latest version available
Check - I cleared the cache of my browser
Check
Release with the issue:
1.1.2
Last working release (if known):
Not sure if this ever worked
Browser and Operating System:
Chrome - Version 80.0.3987.116 (Official Build) (64-bit)
Version 80.0.3987.116 (Official Build) (64-bit)
Description of problem:
I'm trying to use this plugin in a vertical stack card. Is this possible? I have it working with a normal manual card like this:
card:
columns: 5
entities:
- entity: input_boolean.gast_aanwezig
icon: >-
${states['input_boolean.gast_aanwezig'].state === 'on' ?
'mdi:account-check' : 'mdi:account-remove'}
name: Gast
- entity: input_boolean.nachtverlichting
icon: >-
${states['input_boolean.nachtverlichting'].state === 'on' ?
'mdi:weather-night' : 'mdi:weather-sunny'}
name: Verlichting
- entity: input_number.aantal_aanwezig
icon: >-
${states['input_number.aantal_aanwezig'].state === '0.0' ?
'mdi:numeric-0-circle-outline' :
states['input_number.aantal_aanwezig'].state === '1.0' ?
'mdi:numeric-1-circle-outline' :
states['input_number.aantal_aanwezig'].state === '2.0'
?'mdi:numeric-2-circle-outline' :
states['input_number.aantal_aanwezig'].state === '3.0' ?
'mdi:numeric-3-circle-outline' :
states['input_number.aantal_aanwezig'].state === '4.0' ?
'mdi:numeric-4-circle-outline' :
states['input_number.aantal_aanwezig'].state === '5.0' ?
'mdi:numeric-5-circle-outline' : 'mdi:account-question' }
name: Aanwezig
- entity: input_number.aantal_slapen
icon: >-
${states['input_number.aantal_slapen'].state === '0.0' ?
'mdi:numeric-0-circle-outline' :
states['input_number.aantal_slapen'].state === '1.0' ?
'mdi:numeric-1-circle-outline' :
states['input_number.aantal_slapen'].state === '2.0'
?'mdi:numeric-2-circle-outline' :
states['input_number.aantal_slapen'].state === '3.0' ?
'mdi:numeric-3-circle-outline' :
states['input_number.aantal_slapen'].state === '4.0' ?
'mdi:numeric-4-circle-outline' :
states['input_number.aantal_slapen'].state === '5.0' ?
'mdi:numeric-5-circle-outline' : 'mdi:account-question' }
name: Slapen
- entity: input_boolean.persoon_slaapt
icon: >-
${states['input_boolean.persoon_slaapt'].state === 'on' ? 'mdi:sleep' :
'mdi:sleep-off'}
name: Persoon
show_state: false
type: 'custom:hui-glance-card'
entities:
- input_boolean.gast_aanwezig
- input_boolean.nachtverlichting
- input_number.aantal_aanwezig
- input_number.aantal_slapen
- input_boolean.persoon_slaapt
type: 'custom:config-template-card'
variables:
- 'states[''input_boolean.gast_aanwezig''].state'
- 'states[''input_boolean.nachtverlichting''].state'
- 'states[''input_number.aantal_aanwezig''].state'
- 'states[''input_number.aantal_slapen''].state'
- 'states[''input_boolean.persoon_slaapt''].state'
But i'd like to use it in a vertical-stack card, i've tried several ways of formatting the code, but no luck sofar. This is my code in a vertical card:
type: vertical-stack
cards:
- type: 'custom:hui-glance-card'
columns: 7
entities:
- entity: input_boolean.coen_aanwezig
icon: >-
${states['input_boolean.coen_aanwezig'].state === 'on' ?
'mdi:account-check' : 'mdi:account-remove'}
name: Thuis
- entity: input_number.coen_kans_aanwezig
icon: >-
${states['input_number.coen_kans_aanwezig'].state === '0.0' ?
'mdi:numeric-0-circle-outline' :
states['input_number.coen_kans_aanwezig'].state === '1.0' ?
'mdi:numeric-1-circle-outline' :
states['input_number.coen_kans_aanwezig'].state === '2.0' ?
'mdi:numeric-2-circle-outline' :
states['input_number.coen_kans_aanwezig'].state === '3.0' ?
'mdi:numeric-3-circle-outline' :
states['input_number.coen_kans_aanwezig'].state === '4.0' ?
'mdi:numeric-4-circle-outline' :
states['input_number.coen_kans_aanwezig'].state === '5.0' ?
'mdi:numeric-5-circle-outline' : 'mdi:map-marker-question-outline' }
name: Kans
- entity: sensor.coen_iphone_app_battery_level
name: Batterij
- entity: input_boolean.coen_slaapt
icon: >-
${states['input_boolean.coen_slaapt'].state === 'on' ? 'mdi:sleep' :
'mdi:sleep-off'}
name: Slaapt
- entity: device_tracker.coen_iphone_app
icon: >-
${states['device_tracker.coen_iphone_app'].state === 'home' ?
'mdi:account-check' : 'mdi:account-remove'}
name: Assistant
- entity: device_tracker.coen_iphone_tado
icon: >-
${states['device_tracker.coen_iphone_tado'].state === 'home' ?
'mdi:account-check' : 'mdi:account-remove'}
name: Tado
- entity: device_tracker.nut
icon: >-
${states['device_tracker.nut'].state === 'home' ? 'mdi:account-check'
: 'mdi:account-remove'}
name: Nut
show_name: false
show_state: false
title: Coen
type: 'custom:config-template-card'
entities:
- input_boolean.coen_aanwezig
- input_number.coen_kans_aanwezig
- input_boolean.coen_slaapt
- sensor.coen_iphone_app_battery_level
- device_tracker.coen_iphone_app
- device_tracker.coen_iphone_tado
- device_tracker.nut
variables:
- 'states[''input_boolean.coen_aanwezig''].state'
- 'states[''input_number.coen_kans_aanwezig''].state'
- 'states[''input_boolean.coen_slaapt''].state'
- 'states[''sensor.coen_iphone_app_battery_level''].state'
- 'states[''device_tracker.coen_iphone_app''].state'
- 'states[''device_tracker.coen_iphone_tado''].state'
- 'states[''device_tracker.nut''].state'
This gives the javascript error shown below. And in HA it gives the error: "duplicated mapping key at line 51, column 7: type: 'custom:config-template-card' ^"
Which all makes sense, but i'm just not sure how to format it for the vertical stack card.
Javascript errors shown in the web inspector (if applicable):
config-template-card Error: No card defined
at HTMLElement.setConfig (config-template-card.js:3225)
at o (create-element-base.ts:39)
at a (create-element-base.ts:79)
at bn (create-card-element.ts:57)
at HTMLElement._createCardElement (hui-stack-card.ts:77)
at hui-stack-card.ts:39
at Array.map (<anonymous>)
at HTMLElement.setConfig (hui-stack-card.ts:38)
at HTMLElement.set config [as config] (hui-card-preview.ts:60)
at b.commit (parts.ts:420)
Additional information:
Issue with template sensor
Description of problem:
In my test I have a template sensor that changes value, name and icon based on an input boolean.
Displaying the template sensor in sensor or entities cards works well, state changes are correctly detected and value, name and icon properly updated when input boolean toggles.
However, if sensor or entities cards are surrounded by config-template-card, they don't detect the input boolean state changes properly. I used the config-template-card only to dinamically change the theme (a blue or orange theme), based on the input boolean state.
Input Boolean OFF
When input boolean is off, blue theme is correcly applied, card content is correctly displayed:
Input Boolean turned ON
When input boolean is turned on, orange theme is correctly applied but card content is not updated:
Input Boolean turned OFF
When input boolean is turned back off, blue theme is correctly applied but card content is wrongly updated:
configuration.yaml:
input_boolean:
test:
sensor:
- platform: template
sensors:
test:
entity_id:
- input_boolean.test
unit_of_measurement: '°C'
device_class: temperature
value_template: >-
{% if is_state('input_boolean.test','on') %}
20
{% else %}
-20
{% endif %}
icon_template: >-
{% if is_state('input_boolean.test','on') %}
mdi:fire
{% else %}
mdi:snowflake
{% endif %}
friendly_name_template: >-
{% if is_state('input_boolean.test','on') %}
Hot
{% else %}
Cold
{% endif %}
lovelace:
cards:
- type: entities
entities:
- entity: input_boolean.test
name: Heat
icon: 'mdi:fire'
- type: 'custom:config-template-card'
entities:
- input_boolean.test
card:
type: 'custom:hui-sensor-card'
entity: sensor.test
graph: line
theme: >-
${ states['input_boolean.test'].state === 'on' ? 'OrangeTheme'
: 'BlueTheme' }
- type: 'custom:config-template-card'
entities:
- input_boolean.test
card:
type: 'custom:hui-entities-card'
entities:
- sensor.test
theme: >-
${ states['input_boolean.test'].state === 'on' ? 'OrangeTheme'
: 'BlueTheme' }
- type: sensor
entity: sensor.test
graph: line
- type: entities
entities:
- entity: sensor.testRemove need for custom prefix
Not being able to see states?
Checklist:
- [ * ] I updated to the latest version available
- [ * ] I cleared the cache of my browser
Release with the issue:
1.2.0 HA: 0.115.6
Browser and Operating System:
Chrome on windows and android
HA app on android
Description of problem:
Tried the "Templated entities example" modified it with my light entity and got a blank page. I opened dev tools -> console
It seems not to be able to see states.
- path: home
title: Home
visible: true
panel: false
cards:
- type: custom:config-template-card
variables:
- states['light.bulb_couch_lr'].state
entities:
- '${vars[0]}'
card:
type: entities
entities:
- entity: '${vars[0]}'
- name: "${states[vars[0]].state === 'on' ? 'Light On' : 'Light Off'}"
The bar-card refresh with each change in value
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
Last working release (if known):
Browser and Operating System:
Windows 10 (Edge, Chrome, Firefox) + Android (Home Assistant APP)
Description of problem:
The bar-card refresh with each change in value
This is my code:
- type: 'custom:config-template-card'
variables:
- 'states[''sensor.smarther_boost_type_studio''].state'
entities:
- counter.smarther_studio_boost_remaining
card:
style: |
ha-card {
--ha-card-box-shadow: 'none';
width: 20px;
margin-left: 120px;
border-radius: 0px
}
bar-card-backgroundbar {
#margin-top: -5px;
border-radius: 2.5px;
margin-left: -11px;
width: 10px;
height: 243px;
box-shadow: none;
}
bar-card-currentbar {
#margin-top: -5px;
border-radius: 2.5px;
margin-left: -11px;
width: 10px;
height: 243px;
box-shadow: none;
}
animation:
state: 'off'
color: >-
${vars[0] === '30' ? 'red' : vars[0] === '60' ? 'red' : vars[0] === '90'
? 'red' : 'grey'}
columns: '5'
direction: up
entities:
- entity: counter.smarther_studio_boost_remaining
name: BOOST
height: 10px
limit_value: true
max: >-
${vars[0] === '30' ? '1800' : vars[0] === '60' ? '3600' : vars[0] ===
'90' ? '5400' : '0'}
min: '0'
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
name: 'off'
value: 'off'
type: 'custom:bar-card'
Javascript errors shown in the web inspector (if applicable):
Additional information:
Allow templating styles
Is your feature request related to a problem? Please describe.
Changing the colors of the icons for a Picture Entities card requires changing them in the style: section but it doesn't appear that you can use the templates in this section.
Describe the solution you'd like
Add support for templates in the style section.
Describe alternatives you've considered
Using state icons from the built-in Picture Elements state-icon type. This won't work for setting different colors based on a custom sensor's state, which doesn't have an "on" state.
Additional context
Let me know if you need more info.
Trying to do this... service: climate.set_hvac_mode, data: entity_id: climate.living_room, hvac_mode: "${hvac_mode}"
0.110 - Error - t.setConfig is not a function config-template-card
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
1.1.2
Last working release (if known):
Browser and Operating System:
Chrome - Windows 10
Description of problem:
type: 'custom:config-template-card' returns 'No card defined' error
Javascript errors shown in the web inspector (if applicable):
config-template-card Error: No card defined
at HTMLElement.setConfig (config-template-card.js?v=1.1.2:3225)
at s (hui-weather-forecast-card.ts:39)
at hui-weather-forecast-card.ts:39
at l (hui-weather-forecast-card.ts:39)
at Ht (hui-weather-forecast-card.ts:39)
at HTMLElement.value (search-input.ts:17)
at HTMLElement.value (search-input.ts:17)
at HTMLElement.performUpdate (bootstrap:2)
at HTMLElement._enqueueUpdate (bootstrap:2)
hui-plant-status-card
Uncaught (in promise) TypeError: t.setConfig is not a function
config-template-card
Additional information:
fix console printout
CONFIG_TEMPLATE-CARD -> CONFIG-TEMPLATE-CARD
Firefox stops responding.
Checklist:
- [ x ] I updated to the latest version available
- [ x ] I cleared the cache of my browser
Release with the issue:
config-template-card 1.0.8
Last working release (if known):
Not known
Browser and Operating System:
Firefox 70.0.1 64bit, Windows 10 pro1903 (build 18362.418)
Description of problem:
Firefox stops responding after a short time. Error in the console is shown below:
Chrome appears to ignore the error.
Javascript errors shown in the web inspector (if applicable):
As per screenshot above.
Additional information:
Automatic layout doesn't work
Checklist:
- [ X ] I updated to the latest version available
- [ X ] I cleared the cache of my browser
Release with the issue:
1.2.0
Last working release (if known):
Browser and Operating System:
Win10x64
Firefox 81.0.1
Description of problem:
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: 2
-
The created card is like this:
https://community-assets.home-assistant.io/original/3X/f/4/f400502463965a9d1875027ed469efee6999dfa8.jpeg -
Then duplicate this card.
Two…three cards are enough to see the issue.
All cards are placed in one column.
Note, 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.
Javascript errors shown in the web inspector (if applicable):
Additional information:
I'm not quite clear on what constructs are allowing and where?
I'm not quite clear on what constructs are allowing and where?
Q1: what language is this, where can I find docs on syntax and operators:
LIGHT_STATE === 'on' ? 'glance' : 'entities'
Q2: 'All templates must be enclosed by ${}'
When you say 'template', is this the standard HA templating? Is Jinja allowed?
Any examples you might point me to would be great.
Thanks for your work and help!
Dave
Browser crashes due to error
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
Home Assistant Core - 0.110.1
config-template-card - latest
Last working release (if known):
Home Assistant Core - 0.109.6
Browser and Operating System:
Mac OS, Chrome & Safari
Description of problem:
Javascript errors shown in the web inspector (if applicable):
[Error] hui-error-card
TypeError: n.setConfig is not a function. (In 'n.setConfig(t)', 'n.setConfig' is undefined)
n (config-template-card.js:3213:5426)
O (config-template-card.js:3213:5832)
render (config-template-card.js:3258:89)
update (config-template-card.js:2827)
performUpdate (config-template-card.js:2285)
(anonymous function) (config-template-card.js:2237)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
[Error] hui-error-card – TypeError: n.setConfig is not a function. (In 'n.setConfig(t)', 'n.setConfig' is undefined) — config-template-card.js:3213:5392
TypeError: n.setConfig is not a function. (In 'n.setConfig(t)', 'n.setConfig' is undefined) — config-template-card.js:3213:5392
n (config-template-card.js:3213:5426)
O (config-template-card.js:3213:5832)
render (config-template-card.js:3258:89)
update (config-template-card.js:2827)
performUpdate (config-template-card.js:2285)
(anonymous function) (config-template-card.js:2237)
asyncFunctionResume
(anonymous function)
promiseReactionJobWithoutPromise
[Error] hui-error-card – TypeError: n.setConfig is not a function. (In 'n.setConfig(t)', 'n.setConfig' is undefined) — config-template-card.js:3213:5392
Additional information:
Doesn't work at all just shows info as if it wasn't installed
Release with the issue:
1.1.1
Browser and Operating System:
Chrome, Windows 10
Description of problem:
I have setup many scripts & modules in my frontend but I can't get this to work ... just shows the literal text as if this wasn't installed:
....
- type: module
url: /local/config-template-card.js?v=1.1.1
....
type: 'custom:hui-markdown-card'
content: "${user}"
....Cannot automate element position
Release with the issue:
HA - 0.118.3
Browser and Operating System:
Any
Description of problem:
I'm trying to implement dynamic repositioning of the element but it looks like templating doesn't work within style block. Can it be fixed or workarounded somehow?
Code example (hardcoded variable to simplify the case):
- type: 'custom:config-template-card'
variables:- ("50"+"%") #expected top position
entities: - input_number.test_point
element:
type: 'custom:text-element'
text: '${vars[0]}'
style:
top: 0
left: 0
style:
color: white
top: '${vars[0]}' #expected top position 50% but it doesn't work
left: 12%
width: 10%
- ("50"+"%") #expected top position
add custom-card-helpers
Documentation is lacking information
Checklist:
- [ x] I updated to the latest version available
- [x ] I cleared the cache of my browser
Release with the issue:
Last working release (if known): 0.117.6
Browser and Operating System: 86.0.4240.183 (Official Build) (64-bit)/Ubuntu 20.04
Description of problem:
Not sure.
Javascript errors shown in the web inspector (if applicable):
- None
Additional information:
this dosn't work:
- type: custom:config-template-card
card:
type: picture-entity
entities:
- persons.jmg
Card blinking
I noticed a strange behavior of the card. Every few seconds you can see that data inside card were refreshed. It is worth noting that this effect is not present when the graph card is outside "custom: config-template-card"
Code:
- type: 'custom:config-template-card' card: type: 'custom:mini-graph-card' entities: - sensor.bedroom_temperature line_color: "${ states['sensor.bedroom_temperature'].state <= 20 ? '#2980b9' : ( states['sensor.bedroom_temperature'].state <= 22 ? '#b58e31' : '#b93829' ) }" line_width: 4 name: Test
card not print when use with custom:swipe-card
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
since 0.107
Last working release (if known):
0.106
Browser and Operating System:
Firefox & chromiu
Description of problem:
I use config template card to calculate number of point need to minigraph of temperature humidity
since an update the card is not print and I see no error
conflict seem to be with swipe custom card when I remove the swipe card I can see my card and when I remove template card swip work too
you can find yaml file for my card below:
card:
cards:
- cards:
- entities:
- label: 'Nombre de jour a afficher:'
type: section
- entity: input_number.days_to_show_temp_graph
full_row: true
name: hide_state
type: 'custom:slider-entity-row'
- type: section
show_header_toggle: false
type: entities
- color_thresholds_transition: smooth
entities:
- entity: sensor.pressure_chambre
index: 0
name: pressure chambre
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: false
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
- cards:
- color_thresholds_transition: smooth
entities:
- entity: sensor.humidity_chambre
index: 0
name: humidity chambre
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: false
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- entity: sensor.temperature_chambre
index: 0
name: temperature chambre
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: true
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
title: chambre
type: 'custom:vertical-stack-in-card'
- cards:
- entities:
- label: 'Nombre de jour a afficher:'
type: section
- entity: input_number.days_to_show_temp_graph
full_row: true
name: hide_state
type: 'custom:slider-entity-row'
- type: section
show_header_toggle: false
type: entities
- color_thresholds_transition: smooth
entities:
- entity: sensor.pressure_exterieur
index: 0
name: pressure exterieur
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: false
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
- cards:
- color_thresholds_transition: smooth
entities:
- entity: sensor.humidity_exterieur
index: 0
name: humidity exterieur
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: false
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- entity: sensor.temperature_exterieur
index: 0
name: temperature exterieur
font_size: 100
group: false
hour24: true
hours_to_show: '${vars[0] * 24}'
line_width: 6
points_per_hour: '${2/vars[0]}'
show:
extrema: true
fill: fade
labels: true
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
title: exterieur
type: 'custom:vertical-stack-in-card'
type: 'custom:swipe-card'
entities:
- input_number.days_to_show_temp_graph
type: 'custom:config-template-card'
variables:
- 'states[''input_number.days_to_show_temp_graph''].state'
Possibility to include elements in addition to cards?
Is your feature request related to a problem? Please describe.
I've been struggling with the following scenario:
I'm working on my floor plan, where I'm wrapping a Picture Elements card inside your config template card. This far, everything works great.
But, somewhere down the tree of image elements inside the picture elements card, I'm using the decluttering card, to be able to reuse the same config for a bunch of lights for example. This decluttering card has it's config in another file, and the decluttering card has the ability to add an image element to it.
The problem I'm facing is that I'm trying to do quite a large portion of logic with the help of your card, but since the decluttering part is in another file, it seems I've lost the scope of the config template card.
Describe the solution you'd like
In a dream scenario, I would in the separate decluttering card file be able to have the following structure (edit: have tried getting the correct line breaks to work without luck, but I hope you see what I'm after. Linebreak/indendation after every colon):
decluttering-card: card: custom:config-template-card element: type: image
...but since I can't add an image element to your card, this can't be done it seems. I think this would be a good additon to your card and make it easier for people to maintain structured and maintainable code with much flexibility.
Describe alternatives you've considered
I've thought about moving the javascript logic to the "main" card and inject the result as variables into the decluttering card, but that would mean I'd have to rewrite the same logic for every decluttering card and it will be quite a few (since I haven't found a way to create a global function or something in your card to be able to reuse the same logic across all decluttering card instances). This doesn't seem efficient
I've tried using Yaml/Jinja inside the decluttering card, but I'm much more used to javascript and I've spent two days not being able to extract different values needed. Probably due to some linebreak/whitespace/indentation or something similar that YAML likes to complain about. Problem is, I'm not getting any console errors whatsoever, so this option I'd like to throw in the bin for now.
Additional context
I've tried being as clear as I can, but please let me know if I can provide any more information or clear things up for you!
I really like using your card and it has saved me a lot of hair I would otherwise have pulled out by now.
// Jens.
Entities icon change does not work
I just want to change the icon based on the state ... so far so simple ...
It seems like there is a sanitizer running over the json removing all the " which breaks the condition
So when I store
icon: "${states[cover.fenster_sued].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter' }"
will be automatically replaced by
icon: >-
${states[cover.fenster_sued].state === 'open' ?
'mdi:window-shutter-open' : 'mdi:window-shutter' }
which of course breaks the whole thing
What am I do wrong ....
THANKS
Something related to `not available` state in templates
I have something like this:
show_header_toggle: false
type: 'custom:hui-entities-card'
entities:
- name: Ceiling
secondary_info: last-changed
entity: switch.ceiling_bedroom
- icon: >-
${states['light.ls1'].state === 'off' ? 'mdi:led-off' :
'mdi:led-on'}
toggle: 'yes'
secondary_info: last-changed
type: 'custom:slider-entity-row'
entity: light.ls1
- name: Lamp
toggle: 'yes'
secondary_info: last-changed
type: 'custom:slider-entity-row'
entity: light.lamp_bedroom
- secondary_info: last-changed
entity: switch.homey_led_ringAnd when light.ls1 is not available, the whole card is not displaying. There is something about template processing inside of icon:, I think. Because if I remove the line with template, the whole card appears back again.
Variables: use VARIABLE_1 to define VARIABLE_2
Earlier I could use one variable to define another variable:
type: 'custom:config-template-card'
variables:
- 'states[''input_select.graph_hours_to_show_sys'']'
- 'states[''input_boolean.graph_realtime_sys'']'
- '''binary_sensor.rpi_power_status'''
- 'vars[1].state === "on" ? vars[2] : "sensor.test_zero"' #### LOOK AT THIS !!!!
entities:
- '${vars[0].entity_id}'
- '${vars[1].entity_id}'
- '${vars[3]}'
card:
type: history-graph
entities:
- entity: '${vars[2]}'
name: Питание
hours_to_show: '${vars[0].state}'
refresh_interval: 0
Now I am trying to use variables SENSOR & INPUT_REALTYME to define a variable SENSOR_TO_BE_CHECKED - and I am failed:
type: 'custom:config-template-card'
variables:
HOURS_TO_SHOW: 'states[''input_select.graph_hours_to_show_sys'']'
INPUT_REALTYME: 'states[''input_boolean.graph_realtime_sys'']'
SENSOR: '''binary_sensor.rpi_power_status'''
SENSOR_TO_BE_CHECKED: 'INPUT_REALTYME.state === "on" ? SENSOR : "sensor.test_zero"'
entities:
- '${HOURS_TO_SHOW.entity_id}'
- '${INPUT_REALTYME.entity_id}'
- '${SENSOR_TO_BE_CHECKED}'
card:
type: history-graph
entities:
- entity: '${SENSOR}'
name: Питание
hours_to_show: '${HOURS_TO_SHOW.state}'
refresh_interval: 0
Look, now it works again:
type: 'custom:config-template-card'
variables:
HOURS_TO_SHOW: 'states[''input_select.graph_hours_to_show_sys'']'
INPUT_REALTYME: 'states[''input_boolean.graph_realtime_sys'']'
SENSOR: '''binary_sensor.rpi_power_status'''
# SENSOR_TO_BE_CHECKED: 'INPUT_REALTYME.state === "on" ? SENSOR : "sensor.test_zero"'
entities:
- '${HOURS_TO_SHOW.entity_id}'
- '${INPUT_REALTYME.entity_id}'
# - '${SENSOR_TO_BE_CHECKED}'
card:
type: history-graph
entities:
- entity: '${SENSOR}'
name: Питание
hours_to_show: '${HOURS_TO_SHOW.state}'
refresh_interval: 0
I suspect that now I cannot ise a VARIABLE_1 to define a VARIABLE_2.
Handle lists
Currently doesn't supports lists, only objects 🤦♂️
Can we template other attributes?
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
1.1.2
Last working release (if known):
n/a
Browser and Operating System:
Browsers: Windows - Chrome, HA iOS app
OS: HA Docker
Description of problem:
It appears that I can only template name and icon - is that all this card supports?
Can we template other attributes like entity_picture, etc. I was trying to template an entity_picture on my media_player cards for integrations that do not provide entity_pictures like Android TV / Fire TV.
See above
Javascript errors shown in the web inspector (if applicable):
n/a
Additional information:
card config i was playing around with:
type: 'custom:config-template-card'
variables:
- states['media_player.bedroom_mibox'].attributes.app_name
entities:
- media_player.bedroom_tv
card:
app_name: ${'test app_name'}
media_title: ${'test media_title'}
entity: media_player.bedroom_tv
state: ${'idle'}
icon: ${'mdi:apple'}
name: ${'test name'}
source: ${'test source'}
type: ${'custom:mini-media-player'}
entity_picture: ${'/local/images/netflix.jpg'}
Hide entity
I think that would be useful add an option to hide a specific entity if it has not a specific state.
For example:
type: 'custom:config-template-card'
variables:
- states[light.bedroom'].state
entities:
- light.bedroom
card:
type: entities
entities:
- entity: "${vars[0] === 'on' ? 'light.bedroom' : 'hide_entity'}"
name: Bedroom light
named vars?
Is your feature request related to a problem? Please describe.
I'd like to see named vars.
Describe the solution you'd like
This is the example from the readme with the changes.
type: 'custom:config-template-card'
variables:
bed_light: states['light.bed_light'].state
garage_door: states['cover.garage_door'].state
entities:
- light.bed_light
- cover.garage_door
- alarm_control_panel.alarm
- climate.ecobee
card:
type: "${vars.bed_light === 'on' ? 'glance' : 'entities'}"
entities:
- entity: alarm_control_panel.alarm
name: "${vars.garage_door === 'open' && states['alarm_control_panel.alarm'].state === 'armed_home' ? 'Close the garage!' : ''}"
- entity: binary_sensor.basement_floor_wet
- entity: climate.ecobee
name: "${states['climate.ecobee'].attributes.current_temperature > 22 ? 'Cozy' : 'Too Hot/Cold'}"
- entity: cover.garage_door
- entity: "${vars[0] === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
icon: "${vars.garage_door === 'open' ? 'mdi:hotel' : '' }"Error: No style defined for element
Checklist:
- [x ] I updated to the latest version available
- [x ] I cleared the cache of my browser
Release with the issue:
0.117.5
Last working release (if known):
Browser and Operating System:
Microsoft Edge
Description of problem:
When config template card is used as an element in a picture-elements card, I get an error saying "No style is defined for element".
Code used:
- type: "custom:config-template-card"
entities:
- "light.bathroom_spotlights"
element:
type: image
image: "${states['light.bathroom_spotlights'].attributes.hs_color ? '/local/floor_plan/bathroom.png?v=51' : '/local/floor_plan/bathroom.png?v=51'}"
hold_action:
action: none
tap_action:
action: none
style:
filter: "${`hue-rotate(${states['light.bathroom_spotlights'].attributes.hs_color ? states['light.bathroom_spotlights'].attributes.hs_color[0] : 0}deg)`} saturate(100%)"
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.bathroom_spotlights'].attributes.brightness / 255}"
top: 50%
width: 100%`
Javascript errors shown in the web inspector (if applicable):
element custom:config-template-card Error: No style defined for element
at HTMLElement.setConfig (config-template-card.js:3271)
at s (chunk.cdf43a32e306acfdb2f4.js:1749)
at chunk.cdf43a32e306acfdb2f4.js:1749
at d (chunk.cdf43a32e306acfdb2f4.js:1749)
at l (chunk.cdf43a32e306acfdb2f4.js:1749)
at pe (chunk.070388aef4afe7ef2d22.js:1049)
at n (chunk.070388aef4afe7ef2d22.js:1)
at chunk.070388aef4afe7ef2d22.js:1
at Array.forEach ()
at HTMLElement.setConfig (chunk.070388aef4afe7ef2d22.js:1)
Additional information:
config-template-card.js not downloading with custom_updater
I can't get this to download/update via custom_uploader like all the other custom_cards from this repo...
lovelace.yaml like below:
resources:
- url: /customcards/github/custom-cards/surveillance-card.js?track=true
type: module - url: /customcards/github/custom-cards/vertical-stack-in-card.js?track=true
type: js - url: /customcards/github/custom-cards/config-template-card.js?track=true
type: js
First 2 work properly but config-template-card does not...
Variable Entities
Thank you to all for the great card! I have used this card for a couple things successfully but I haven't been able to dynamically change which entities are displayed. Is it possible to change the entity/entities displayed using a template or variables? Here is my attempt:
cards:
- type: 'custom:config-template-card'
variables:
- "${ 'input_boolean.motion_lights_' ~ states['input_select.room'].state | regex_replace(' ','_') | lower }"
entities:
- input_boolean.motion_lights_living_room
- input_boolean.motion_lights_kitchen
- input_boolean.motion_lights_pantry
- input_boolean.motion_lights_mud_room
- '${vars[0]}'
card:
type: entities
title: Motion Settings
entities:
- '${vars[0]}'I don't get any errors, but I also don't get any output. I am trying to make a settings page for a couple rooms.
Unable to chain conditions.
Hi there!
I discovered this and so glad I am having a blast using this tool for an interactive floorplan.
Although, I am now encountering an issue where my code doesn't work if my lights are off (Since the hs_color and rgb_color attributes are invalid when the light is off).
This is the code that I have currently working (with the lights on)
variables: null
entities:
- light.bedroom_lights
- light.dungeon
- light.entrance_in
- light.livingroom_lights
- light.bathroom
- light.kitchen_lights
- light.server
- light.hotbox_wall
- light.hotbox_down
- light.thierry
- switch.patio_lights
card:
type: picture-elements
image: /local/images/floorplan_wip/off_all.png
elements:
- type: image
entity: light.bedroom_lights
state_image:
'off': /local/images/floorplan_wip/off_bedroom.png
'on': /local/images/floorplan_wip/on_bedroom.png
filter: >-
$(states['light.bedroom_lights'].attributes.rgb_color[0] > 250 &&
states['light.bedroom_lights'].attributes.rgb_color[1] > 250 &&
states['light.bedroom_lights'].attributes.rgb_color[2] > 250 ?
'hue-rotate(0deg)' : 'hue-rotate(' +
states['light.bedroom_lights'].attributes.hs_color[0] + 'deg)' ) }
style:
left: 79%
top: 50%
transform: 'translate(-1%,-34%)'
opacity: '${states[''light.bedroom_lights''].attributes.brightness / 255}'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.bedroom_lights
How could I add a pre-condition to my conditions? So that the
$(states['light.bedroom_lights'].attributes.rgb_color[0] > 250 &&
states['light.bedroom_lights'].attributes.rgb_color[1] > 250 &&
states['light.bedroom_lights'].attributes.rgb_color[2] > 250 ?
'hue-rotate(0deg)' : 'hue-rotate(' +
states['light.bedroom_lights'].attributes.hs_color[0] + 'deg)' ) }
blob is ignored when the light is off?
Thanks for reading!
Embedded custom buttons cards don't update with triggers
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
3.3.0
Last working release (if known):
n/a
Browser and Operating System:
MacOS Catalina, Chrome v83, Safari 13
Description of problem:
Just to explain this a bit, I have 12 (13, including one embedded) cards in this vertical/horizontal stack. All the entity buttons are also custom button cards and self-explanatory. It's only the top row (icon, label, and toggle) I'm having a challenge with.
The top row is a custom button card with a custom field that is an embedded custom button card (the toggle on the top row is the custom field).
The embedded card is deriving the state (using javascript templates) based on all the switches/lights below. All this works when I load the card or refresh it. However, it's not dynamic; when I turn a switch/light on/off, the toggle doesn't update.
I'm trying to use triggers_update with the list of all the switches/lights. I've tried using triggers_update on the entire card and the embedded card. Nothing seems to work.
I'm using templates to generate these and I have replicated the issue with and without the template.
Javascript errors shown in the web inspector (if applicable):
No errors in the Javascript, but I have added console.log() messages and seen they only fire on refresh but not on state changes.
Additional information:
License difference?
I noticed two difference licenses referenced. /LICENSE is an MIT License. While the header of /dist/config-template-card.js references the Apache License (and copyright Microsoft?). I am no expert in this, but I wanted to share it with you in case it was unintentional.
HA border/shadow conflic
Here the requested example:
With the problem:
title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures
cards:
- type: vertical-stack
cards:
- !include ../cards/compact_custom_header_main.yaml
- type: custom:layout-card
layout: vertical
cards:
- type: vertical-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
text-align: center
color: silver
font-size: 25px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 48px
card:
content: Temperatures
type: markdown
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Temperature 48h
icon: fas:thermometer-half
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
group: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.5
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: false
icon: false
state: false
graph: line
fill: false
points: false
legend: true
extrema: false
labels: false
entities:
- entity: sensor.dark_sky_temperature
name: Outside
color: '#FF8000'
- entity: sensor.dark_sky_temperature
name: Master Bedroom
color: '#0080FF'
- entity: sensor.dark_sky_temperature
name: Living Room
color: '#FF3333'
- entity: sensor.dark_sky_temperature
name: Office
color: '#7F00FF'
- entity: sensor.dark_sky_temperature
name: Bedroom
color: '#00FF00'
- entity: sensor.dark_sky_temperature
name: Bathroom
color: '#33FF99'
Without the problem:
title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures_old
cards:
- type: vertical-stack
cards:
- !include ../cards/compact_custom_header_main.yaml
- type: custom:layout-card
layout: vertical
cards:
- type: vertical-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
text-align: center
color: silver
font-size: 25px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 48px
card:
content: Temperatures
type: markdown
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Temperature 48h
icon: fas:thermometer-half
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
group: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.5
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: false
icon: false
state: false
graph: line
fill: false
points: false
legend: true
extrema: false
labels: false
entities:
- entity: sensor.dark_sky_temperature
name: Outside
color: '#FF8000'
- entity: sensor.dark_sky_temperature
name: Master Bedroom
color: '#0080FF'
- entity: sensor.dark_sky_temperature
name: Living Room
color: '#FF3333'
- entity: sensor.dark_sky_temperature
name: Office
color: '#7F00FF'
- entity: sensor.dark_sky_temperature
name: Bedroom
color: '#00FF00'
- entity: sensor.dark_sky_temperature
name: Bathroom
color: '#33FF99'
Screenshot with the problem:
Screenshot without the problem:
Let me know if you need further info :)
How can I add a title to my card?
So in "normal" cards, I can add title: "<CARD_TITLE" to add a title but I tried in my yaml using this custom card but it doesn't work. Is it possible to add a title?
How to concatenate 2 vars
I'm trying to create a custom card for my blinds.
I need to view entity name as "friendly_name (percentage %)".
(I'm getting % number from another entity)
This is my card
entities:
- input_number.posizione_tapparella_camera
- cover.matrimoniale
variables:
- 'states["cover.matrimoniale"].name'
- 'states["input_number.posizione_tapparella_camera"].state'
card:
entities:
- name: '${vars[0] + " (" + vars[1] + " %)"}'
entity: cover.matrimoniale
type: '${''custom:hui-entities-card''}'
type: 'custom:config-template-card'
But this is the result
How can I solve this ?
If I use this template for entity name it shows the correct name
- name: '${vars[0]}'
Another question...
How can I cast % value as integer ?
{vars[1] | int} not works
Thousands of javascript errors hui-error-card
Checklist
I have updated to the latest available Home Assistant version.
I have cleared the cache of my browser.
I have tried a different browser to see if it is related to my browser.
The problem
Thousands of errors in Chome console when opening my floorplan main lovelace card
Expected behavior
Errors should not be fired.
Environment
Home Assistant 0.110.4
Versione Frontend: 20200519.5 - latest
Chrome Version 83.0.4103.97 (Build ufficiale) (a 64 bit)
Windows 10
Javascript errors shown in your browser console/inspector
config-template-card.js:3213 hui-error-card TypeError: n.setConfig is not a function
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
n @ config-template-card.js:3213
26config-template-card.js:3213 hui-error-card TypeError: undefined is not a function
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
n @ config-template-card.js:3213
4config-template-card.js:3213 Uncaught (in promise) RangeError: Maximum call stack size exceeded
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
at a (config-template-card.js:3213)
at n (config-template-card.js:3213)
Cannot template list-card
Checklist:
- I updated to the latest version available
- I cleared the cache of my browser
Release with the issue:
1.3.0
Last working release (if known):
Browser and Operating System:
Windows 10 Pro 64
Description of problem:
Trying to template the `list-card' using the following code:
- type: 'custom:config-template-card'
entities:
- sensor.earthquakes
card:
type: 'custom:list-card'
title: Earthquakes
entity: sensor.earthquakes
feed_attribute: earthquakes
columns:
- title: "Time"
field: '${ time.strftime("%b %d %X") }'
- title: "Mag."
field: magnitude
style:
- padding-right: 5px
- padding-left: 5px
- title: "Dist."
field: distance
postfix: km
style:
- padding-right: 5px
- padding-left: 5px
- title: "Title"
field: title
add_link: link
Line field: '${ time.strftime("%b %d %X") }' causes the whole thing to not render.
{{ state_attr('sensor.earthquakes','earthquakes')[0].time.strftime("%b %d %X") }} in the Template tester renders correctly as Feb 12 12:03:13
Javascript errors shown in the web inspector (if applicable):
Additional information:
I am using the earthquake integration as a source to the list.
Force entities to be specified or debounce re-renders
If this card re-renders on every state change, it is re-rendering like crazy on big instances. This causes browsers to eat battery and kills performance.
See also home-assistant/core#23938
I suggest that either re-renders are debounced if no entities are specified (ie max render once a second) or that leaving entities to track out of your config will cause it to not re-render at all.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.