Home Automation, Information, Sound and Picture System – Touchscreen, Raspberry Pi, Node-Red

This project delivers a fantastic home automation, information and sound system that also gives a slideshow of one’s favourite photos as a screensaver. It builds on earlier supporting projects, with the project here concentrating on the information system and the hardware. The detail given here should enable the automation, information and sound to be tailored to one’s own needs. It shows off the power of the Raspberry Pi to great effect. All the software is free. The whole project described gives:

Information:
- 7 days weather forecast (from DarkSky)
- Google calendar
- News feed via Twitter and BBC
- Google local map with traffic
- IP camera
Home automation:
- Standalone, home internet system, based on Node-Red
Sound:
- Internet radio
- Music playlists
Pictures
- Selection of favourite photos/pictures

NOTE: DarkSky has just been bought by Apple and will not be taking new registrations and will stop the service used here end 2021. Hugely disappointing. I will be waiting to see if they decide to offer something similar. I have had a quick look at alternatives. Weatherbit.io includes a 16 day forecast in their free subscription and is probably where I would start. They have their own icons - but one could map their codes to the icons used here. Mike 2nd April 2020.

For an overview look at:

Several aspects have already been covered in earlier projects:

So the focus here is the information system and overall hardware setup. It is best to use this as the master instructions as it pulls everything together and add the other parts as advised along the way.

The incorporation of a touchscreen means one can scroll through any number of pages and hence have much more information available than the screen can show on a single page. The Waveshare screen has a multi-touch capability that is great for Google Maps zoom/scroll.

The top/home page includes the home automation dashboard pages (accessible via its menu), radio and music, plus the weather forecast and Google calendar. The weather includes daily and week summaries and max/min temperature, rainfall and wind direction speed and gusts. The other pages (news, maps and camera) are found by swiping down.

It is all driven by the same Node-Red system that is driving the home automation and showing the home automation dashboard pages. Node-Red is also good for serving web-pages, collecting data to update them, plus linking to twitter, email and so on. It is an amazingly powerful system and easy to configure. The pages displayed are written in standard html and JavaScript. The overall system code is attached for you to use as is (with localisation) or modify for your own needs.

The principles shown give the scope to add just about anything you want and move things around to suit your requirements.

The system runs well on a Pi 3B. I had used and old pi 1 for the home automation development but it almost ground to a halt when showing web pages. The Pi 3B responds smoothly and seems to handle everything well. Note the Pi 3A is slow because it has too little RAM. The RAM usage is close to 1Gb. Hence the Pi 4B with 2Gb memory is just that little bit slicker. The Pi 4B 2Gb is also able to pan and zoom the photos in the screensaver.

Steps:

Setup the Pi

Initial setup of Node-Red

Configure the display

Adjust and ‘localise’ the display contents

Weather
Google Calendar
News feed
Google Maps
Webcam

Setup Chromium to autostart in kiosk mode.

Make enclosure (Optional)

Examples of the first 3 pages (4th is the IP camera):

Supplies

Raspberry Pi 3B or 4B (1 or 2 Gb RAM)

Waveshare 10” capacitive touchscreen 1240x800

Power supply 5v 4A

HDMI and USB cables

Step 1: Setup the Pi

There is now a useful third option for the firmware that is ‘Raspbian Buster with Desktop’. This includes the desktop but avoids most of the bloatware we do not plan to use. Download the latest version from https://www.raspberrypi.org/downloads/raspbian/ .

Load this onto a SD card using Etcher (from https://www.balena.io/etcher/ ) or equivalent.

After the card has been flashed add a blank file called ‘SSH’ to ‘Boot’. This enables the Pi to be driven remotely and set up from a PC. This can also take advantage of copy and paste of the text listed here into the Pi terminal system.

We also need to get the WiFi working to enable remote setup. This needs the network name and password adding in a specific file. To do this - copy the following into Notepad:

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev

network={

ssid="YOUR_NETWORK_NAME"

psk="YOUR_PASSWORD"

key_mgmt=WPA-PSK

}

Edit the YOUR_NETWORK_NAME and YOUR_PASSWORD and save to the ‘Boot’ part of the SD card as wpa_supplicant.conf

Log onto the Pi from a PC using Putty (free download from https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html ). Find the Pi IP address e.g. by logging onto your router. See the home automation project if you want more detail on doing this. Enter the IP address and click ‘Open’. The default login is ‘pi’ and password ‘raspberry’.

First make appropriate adjustments in the Pi configuration. In particular change the default password. Under localisation set the WiFi country. I also changed the network name. Note that the text entry can be copied from here and pasted into Putty (right mouse click). This saves a load of time!

sudo raspi-config

When done right arrow twice, press enter on 'Finish' and enter on ‘yes’ to reboot. The Putty connection will be lost. Don’t close it. Wait for the Pi to restart then right click the title bar and select ‘Restart Session’.

Next update and upgrade via:

sudo apt-get -y update

sudo apt-get -y upgrade

Then load Node-Red. I have moved to a simpler and more reliable method to load Node-Red – following the approach at https://nodered.org/docs/hardware/raspberrypi . This uses a script and will install or upgrade Node-Red – so the approach is the same working from the full or lite versions of Raspbian Stretch. So enter:

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

Enter y when prompted (twice).

This script also loads files needed to enable autostart of Node-Red.

If also using the system for Home automation then install Mosquito:

sudo apt-get -y install mosquitto mosquitto-clients

Also install MPD and MPC using the music player:

sudo apt-get -y install mpd mpc

For the photos/ screensaver we need xscreensaver:

sudo apt-get -y install xscreensaver

sudo apt-get -y install xscreensaver-gl-extra

Step 2: Initial Setup of Node-Red

This is a good point to get Node-Red running with the nodes in the files attached. These then require ‘localisation’ to make the information relevant.

To enable Node-Red to run automatically at every boot and upon crashes enter (via PuTTY session):

sudo systemctl enable nodered.service

restart:

sudo shutdown -r now

We should now be able to log onto Node Red via browser on a PC. Enter the pi IP address:1880 - something like 192.168.0.xx:1880

This should look like:

We need to add nodes for dashboard (for user interface), MPD (if including audio e.g. HQ music player), moment(useful time functions). Do this via the 3-lines symbol>Manage palette>install tab. Enter ‘dashboard’ into the search box and install node-red-dashboard, then search ‘MPD’ to find and install node-red-contrib-mpd and ‘moment’ to find and install node-red-contrib-moment. Also install node-red-node-twitter if planning to include the news feed.

Importing the system/program is very easy. Copy the contents of NRsystem.txt . Click the 3-lines symbol>Import>Clipboard>paste .

Then click Deploy.

The home automation system can be added any time from now. It will just need adding additional flows/nodes via the interface above. It can be left until later. For details see: Home automation

The nodes for the internet radio and music system have been included but there is both hardware and software work to do to get this running. This can be done any time from now. See: High quality music player and internet radio

Now one can log onto the Node Red user interface at Pi IP address:1880/home . The pages should be there in embryonic form. Several nodes need modifying to enable relevant data to be seen.

The system creates several web pages that are pulled into frames on the ‘home’ page. This needs their IP addresses specifying in the home page. Before doing this consider reserving a specific IP address in your router. This will fix the address – that could otherwise be changed by the router DHCP.

Now enter the IP address in several places in the html – that is in the System>Home Page node. Double click the node to show the html. Scroll down to lines 341, 410, 413 and in each case modify the IP address to that of the Pi. There is no need to do this if the address reserved in your router is 192.168.0.200.

Now close Node-Red and let us add settings for the display.

NRSystem.txt
Download

Step 3: Configure the Display

Standard monitors will communicate their settings and hence all one needs to do is shutdown, attach the monitor via HDMI lead and restart.

The Waveshare monitor needs the Pi setting to the appropriate resolution. This needs editing of the config file. So restart the Putty session, log in and enter:

sudo nano /boot/config.txt

For the Waveshare 10” (1280x800) monitor add or edit lines to:

max_usb_current=1

hdmi_cvt 1280 800 60 6 0 0 0

hdmi_group=2

hdmi_mode=87

hdmi_drive=1

Other resolutions can be catered for by modifying to numbers after hdmi_cvt. However note that the information system has been setup for 1280x800 resolution.

save and exit (^X, Y, enter).

Before shutting down we need to disable the ‘welcome setup dialogue’ that we don't need as we have done the setup.

sudo rm /etc/xdg/autostart/piwiz.desktop

Now shutdown (sudo shutdown now), remove power, connect monitor and power up again. The Pi should boot into the desktop.

Step 4: Adjust and ‘localise’ the Display Contents

Weather

This is based on Darksky and uses some great animated weather icons from Skycons (also used by Darksky and hence compatible). You need to set up an account to get the data from Darksky (free - with limitations that are not a constraint here). The icons are driven from a downloadable javascript.

The skycons can be downloaded from https://github.com/maxdow/skycons . However I edited skycons.js (using Notepad++ on my PC) to remove large commented sections and change monochrome default from true to false. I also edited the colours and ended up with:

this.colors = {

main : opts.colors.main || "#777777", //"#111",

moon : opts.colors.moon || "#CFCF3F", //"#353545",

fog : opts.colors.fog || "#DFBFDF", //"#CCC",

fogbank : opts.colors.fogbank || "#AF9FAF", //"#AAA",

cloud : opts.colors.cloud || "#6F6F6F", //"#666",

snow : opts.colors.snow || "#C2EEFF",

leaf : opts.colors.leaf || "#2C9F28", //"#2C5228",

rain : opts.colors.rain || "#5FAFFF", //"#7FDBFF",

sun : opts.colors.sun || "#FF7F00" //"#FFDC00"

};

The commented values are the original ones so you can try these if you like. The modified file is attached (but change .txt back to .js).

I use FileZilla (free download) to copy files to/from my Pi. Run FileZilla. Then enter the IP address, username (pi) and password of your Raspberry Pi and choose SFTP as the protocol (Port 22).

Create a folder in /home/pi/.node-red/ called ‘public’ and then a subfolder ‘myjs’. Copy skycons.js to the new subfolder.

Now we need to tell Node-Red where to get the icons. This is specified in a file settings.js in folder /home/pi/.node-red on the Pi.

Add httpStatic: '/home/pi/.node-red/public', to settings.js (around line109). I did this by taking a copy to PC, editing with Notepad++ and then replacing. Then restart:

sudo shutdown -r now

To enable access to the weather data log onto https://darksky.net/dev , create your account and hence get a key. You don’t need to enter any financial stuff unless you plan getting the data at a much higher rate than here. Note the key. You will also need your location (latitude and longitude). It has to be put into the http request node. Log onto Node-Red. Click the system tab and then double click the 'Get JSON from DarkSky' node. The format of the request is:

 <a href="https://api.darksky.net/forecast/YOURKEYHERE/LAT,LONG?units=uk2&exclude=minutely,hourly"> <a> <a> https://api.darksky.net/forecast/YOURKEYHERE/LAT,...</a>>>

Replace YOURKEYHERE and LAT and LONG with your key and location.

The display may take up to 15 minutes to show after clicking deploy. It should look as below. Clicking any of the icons will change the summary from the week to that day:

News feed

There are several ways to do this. I ended up using Twitter as it had BBC feeds with the local and world news I wanted to see. I then could not see how to access the picture that accompanied the stories. So I used the included BBC web link to access the picture – and also accessed the BBC title and introduction as these had a bit more detail than Twitter. Interrogating the BBC website was remarkably easy with Node-Red. This does seem a rather convoluted way to get a news feed – but it works well and can present the latest 12 or so stories from the BBC and BBC World Tweets.

This was very easy when I first set it up but one now needs to get keys to access Twitter from software. Arguably this is a sensible development. One has to apply for the keys and tell Twitter how one plans to use the data. This should not be a problem here as the data is entirely for personal use and there is no tweeting involved.

The process involves completing a moderate sized form. To start select the News tab in Node Red and double click the @BBCNews Twitter node. Click the edit button on the Twitter ID line (pencil icon). This gives a link to start you on the process. In the end you will get an API key and API secret key, and will have generated an Access token and an Access token secret. These are entered on this tab, along with your Twitter ID. It can take a few days after completing the form before an application is approved. In my case the approval came pretty quickly.

Note that the news system creates two web pages, one for BBC News and one for BBC World. As the tweets pick up new stories these are passed to the web pages via websockets. Then the system home page simply picks up these two web-pages and shows them in a couple of iframes. The information page fills as news items come through and then scrolls to show the most recent.

Google calendar

The calendar works through your being logged into Chromium with a google account and a special embed code to enable it to be shown on a website.

If you don’t have a Google account then open Chrome (easier on a PC), and if necessary point to https://www.google.com/, and click top right to add an account. Then from a new tab clicking the ‘9 squares’ icon (google apps) will give a dropdown list including calendar. Click this and make an entry so you can see it later on the Pi display.

Next, on the Pi, open Chromium and sign in. This requires a keyboard connecting or setting up a connection using VNC. The former is easier. It is no harm to also navigate to calendar to check it is accessed OK. Chromium keeps you logged in until you decide to log out.

The easiest approach to the embed code is to modify line 402 in the html in the Node-Red System>'Home Page' node:

<iframe src="https://calendar.google.com/calendar/embed?src=GOOGLE ACC EMAIL&ctz=Europe%2FLondon" style="border: 0" width="950" height="716" frameborder="0" scrolling="no"></iframe>

Replace GOOGLE ACC EMAIL with your Google account email. Then replace the @ with %40.

Alternatively on your PC open Google Calendar. Click the cog icon in Calendar and 'settings'. Then click your name under Settings for my calendars. In the main page scroll down to 'Integrate calendar'. There you will see your embed code. Note the width and height numbers need changing to the values in the code above.

Google maps

Google only allows its maps to be shown in other websites when it is done by a Google account holder. Hence this needs an API key. Follow the guide below to get a key:

https://developers.google.com/maps/documentation/j...

As part of this you will set a project. You can then edit the key to add restrictions as to which sites can use the key. I added the following:

localhost:1880/home

localhost:1880/home#top

localhost:1880/home#pg1

localhost:1880/home#pg2

localhost:1880/home#pg3

The key then needs to be entered into the html of the system website. Open Node Red, select the system tab and double click the Home Page node to see the website html code. Scroll down to line 423 and enter the key to replace YOUR KEY HERE in the line:

src="https://maps.googleapis.com/maps/api/js?key=YOUR KEY HERE&callback=initMap">

Web camera

Check with your webcam instructions as to how to access and enter the address in line 448. The address that is there is what was needed for my webcam.

skycons.txt
Download

Step 5: Setup Chromium to Autostart in Kiosk Mode

It is best to set up the screensaver before this step. The relevant software was loaded earlier. The setup is covered in Screensaver based Digital Picture/Photo system from step 3. I placed my pictures into the Pictures folder. This then needs a keyboard to enter the folder name (or setup a link using VNC). However this might be avoided if one were to put the photos into a folder called pi (as this is the default folder name (different path)).

Automating Kiosk mode needs changes to the autostart file. So, via Putty:

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

add line:

@/usr/bin/chromium-browser --kiosk http://localhost:1880/home --disable-pinch --disable-infobars

(note --disable-restore-session-state is no longer valid)

Restart:

sudo shutdown -r now

The system should start-up to the home page. So now is the time to have a play and consider any tuning to one’s own needs.

Step 6: Enclosure

I drew the enclosure on Fusion 360 (free for hobbyists and start-ups) to get an idea of what it would look like and check space for the various components. I then made it from 9mm MDF.

On Fusion 360 I first sketched the key outlines: – screen opening, body of the monitor speaker openings and speaker mounts. I extruded the various outlines to the required depths.

I cut the panels and marked out the holes/rebates on the back of the front panel.

I used a hole saw for the speakers and a router to mill out the various rebates and hole for the display. Most of the routing was done against a straight edge. The rebates for the speakers were done (carefully) by hand. The panels were glued with PVA adhesive. I also cut a couple of squares from 3mm MDF to make bezels for the speakers.