Assistance with custom:button-card coding please

Hi all long time reader first time poster :slightly_smiling_face:

I realise it appears i am asking for people to do the work for me and i apologize, it’s just i am a bit Dyslexic and i have tried for weeks scouring the internet, trying to read code examples and programming references and whatnot and i just cannot for the life of me get my head around it.

I have tried myself for weeks to get what i would like done but i seem to do one thing and break another :frowning:

I have a card that in it’s current state looks like this: image

The code is currently configured as:

type: custom:button-card
entity: sensor.rpi_temp_docker01
icon: mdi:raspberry-pi
aspect_ratio: 1/1
name: Docker01
    - border-radius: 10%
    - padding: 3%
    - color: ivory
    - font-size: 11px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
    - 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
    - font-weight: bold
    - font-size: 13px
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
    - justify-content: start
    - align-items: start
    - margin: none
    - color: |
          if (entity.state < 60) return 'lime';
          if (entity.state >= 60 && entity.state < 80) return 'orange';
          else return 'red';
    - width: 70%
    - margin-top: '-10%'
      - align-self: start
      - justify-self: end
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.rpi_cpu_use_docker01"].state > 80) return
          "red"; ]]]
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.rpi_mem_used_docker01"].state > 80) return
          "red"; ]]]
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.rpi_disk_used_docker01"].state > 80) return
          "red"; ]]]
  temp: |
      return `<ha-icon
        style="width: 12px; height: 12px; color: yellow;">
  cpu: |
      return `<ha-icon
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_cpu_use_docker01'].state}%</span></span>`
  ram: |
      return `<ha-icon
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_mem_used_docker01'].state}%</span></span>`
  sd: |
      return `<ha-icon
        style="width: 12px; height: 12px; color: deepskyblue;">
        </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.rpi_disk_used_docker01'].state}%</span></span>`

What i am wanting to do is under “SD” is to add in another entry called “STATUS” which refers to “binary_sensor.docker01_operational_status” - and i would like status to say Online instead of just On and Offline instead of Off. The code of that binary sensor is:

  - platform: ping
    name: "Docker01 Operational Status"
    count: 5
    scan_interval: 30
  - platform: template
        device_class: presence
        value_template: "{{ is_state('binary_sensor.docker01_operational_status','on') }}"

If we need to move the thermometer to get what i would like working we can and place it under the “SD” and “STATUS” area

I would like the icon of the raspberry pi to be GREEN when status of the binary sensor is on and red if the status is off

I would also like to control the card by tapping asking to confirm if i wish to reboot and then run “button.rpi_reboot_docker01_command”

Or if i tap and hold a confirmation if i want to shutdown and then run “button.rpi_shutdown_docker01_command”

Any assistance is very much appreciated and will help me in my way to learn the coding to see the differences of before/after :slight_smile:

Thanking you in advance


I’ll give some guidance, because you are nearly there (and I’m on my phone).

The main things to understand are the grid template areas and custom fields.

In the grid template areas, every bit in double quotes is a row that specifies two columns using existing or custom fields. Just add in before the last single quote "status status". This assumes you’ll create a custom field with that name. This field will span both columns.

To create your new custom field, just copy one of the existing ones under each custom_fields section. Now tweak it by changing the image/icon and using the right sensor.

Thanks very much! managed to get it doing what i wanted to. Also updating HA from 2023.05.4 to 2023.07.01 fixed alot of glitches that was occurring when trying to edit the code.

1 Like