I created a test dashboard with your code - it works:
Do you have the latest card installed?
Hi, Thanks again for looking into this. I using v1.3.6 for the card, with Home assistant 2023.7.2
Looks like global vars do not work at your setup, weird.
Not to worry, It works with local vars so will use that for now. Thanks again.
Would you like to register an issue on Github for this?
Hi Ian, thanks very much for this card. I’m having trouble installing it. I’ve used hacs and I can see that the path to the .js has been added to the dashboard resources, it all looks fine. But after a re boot and clearing my browser cache, I can’t see the card in the list of cards, nor can I add it manually. I get,
No card or row or element defined
type: custom:config-template-card
Any ideas please?
Also your buy me a coffee link is broken, id love to buy you a coffee or three!
Thanks, Andrew.
The error message is self explanatory.
You have not specified a card or a row.
Copy/paste any example from GitHub and adapt to your setup.
Hi All,
Hi I would like to name some entities with dynamic name to be displayed on the lovelace card.
So I have some entities that are daily and are represented by D1,D2 etc which means day 1, day 2 of the week etc, but the “day of the week” which these refer to changes each day.
In lovelace I wanted to name the entities to show the day of the week, I tried for example
- entity: sensor.solcast_forecast_d3
name: {{(now()+ timedelta(days=3)).strftime("%a")}}
but that just displays [object Object]
is there a way to do this?
It was suggested I use the Templatable Lovelace Configurations so I gave this a go and tried the following:
type: custom:config-template-card
entities:
- sensor.solcast_forecast_d3
card:
type: entities
entities:
- entity: sensor.solcast_forecast_d3
name: Test1
- entity: sensor.solcast_forecast_d3
name: "${ (now()+timedelta(days=2)).strftime('%a') }"
*and this*
type: custom:config-template-card
variables:
TEST: "{ (now()+timedelta(days=2)).strftime('%a') }"
entities:
- sensor.solcast_forecast_d3
card:
type: entities
entities:
- entity: sensor.solcast_forecast_d3
name: Test1
- entity: sensor.solcast_forecast_d3
name: ${TEST}
funny if I set the TEST variable to something like “{ 4+3 }” is evaluates and seems to work.
but if I add the bottom name: attribute value it does nothing, in fact it blanks the entire card, what am I doing wrong ?
Check your templates in the Developer Tools Template tab.
{ (now()+timedelta(days=2)).strftime('%a') }
Does not work.
But,
{{ (now()+timedelta(days=2)).strftime('%a') }}
Does work.
Hi @jeffcrum tried that also still doesn’t work
tried both of these
variables:
TEST : “{ {{ (now()+timedelta(days=2)).strftime(’%a’) }} }”
and
variables:
TEST : "{ { (now()+timedelta(days=2)).strftime(’%a’) }} "
The last one you have there has space between { and {.
Otherwise, I have not used config-template-card. But, have used card-templater.
Note that you have to add _template to the name you are templating.
And, this works:
- type: custom:card-templater
entities:
- sensor.solcast_forecast_d3
card:
type: entities
entities:
- entity: sensor.my_sensor1
name: Test1
- entity: sensor.my_sensor2
name_template: '{{ (now()+timedelta(days=2)).strftime(''%a'') }}'
1 Like
The CTC supports templates in JS, not jinja.
1 Like
Is there a website with a bunch of examples and templates in Javascript for Home Assistant?
I have a few jinja templates that I would like to “convert” to Javascript so I can use it with config-template-card.
Kind of like a Javascript equivalent of the Templating - Home Assistant site?
Having a little bit of an issue with one of my cards; I think it’s related to 2 characters contained in the URL (’#’ and ‘,’. If anyone has any ideas, please let me know. I think my goal is fairly obvious, but if not: I’m trying to create an iframe card that dynamically updates a URL with the reported location. Have tried several variations of this, but the card does not render.
One attempt used the person entity directly:
type: custom:config-template-card
entities:
- person.main
card:
type: iframe
url: >-
${"https://www.theweekendest.com/trains#"+states['person.main'].attributes['latitude']","states['person.main'].attributes['longitude']"/12/29"}
aspect_ratio: 100%
Another attempt, where I created a separate sensor entity in templates.yaml (the state reports as the person.main “‘latitude’,‘longitude’” as a string). There is no issue with the sensor, or the output, but the card again fails to render:
type: custom:config-template-card
variables:
- states['sensor.latlong'].state
entities:
- sensor.latlong
card:
type: iframe
url: ${"https://www.theweekendest.com/trains#"+vars[0]"/12.260497255506714/29"}
aspect_ratio: 100%
A few other things I’ve tried:
- Defining variables (variables:) with names (i.e. LAT:), then referencing the named variables.
- Using multiple variables (vars[0]; vars[1], etc.).
Any ideas/suggestions/fixes would be appreciated!
A wrong code, should be like
${“some string” + states[“sensor.xxx”].state + “some string”}
I.e. strings are concatenated by “+”
1 Like
And that is why this community is so amazing. I spent a few hours troubleshooting, and was missing the basics. Appreciate the help, and the quick response. It’s working, and dynamically updating the URL to reflect the current location.
Thank you.
1 Like
Thanks @iantrich. I’m very happy with this card. Was looking for something to generate ~30 cards. This one saved the day. My card is still a work in progress. But these are the results so far.
views:
- title: Energie
path: energie
type: sidebar
badges: []
cards:
- type: custom:config-template-card
entities:
- sensor.100_import_kwh_since_last_reset
variables:
DEVICES: [
{"address_id": 100, "type": "eastron sdm630", "title": "Hoofdgroep"},
{"address_id": 101, "type": "abb ev1", "title": "1 - Gang, Douche, Logeerkamer"},
{"address_id": 102, "type": "abb ev1", "title": "2 - Kantoor, Slaapkamers"},
{"address_id": 103, "type": "abb ev1", "title": "3 - Keuken 1, bijkeuken, garage"},
{"address_id": 104, "type": "abb ev1", "title": "4 - Keuken 2"},
{"address_id": 105, "type": "abb ev1", "title": "Groep 5"},
{"address_id": 106, "type": "abb ev1", "title": "Groep 6"},
{"address_id": 107, "type": "abb ev1", "title": "Groep 7"},
{"address_id": 108, "type": "abb ev1", "title": "Groep 8"},
{"address_id": 109, "type": "abb ev1", "title": "Groep 9"},
{"address_id": 110, "type": "abb ev1", "title": "Groep 10"},
{"address_id": 111, "type": "abb ev1", "title": "11 - Woonkamer 2"},
{"address_id": 112, "type": "abb ev1", "title": "12 - Zolder"},
{"address_id": 113, "type": "eastron sdm630", "title": "Warmtepomp binnen"},
{"address_id": 115, "type": "eastron sdm630", "title": "Warmtepomp buiten"},
{"address_id": 117, "type": "eastron sdm630", "title": "Kookplaat"},
{"address_id": 201, "type": "abb ev1", "title": "Servers"},
{"address_id": 245, "type": "abb ev1", "title": "Vaatwasser"},
{"address_id": 244, "type": "abb ev1", "title": "Oven"},
{"address_id": 243, "type": "abb ev1", "title": "Koelkast"}
]
card:
type: vertical-stack
title: Actueel overzicht
cards: |-
${
let cards = [];
const getDivider = ( title ) => {
return {
'type': 'custom:text-divider-row',
'text': title,
'align': 'centre',
'text-divider-font-size': '20',
'text-divider-line-size': '3',
'text-divider-margin': '1em 0'
}
}
const getCard = ( state, unit ) => {
const getColor = () => {
let color = '';
switch (true) {
case (unit === "A"):
switch (true) {
case (state == 0):
color = 'lightgray';
break;
case (state < q):
color = 'green';
break;
case (state < 6):
color = 'blue';
break;
case (state < 9):
color = 'orange';
break;
case (state => 9):
color = 'red';
break;
default:
color = 'purple';
}
break;
default:
switch (true) {
case (state == 0):
color = 'lightgray';
break;
case (state < 100):
color = 'green';
break;
case (state < 500):
color = 'blue';
break;
case (state < 1000):
color = 'orange';
break;
case (state < 2000):
color = 'red';
break;
default:
color = 'purple';
}
}
return color;
}
return {
'type': 'custom:html-card',
'content': `
<div style="display:flex; justify-content:center; color:${ getColor() }" >
<span style="font-size:24px; text-align:ricght;">${ state }</span>
<span style="font-size:20px; opacity:0.5; padding-left:0.5rem;">${ unit }</span>
</div>
`
}
}
const getRow = (index, id) => {
let entityCards = [];
entityCards.push( getCard( this.hass.states[`sensor.${id}_phase_${index}_power`].state, 'W' ) );
entityCards.push( getCard( this.hass.states[`sensor.${id}_phase_${index}_current`].state, 'A' ) );
return {
'type': 'horizontal-stack',
'cards': entityCards
}
}
DEVICES.forEach( device => {
cards.push( getDivider( device.title ) );
// ------------------------------------------------ //
if ( device.type === "abb ev1" ) {
cards.push( getRow(1, device.address_id) );
}
// ------------------------------------------------ //
if ( device.type === "eastron sdm630" ) {
let subCards = [];
for ( let i = 1; i < 3 + 1; i++ ) {
subCards.push(getRow(i, device.address_id ));
}
cards.push( {
'type': 'vertical-stack',
'cards': subCards
} );
}
} )
;
cards
}
If anyone has any suggestions. I’m more than open to it, since it’s my first try.
I am having issues with the config-template card
I have installed it through hacs and I am trying to create a bin card like in this video https://www.youtube.com/watch?v=RpwAhy7f52I but nothing displays in the preview if i remove lines 1 - 6 the picture entity displays so im guessing there is something wrong with my yaml or the installation of the config-template-card. any help would be great
type: custom:config-template-card
entities:
- sensor.black_bin_days
variables:
DAYS: states['sensor.black_bin_days'].atrributes['days']+'d'
card:
type: picture-entity
entity: sensor.black_bin_days
name: ${DAYS}
show_name: true
show_state: false
state_image:
'0': /local/garbage/general_today.png
'1': /local/garbage/general_tomorrow.png
'2': /local/garbage/general_off.png
