OK, I will try to rewrite it then.
It will be just a “skeleton” code so it could be upgraded if required.
Here is my test example.
I took as an initial example a card which contains a graph.
The result card looks a bit differently than cards described above - but this may be tuned up by card-mod (colors, text-align, font-size, paddings. border-radius etc). The main point is a general idea - how to compose a card, additional styling is a secondary point.
Imho the most proper way is - place all cards in a stack w/o using hacks like “hui-element” card:
type: custom:stack-in-card
keep:
outer_padding: true
cards:
- type: markdown
content: |
APC --- {{states('sensor.ups_model')}} --- {{states('sensor.ups_status')}}
card_mod:
style: |
ha-card {
color: var(--mdc-theme-primary);
}
- type: horizontal-stack
cards:
- type: picture
image: /local/images/devices/ups_sua1500i.png
- type: custom:button-card
entity: sensor.ups_time_left
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.ups_battery
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.ups_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: |
ha-card {
--paper-item-icon-color: var(--primary-text-color);
}
- type: entities
entities:
- entity: sensor.ups_input_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.ups_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
- type: section
- type: custom:mini-graph-card
entities:
- entity: sensor.ups_input_voltage
name: Input Voltage last 7 days
hours_to_show: 0.15
points_per_hour: 240
aggregate_func: last
smoothing: false
line_width: 1
lower_bound: ~0
show:
extrema: true
labels: true
fill: fade
points: false
icon: true
state: false
Here there is no “config-template-card” since the “markdown” card (the only one which is supposed to show states as text labels) supports templates. Also, the “button-card” used for “remaining time” may be also used with a template.
For the graph - use your own “hours_to_show” & “points_per_hour”. Also, you may want to remove “lower_bound” if you are interested to see small deviations.
Icons & UoMs may be parts of sensors - so probably there is no need to specify them in the code (as long as you do not convert values to smth else).
Alternatively (especially if you dislike “stack-in-card”) - place everything inside Entities card and use “custom:hui-element” for the “markdown” & “horizontal-stack” cards.
Here the “Input Voltage” & “Battery Voltage” are placed into the “internal” Entities card (which gives additional paddings; the card is inserted by using “custom:hui-element”); alternatively they may be placed in the same Entities card - then those paddings may be added by card-mod.
type: entities
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
}
entities:
- type: custom:hui-element
card_type: markdown
content: |
APC --- {{states('sensor.ups_model')}} --- {{states('sensor.ups_status')}}
card_mod:
style: |
ha-card {
color: var(--mdc-theme-primary);
}
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture
image: /local/images/devices/ups_sua1500i.png
- type: custom:button-card
entity: sensor.ups_time_left
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.ups_battery
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.ups_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: |
ha-card {
--paper-item-icon-color: var(--primary-text-color);
}
- type: custom:hui-element
card_type: entities
entities:
- entity: sensor.ups_input_voltage
name: Input Voltage
icon: mdi:power-plug
- entity: sensor.ups_battery_voltage
name: Battery Voltage
icon: mdi:battery-charging-high
- type: section
- type: custom:mini-graph-card
entities:
- entity: sensor.ups_input_voltage
name: Input Voltage last 7 days
hours_to_show: 0.15
points_per_hour: 240
aggregate_func: last
smoothing: false
line_width: 1
lower_bound: ~0
show:
extrema: true
labels: true
fill: fade
points: false
icon: true
state: false
The card has a bit different view because paddings are different. This may be tuned up by card-mod.
P.S. Do not have a card for UPS in my HA setup since my SMT1500i, SMT750i cannot be integrated with HA. So, cannot share my own experience.
P.P.S. Found a typo in my test code - it should be “SMT1500i” instead of “SUA1500i”, these are different models (btw, SUA may be integrated with HA).