Button-card HASSOs CPU,SD, Memory Status

I installed the button-card plug-in form HACS and it is nice!
custom_fields_2
I tried to create buttons with the status of Hassos resources following the indication on github repo but
no data appears :frowning:
I discovered that the 3 sensors (sensor.raspi_ram, sensor.rasp_cpu, sensor.raspi_sd ) are not available.
How I can activate them?
Could someone help me ?
Thanks

You need to create those sensors. In fact I think I’m going to do the same thing.

https://www.home-assistant.io/integrations/systemmonitor/

I activated the system monitor and I changed the sensor name in the git project example (i.e. sensor.processor_use instead of sensor_raspi_cpu) but the result is the same :frowning:

following the code

type: 'custom:button-card'
entity: sensor.raspi_temperature
icon: 'mdi:raspberry-pi'
aspect_ratio: 1/1
name: HassOS
styles:
  card:
    - background-color: '#000044'
    - border-radius: 10%
    - padding: 10%
    - color: ivory
    - font-size: 10px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
  grid:
    - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-weight: bold
    - font-size: 13px
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - color: |
        [[[
          if (entity.state < 60) return 'lime';
          if (entity.state >= 60 && entity.state < 80) return 'orange';
          else return 'red';
        ]]]
    - width: 70%
    - margin-top: '-10%'
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
    cpu:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': '[[[ if (states[sensor.processor_use].state > 80) return "red"; ]]]'
    ram:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states[sensor.memory_use_percent].state > 80) return "red";
          ]]]
    sd:
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': '[[[ if (states[sensor.disk_use_percent].state > 80) return "red"; ]]]'

Do you have something similar to this in your sensors part of the configuration?

sensor:
#....
  - platform: systemmonitor
    resources:
      - type: processor_use
      - type: memory_free
      - type: disk_use_percent
        arg: /home
      - type: ipv4_address
        arg: eth0
      - type: last_boot
      

This will create the equivalent sensors in your states list like: sensor.processor_use
You can use these entities in your card configuration.

Hi Harry, yes I have exactly that configuration and I see the value using entity view in lovelace.
But I am not able to create the nice status button using button-card :frowning:

I’m at work right now so can’t really tinker with it. If you don’t find a solution until later today I can maybe check my own config this afternoon.

ok perfect I’ll wait your feedback :slight_smile:

does sensor.raspi_temperature exist in your configuration?

Yes I used another external temp sensor and I called it raspi_temperature :slight_smile:

You only have half the code in your snippet above.
In the documentation there is an extra block of code at the bottom, which defines the values
(same thing happened to me when pasting, for some reason, then went through it and realized i never defined the values)
It works ok with the full code :slight_smile:

#...
  custom_fields:
    temp: >
      [[[
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 12px; height: 12px; color: yellow;">
          </ha-icon><span>${entity.state}°C</span>`
      ]]]
    cpu: >
      [[[
        return `<ha-icon
          icon="mdi:server"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
      ]]]
    ram: >
      [[[
        return `<ha-icon
          icon="mdi:memory"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
      ]]]
    sd: >
      [[[
        return `<ha-icon
          icon="mdi:harddisk"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
      ]]]

