Garbage Collection Schedule

Configuration Frontend
1

Hello
I had a custom card created for my garbage collection that looked like this:

image

Unfortunately I accidentally deleted the page that it appeared on and my installation notes aren’t good enough to help me recreate the card. I’m hoping someone has a similar set up and can provide me with some guidance. Here is some code from the card, however I’m not sure where I enter this. My notes say to add a “Horizontal Stack” card and then add the code:

type: custom:config-template-card
entities:
  - sensor.waste_days
variables:
  DAYS: states['sensor.waste_days'].attributes['days']+'d'
card:
  type: picture-entity
  entity: sensor.waste_days
  name: ${DAYS}
  show_name: true
  show_state: false
  state_image:
    "0": /local/garbage/general_today.png
    "1": /local/garbage/general_tomorrow.png
    "2": /local/garbage/general_off.png

Then I have this code:

- type: horizontal-stack
        cards:
          - type: custom:config-template-card
            entities:
              - sensor.waste_days
            variables:
              DAYS: states['sensor.waste_days'].attributes['days']+'d'
            card:
              type: picture-entity
              entity: sensor.waste_days
              name: ${DAYS}
              show_name: true
              show_state: false
              state_image:
                '0': /local/garbage/general_today.png
                '1': /local/garbage/general_tomorrow.png
                '2': /local/garbage/general_off.png
          - type: custom:config-template-card
            entities:
              - sensor.bio_days
            variables:
              DAYS: states['sensor.bio_days'].attributes['days']+'d'
            card:
              type: picture-entity
              entity: sensor.bio_days
              name: ${DAYS}
              show_name: true
              show_state: false
              state_image:
                '0': /local/garbage/bio_today.png
                '1': /local/garbage/bio_tomorrow.png
                '2': /local/garbage/bio_off.png
          - type: custom:config-template-card
            entities:
              - sensor.recycle_days
            variables:
              DAYS: states['sensor.recycle_days'].attributes['days']+'d'
            card:
              type: picture-entity
              entity: sensor.recycle_days
              name: ${DAYS}
              show_name: true
              show_state: false
              state_image:
                '0': /local/garbage/plast_today.png
                '1': /local/garbage/plast_tomorrow.png
                '2': /local/garbage/plast_off.png

I’m not sure of the steps I need to do to add the correct card(s) to get this to work. Is someone able to tell me using the information I provided? Thanks in advance for any help that can be provided.

2

Here is the yaml that I use in my dashboard but it looks a bit different than yours:

type: horizontal-stack
cards:
  - type: custom:card-templater
    card:
      type: picture-entity
      name_template: "{{ state_attr('sensor.garbage_day_2','days') }} days"
      show_name: true
      show_state: false
      entity: sensor.garbage_day_2
      state_image:
        "0": /local/images/garbage-today-2.gif
        "1": /local/images/garbage-tomorrow-2.gif
        "2": /local/images/garbage-future-2.png
    entities:
      - sensor.garbage_day_2
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          height:80% !important;
        }
        hui-image {
          width: 50%;
        }
  - type: custom:card-templater
    card:
      type: picture-entity
      name_template: "{{ state_attr('sensor.recycling_day_2','days') }} days"
      show_name: true
      show_state: false
      entity: sensor.recycling_day_2
      state_image:
        "0": /local/images/recycling-today-2.gif
        "1": /local/images/recycling-tomorrow-2.gif
        "2": /local/images/recycling-future-2.png
    entities:
      - sensor.recycling_day_2
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
        }
  - type: custom:card-templater
    card:
      type: picture-entity
      name_template: "{{ state_attr('sensor.organic_day','days') }} days"
      show_name: true
      show_state: false
      entity: sensor.organic_day
      state_image:
        "0": /local/images/organics-today-2.gif
        "1": /local/images/organics-tomorrow-2.gif
        "2": /local/images/organics-future-2.png
    entities:
      - sensor.organic_day
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
        }
  - type: custom:card-templater
    card:
      type: picture-entity
      name_template: "{{ state_attr('sensor.yard_waste_day_2','days') }} days"
      show_name: true
      show_state: false
      entity: sensor.yard_waste_day_2
      state_image:
        "0": /local/images/yardwaste-today-2.gif
        "1": /local/images/yardwaste-tomorrow-2.gif
        "2": /local/images/yardwaste-future-2.png
    entities:
      - sensor.yard_waste_day_2
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
        }

I use GIF’s to make my bins flash so don’t be confused as to why mine flash haha

bins

3

Hi ColtonYYZ

I like your flashing GIF’s. I may decide to update my .png files to .gif using Gimp.

I got my install to work.

My notes have been updated:

Instructions:

I have to assume that all the sensors and the “custom:config-template-card” have been setup / added and the pickup dates added to a calendar. The Garbage / Recycle / Waste pictures are in the correct folder.
1.) Go to the “Overview” dashboard and select “Add Card”
2.) Locate the “Manual” card in the list of cards.
3.) Enter yaml code
4.) Press “save”

4

I used a website to create the gifs.

5

Okay. Thanks for the tip. I’ll check it out and thanks again for the help.