Having searched and not found anything that completely matched my circumstances, here is my solution…
I wanted a way to see which waste bins needed putting out each week. My requirements were as follows…
-
Colourful icon based display for my wall mounted tablet
-
Directly linked to council website. A repeating calendar event would be prone to error…
-
Automatically check and display the day before and on the day of collection
-
Clear the display after collection day
I am grateful to the many posts by others, who have produced similar and helped me with mine.
My council (Aylesbury, UK) provide the data on a webpage that populates the required data into a table once you supply the postcode. (No login required, and the URL is fixed)
Firstly, I used the Scrape integration and pointed it to the above link. I collect 4 dates from the site. One for each bin. Using a CSS selector tool in Chrome, it was fairly straightforward to find the correct CSS tags. I’m just collecting the top entry for each bin in the table as this is the next collection date.
An example Select would be…
.collection-results-wrap.hidden-xs > table > tbody > :nth-child(1) > td:nth-child(1)
Next, I needed to convert this text date into a datetime variable. For this I used a value template like this.
{% set date = strptime(value, '%A %d %B') %}
{{ date.replace(year=now().year)}}
The first line uses the strptime function. This has the added advantage, that blank entries don’t cause an error when parsing.
The second line just adds the current year, otherwise the default of 1900 is stored.
Next I created four helper toggle values. One for each bin. These will be the entities I display in the dashboard. I also gave them a trashcan style icon. (mdi:delete)
My automation is time triggered at some point each night. The action is an If/else with some template conditions that check if the stored date is either today or tomorrow. The result is turning on or off the helper toggle for the relevant bin.
{% set date = strptime(states('sensor.waste_bin_date'),'%Y-%m-%d %H:%M:%S') %}
{{ (now().date() + timedelta(days=1)) == date.date() or ((now().date()) == date.date() and (now().hour < 12)) }}
All four bins are checked and toggled in the same automation.
Finally being displayed in the dashboard using a horizontal stack of custom-button cards and custom Stack. (You’ll need to install them from HACS)
type: custom:stack-in-card
title: The Bindicator
mode: horizontal
cards:
- type: custom:button-card
label: Recycling
size: 100px
show_label: true
show_name: false
styles:
card:
- height: 105px
border: 0px
label:
- font-size: 80%
entity: input_boolean.blue_bin
color: rgb(28, 128, 199)
tap_action:
action: toggle
state:
- value: 'off'
icon: mdi:delete-off-outline
color: rgb(0, 0, 0)
styles:
label:
- color: var(--disabled-text-color)
- value: 'on'
icon: mdi:delete
color: rgb(0,0,255)
styles:
label:
- color: var(--text-color)
- type: custom:button-card
label: General
size: 100px
show_label: true
show_name: false
styles:
card:
- height: 105px
border: 0px
label:
- font-size: 80%
entity: input_boolean.green_bin
color: rgb(28, 128, 199)
tap_action:
action: toggle
state:
- value: 'off'
icon: mdi:delete-off-outline
color: rgb(0, 0, 0)
styles:
label:
- color: var(--disabled-text-color)
- value: 'on'
icon: mdi:delete
color: rgb(0,255,0)
styles:
label:
- color: var(--text-color)
- type: custom:button-card
label: Garden
size: 100px
show_label: true
show_name: false
styles:
card:
- height: 105px
border: 0px
label:
- font-size: 80%
entity: input_boolean.brown_bin
color: rgb(28, 128, 199)
tap_action:
action: toggle
state:
- value: 'off'
icon: mdi:delete-off-outline
color: rgb(0, 0, 0)
styles:
label:
- color: var(--disabled-text-color)
- value: 'on'
icon: mdi:delete
color: rgb(150,75,0)
styles:
label:
- color: var(--text-color)
- type: custom:button-card
label: Food
size: 50px
show_label: true
show_name: false
styles:
card:
- height: 105px
border: 0px
label:
- font-size: 80%
entity: input_boolean.food_bin
color: rgb(28, 128, 199)
tap_action:
action: toggle
state:
- value: 'off'
icon: mdi:delete-off-outline
color: rgb(0, 0, 0)
styles:
label:
- color: var(--disabled-text-color)
- value: 'on'
icon: mdi:delete
color: rgb(0,128,0)
styles:
label:
- color: var(--text-color)
The final result…
