Update the state in custom field

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:

Here is the solution, just in case someone is interested…

          custom_fields:
            cpu: |
              [[[ 
                if (states["binary_sensor.desktoppc_ping"].state === 'off') return `<ha-icon icon="mdi:cpu-32-bit" style="width: 12px; height: 12px; color: rgb(100, 100, 100);"></ha-icon><span style="text-transform: lowercase; color: rgb(100, 100, 100);"> n/a</span>`;
                return `<ha-icon icon="mdi:cpu-32-bit" style="width: 12px; height: 12px; color: deepskyblue;"></ha-icon><span style="color: var(--text-color-sensor);"> ${states['sensor.marosdesk_cpu_usage'].state}%</span>`
              ]]]
1 Like