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.