Hi all
I am stuck on trying to insert a Status field the way i actually would like it in this card’s config:
type: custom:button-card
entity: sensor.rpi_temp_docker01
icon: mdi:raspberry-pi
triggers_update: all
aspect_ratio: 1/1.2
name: Docker01
styles:
card:
- border-radius: 12px
- padding: 3%
- color: ivory
- font-size: 11px
- 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.rpi_cpu_use_docker01"].state > 80) return
"red"; ]]]
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi_mem_used_docker01"].state > 80) return
"red"; ]]]
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.rpi_disk_used_docker01"].state > 80) return
"red"; ]]]
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.rpi_cpu_use_docker01'].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.rpi_mem_used_docker01'].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.rpi_disk_used_docker01'].state}%</span></span>`
]]]
hold_action:
action: call-service
confirmation:
text: You want to SHUTDOWN the host Docker01?
service: script.shutdown_host_docker01
service_data: {}
tap_action:
action: call-service
confirmation:
text: You want to REBOOT the host Docker01?
service: script.reboot_host_docker01
service_data: {}
I know that if i enter in the grid template area “status status” and in the two custom fields section “Status:” and copy/paste the data from one of the other entries as a starting off point i get it to show up and i can replace the copied sensor entry with ‘binary_sensor.docker01_operational_status’ and it will show as on or off but i can’t get it to rename as online or offline or changing colour or flash on the change of state
so basically i would like to combine the information from this card as shown below into the above one, keep the value ‘online’ for on and ‘offline’ for off and have online as lime colour and offline as red, maybe even flashing if thats at all possible?
I don’t care about losing the graph thing at the bottom of the button 
Is it also possible to make the ‘mdi:raspberry-pi’ icon flash red when offline as well?
Many thanks in advance
Daniel
type: custom:mini-graph-card
entities:
- binary_sensor.docker01_operational_status
icon: mdi:network
name: Status
state_map:
- value: 'on'
label: Online
- value: 'off'
label: Offline
align_state: center
line_color: purple
line_width: 8
hours_to_show: 12
points_per_hour: 6
font_size_header: 10
height: 150
animate: true
font_size: 63
show:
extrema: false
points: false
style: |
ha-card .states.flex .state .state__uom.ellipsis {
{% if states('binary_sensor.docker01_operational_status') in ['on'] %}
display: none;
{% endif %}
}
ha-card .states.flex .state .state__value.ellipsis {
{% if states('binary_sensor.docker01_operational_status') in ['on'] %}
color: green;
{% endif %}
}
ha-card .states.flex .state .state__uom.ellipsis {
{% if states('binary_sensor.docker01_operational_status') in ['unavailable','off'] %}
display: none;
{% endif %}
}
ha-card .states.flex .state .state__value.ellipsis {
{% if states('binary_sensor.docker01_operational_status') in ['unavailable','off'] %}
color: red;
animation: blinking 1s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}