The way things are setup works just fine. I also know some of these cards take up more space than my screen\HA will allow. I am just looking for proof of concept for one. Would the last one from 16 hours ago work by Liam for messing around with and testing or is the code still not optimal in your view?
The code in the op works fine but as per recommendations the code from 16 hours should be the best solution so far so give that 1 a go 
Different people have different preferences.
Some different solutions are difficult to compare.
But some approaches which were posted here are not optimal. I already explained it here:
Consider a stack with inner stacks/cards (some of them could be graphs). Assume you want to compose some inner element (like a label) dynamically. Then you decide to nest the whole stack into config-template-card (CTC). Then ALL cards will be inside CTC. Since these cards have entities - you will have to declare ALL these entities as “monitored” by CTC. And the graph card will redraw itself on every entity’s change - which will cause flickering. Same about a gauge card inside CTC (if someone decides place it).
A possible correct way - place ONLY the card with dynamic element inside CTC. Or do not use CTC - use other cards supporting templates like a markdown.
That was a most important observation.
Other things - like “card-mod”, “use or not layout-card” - are a matter of personal taste / choice / educational goals.
Call me a HA enthuaist or hobbyist. I am not familiar with scripting in YAML. So for me whatever is easiest and works. But thanks for explanation. Will probably reread this thread a few times some more.
1 Like
There were plenty of similar cases with a floorplan.
This is a picture-elements card with plenty of sub-elements.
And people placed the whole picture-elements card inside CTC and then complained smth like “floorplan constantly flickers”, “a webpage freezes” etc.
Hi…thanks, used your code to create my version … though needed some changes as I have to use :host multiple times as not possible to remove borders otherwise
type: entities
entities:
- type: custom:hui-element
card_type: markdown
content: |
APC --- BX1200 --- {{states('sensor.apc_status')}}
card_mod:
style: |
ha-card {
color: var(--mdc-theme-primary);
border: none;
}
- type: custom:hui-element
card_mod:
style: |
:host {
--stack-card-margin: 50px;
--ha-card-border-radius: 22px;
--ha-card-border-width: 0px;
}
card_type: horizontal-stack
cards:
- type: picture
image: /local/images/devices/aps_ups1.jpg
card_mod:
style: |
ha-card {
width: 150px !important;
height: 100px !important;
}
img {
height: 100px !important;
}
- type: custom:button-card
entity: sensor.apc_battery_runtime
name: Remaining
icon: mdi:battery-high
layout: icon_name_state2nd
show_icon: true
show_state: true
- type: custom:bar-card
columns: 2
entity_row: true
positions:
icon: inside
indicator: 'off'
name: inside
value: inside
entities:
- entity: sensor.apc_battery_charge
name: Battery
icon: mdi:battery-high
unit_of_measurement: '%'
severity:
- from: 0
to: 33
color: red
- from: 34
to: 66
color: orange
- from: 67
to: 100
color: green
- entity: sensor.apc_load
name: Load
icon: mdi:gauge
unit_of_measurement: '%'
severity:
- from: 0
to: 33
color: green
- from: 34
to: 66
color: orange
- from: 67
to: 100
color: red
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
ha-card {
--paper-item-icon-color: var(--primary-text-color);
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 22px; /* Adjust the radius as needed */
}
- type: custom:hui-element
card_type: entities
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
entities:
- entity: sensor.apc_input_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.apc_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
- type: section
- type: custom:mini-graph-card
name: Battery last 7 days
card_mod:
style: |
:host {
--ha-card-border-width: 0px;
}
icon: mdi:battery-charging-60
entities:
- entity: sensor.apc_battery_charge
hours_to_show: 168
graph: line
detail: 2
name: 'Battery '
font_size: 80
line_width: 1.5
lower_bound: ~0
show:
extrema: true
icon: true
ok, hope this helps people. Requires some HACS integrations, which all the examples here also require. It’s hard to work out what I have installed too. I guess I should have documented it all: custom:config-template-card, custom:hui-element.
This is a bit more modular that previous examples. In theory, you just change the values of the variables at the top. If you need more or less entities at the bottom, just add or remove. Unfortunately, it’s not easy to make that part dynamic like with a for loop over an array.
oh, and sorry about any spelling mistakes.
type: custom:config-template-card
variables:
ups_picture_url: >-
t => { return
'https://download.schneider-electric.com/files?p_Doc_Ref=APC-MMAE-7TAL33_00&p_File_Type=rendition_369_jpg&default_image=DefaultProductImage.png';
}
entity_ups_name: states['sensor.ups01_name']
entity_ups_type: states['sensor.ups01_apc1500_smart_type']
entity_ups_status: states['sensor.ups01_status']
entity_ups_time_left: states['sensor.ups01_time_left']
ups_time_left_max: 60
ups_time_left_text: t => { return 'Runtime Remaining'; }
bar_card1_sensor: states['sensor.ups01_load']
bar_card1_sensor_text: t => { return 'Load'; }
bar_card1_sensor_units: t => { return '%'; }
bar_card1_sensor_icon: t => { return 'mdi:generator-stationary'; }
bar_card1_sensor_max: 100
bar_card2_sensor: states['sensor.ups01_apc1500_smart_load_watts']
bar_card2_sensor_text: t => { return 'Load'; }
bar_card2_sensor_units: t => { return 'Watts'; }
bar_card2_sensor_icon: t => { return 'mdi:generator-stationary'; }
bar_card2_sensor_max: 1500
entity1: states['sensor.ups01_apc1500_smart_ups_temperature_probe1']
entity1_text: t => { return 'Temperrature Server Cabinet'; }
entity2: states['sensor.ups01_apc1500_smart_ups_temperature_probe2']
entity2_text: t => { return 'Temperrature Ceiling Cavity'; }
entity3: states['sensor.ups01_battery']
entity3_text: t => { return 'Battery Charge'; }
entity4: states['sensor.ups01_input_voltage']
entity4_text: t => { return 'Input Voltage'; }
entity5: states['sensor.ups01_internal_temperature']
entity5_text: t => { return 'Internal Temperature'; }
entity6: states['sensor.ups01_last_self_test']
entity6_text: t => { return 'Last Self Test'; }
entities:
- ${vars['entity_ups_name'].entity_id}
- ${vars['entity_ups_type'].entity_id}
- ${vars['entity_ups_status'].entity_id}
- ${vars['entity_ups_time_left'].entity_id}
- ${vars['bar_card1_sensor'].entity_id}
- ${vars['bar_card2_sensor'].entity_id}
- ${vars['entity1'].entity_id}
- ${vars['entity2'].entity_id}
- ${vars['entity3'].entity_id}
- ${vars['entity4'].entity_id}
- ${vars['entity5'].entity_id}
- ${vars['entity6'].entity_id}
card:
type: entities
title: >-
${ vars['entity_ups_name'].state + ' --- ' + vars['entity_ups_type'].state +
' --- ' + vars['entity_ups_status'].state}
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture
image: ${ ups_picture_url() }
- type: gauge
entity: ${vars['entity_ups_time_left'].entity_id}
max: ${vars['ups_time_left_max']}
name: ${ ups_time_left_text() }
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:bar-card
show_icon: true
align: split
columns: 1
positions:
icon: inside
indicator: inside
name: inside
value: inside
severity:
- value: 50
color: "#3498db"
- value: 75
color: "#f39c12"
- value: 100
color: "#e45e65"
entity: ${vars['bar_card1_sensor'].entity_id}
max: ${vars['bar_card1_sensor_max'])
unit_of_measurement: ${ bar_card1_sensor_units() }
name: ${ bar_card1_sensor_text() }
icon: ${ bar_card1_sensor_icon() }
entity_row: true
hold_action:
action: none
double_tap_action:
action: none
- type: custom:bar-card
show_icon: true
align: split
columns: 1
positions:
icon: inside
indicator: inside
name: inside
value: inside
severity:
- value: 50
color: "#3498db"
- value: 75
color: "#f39c12"
- value: 100
color: "#e45e65"
entity: ${vars['bar_card2_sensor'].entity_id}
max: ${vars['bar_card2_sensor_max'])
unit_of_measurement: ${ bar_card2_sensor_units() }
name: ${ bar_card2_sensor_text() }
icon: ${ bar_card2_sensor_icon() }
entity_row: true
hold_action:
action: none
double_tap_action:
action: none
- type: divider
- entity: ${vars['entity1'].entity_id}
name: ${ entity1_text() }
- entity: ${vars['entity2'].entity_id}
name: ${ entity2_text() }
- entity: ${vars['entity3'].entity_id}
name: ${ entity3_text() }
- entity: ${vars['entity4'].entity_id}
name: ${ entity4_text() }
- entity: ${vars['entity5'].entity_id}
name: ${ entity5_text() }
- entity: ${vars['entity6'].entity_id}
name: ${ entity6_text() }
type or paste code here
With my all due respect - this is one of the most ineffective use of config-template-card (CTC).
Check how the Gauge card behaves, for instance. And how everything flickers.
Ofc your code is a good learning example - but not optimal at all.
CTC should be used as minimal as possible and it should never ever be on the topmost level. Was explained several times in this very thread.