Home Automation, Information, Sound and Picture System – Touchscreen, Raspberry Pi, Node-Red : 6 Steps (with Pictures) - gunndentoory1961

This project delivers a fantastic home automation, information and dependable system that too gives a slideshow of one's favourite photos as a screensaver. It builds happening earlier supporting projects, with the project here concentrating along the information system and the hardware. The detail given here should enable the mechanisation, information and sound to make up tailored to one's own needs. It shows off the power of the Raspberry Pi to nifty effect. All the software system is free. The whole project described gives:

Data:
- 7 days weather outlook (from DarkSky)
- Google calendar
- News feed via Twitter and BBC
- Google topical anesthetic map with traffic
- IP camera
Home automation:
- Standalone, rest home internet system, based on Lymph gland-Red
Sensible:
- Internet radio
- Medicine playlists
Pictures
- Selection of favourite photos/pictures

NOTE: DarkSky has just been bought past Apple and will non be taking new registrations and will stop the service put-upon Hera end 2022. Hugely disappointing. I leave be waiting to see if they determine to offer something standardized. 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 same could mapping their codes to the icons ill-used here. Mike 2nd April 2022.

For an overview look at:

Several aspects have already been covered in earliest projects:

Home automation
High schoo prize music musician and internet radio
Screensaver based Digital Picture/Photo system

So the focus here is the information system and overall hardware setup. It is top-quality to use this arsenic 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 thu take up much more information available than the screen backside show on a single varlet. The Waveshare blind has a multi-touch capability that is good for Google Maps zoom/scroll.

The top/homepage includes the home automation dashboard pages (accessible via its menu), radio and music, advantageous 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 television camera) are found by swiping down.

IT is all driven by the same Lymph gland-Red arrangement that is driving the home automation and showing the home automation dashboard pages. Node-Red is also intellectual for serving web-pages, collecting data to update them, plus linking to twitter, email and so on. It is an astonishingly powerful system and easy to configure. The pages displayed are written in standard html and JavaScript. The whole organization codification is attached for you to use as is (with localisation) or modify for your own of necessity.

The principles shown cave in the compass to tot up just about anything you want and go by things just about to befit your requirements.

The system runs healed on a Pi 3B. I had used and old pi 1 for the home automation development simply information technology almost ground to a halt when showing network pages. The Pi 3B responds smoothly and seems to address everything well. Note the Pi 3A is slow because it has deficient Wa. The Jam usage is close to 1Gb. Therefore the Pi 4B with 2Gb remembering is just that little bit slicker. The Pi 4B 2Gb is also able to pan and whizz the photos in the screensaver.

Steps:

Setup the Pi

Initial setup of Node-Bolshevik

Configure the display

Adapt and 'localise' the display table of 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 U.K. RAM)

Waveshare 10" capacitive touchscreen 1240x800

Mogul supply 5v 4A

HDMI and USB cables

Footfall 1: Apparatus the Pi

There is now a useful thirdly choice for the firmware that is 'Raspbian Baby buster with Desktop'. This includes the desktop but avoids most of the bloatware we do non plan to economic consumption. 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/ ) operating theatre equivalent.

After the card has been flashed add a blank register called 'SSH' to 'Rush'. This enables the Pi to beryllium driven remotely and set up from a PC. This can also read advantage of copy and glue of the text listed here into the Pi terminal system.

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

ctrl_interface=DIR=/var/unravel/wpa_supplicant Chemical 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 identity card atomic number 3 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 base automation send off if you want more detail on doing this. Enter the Information processing plow and click 'Open'. The default login is 'pi' and parole 'boo'.

First make appropriate adjustments in the Pi configuration. In particular modify the default password. Low-level localisation fix the Wireless fidelity country. I too changed the meshing name. Note that the text entry can follow copied from here and pasted into Putty (right shiner click). This saves a load of time!

sudo raspi-config

When done right arrow twice, press inscribe on 'Finish' and enter connected 'yes' to reboot. The Putty connecter will comprise confounded. Don't walking it. Wait for the Pi to restart then right click the title bar and prize 'Restart Session'.

Future update and upgrade via:

sudo apt-get -y update

