Hi,
I’m struggling with some of my buttons. I have created the customized button with custom fields displaying some information about the state of my pc (cpu, mem, disk). All works great, however, when I turn the pc off the state information still remains (i.e. it still show CPU:2%, RAM:29%). I would prefer after the pc is turned off the state of custom field changed to CPU: n/a, RAM: n/a. Can someone help how to change my code?
aspect_ratio: 2/1
template: black_larger_template
entity: switch.lamppcdesk
lock:
enabled: true
custom_fields:
cpu: |
[[[
return `<span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.marosdesk_cpu_usage'].state}%</span></span>`
]]]
ram: |
[[[
return `<span>MEM: <span style="color: var(--text-color-sensor);">${states['sensor.marosdesk_memory_usage'].state}%</span></span>`
]]]
vol: |
[[[
return `<span>C Drive: <span style="color: var(--text-color-sensor);">${states['sensor.marosdesk_storage_c_used_space'].state}%</span></span>`
]]]
lbl: |
[[[
return `<span style="color: var(--text-color-sensor);">${states['binary_sensor.desktoppc_connected'].state}</span>`
]]]
icon: 'mdi:desktop-classic'
name: Desktop PC
styles:
grid:
- grid-template-areas: '"lbl n" "i cpu" "i ram" "i vol"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content
label:
- align-self: middle
- padding-top: 0px
- padding-bottom: 0px
- padding-left: 15px
- justify-self: start
- font-size: 15px
custom_fields:
cpu:
- padding-bottom: 0px
- padding-top: 0px
- align-self: middle
- font-size: 15px
- justify-self: end
- color: white
- '--text-color-sensor': >-
[[[ if (states["sensor.marosdesk_cpu_usage"].state > 40) return
"orange"; if (states["sensor.marosdesk_cpu_usage"].state > 80) return
"red"; else return 'white'; ]]]
ram:
- padding-bottom: 0px
- padding-top: 0px
- align-self: middle
- font-size: 15px
- justify-self: end
- color: white
- '--text-color-sensor': >-
[[[ if (states["sensor.marosdesk_memory_usage"].state > 40) return
"orange"; if (states["sensor.marosdesk_memory_usage"].state > 80)
return "red"; else return 'white'; ]]]
vol:
- padding-bottom: 0px
- padding-top: 0px
- font-size: 15px
- align-self: middle
- justify-self: end
- color: white
- '--text-color-sensor': >-
[[[ if (states["sensor.marosdesk_storage_c_used_space"].state > 85)
return "red"; ]]]
lbl:
- align-self: middle
- padding-top: 0px
- padding-bottom: 0px
- padding-left: 15px
- justify-self: start
- font-size: 15px
type: 'custom:button-card'
here how it looks now: