HackSpace_-_April_2020

FEATURE

How I Made: BinDayCator

webpages. I already had a Node-RED server
running all the time, so it made sense for
me to use that because a faster CPU would
make development smoother. If I’d wanted
to do it all on the same device then a
Raspberry Pi Zero could have controlled the
NeoPixels and done the screen scraping on
one device, but it would make my enclosure
larger, and it would be harder to hide
the electronics.
Node-RED is a programming tool for
wiring together hardware and services – it
has a nice graphical interface that lets you

drag and drop nodes. Nodes are building

blocks with certain functionality, and you

create logic by connecting them. I checked

through the node types it had, and I was in

luck – it had two nodes with the features I

wanted. One node, the HTTP Request node,

could retrieve the webpage, and the HTML

node would do the screen scraping based

on a selector I gave it. I configured it with

the council’s webpage URL and started

looking for the correct selector. Selectors

use CSS (Cascading Style Sheets) syntax to

specify which part of the page to extract.

Modern browsers make this easy to find

with their developer tools – you can click on

a part of a webpage, and it will tell you what

the selector is for on that area of the page.

Armed with this selector, I plugged it into

the HTML node, attached a debug node so I

could see the result, and deployed the flow.

This worked great, and it delivered me the

contents of that part of the page. The

council use a descriptive heading for the

bins and not the colours, so I added a

JavaScript node which converts the name to

a colour.

I coded the BinDayCator device to

connect to Node-RED using the HttpClient

library, which would read the previously

stored colours and return them to the

device. A JSON library is then used to

process this string back into an array and set

the NeoPixels to the appropriate colours.

Having a constant ambient indicator had

advantages I hadn’t expected; it helped me

to plan ahead. For example, if it was garden

Left

Node-RED does

the heavy lifting

of the data

collection

Below

Web pages

weren’t meant

to be read by

machines