UPS System Monitoring Card

Share your Projects! Dashboards & Frontend
26

You are rigth, sorry.
Here it is:

id: nuc_card
type: custom:config-template-card
variables:
  - states[''sensor.ups1500_status''].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:
  - sensor.ups1500_status
  - 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';
            }
27

Is it your card or taken from somewhere?

28

Yes,
I took from 1st post on this thread, with my entities

Marco

29

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…

30

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';
            }
31

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
32

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.

33

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.

1315639526c8104752d3419c8a97916d8f379a20

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;
        }
34

I have made a post with hopefully better code, I hope you can check it and make any suggestions

35

If you got rid of CTC and using a markdown - this is better.

36

Thanks it works.
1st post have wrong code

Marco

37

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

38

Then you will probably need 3 same cards with diff. inputs, right?

39

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

40

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
41

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?

42

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 :+1:

43

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.

44

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.

45

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.