Thank you @pcwii I’ve managed to get this:
In addition, I’ve modified your code to look more like this
type: custom:vertical-stack-in-card
title: Denvale Waste Collection
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.recycling_days
below: 15
card:
type: picture-elements
image: /local/pictures/RecyclingBin.jpg
elements:
- type: state-label
entity: sensor.recycling_date
style:
top: 66%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: state-label
entity: sensor.recycling_days
style:
top: 22%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.greenbin_days
below: 15
card:
type: picture-elements
image: /local/pictures/GreenBin.jpg
elements:
- type: state-label
entity: sensor.greenbin_date
style:
top: 66%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: state-label
entity: sensor.greenbin_days
style:
top: 22%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.garbage_days
below: 15
card:
type: picture-elements
image: /local/pictures/GarbageBin.jpg
elements:
- type: state-label
entity: sensor.garbage_date
style:
top: 66%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: state-label
entity: sensor.garbage_days
style:
top: 22%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.yardwaste_days
below: 15
card:
type: picture-elements
image: /local/pictures/paperbags.jpeg
elements:
- type: state-label
entity: sensor.yardwaste_date
style:
top: 66%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: state-label
entity: sensor.yardwaste_days
style:
top: 22%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.christmastree_days
below: 15
card:
type: picture-elements
image: /local/pictures/christmastree.jpg
elements:
- type: state-label
entity: sensor.christmastree_date
style:
top: 66%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
- type: state-label
entity: sensor.christmastree_days
style:
top: 22%
left: 50%
background: rgba(0, 0, 0, 0.3)
color: '#FFFFFF'
This makes the mini card elements conditional on whether there is less than 15 days to go. As you can see yard waste in Toronto is currently 75 days away. So with the conditional modification the card automatically looks like this:
So eventually the Christmas Tree will also automatically disappear until a relevant time next year. And Yard Waste will show up when it’s more relevant. I decided to keep everything within 2 weeks because that’s what me and my wife are usually focused on (the green bin is constant but the blue and garbage bins alternate between weeks). I think this will be more intuitive for her.
I did not use your local calendar suggestion because that ignored the feed from waste_collection_schedule. However in order to use that schedule with your ideas I had to put the following into my configurational.yaml (I put this for others in case useful):
waste_collection_schedule:
sources:
- name: toronto_ca
args:
street_address: [xx] Denvale Rd
sensor:
- platform: waste_collection_schedule
name: garbage_days
details_format: appointment_types
value_template: "{{ value.daysTo }}"
types:
- Garbage
- platform: waste_collection_schedule
name: garbage_date
details_format: appointment_types
value_template: '{{value.date.strftime("%a %b %-d")}}'
types:
- Garbage
- platform: waste_collection_schedule
name: recycling_days
details_format: appointment_types
value_template: "{{ value.daysTo }}"
types:
- Recycling
- platform: waste_collection_schedule
name: recycling_date
details_format: appointment_types
value_template: '{{value.date.strftime("%a %b %-d")}}'
types:
- Recycling
- platform: waste_collection_schedule
name: greenbin_days
details_format: appointment_types
value_template: "{{ value.daysTo }}"
types:
- GreenBin
- platform: waste_collection_schedule
name: greenbin_date
details_format: appointment_types
value_template: '{{value.date.strftime("%a %b %-d")}}'
types:
- GreenBin
- platform: waste_collection_schedule
name: yardwaste_days
details_format: appointment_types
value_template: "{{ value.daysTo }}"
types:
- YardWaste
- platform: waste_collection_schedule
name: yardwaste_date
details_format: appointment_types
value_template: '{{value.date.strftime("%a %b %-d")}}'
types:
- YardWaste
- platform: waste_collection_schedule
name: christmastree_days
details_format: appointment_types
value_template: "{{ value.daysTo }}"
types:
- ChristmasTree
- platform: waste_collection_schedule
name: christmastree_date
details_format: appointment_types
value_template: '{{value.date.strftime("%a %b %-d")}}'
types:
- ChristmasTree
Final note for other noobs like me. /local maps to homeassistant/www/ when you upload your images. At least that’s true for me (running HAOS on Synology VMM).
Despite having some success with your help I’m still pretty clueless about how you made your “today/tomorrow” labels. Right now my card just shows the # of days, but without even saying days. Could you give me some hints on how to make that label more like yours?
