Think I solved it!
don’t know if it is the best way, but this seems to work:
type: custom:button-card
entity: sensor.envy_inspire_7200e_all_in_one_printer_series_192_168_20_21_toestand
hold_action:
action: navigate
navigation_path: /lovelace/info
name: HP Printer
icon: mdi:printer-outline
color_type: card
show_state: true
show_entity_picture: true
custom_fields:
Number:
card:
type: custom:button-card
entity: sensor.hp_printer_pages_total_remaining
tap_action:
action: none
show_name: false
show_state: true
show_icon: false
show_entity_picture: false
color_type: card
color: rgba(255,255,255,0.8)
styles:
card:
- width: 50px
- height: 25px
- padding: 0px 2px 0px 2px
- font-size: 14px
- text-transform: capitalize
- font-family: Sans-serif
- color: rgba(62, 62, 62, 1.0)
- background-color: rgba(255,255,255,0.8)
- border-color: "#d9d9d9"
- background: |
[[[
if (states['sensor.hp_printer_pages_total_remaining'].state == '0') return 'rgba(247,22,46,0.8)';
]]]
state:
- color: |
[[[
if (states['sensor.hp_printer_pages_total_remaining'].state >= '11') return 'rgba(62, 62, 62, 1.0)';
if (states['sensor.hp_printer_pages_total_remaining'].state >= 5 && states['sensor.hp_printer_pages_total_remaining'].state < 11) return 'rgba(241,104,12,0.8)';
if (states['sensor.hp_printer_pages_total_remaining'].state >= 1 && states['sensor.hp_printer_pages_total_remaining'].state < 5) return 'rgba(247,22,46,0.8)';
if (states['sensor.hp_printer_pages_total_remaining'].state == '0') return 'rgba(62, 62, 62, 1.0)';
else return 'white';
]]]
styles:
card:
- width: 155px
- height: 155px
- margin: 0px
name:
- display: block
- position: absolute
- bottom: 21px
- left: 8px
- font-weight: bold
- font-size: 16px
- font-family: Sans-serif
img_cell:
- margin: 0px
- padding: 0px
state:
- display: block
- position: absolute
- bottom: 5px
- left: 12px
- font-color: rgba(255, 0, 0, 0.8)
- font-size: 14px
- font-family: Sans-serif
- text-transform: capitalize
icon:
- width: 110px
- margin: 0px 0px 1px 0px
custom_fields:
Number:
- display: block
- position: absolute
- top: 8px
- right: 8px
- overflow: hidden
state:
- value: "on"
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_icon-136.png?v=1
- value: ready
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_envy_icon_136.png?v=1
- value: scanprocessing
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_envy_icon_136.png?v=1
- value: copying
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_envy_icon_136.png?v=1
- value: processing
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_envy_icon_136.png?v=1
- value: inpowersave
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/hp_printer_envy_icon_136.png?v=1
Now i would like to do the same with a custom_field without a entity sensor.
But the same code does not work here
type: custom:button-card
entity: sensor.electricity_meter_actief_tarief
name: Energie Meter
icon: mdi:counter
color_type: card
show_state: true
show_entity_picture: true
custom_fields:
ConsumptionW: |
[[[
return `
<ha-card style="width: 75px; height: 25px; padding: 0px 2px 0px 2px;
color: rgba(62, 62, 62, 1.0); background-color: rgba(255,255,255,0.8); border-color: #d9d9d9;
font-size: 14px; text-transform: capitalize; font-family: Sans-serif;">
<span>${states['sensor.electricity_meter_energieverbruik_w'].state} W</span>
</ha-card>`
]]]
styles:
state:
- color: |
[[[
if (states['sensor.electricity_meter_energieverbruik_w'].state >= '2000') return 'rgba(62, 62, 62, 1.0)';
if (states['sensor.electricity_meter_energieverbruik_w'].state >= 1000 && states['sensor.hp_printer_pages_total_remaining'].state < 2000) return 'rgba(241,104,12,0.8)';
else return 'white';
]]]
styles:
card:
- width: 155px
- height: 155px
- margin: "-345px 5px 5px 5px"
name:
- display: block
- position: absolute
- bottom: 21px
- left: 8px
- font-weight: bold
- font-size: 16px
- font-family: Sans-serif
img_cell:
- margin: 0px
- padding: 0px
state:
- display: block
- position: absolute
- bottom: 5px
- left: 12px
- font-size: 14px
- font-family: Sans-serif
- text-transform: capitalize
icon:
- width: 40px
- margin: 0px 0px 5px 0px
custom_fields:
ConsumptionW:
- display: block
- position: absolute
- top: 8px
- right: 8px
- overflow: hidden
state:
- value: normal
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/slimmemeter_slimmelezer_icon_136.png?v=1
- value: low
color: rgba(241,233,233,0.6)
entity_picture: /local/pictures/entities/device/slimmemeter_slimmelezer_icon_136.png?v=1
- value: unavailable
color: rgba(65,65,63,0.8)
entity_picture: /local/pictures/entities/error_icon_136.png?v=1
styles:
card:
- filter: opacity(50%)
img_cell:
- margin: 0px
- padding: 0px
icon:
- width: 70px
- margin: 0px 0px 10px 0px
- value: unknown
color: rgba(65,65,63,0.8)
entity_picture: /local/pictures/entities/question_icon_136.png?v=1
styles:
card:
- filter: opacity(50%)
img_cell:
- margin: 0px
- padding: 0px
icon:
- width: 70px
- margin: 0px 0px 10px 0px