I added the remaining code but after saving the code in the lovelace card the big button disappeared :-(.
I reopened the lovelace code and I see some change that lovelace made automatically ( | character instead of >).Following the code:

    custom_fields:
      temp: |
        [[[
         return `<ha-icon
           icon="mdi:thermometer"
           style="width: 12px; height: 12px; color: yellow;">
           </ha-icon><span>${entity.state}°C</span>`
        ]]]
      cpu: |
        [[[
         return `<ha-icon
          icon="mdi:server"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
        ]]]
      ram: |
        [[[ return `<ha-icon
          icon="mdi:memory"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
        ]]]
      sd: |
        [[[ return `<ha-icon
          icon="mdi:harddisk"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
        ]]]  

Are any setting parameters that I need to change ?

Create a yaml file in some code editor.
Fix the whole thing there, and paste it back into the card.
The ui editor doesn’t seem to like it.

This is the code that I check with yaml editor and pasted in lovelace card editor space:

cards:
  - entity: sensor.raspi_temp
    icon: 'mdi:raspberry-pi'
    aspect_ratio: 1/1
    name: HassOS
    styles:
      card:
        - background-color: '#000044'
        - border-radius: 10%
        - padding: 10%
        - color: ivory
        - font-size: 10px
        - text-shadow: 0px 0px 5px black
        - text-transform: capitalize
      custom_fields:
        cpu:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
        ram:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
        sd:
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
        temp:
          - align-self: start
          - justify-self: end
      grid:
        - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      icon:
        - color:
            - - - >-
                  if (entity.state < 60) return 'lime'; if (entity.state >= 60
                  && entity.state < 80) return 'orange'; else return 'red';
        - width: 70%
        - margin-top: '-10%'
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      name:
        - font-weight: bold
        - font-size: 13px
        - color: white
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px

 
    custom_fields:
      cpu: >
        [[[
          return `<ha-icon
            icon="mdi:server"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
        ]]]
      ram: >         
        [[[
          return `<ha-icon
            icon="mdi:memory"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
        ]]]
      sd: >
        [[[
          return `<ha-icon
            icon="mdi:harddisk"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
        ]]]  
      temp: > 
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width: 12px; height: 12px; color: yellow;">
            </ha-icon><span>${entity.state}°C</span>`
        ]]]
    type: custom:button-card
type: horizontal-stack

But the > char is changed with | char.
Do I switch to the raw yaml lovelace mode?
This is a snapshot of the card editor:

Here is my full code:

sensor:
  - platform: systemmonitor
    resources:
      - type: processor_use
      - type: memory_free
      - type: memory_use_percent
      - type: disk_use_percent
        arg: /home
      - type: ipv4_address
        arg: eth0
      - type: last_boot

and the lovelace card

cards:
  - aspect_ratio: 1/1
    custom_fields:
      cpu: |
        [[[
          return `<ha-icon
            icon="mdi:server"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
        ]]]
      ram: |
        [[[
          return `<ha-icon
            icon="mdi:memory"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
        ]]]
      sd: |
        [[[
          return `<ha-icon
            icon="mdi:harddisk"
            style="width: 12px; height: 12px; color: deepskyblue;">
            </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
        ]]]
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width: 12px; height: 12px; color: yellow;">
            </ha-icon><span>${entity.state}°C</span>`
        ]]]
    entity: sensor.cpu_temperature
    icon: 'mdi:raspberry-pi'
    name: Asus TbS
    styles:
      card:
        - background-color: var(--button-card-paper-card-background-color)
        - border-radius: 10%
        - padding: 10%
        - color: ivory
        - font-size: 14px
        - text-shadow: 0px 0px 5px black
        - text-transform: capitalize
      custom_fields:
        cpu:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': >-
              [[[ if (states["sensor.processor_use"].state > 80) return "red";
              ]]]
        ram:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': >-
              [[[ if (states["sensor.memory_use_percent"].state > 80) return
              "red"; ]]]
        sd:
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': >-
              [[[ if (states["sensor.disk_use_percent_home"].state > 80) return
              "red"; ]]]
        temp:
          - align-self: start
          - justify-self: end
      grid:
        - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      icon:
        - color: |
            [[[
              if (entity.state < 60) return 'lime';
              if (entity.state >= 60 && entity.state < 80) return 'orange';
              else return 'red';
            ]]]
        - width: 70%
        - margin-top: '-10%'
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      name:
        - font-weight: bold
        - font-size: 13px
        - color: white
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px
    type: 'custom:button-card'
  - color_type: blank-card
    type: 'custom:button-card'
  - color_type: blank-card
    type: 'custom:button-card'
  - color_type: blank-card
    type: 'custom:button-card'
type: horizontal-stack

Thanks Harry !!! :slight_smile: :smiley:
I copied your snippet and did some small changes.
Now is working !! I don’t know exactly what is the error.
It is impossible to find without run-time debug or log data…

immagine

Hey! Good to know it finally worked Pasquale.
To be honest I think the ui code editor was freaking out with the somewhat complex code of button cards.
It would have probably worked easier if we applied it to the raw editor.

Sure! I am only curious to know what is the error and how to find it.
Do you have any best practices for writing and debug lovelace HMI ?
For the config, automation, script…(yaml files) I normally use log files but for lovelace HMI what do you suggest? Thanks

I dont’t have anything handy. Besides the basic checks performed by the ui when entering basic ui yaml, if we start fiddling with extra addons i think it comes down to your own eyes :slight_smile:

OK… Thanks again Harry!!
Do you suggest any other add-on for lovelace ? I am very new on Home assistant…

Here are the ones i use: