Yes,
I took from 1st post on this thread, with my entities
Marco
First entity is duplicated, fix this first and remove the first entity from both variables and entities sections at the top of the code. If still not showing it means one or more of the entities you have at the top does not exist, you can remove them 1 at a time if you need to then you can see what one is causing the error…
Hi,
replaced 1st entity and removed one by one, but still not work. All entities exist, and work, they are used in another UPS card I have
id: nuc_card
type: custom:config-template-card
variables:
- states[''input_text.termostato_stato''].state
- states[''sensor.ups1500_status''].state
- states[''sensor.ups1500_battery_level''].state
- states[''sensor.ups1500_load''].state
- states[''sensor.ups1500_line_voltage''].state
- states[''sensor.ups1500_battery_voltage''].state
entities:
- input_text.termostato_stato
- sensor.ups1500_status
- sensor.ups1500_battery_level
- sensor.ups1500_load
- sensor.ups1500_line_voltage
- sensor.ups1500_battery_voltage
card:
type: entities
show_header_toggle: 'off'
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
entities:
- type: section
style: |
.label {
text-align: center !important;
margin-left: 0px !important;
font-size: 17px !important;
}
label: ${ 'APC --- ' + vars[0] + ' --- ' + vars[1] }
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: picture
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
}
image: /local/wifi-guest.png
- type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid: null
card:
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
icon:
- padding: 10px 0px 0px
- height: 40px
- width: 40px
state:
- padding: 10px 0px 0px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 14px
name:
- padding: 20px 0px 0px
- justify-self: start
entity: sensor.ups1500_runtime_left
name: 'Remaining:'
icon: mdi:battery-high
- type: horizontal-stack
cards:
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
bar-card-name {
margin-left: -10px;
}
entity: sensor.ups1500_battery_level
name: Battery
icon: mdi:battery-high
entity_row: true
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 100
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
bar-card-name {
margin-left: -10px;
}
entity: sensor.ups1500_load
name: Load
entity_row: true
- type: entities
entities:
- entity: sensor.ups1500_line_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.ups1500_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color)';
--ha-card-box-shadow: 'none';
}
I see the problem now, variables should be like this:
variables:
- states['input_text.termostato_stato'].state
- states['sensor.ups1500_status'].state
- states['sensor.ups1500_battery_level'].state
- states['sensor.ups1500_load'].state
- states['sensor.ups1500_line_voltage'].state
- states['sensor.ups1500_battery_voltage'].state
1 Like
You are making a big mistake using this code. Care to read a bit more than the 1st post. And suggest to read docs for config-template-card - you will see that it is not needed to use it where it is NOT needed to use it.
Optimised code!
For those using this card already or for those that want to implement this card I have changed the code to something newer which hopefully is better (I am open to more suggestions). The card will look the same as before. I have made all entities that you need to change in capital letters to make it easier.
type: entities
card_mod:
style: |
div#states.card-content {
padding: 0px 16px 16px 16px !important;
}
entities:
- type: custom:hui-element
card_type: markdown
content: |
APC --- {{states('sensor.UPS_MODEL')}} --- {{states('sensor.UPS_STATUS')}}
card_mod:
style: |
ha-card.type-markdown {
font-size: 17px !important;
display: flex !important;
justify-content: center !important;
}
ha-card {
border-width: 0px !important;
}
ha-markdown {
padding: 16px 16px 0px !important;
}
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 50% 50%
place-items: center
cards:
- type: picture
image: /local/images/UPS_IMAGE.png
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
- type: custom:button-card
entity: sensor.BATTERY_REMAINING_TIME
name: 'Remaining:'
icon: mdi:battery-high
layout: icon_name_state2nd
show_icon: true
show_state: true
card_mod:
style: |
ha-card {
border-width: 0px !important;
place-self: flex-start !important;
}
div#name.ellipsis {
place-self: flex-start !important;
}
div#state.ellipsis {
place-self: flex-start !important;
}
- type: custom:bar-card
columns: 2
entity_row: true
positions:
icon: inside
indicator: 'off'
name: inside
value: inside
entities:
- entity: sensor.BATTERY_REMAINING_PERCENTAGE
name: Battery
icon: mdi:battery-high
unit_of_measurement: '%'
severity:
- from: 0
to: 17
color: '#d70000'
- from: 18
to: 34
color: '#d45e00'
- from: 35
to: 51
color: '#cf9000'
- from: 52
to: 68
color: '#cfd300'
- from: 69
to: 84
color: '#84cf00'
- from: 85
to: 100
color: '#30d000'
- entity: sensor.UPS_LOAD
name: Load
icon: mdi:gauge
unit_of_measurement: '%'
severity:
- value: 50
color: '#3498db'
- value: 75
color: '#f39c12'
- value: 100
color: '#e45e65'
card_mod:
style: |
ha-card {
--paper-item-icon-color: var(--primary-text-color);
border-width: 0px !important;
}
- type: custom:hui-element
card_type: entities
entities:
- entity: sensor.UPS_INPUT_VOLTAGE
name: Input Voltage
- entity: sensor.UPS_BATTERY_VOLTAGE
name: Battery Voltage
card_mod:
style: |
ha-card {
--paper-item-icon-color: var(--primary-text-color);
border-width: 0px !important;
}
I have made a post with hopefully better code, I hope you can check it and make any suggestions
If you got rid of CTC and using a markdown - this is better.
Thanks it works.
1st post have wrong code
Marco
Hi,
I have seen from reading this top to bottom and there is quite few constructive criticisims. I like the card front end and I got 3 UPS setup with NUT communicating via UPS and tied into the same integration in HA.
My ask is what card would work best as there has been a lot of back and forth. I would just like to see the “polished or finished look” for CyberPower NAS’s. thanks
Then you will probably need 3 same cards with diff. inputs, right?
I have separate instances for each NUT via the integration. Sensors name vary a bit, but it works. NUT seems to do the heavy lifting for me. Each ups lives in a different spot in HA on Dashboard, but yes. I figured for starters lets get one that is working correctly. Then worry about the other 2.
Actually I might need 5 when its all said and done. I got 2 other UPS’s that run as part of a package. If your curious — Home Assistant sensors and CyberPower UPS via RMCARD205 – Peter Kieser
If you need 5 similar cards with diff inputs - consider using a decluttering-card.
As for “which card to declutter” - there are some cards presented here, test them one by one.
It is up to you / your education which way to choose - either “give me a working solution” or “I will test variants by myself & choose”.
1 Like
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