Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idaho/hassio-trash-card
TrashCard - indicates what type of trash will be picked up next based on your calendar entries 🗑️
https://github.com/idaho/hassio-trash-card
calendar card frontend hacs hassio home-assistant lovelace lovelace-custom-card mushroom paper trash waste
Last synced: 5 days ago
JSON representation
TrashCard - indicates what type of trash will be picked up next based on your calendar entries 🗑️
- Host: GitHub
- URL: https://github.com/idaho/hassio-trash-card
- Owner: idaho
- License: apache-2.0
- Created: 2023-08-15T10:17:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-16T05:59:45.000Z (28 days ago)
- Last Synced: 2024-10-18T19:53:23.618Z (25 days ago)
- Topics: calendar, card, frontend, hacs, hassio, home-assistant, lovelace, lovelace-custom-card, mushroom, paper, trash, waste
- Language: TypeScript
- Homepage:
- Size: 3.18 MB
- Stars: 136
- Watchers: 5
- Forks: 18
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🗑️ TrashCard
[![GitHub Release][releases-shield]][releases]
[![License][license-shield]](LICENSE)
[![hacs_badge](https://img.shields.io/badge/HACS-DEFAULT-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)![Project Maintenance][maintenance-shield]
[![GitHub Activity][commits-shield]][commits]
![downloads][downloads-badge]
![Build][build-badge]---
---
### 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**
- Colors, icons and text for residual, organic, paper waste and recycling events.
- Colors and icons for all custom events.
- A filter for events.## Pre-Requirements
TrashCard requires:
- The [Home Assistant calendar integration](https://www.home-assistant.io/integrations/#calendar).Once you have both of these installed, you can install TashCard either:
- Through HACS.
- Manually.## Installation
### HACS
TrashCard is available in [HACS][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][release-url] 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:**
- _Settings_ → _Dashboards_ → _More Options icon_ → _Resources_ → _Add Resource_ → Set _Url_ as `/local/trashcard.js` → Set _Resource type_ as `JavaScript 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 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](https://github.com/user-attachments/assets/576d7446-c759-494b-996e-e60afd9210c7)
**Note:**
- When adding the dates, the events must be set to “Full day”.
- The event name (in the “summary” field) must be the same name as the type of collection event.
- Up to five different types of collection events are supported (Garbage, recycling, organic waste etc.).
- Repeating events are supported.## 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.
| Name | Type | Default | Description |
| :------------------ | :-------------------------------------------------- | :---------- | :---------------------------------------------------------------------------------- |
| `entities` | array of strings | Required | The calendar(s) containing the collection events. |
| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layouts 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 and display events from the calendar by names (if at least one is defined). |
| `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 that aren't full 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 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_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 icon. |
| `refresh_rate` | integer | 60 | Check for changes in the calendar every x minutes. By default it 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 display the label in the card or chip style. |
| `pattern` | array of [Pattern](#pattern) | Required | Pattern to detect the kind of trash and how to display it.|#### Pattern
| Name | Type | Default | Description |
| :------------------ | :-------------------------------------------------- | :---------- | :---------------------------------------------------------------------------------- |
| `type` | `organic`, `paper`, `recycle`, `waste`, `others`, `custom` | Required | Label which should be shown. |
| `label` | string | Required | The label that will be displayed. |
| `icon` | string | Required | The icon that will be displayed. |
| `color` | string | Required | The background color of the card. |
| `pattern` | string | Required | Pattern used to detect and display an event type. (Is tested against the calendar entry title). |
| `picture` | string | Optional | Picture URL do display an image instead of an icon. |#### Other type trash configuration
| Name | Type | Default | Description |
| :------------------ | :-------------------------------------------------- | :---------- | :---------------------------------------------------------------------------------- |
| `icon` | string | Required | The icon that will be displayed. |
| `color` | string | Required | The 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](https://github.com/user-attachments/assets/6d72dce1-f2d4-4c7f-a4af-be42c95068b8)### Example TrashCard configuration that displays the events shown above
![image](https://github.com/user-attachments/assets/a40f01bb-3630-4a89-9eee-ac88bbd0d7e8)### Output of the configuration above, using a custom picture instead of an icon
![image](https://github.com/user-attachments/assets/3edb54f2-7232-4d20-8b48-bc947e7abddc)### Example YAML configuration
```yaml
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
### Layout: chips
### Layout: cards
![layout-cards](https://github.com/idaho/hassio-trash-card/assets/664101/f3f3130c-172f-42dc-aaca-2bc0c9a3bc26)### Using pictures instead of icons
[commits-shield]: https://img.shields.io/github/commit-activity/y/idaho/hassio-trash-card.svg?style=for-the-badge
[commits]: https://github.com/idaho/hassio-trash-card/commits/main
[license-shield]: https://img.shields.io/github/license/idaho/hassio-trash-card.svg?style=for-the-badge
[maintenance-shield]: https://img.shields.io/maintenance/yes/2024.svg?style=for-the-badge
[releases-shield]: https://img.shields.io/github/release/idaho/hassio-trash-card.svg?style=for-the-badge
[releases]: https://github.com/idaho/hassio-trash-card/releases
[downloads-badge]: https://img.shields.io/github/downloads/idaho/hassio-trash-card/total?style=for-the-badge
[build-badge]: https://img.shields.io/github/actions/workflow/status/idaho/hassio-trash-card/build.yml?label=Build&style=for-the-badge[home-assistant]: https://www.home-assistant.io/
[home-assitant-theme-docs]: https://www.home-assistant.io/integrations/frontend/#defining-themes
[hacs]: https://hacs.xyz
[ui-lovelace-minimalist]: https://ui-lovelace-minimalist.github.io/UI/
[release-url]: https://github.com/idaho/hassio-trash-card/releases