sudo likely-get -y upgrade

Then load Node-Red. I have moved to a simpler and much reliable method acting to load Node-Red – following the approach at https://nodered.org/docs/hardware/raspberrypi . This uses a playscript and will install or upgrade Node-Red – soh the approach is the same working from the laden or lite versions of Raspbian Elongate. So record:

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

Enter y when prompted (doubly).

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

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

sudo apt-drive -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 favourable point to get Node-Red running with the nodes in the files attached. These then postulate 'localization of function' to make the data 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 logarithm onto Lymph gland Redness via browser on a PC. Enter the sherloc IP address:1880 - something equivalent 192.168.0.xx:1880

This should look like:

We need to ADD nodes for dashboard (for substance abuser port), MPD (if including audio frequency e.g. HQ euphony thespian), moment(useful time functions). Act up this via the 3-lines symbol>Make out palette>install tab. Enter 'dashboard' into the search box and instal node-red-splashboard, so search 'MPD' to find and put in node-Marxist-contrib-mpd and 'moment' to find and install node-red-contrib-moment. As wel install thickening-violent-node-chitter if planning to admit the news feed.

Importation the scheme/program is very easy. Copy the contents of NRsystem.txt . Click the 3-lines symbol>Import>Clipboard>glue .

Then click Deploy.

The base automation system force out be added any time from straight off. It will conscionable indigence adding additional flows/nodes via the interface above. It can be left until subsequently. For details see: Home automation

The nodes for the internet radio set and music system have been included only there is both hardware and software work to do to nonplus this running. This buttocks be done any time from now. Check: Superiority euphony player and internet radio set

Now nonpareil can log onto the Node Red user interface at Pi IP plow: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 homepage. Before doing this think reserving a specific IP address in your router. This testament fix the address – that could otherwise be changed past the router DHCP.

Now enter the IP destination in single places in the html – that is in the System>Domestic Page node. Big click the node to show the HTML. Scroll down to lines 341, 410, 413 and in each case modify the IP come up to to that of the Private eye. There is no need to do this if the address reserved in your router is 192.168.0.200.

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

Step 3: Configure the Display

Standard monitors will pass along their settings and hence all one needs to do is shutdown, sequester the monitor via HDMI lead and re-start.

The Waveshare monitor needs the Private investigator place setting to the appropriate resolution. This needs redaction 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.

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

Earlier shutting down we need to disable the 'welcome frame-up dialogue' that we don't need as we have through with the setup.

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

Now shutdown ( sudo shutdown now ), get rid of power, connect reminder and index up again. The Pi should boot into the screen background.

Step 4: Adjust and 'localise' the Display Table of contents

Weather

This is supported Darksky and uses some great revived brave icons from Skycons (also used by Darksky and hence compatible). You involve to effectuate an account to get the information from Darksky (free - with limitations that are non a constraint Hera). The icons are driven from a downloadable javascript.

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

this.colours = {

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

synodic month : opts.colors.lunation || "#CFCF3F", //"#353545",

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

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

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

bamboozle : opts.colors.blow || "#C2EEFF",

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

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

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

};

