Node-RED Dashboard: Pi Control - · PDF fileNode-RED Dashboard 1 17 July 2017 Summary I am...
-
Upload
duongnguyet -
Category
Documents
-
view
216 -
download
0
Transcript of Node-RED Dashboard: Pi Control - · PDF fileNode-RED Dashboard 1 17 July 2017 Summary I am...
1 Node-RED Dashboard
17 July 2017
Summary I am using a Raspberry Pi as a headless computer through VNC. A particular interest is learning
Node-RED flow programming and within that exploration having the ability to display debugging
and program execution results. I looked at LCD and OLED panels with various degrees of success
and failure. The complication being executing the display coding from within a Node-RED flow.
The discovery of node-red-dashboard eliminated the need for the hardware display panel.
Furthermore, the dashboard is widget driven within Node-RED and is native to the whole
concept of the object driven flow.
Revision 1: Extends the simple blinking LED with the addition of a BlinkM I²C Controlled RGB LED to the Dashboard Pi Control, and the ability to select a desired color. Reference My Pi Workbench for details on wiring a BlinkM module. Revision 2: Adds control of a HC-SR501 Motion Sensor to the node-red-dashboard by using an Exec Node to spawn a system process to a Python script that interacts with the motion sensor. Captured standard output (print) messages are returned to the dashboard log and also passed to a Play Audio Node for text to speech alerts. The Python system process is terminated on command from the HS-SR501 switch on the dashboard.The wiring diagram is simplified by using Link Nodes, and Switch and Change Nodes have been used rather that writing a Javascript Funtion Node. This journal is a record of my discoveries and a future source for personal reference.
2 Node-RED Dashboard
17 July 2017
Acknowledgements
This document could not have been compiled were it not for the exceptional work of many
other people:
Node-RED https://nodered.org node-red-dashboard http://flows.nodered.org/node/node-red-dashboard Node-RED module Dashboard: Add a GUI (part 1) [Exclusive Guide] http://www.techrevwz.com/node-red-module-dashboard-add-a-gui-part-1-exclusive-guide.html Node-RED module Dashboard (Part 2): Gauges, Charts, Notifications, HTML http://www.diyprojects.io/node-red-dashboard-gauges-charts-notifications-html/#.WPKwKtWqPpR BlinkM I²C Controlled RGB LED http://thingm.com/fileadmin/thingm/downloads/BlinkM_datasheet.pdf Interfacing HC-SR501 PIR Motion Sensor with Raspberry Pi https://electrosome.com/pir-motion-sensor-hc-sr501-raspberry-pi/ Raspberry Pi GPIO Sensing: Motion Detection https://www.modmypi.com/blog/raspberry-pi-gpio-sensing-motion-detection
Document Revisions
April 21, 2017 Base Document June 26, 2017 Add BlinkM - I²C Controlled RGB LED to Pi Control July 18, 2017 Add HC-SR501 PIR Motion Sensor
3 Node-RED Dashboard
17 July 2017
Contents Summary......................................................................... 1
Acknowledgements ........................................................ 2
Document Revisions ....................................................... 2
Contents ......................................................................... 3
Building the Raspbian OS – Pixel Desktop ...................... 4
Upgrade & Configure Node-RED .................................... 6
Install the Dashboard Module ........................................ 7
Widgets & Nodes ............................................................ 8
Defining a Dashboard ................................................... 10
The Site ......................................................................... 10
The Theme .................................................................... 10
The Layout .................................................................... 10
Connecting Dashboard Nodes & Widgets .................... 11
The Node-RED Flow ...................................................... 11
Config ............................................................................ 12
Switch ........................................................................... 13
Color Picker................................................................... 15
Exec ............................................................................... 16
Audio Out ..................................................................... 18
Link ............................................................................... 19
Dashboard Template .................................................... 20
Example 1: Dashboard - Pi Control ............................... 22
Example 2: Dashboard - BlinkM ................................... 23
Example 3: Dashboard - HC-SR501 PIR Motion Sensor 24
4 Node-RED Dashboard
17 July 2017
Building the Raspbian OS – Pixel Desktop Windows 10
• Download the latest Raspbian.zip (not Noobs nor Raspberry Light) from
raspberrypi.org
• Use HashTab to verify the checksum of the downloaded zip to the site stated
checksum (Select file, r-Click, Properties)
• Extract the img file from the zip
• Format an SD-Card using SD Formatter
• Copy the Raspbian.img to the SD Card using Win32 Disk Image
Raspberry-Pi
• Insert the SD Card in the Raspberry Pi (needs a keyboard & Mouse) and
Boot. Raspbian by default boots to the desktop with a default User-id and
Password.
• Ensure TP-Link Wireless USB Dongle is inserted. Beginning with Raspbian
“Jessie” the TP-Link wireless drivers have been included in the OS. Enter our
Home Network password (right click network activity symbol – top right of
desktop) to initiate internet access – and test. The Pixal Desktop has a bug
requiring the manual addition of the wireless network: Open the wpa-
supplicant configuration file in nano and enter:
sudo nano /etc/wpa_supplicant/wpa_supplicant.conf
Append the following:
network={
ssid="SHAW-*****"
psk="***(password)***"
}
Configure the Desktop
• Boot Raspberry Pi (boots to Desktop by default)
• In Terminal “sudo raspi-config” – this initiates a OS change menu panel
• Select Option 1: Change User Password and at the prompts enter “will5****”
• Select Option 2: Hostname, change from raspberrypi to PiServer
• Select Option 4: Localization Options, set the time zone to US Pacific
• Select Option 4: Localization Options, set the Wi-fi country to Canada
• Select Option 5: Interfacing Options, enable VNC and I2C
• Select Option 7: Advanced Options, Expand File System
• Select Option 7: Advanced Options, Screen Resolution, select 1280 x 720
• Finish and Reboot
Connect using RealVNC
• On Windows10: Logon to Raspberry Pi at 192.168.0.22 (Wi-fi address) with VNC
Viewer, User name = pi, and Password = will5****
5 Node-RED Dashboard
17 July 2017
Remove Packages Wolfram
sudo apt-get purge wolfram-engine
sudo apt-get clean
sudo apt-get autoremove
Libre Office sudo apt-get purge libreoffice* sudo apt-get clean sudo apt-get autoremove Minecraft sudo apt-get purge minecraft-pi sudo apt-get clean sudo apt-get autoremove Sonic-Pi sudo apt-get purge sonic-pi
sudo apt-get clean
sudo apt-get autoremove
Backup the Raspbian OS
• Copy SD Card to a backup image at the V: (Virtual) Drive file using Win32 Disk
Imager and Label: Rxn-n-Vn-nn (eg RJ4-4-V0-01 for Raspbian Jessie release 4.4
my Version 0.01)
6 Node-RED Dashboard
17 July 2017
Upgrade & Configure Node-RED To upgrade Node-RED and its associated packages to their current release levels invoke Terminal on a VNC Session and install and upgrade npm: sudo apt-get install npm sudo npm i -g [email protected] sudo reboot In a new Terminal session upgrade Node.js & Node-RED update-nodejs-and-nodered sudo reboot Localize the Node-RED settings with your installation preferences. For instance I locate my flows in a personal directory called MyWeb: sudo nano /home/pi/.node-red/settings.js Then enter or update the following entries: uiHost: "192.168.0.22", userDir: '/home/pi/MyWeb/', nodesDir: '/home/pi/MyWeb/', ^O^X sudo reboot Backup the Raspbian OS Copy SD Card to a backup image at the V: (Virtual) Drive file using Win32 Disk Imager and Label: Rxn-n-Vn-nn (eg RJ4-4-V0-01 for Raspbian Jessie release 4.4 my Version 0.01)
7 Node-RED Dashboard
17 July 2017
Install the Dashboard Module
Open the Palette Manager in Node-RED, select install
and search for the module using the keyword
dashboard.
Then click install for the node-red-dashboard module.
At the end of the installation refresh the display of the
browser.
The new nodes are listed the editor under the
dashboard classification.
8 Node-RED Dashboard
17 July 2017
Widgets & Nodes
Used in Pi Control
Stores global and flow variables (properties) in a central location and sets them at startup.
Adds a two-state switch to the user interface. Each change in the state of the switch will generate a msg.payload with the specified On and Off values. The On/Off Color and On/Off Icon are optional fields. If they are all present, the default toggle switch will be replaced with the relevant icons and their respective colors. The On/Off Icon field can be either Material Design Icons (e.g. 'check', 'close') or Font Awesome Icons (e.g. 'fa-fire').
Display of HTML. Used as form template for the logging of events.
Choose a color from a wheel in hex, RGB, etc. representation.
Calls out to a system command - a method of making external calls out from Node-RED to external programs or utilities.
Text to speech and file player
The link in node can be connected to any link out node that exists on any tab. Once connected, they behave as if they were wired together.
Other Dashboard Widgets
List of choices
Button
Digital selector
Horizontal slider
9 Node-RED Dashboard
17 July 2017
Input field for text
Choose date from a calendar
Output Text
Form layout
Output Gauge
Output Chart
Notification
Change of page
10 Node-RED Dashboard
17 July 2017
Defining a Dashboard
A dashboard runs as a user interface web page that is
served by the Node-RED server, and addressed as the
server IP/ui (e.g. 192.168.0.xx/ui).
The groups and pages that form a dashboard can be
defined in the Control Panel for a widget as it is invoked in
the Node-RED editor. However, it is much easier and
clearer to configure using the dashboard panel next to the
console (Info & Debug).
The Site
Choose a Title. It will be displayed as the title of the page in
the Header of the Web Browser page.
The Theme
Choose a Style from the three available:
Light: clear with a white background and blue content.
Dark: white on a dark background.
Custom: select specific color features.
The Layout
The Layout defines the Tabs (pages) that form a dashboard,
the sequence of the pages in the dashboard, and the
groups that are on a page.
11 Node-RED Dashboard
17 July 2017
Connecting Dashboard Nodes & Widgets
The Node-RED Flow
A dashboard becomes an integral part of the Flow application by providing a configured and
adaptable user interface into and out of the logic of the application. Perceptually this is similar
to a screen, keyboard and mouse interface!
We will now introduce the Dashboard Nodes Widgets into logic of the Flow. The widgets or
controls, for example a Button, Dropdown, or Chart - bring function to the logic of a Flow. The
following pages describe a widget, how it is configured, and an example of how it might be used.
The parameters for a widget locate the control in the chosen Tab and Group of a Dashboard.
The other parameters in the widget customize the control. The Flow can be Deployed as the
widgets and logic are being developed, and the user interface (dashboard) opened either by
specific web address or selecting in the dashboard menu.
12 Node-RED Dashboard
17 July 2017
Config Stores global and flow variables (properties) in a central location and
sets them at startup. Installed via node-red-contrib-config at Manage pallet, this is a must have
node for any flow using global or flow wide variables.
13 Node-RED Dashboard
17 July 2017
Switch
The horizontal switch gives a Boolean return when it changes state. It is possible to reverse the Boolean value inverting the output value depending on the State of On and Off. Two icons and/or colors can be set depending on state.
Group: The Dashboard display group linked to the Switch
Size: The size of the display element. Auto default
Label: A text label for the switch
Icon: The Default is a two-color slide switch; with Custom both the Icon and its color can be chosen.
If msg: Node transparency passing an incoming message through to output, when the box is checked
On Payload: Output when the Switch is turned On
Off Payload: Output when the Switch is turned Off
Other types of output include a Flow, store the State in a global variable (Global), a string of characters (String), a number (Number), a JSON object, or a date and time of the action (timestamp).
Topic: Label
Name: Name of the Node that is displayed on the Node-RED flow
15 Node-RED Dashboard
17 July 2017
Color Picker
Adds a color picker to the dashboard. Various display options are
available and a selected color can be RGB, hex, hex8, hsv, or hsl..
Group: The Dashboard display group linked to the Switch Node
Size: The size of the display element - 4x4 maintains display of the picker.
Label: A text label for the switch
Format: Output format of a chosen color. Hex is easiest for this purpose.
If msg: Node transparency, passing an incoming message through to output, when the box is checked
options: What to include in the Controls display.
Topic: Label
Name: Name of the Node that is displayed on the Node-RED flow
16 Node-RED Dashboard
17 July 2017
Exec
Calls out to a system command - a method of making external calls out
from Node-RED to external programs or utilities.
Command: The program or utility to be executed.
Append: The msg.payload to the command.
Name: Name of the Node that is displayed on the Node-RED flow
I2cset is a utility that is included with the i2c Tools that are available to Raspbian. The command
line utility and its parameters puts a command onto the i2c bus. In this case, for the BlinkM:
17 Node-RED Dashboard
17 July 2017
A Switch on the Pi Control panel has parameters for the On and Off Payloads that that when
appended to the i2cset in the Node-RED Exec, turns the BlinKM LED either full on or off.
A Function node after the Color Picker transforms a selected color in hex to parameters, that
when appended to the i2cset in the Node-RED Exec, turns the BlinKM LED to the selected color.
18 Node-RED Dashboard
17 July 2017
Audio Out Plays audio or text to speech (TTS) in the dashboard. If the browser has native support for Text-to-Speech then a string to be read aloud.
19 Node-RED Dashboard
17 July 2017
Link The link in node can be connected to any link out node that exists on
any tab. Once connected, they behave as if they were wired together.
Using these nodes can greatly simplify the visual presentation of flow
wiring. A bird nest can turn into clear connections, especially where multiple link out’s are going
to a single link in.
Note: Links are activate when relevant name is selected (checked)!
20 Node-RED Dashboard
17 July 2017
Dashboard Template The widget can be used to create a dynamic user interface element that changes its appearance based on the input message and can send back messages to Node-RED. The template widget can contain any valid html and Angular/Angular-Material directives.
Group: The Dashboard display group linked to the Template
Size: The size of the display element. Auto default
Name: Name of the Node that is displayed on the Node-RED flow
If msg: Node transparency passing an incoming message through to output, when the box is checked
Template: Valid html and Angular/Angular-Material directives.
Typically, a Template provides a layout and a paired function feeds it data. In the Example: Dashboard Pi Control the template is the Event Log and the function is Record Events.
The Event Log template is an HTML list formatting the output for a passed Topic and payload.
21 Node-RED Dashboard
17 July 2017
The Record Events function is a short java-script routine that is a twelve message pushup queue
feeding the Event Log. If the global LogSw is off, then message passing is suspended.
22 Node-RED Dashboard
17 July 2017
Example 1: Dashboard - Pi Control A Raspberry Pi with a LED at Pin-11 is wirelessly connected through VNC. The seven nodes in the
Node-RED flow define a web user interface that has two switches and an event log. The first
switch turns the LED on and off. The log lists the cycling of the LED switch or any other
connected node that is introduced to the flow. The second switch enables or disables logging.
23 Node-RED Dashboard
17 July 2017
Example 2: Dashboard - BlinkM A Raspberry Pi with a LED at Pin-11 and a BlinkM I²C Controlled RGB LED is wirelessly connected
through VNC. The eleven nodes in the Node-RED flow define a web user interface that has three
switches, a color picker and an event log.
The first switch turns the LED on and off. The second switch enables or disables logging. The
third switch turns the BlinkM On or Off. The Color Picker is used to select a color for the BlinkM.
24 Node-RED Dashboard
17 July 2017
Example 3: Dashboard - HC-SR501 PIR Motion Sensor This inexpensive (< $2) sensor module is easy to connect with two jumpers to the +5v rails and one to Pin26 on the Raspberry Pi. The information at Interfacing HC-SR501 PIR Motion Sensor with Raspberry Pi and ModMyPi - Raspberry Pi GPIO Sensing: Motion Detection are very detailed and I am not going to reiterate their content here.
The ModMyPi link describes two Python scripts to control the HC-SR501 – a Wait & Loop and the Interrupt Driven Script. I used the later with the Raspbian Thonny IDE to enter and test the sensor. The only changes to the script are ()’s and quotes around the print commands – thereby upgrading the script to Python3. I minimized the distance and time potentiometers on the sensor for tests, but suspect their best setting is whatever suits your taste or needs! The script is saved in a folder /home/pi/MyWeb/Python/HC-SR501_Motion_Int.py, but this could be any folder on the Pi where the command in the Start Sensing Node is changed to match the location.
25 Node-RED Dashboard
17 July 2017
The Motion Switch Node is an On/Off Toggle on the dashboard. The On setting spawns the Python script python -u /home/pi/MyWeb/Python/HC-SR501_Motion_Int.py as a system process - note the that -u option stops standard output buffering in the Python interpreter, so that messages are communicated as they occur! The HC-SR501 Motion Sensor will initiate to the Ready state and start sensing motion! Returned print messages are passed to the Log and the Audio Out Node for text to speech alerts.
The Off setting for the Motion Switch terminates the Python system process. The CTRL+C to exit is meaningless in the this execution environment and thus can be simply ignored or removed from the Python script.