Home

Awesome

🗑️ TrashCard

GitHub Release License hacs_badge

Project Maintenance GitHub Activity downloads Build

<a href="https://www.buymeacoffee.com/idaho" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>


<img width="510" alt="new-overview" src="https://github.com/idaho/hassio-trash-card/assets/664101/8adeaf6a-f236-4972-805d-e173c3aa554b">

Never forget garbage collection day again!

TrashCard is a custom Home Assistant card that displays the your current and upcoming trash collection schedule. It uses events contained within the local calendar integration to display the information.

Features

Pre-Requirements

TrashCard requires:

Once you have both of these installed, you can install TashCard either:

Installation

HACS

TrashCard is available in HACS (Home Assistant Community Store).

  1. Install HACS if you haven’t already.
  2. Open HACS in Home Assistant.
  3. Go to the "Frontend" section.
  4. Click the "+" icon.
  5. Search for "TrashCard".

Manual

  1. Download the latest latest release of trashcard.js from the GitHub repository.
  2. Add trashcard.js into your config/www folder.

You must then add a reference to trashcard.js in your Dashboard. There are two methods for doing this:

Using the UI:

Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile

Using YAML:

Add following code to the lovelace section in configuration.yaml:

  ```yaml
  resources:
    - url: /local/trashcard.js
      type: module
  ```

Usage

Create events in your calendar

In order for TrashCard to display information, your garbage collection schedule needs to be added in the local calendar. Creating a dedicated “Garbage collection” calendar for this purpose is a good way to keep things organised.

image

Note:

Configuration

The TrashCard cards can be configured using the Dashboard UI editor.

Add a new card

  1. In the Dashboard UI, select "Edit Dashboard" in top right corner.
  2. Click the "+Add Card" button.
  3. Find the Custom: TrashCard card in the list.
  4. Set the entity to the calendar that contains the collection events.
  5. Configure the display settings of the card using the options.

All the options listed below are available in the lovelace editor, but configuring via yaml is supported too.

NameTypeDefaultDescription
entitiesarray of stringsRequiredThe calendar(s) containing the collection events.
layoutstringOptionalLayout of the card. Vertical, horizontal and default layouts are supported.
fill_containerbooleanfalseFill container or not. Useful when card is in a grid, vertical or horizontal layout.
filter_eventsbooleanfalseFilter and display events from the calendar by names (if at least one is defined).
full_sizebooleanfalseShow the card without the default card margins.
drop_todayevents_fromtime10:00:00From what time to hide all-day event (Format hh:mm:ss).
use_summarybooleanfalseShows the event summary instead of matched label.
hide_time_rangebooleanfalseOption to hide the time on events that aren't full day events.
event_groupingbooleantrueOnly display the next event per pattern, otherwise all events during the selected time will be displayed.
next_daysnumber2How many times the card will look into the future to find the next event.
day_styledefault or counterdefaultOption for how the date of an event should be displayed. default shows the date in date format and counter shows the number of days remaining before the event.
card_stylecard, chip or iconcardSwitch between the events style Standard card, Chip card or a new Icon predefined layout.
alignment_styleleft, center, right or spaceleftSwitch between alignments on Chip card card_style.
color_modebackground or iconbackgroundSelect whether the color settings should be applied to the background or to the icon.
refresh_rateinteger60Check for changes in the calendar every x minutes. By default it will check every 60 minutes. Values can be set from 5 to 1440.
debugbooleanfalseOption to enable debug mode to help fixing bugs ;) .
icon_sizeinteger40Size of the icons in px if you choose card_style as icon .
with_labelbooleantrueOption to display the label in the card or chip style.
patternarray of PatternRequiredPattern to detect the kind of trash and how to display it.

Pattern

NameTypeDefaultDescription
typeorganic, paper, recycle, waste, others, customRequiredLabel which should be shown.
labelstringRequiredThe label that will be displayed.
iconstringRequiredThe icon that will be displayed.
colorstringRequiredThe background color of the card.
patternstringRequiredPattern used to detect and display an event type. (Is tested against the calendar entry title).
picturestringOptionalPicture URL do display an image instead of an icon.

Other type trash configuration

NameTypeDefaultDescription
iconstringRequiredThe icon that will be displayed.
colorstringRequiredThe background color of the card.

Example calendar events

The red and yellow bins are collected every fortnight on Thursdays. The red and green bins are collected every other fortnight on Thursdays. image

Example TrashCard configuration that displays the events shown above

image

Output of the configuration above, using a custom picture instead of an icon

image

Example YAML configuration

type: custom:trash-card
entities:
  - calendar.mags_abfuhrtermine
layout: vertical
event_grouping: true
drop_todayevents_from: '10:00:00'
next_days: 300
day_style: counter
card_style: card
color_mode: background
items_per_row: 4
refresh_rate: 60
with_label: true
filter_events: false
use_summary: false
hide_time_range: false
pattern:
  - label: Organic
    icon: mdi:flower
    pattern: braun
    color: light-green
    type: organic
  - label: Paper
    icon: mdi:newspaper-variant-multiple-outline
    color: indigo
    pattern: blau
    type: paper
  - label: Recycling
    pattern: gelb
    icon: mdi:recycle-variant
    color: amber
    type: recycle
  - pattern: grau
    icon: mdi:trash-can
    label: Waste
    color: dark-grey
    type: waste
  - icon: mdi:dump-truck
    color: purple
    type: others
  - label: Electric
    icon: mdi:electron-framework
    color: pink
    type: custom
    pattern: elektro

Icons and Layouts

Layout: icons

<img width="482" alt="layout-icons" src="https://github.com/idaho/hassio-trash-card/assets/664101/b1509694-7ece-49a4-8f84-6298731e315f">

Layout: chips

<img width="1043" alt="layout-chips" src="https://github.com/idaho/hassio-trash-card/assets/664101/c420d073-c65d-41cc-8d47-c296c1c03fd4">

Layout: cards

layout-cards

Using pictures instead of icons

<img width="1032" alt="with-image" src="https://github.com/idaho/hassio-trash-card/assets/664101/212537e0-65d3-4c2c-a25c-9431d7ff04b9"> <!-- Badges --> <!-- References -->