Thought I would share a Custom Garbage Collection card made with picture elements card.
This card is 3 picture elements cards (Recycling, Fogo and Rubbish), contained within a grid card.
The grid card is nested in a conditional card. You can use both cards together on a page that is in panel view.
The conditions achieve the following:
- If both cards are place in a panel view,
media_query:will display the right card depending on your screen width - The
conditions or:use sensors created from Waste Collection Schedule, this does have a growing list supported areas that can be automatically configured but I have setup a custom source and sensors.
Waste Collection Schedule Sensors (Used for Conditional Logic and Displaying Days)
Sensors goes in configuration.yaml
sensor:
# Sensor next rubbish collection
- platform: waste_collection_schedule
name: Rubbish & FOGO
source_index: 0
details_format: "generic"
add_days_to: true
value_template: "{% if value.daysTo == 0 %}Today{% elif value.daysTo == 1 %}Tomorrow{% else %}in {{value.daysTo}} days{% endif %}"
types:
- Rubbish & FOGO
# Sensor next recycling collection
- platform: waste_collection_schedule
name: Recycling
source_index: 1
details_format: "generic"
add_days_to: true
value_template: "{% if value.daysTo == 0 %}Today{% elif value.daysTo == 1 %}Tomorrow{% else %}in {{value.daysTo}} days{% endif %}"
types:
- Recycling
Waste Collection Schedule Sources (Creates a Calendar Entities)
Sources goes in configuration.yaml
waste_collection_schedule:
sources:
- name: static
calendar_title: Rubbish-Pickup
args:
type: Rubbish & FOGO
frequency: WEEKLY
interval: 2
start: "2025-04-30"
weekdays: WE
- name: static
calendar_title: Recycle-Pickup
args:
type: Recycling
frequency: WEEKLY
interval: 2
start: "2025-04-23"
weekdays: WE
day_switch_time: "12:00"
Ideal for Tablets or Larger Screens
media_query: '(max-width: 767px)' at bottom of card
columns: 3 at bottom of card
3 Column Card
- type: conditional
conditions:
- condition: screen
media_query: '(min-width: 768px)'
- condition: and
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.rubbish_fogo
state: Today
- condition: state
entity: sensor.recycling
state: Today
- condition: state
entity: sensor.rubbish_fogo
state: Tomorrow
- condition: state
entity: sensor.recycling
state: Tomorrow
card:
type: grid
square: false
cards:
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/bc60a4825c7be264567f8cfd6a1e15d2/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
- type: custom:button-card
entity: sensor.recycling
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: RECYCLING
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: goldenrod
card:
- background: transparent
- border-color: transparent
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/dae69f1ef2f6b2900ea8bfdd56415e32/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
- type: custom:button-card
entity: sensor.rubbish_fogo
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: FOGO
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: limegreen
card:
- background: transparent
- border-color: transparent
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/054780d36143d59c36e5a0e92b1077cb/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
- type: custom:button-card
entity: sensor.rubbish_fogo
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: RUBBISH
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: crimson
card:
- background: transparent
- border-color: transparent
columns: 3
Ideal for Phones or Sections View
media_query: '(max-width: 767px)' at bottom of card
columns: 1 at bottom of card
1 Column Card
- type: conditional
conditions:
- condition: screen
media_query: '(max-width: 767px)'
- condition: and
conditions:
- condition: or
conditions:
- condition: state
entity: sensor.rubbish_fogo
state: Today
- condition: state
entity: sensor.recycling
state: Today
- condition: state
entity: sensor.rubbish_fogo
state: Tomorrow
- condition: state
entity: sensor.recycling
state: Tomorrow
card:
type: grid
square: false
cards:
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/bc60a4825c7be264567f8cfd6a1e15d2/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
animation: blink 5s linear infinite
- type: custom:button-card
entity: sensor.recycling
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: RECYCLING
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: goldenrod
card:
- background: transparent
- border-color: transparent
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/dae69f1ef2f6b2900ea8bfdd56415e32/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
- type: custom:button-card
entity: sensor.rubbish_fogo
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: FOGO
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: limegreen
card:
- background: transparent
- border-color: transparent
- type: picture-elements
image: /api/image/serve/15469fa1d08d6b8a134ec8b57a39e81a/512x512
elements:
- type: image
image: >-
/api/image/serve/054780d36143d59c36e5a0e92b1077cb/512x512
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(1, 1)
- type: custom:button-card
entity: sensor.rubbish_fogo
show_state: true
show_icon: false
show_name: false
style:
left: 10%
top: 60%
width: 50%
transform: translate(0%, -50%) scale(1.3, 1.3)
styles:
state:
- color: white
card:
- background: transparent
- border-color: transparent
- type: custom:button-card
label: RUBBISH
show_label: true
style:
left: 10%
top: 30%
width: 50%
transform: translate(0%, -50%) scale(1, 1)
styles:
label:
- color: crimson
card:
- background: transparent
- border-color: transparent
columns: 1
IMAGES USED IN CARD
When editing your Picture Elements Card in UI Mode, you can upload the main background image under card options
and upload an image element for the bins
Transparent Background
Alternate Background
