[custom:button-card] Card Color based on entity attribute

Configuration
1

I’m currently using the Garbage-Collection & button-card to display which bin is due and when.

This has been great so far but due to the UK being so awkward the times they’re collected vary.

image

(Day before & flashes on the day)
image

I’m not too great with the language at the moment … but ideally I’m looking to have a little more warning days before

greater than 3 days = dark
2 and 3 days = highlight
1 day before & the day = highlight and flash

image

type: 'custom:button-card'
entity: sensor.grey_bin
label: |
  [[[
    var bri = states['sensor.grey_bin'].attributes.days;
    return '' + (bri ? bri : '0') + ' Days';
  ]]]
icon: 'mdi:trash-can'
name: GREY
styles:
  card:
    - height: 80px
  label:
    - color: gray
    - font-size: 12px
    - padding: 0px 5px
  name:
    - text-transform: uppercase
    - font-familly: cursive
    - justify-self: centre
    - padding: 0px 7px
    - font-size: 15px
tap_action:
  action: more-info
  service_data:
    entity_id: sensor.grey_bin
show_state: false
show_label: true
state:
  - value: '0'
    color: 'rgb(222, 37, 16)'
    styles:
      card:
        - animation: blink 2s ease infinite
  - value: '1'
    color: 'rgb(222, 95, 16)'
    icon: 'mdi:delete-circle-outline'
  - value: '2'
    color: 'rgb(145, 145, 145)'
    icon: 'mdi:delete-circle'
2

I made small update your cool solution :slight_smile:

  • no need to paste entity name twice
  • different border
  • different shadow

image

type: custom:button-card
entity: sensor.smieci_zmieszane
label: |
  [[[
    var bri = entity.attributes.days;
    return '' + (bri ? bri : '0') + ' Dni';
  ]]]
name: Zmieszane
styles:
  card:
    - height: 80px
  label:
    - color: gray
    - font-size: 12px
    - padding: 0px 5px
  name:
    - font-familly: cursive
    - justify-self: centre
    - padding: 0px 7px
    - font-size: 15px
tap_action:
  action: more-info
show_label: true
state:
  - value: '0'
    color: yellow
    styles:
      card:
        - box-shadow: 0 0 0.95rem 0.2rem deepskyblue
        - border: solid 3px deepskyblue
        - transition: all 1s ease
  - value: '1'
    color: rgb(222, 95, 16)
    icon: mdi:delete-circle-outline
  - value: '2'
    color: rgb(145, 145, 145)
    icon: mdi:delete-circle
1 Like
3

That’s a cool addition !

I’ve slightly changed mine several times and it now looks like this
image
(goes red if within x days)

1 Like
4

can u share ur code?