Skip to content

Custom-card "Waste collection"

This is a custom-card to show the next waste collection date. It uses the data from the custom_component "Waste Collection Framework".

Credits

Author: Paddy0174 - 2021 Version: 1.0.0

Changelog

1.0.0 Initial release
1.0.1 Fix for UI Minimalist v1.0.1.
1.0.2 Fixed the bug where card doesn't show at all

Usage

- type: custom:button-card
  template:
    - custom_card_paddy_waste_collection
  entity: sensor.waste_collection_paper

Requirements

This card needs the following to function correctly:

Component / card required Link
Waste Collection Schedule Framework yes more info

Variables

Variable Example Required Explanation
entity sensor.waste_collection_paper yes Your waste collection sensor. See HA example on how to configure.
ulm_card_generic_swap_name Paper no
ulm_card_generic_swap_icon mdi:trash-can no

Template code

Template Code
custom_card_paddy_waste_collection.yaml
---
custom_card_paddy_waste_collection:
  template:
    - "card_generic_swap"
  variables:
    ulm_card_generic_swap_name: "[[[ return entity.name; ]]]"
    ulm_card_generic_swap_icon: "[[[ return entity.icon; ]]]"
  state:
    - operator: "template"
      value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - position: "absolute"
            - left: "38px"
            - top: "8px"
            - height: "16px"
            - width: "16px"
            - border: "2px solid var(--card-background-color)"
            - font-size: "12px"
            - line-height: "14px"
            - z-index: "1"
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
    - operator: "template"
      value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - position: "absolute"
            - left: "38px"
            - top: "8px"
            - height: "16px"
            - width: "16px"
            - border: "2px solid var(--card-background-color)"
            - font-size: "12px"
            - line-height: "14px"
            - z-index: "1"
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
    - value: "unavailable"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - position: "absolute"
            - left: "38px"
            - top: "8px"
            - height: "16px"
            - width: "16px"
            - border: "2px solid var(--card-background-color)"
            - font-size: "12px"
            - line-height: "14px"
            - z-index: "1"
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              state:
                - operator: "template"
                  value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
                  styles:
                    img_cell:
                      - background-color: "rgba(var(--color-red),0.5)"
                    icon:
                      - color: "rgba(var(--color-red),1)"
                - operator: "template"
                  value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
                  styles:
                    img_cell:
                      - background-color: "rgba(var(--color-red),0.05)"
                    icon:
                      - color: "rgba(var(--color-red),1)"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
    notification: >
      [[[
        if (entity.state == 'unavailable' || states[entity.entity_id].attributes.daysTo == 0 || states[entity.entity_id].attributes.daysTo == 1){
          return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
        }
      ]]]

HomeAssistant

This is my sensor setup in HA. I do the change from "days" to "friendly days" in my template sensor.

Note

  • Don't forget to set add_days_to in your sensor config
  • "HEUTE" is german for today or aujourd'hui
  • "MORGEN" is german for tomorrow or demain
sensor:
  - platform: waste_collection_schedule
    name: waste_collection_paper
    details_format: upcoming
    add_days_to: true # this line is important
    value_template: >-
      {% if value.daysTo == 0 %}
      HEUTE
      {% elif value.daysTo == 1 %}
      MORGEN
      {% else %}
      in {{value.daysTo}} Tagen
      {% endif %}
    types:
      - Papiertonne

Notes

n/a