Embed Size (px)
Citation preview
1 Node-RED Dashboard
21 April 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.
This journal is a record of my discoveries and a future source for personal reference.
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
2 Node-RED Dashboard
21 April 2017
Contents Summary......................................................................... 1
Acknowledgements ........................................................ 1
Contents ......................................................................... 2
Building the Raspbian OS – Pixel Desktop ...................... 3
Upgrade & Configure Node-RED .................................... 5
Install the Dashboard Module ........................................ 6
Widgets & Nodes ............................................................ 7
Defining a Dashboard ..................................................... 9
The Site ........................................................................... 9
The Theme ...................................................................... 9
The Layout ...................................................................... 9
Connecting Dashboard Nodes & Widgets .................... 10
The Node-RED Flow ...................................................... 10
Config ............................................................................ 11
Switch ........................................................................... 12
Dashboard Template .................................................... 14
Example: Dashboard - Pi Control .................................. 16
3 Node-RED Dashboard
21 April 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****
4 Node-RED Dashboard
21 April 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)
5 Node-RED Dashboard
21 April 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)
6 Node-RED Dashboard
21 April 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.
7 Node-RED Dashboard
21 April 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
Other Dashboard Widgets
List of choices
Button
Digital selector
Horizontal slider
Input field for text
Choose date from a calendar
Choose color from a wheel
Output Text
Form layout
8 Node-RED Dashboard
21 April 2017
Output Gauge
Output Chart
Text to speech and file player
Notification
Change of page
9 Node-RED Dashboard
21 April 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.
10 Node-RED Dashboard
21 April 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 very
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.
11 Node-RED Dashboard
21 April 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.
12 Node-RED Dashboard
21 April 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
13 Node-RED Dashboard
21 April 2017
Pi Control Flow & Dashboard
14 Node-RED Dashboard
21 April 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.
15 Node-RED Dashboard
21 April 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.
16 Node-RED Dashboard
21 April 2017
Example: 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.
