I installed the button-card plug-in form HACS and it is nice!
I tried to create buttons with the status of Hassos resources following the indication on github repo but
no data appears 
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.
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
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"; ]]]'
1 Like
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
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 
does sensor.raspi_temperature exist in your configuration?
Yes I used another external temp sensor and I called it raspi_temperature
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
#...
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 !!! 
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…
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
OK… Thanks again Harry!!
Do you suggest any other add-on for lovelace ? I am very new on Home assistant…
