![new-overview](https://private-user-images.githubusercontent.com/664101/309050875-8adeaf6a-f236-4972-805d-e173c3aa554b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjgyNzQsIm5iZiI6MTcyNDEyNzk3NCwicGF0aCI6Ii82NjQxMDEvMzA5MDUwODc1LThhZGVhZjZhLWYyMzYtNDk3Mi04MDVkLWUxNzNjM2FhNTU0Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwNDI2MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MmQwYzY4YmU4NjQ3NmI5YzU0ZGJkOTJiYmExYWI3MTMxZTZkZTI2OTkxMmE2Y2YzMTBhZGEzNDUyZTgxYTIzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.kxGYNXX9ePWsfsM5x4dmadxjsoBZSq85FqUj7b1yfX0)
TrashCard - is a custom Home Assistant card that shows you the next upcoming or current trash removal appointment. For this purpose a calendar entity is used, in which you have entered all appointments.
See screenshots for what you can do
Features
- Extra color, icon and text for residual, organic, paper waste and recycling
- Color and icon for all other appointments
- Filter out unexpected items
TrashCard requires Mushroom for Home Assistant to be installed. Please follow the installation instructions of Mushroom. Once you have installed Mushroom you can continue install TrashCard using HACS (preferred) or manually.
TrashCard requires a calendar to get its data from. This calendar must be known by Home Assistant as an entity. Check Home Assistant calendar integrations for more information on how to add it.
TrashCard is available in HACS (Home Assistant Community Store).
- Install HACS if you don't have it already
- Open HACS in Home Assistant
- Go to "Frontend" section
- Click button with "+" icon
- Search for "TrashCard"
- Download
trashcard.js
file from the latest release. - Put
trashcard.js
file into yourconfig/www
folder. - Add reference to
trashcard.js
in Dashboard. There's two way to do that:-
Using UI: Settings β Dashboards β More Options icon β Resources β Add Resource β Set Url as
/local/trashcard.js
β Set Resource type asJavaScript Module
. 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
lovelace
section.resources: - url: /local/trashcard.js type: module
-
In order for the Trash card to display informations, they need to be existing in a calendar. Here's some rules to follow when creating the events in your calendar:
- It must be entire day events (only form of events supported at the moment)
- You must use the same event name for the same method of collection. You'll map them later. Right now, the card support up to 5 different type of collections
- You can use repeating events, that's totally fine.
The TrashCard cards can be configured using Dashboard UI editor.
- In Dashboard UI, click 3 dots in top right corner.
- Click Edit Dashboard.
- Click Plus button to add a new card.
- Find the Custom: TrashCard card in the list.
All the options are available in the lovelace editor but you can use yaml
if you want.
Name | Type | Default | Description |
---|---|---|---|
entities |
array of strings | Required | Entities |
layout |
string | Optional | Layout of the card. Vertical, horizontal and default layout are supported |
fill_container |
boolean | false |
Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
filter_events |
boolean | false |
Filter fetched events by patterns (if at least one is defined) before selecting the one to display |
full_size |
boolean | false |
Show the card without the default card margins |
drop_todayevents_from |
time | 10:00:00 |
From what time to hide all-day event (Format hh:mm:ss ) |
use_summary |
boolean | false |
Shows the event summary instead of matched label |
hide_time_range |
boolean | false |
Option to hide the time on events which aren't fill day events |
event_grouping |
boolean | true |
Only display the next event per pattern, otherwise all events during the selected time will be displayed |
next_days |
number | 2 | How many times the card will look into the future to find the next event |
day_style |
default or counter |
default |
Option of how the date of an event should be displayed. default shows the date in date format and counter shows the number of days remaining until the event. |
card_style |
card , chip or icon |
card |
Switch between the events style Standard card , Chip card or a new Icon predefined layout. |
alignment_style |
left , center , right or space |
left |
Switch between alignments on Chip card card_style |
color_mode |
background or icon |
background |
Select whether the color settings should be applied to the background or to the symbol |
refresh_rate |
integer | 60 | Check for changes in the calendar every x minutes, by default we will check every 60 minutes. Values can be set from 5 to 1440. |
debug |
boolean | false |
Option to enable debug mode to help fixing bugs ;) . |
icon_size |
integer | 40 | Size of the icons in px if you choose card_style as icon . |
with_label |
boolean | true |
Option to decide if you want to see the label in the card or the chip style. |
pattern |
array of Pattern | Required | Pattern to detect the kind of trash and how to display it. |
Name | Type | Default | Description |
---|---|---|---|
type |
organic , paper , recycle , waste , others , custom |
Required | Label which should be shown |
label |
string | Required | Label which should be shown |
icon |
string | Required | Icon which should be displayed |
color |
string | Required | Background color of the card which should be used |
pattern |
string | Required | Pattern used to detected to display the apply this trash type. (Is tested against the calendar entry title) |
picture |
string | Optional | picture url to a image to show instead of the icon |
Name | Type | Default | Description |
---|---|---|---|
icon |
string | Required | Icon which should be displayed |
color |
string | Required | Background color of the card which should be used |
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
![layout-icons](https://private-user-images.githubusercontent.com/664101/309051110-b1509694-7ece-49a4-8f84-6298731e315f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjgyNzQsIm5iZiI6MTcyNDEyNzk3NCwicGF0aCI6Ii82NjQxMDEvMzA5MDUxMTEwLWIxNTA5Njk0LTdlY2UtNDlhNC04Zjg0LTYyOTg3MzFlMzE1Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwNDI2MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wYzZiNTY2YWQ1ZGU5MzEwYTY3YTkzZjg2MTE3OTBjZGNhNGEyZTFmYWMzMzJjZDFmN2VhZWM3MDk4OGYxZjJjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bXJAajeFNunuzt0QWYmeZhxEs_c46JEf9qzSa0nbSeU)
![layout-chips](https://private-user-images.githubusercontent.com/664101/309051106-c420d073-c65d-41cc-8d47-c296c1c03fd4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjgyNzQsIm5iZiI6MTcyNDEyNzk3NCwicGF0aCI6Ii82NjQxMDEvMzA5MDUxMTA2LWM0MjBkMDczLWM2NWQtNDFjYy04ZDQ3LWMyOTZjMWMwM2ZkNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwNDI2MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hMWQ5OWJkZjcyNTZiZmRlZWRkM2Y3NGQzNjUxMTNhMjU5OTg1ZGRmZjRmY2RiYTcxYzUwZjU3YjhiZTZhZTMzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.YaDwIAJzWdkWOnTyy3buUBLEVcZCg99zGrdFQKKiBi0)
![with-image](https://private-user-images.githubusercontent.com/664101/309051111-212537e0-65d3-4c2c-a25c-9431d7ff04b9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjgyNzQsIm5iZiI6MTcyNDEyNzk3NCwicGF0aCI6Ii82NjQxMDEvMzA5MDUxMTExLTIxMjUzN2UwLTY1ZDMtNGMyYy1hMjVjLTk0MzFkN2ZmMDRiOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwNDI2MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYTEwMzhkN2NlNDIyMzRhODJlYmNhN2QxNTQxMTEyOTRmNThhMjA2Y2E5YmNmMTg3YTlhNTY5NTQxYTk0MmIxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.MWLn--Tb3ohEXh6Kq0qfEpzezMXMIHwSe8MgRH0lokM)
Thanks go to the team at Mushroom for creating many beautiful cards.