The commented values are the newfangled ones so you can try these if you like. The modified Indian file is attached (simply 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 word of your Raspberry Pi and take SFTP as the protocol (Port 22).

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

Now we require to severalise Node-Red where to get the icons. This is nominal in a file settings.js in folder /home/pi/.guest-red on the Private eye.

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

sudo shutdown -r now

To enable entree to the weather data log onto https://darksky.net/dev , create your account and thence get a nam. You don't need to enter any financial stuff unless you plan getting the data at a much higher grade than hither. Note the key. You will also need your location (line of latitude and longitude). IT has to be put away into the http request guest. Log onto Node-Red-faced. Click the organization check then double detent the 'Make JSON from DarkSky' thickening. The format of the request is:

              <a href="https://api.darksky.net/bode/YOURKEYHERE/LAT,LONG?units=uk2&exclude=circumstantially,time unit"> <a> <a> https://api.darksky.net/forecast/YOURKEYHERE/LAT,...</a>>>

Substitute YOURKEYHERE and LAT and LONG with your key and positioning.

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 drumhead from the week to that day:

News feed

There are respective ways to do this. I ended aweigh using Twitter as it had BBC feeds with the local and world news I wanted to see. I then could non see how to entree the film that accompanied the stories. Indeed I misused the included BBC web linkup to get at the picture – and besides accessed the BBC deed and first appearance As these had a little more detail than Twitter. Interrogating the BBC website was remarkably well-fixed with Node-Red. This does look a rather convoluted way to get a news feed – simply IT works well and can present the in vogue 12 Beaver State 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 admittance Chirrup from software. Arguably this is a aware development. One has to apply for the keys and tell Twitter how one plans to apply the information. This should not be a problem here As the data is entirely for subjective use and there is no tweeting convoluted.

The process involves completing a intermediate sized form. To start select the News show tab in Node Red and double dawn the @BBCNews Chitter lymph node. Click the edit button connected the Twitter Idaho line (pencil picture). This gives a link to start you on the cognitive operation. In the death you will get an API key and API secluded key, and will have generated an Access token and an Access token secret. These are entered on this tab key, along with your Twitter I.D.. It can take a few days after completing the form ahead an application is approved. In my case the approving came pretty quickly.

Note that the news system creates two web pages, one for BBC News and unitary 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 implant code to enable it to represent shown on a website.

If you don't have a Google account then open Chromium-plate (easier on a PC), and if necessary gunpoint to https://www.google.com/, and click top right to add an account. Then from a freshly tab clicking the '9 squares' icon (google apps) will contribute a dropdown list including calendar. Pawl this and make an entry so you can see it later on the Pi display.

Next, along the Pi, open Chromium and sign in. This requires a keyboard connecting or setting up a connexion victimization VNC. The former is easier. It is zero harm to also voyage to calendar to check it is accessed Oklahoma. Chromium keeps you logged in until you decide to lumber impossible.

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

<iframe src="https://calendar.google.com/calendar/imbed?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. And so put back the @ with %40 .

Alternatively on your PC open Google Calendar. Click the cog icon in Calendar and 'settings'. Past click your name low Settings for my calendars. In the primary page ringlet down to 'Integrate calendar'. Thither you will experience your plant code. Note the width and height numbers pool need changing to the values in the code preceding.

Google maps

Google solely allows its maps to be shown in other websites when information technology is done by a Google account bearer. 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 leave set a project. You can then edit the key to add restrictions as to which sites can wont the operative. I added the following:

localhost:1880/home

localhost:1880/home#top

localhost:1880/home#pg1

localhost:1880/nursing home#pg2

localhost:1880/home#pg3

The key past 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 web site hypertext mark-up language 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">

Entanglement tv camera

Learn with your webcam instructions as to how to access and figure the address in line 448. The savoir-faire that is in that respect is what was requisite for my webcam.

Step 5: Setup Chromium to Autostart in Kiosk Mode

It is best to set finished the screensaver earlier this step. The relevant software program was loaded to begin with. The frame-up is covered in Screensaver settled Digital Visualise/Photo system from step 3. I arranged my pictures into the Pictures folder. This then needs a keyboard to enter the folder key out (or setup a link victimisation VNC). However this might be avoided if one were to arrange the photos into a pamphlet titled pi (atomic number 3 this is the default folder name (different path)).

Automating Booth way needs changes to the autostart file. So, via Putty:

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

add telephone line:

@/usr/binful/atomic number 24-browser --kiosk http://localhost:1880/home --disable-pinch --disable-infobars

(note --disable-restore-session-body politic is atomic number 102 longer validated)

Restart:

sudo shutdown -r now

The system should start-in the lead to the home page. So immediately is the time to stimulate a play and consider some tuning to one's possess needs.

Gradation 6: Enclosure

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

On Unification 360 I first sketched the identify outlines: – screen opening, consistence of the proctor speaker openings and speaker mounts. I extruded the various outlines to the required depths.

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

I used a hole saw for the speakers and a router to grind out the different rebates and yap for the display. About of the routing was done against a straight border. The rebates for the speakers were done (with kid gloves) aside hand. The panels were glued with PVA adhesive. I also cut a couple of squares from 3mm MDF to make bezels for the speakers.