Node-RED Dashboard: Pi Control - WordPress.com Dashboard 3 26 June 2017 Contents Summary 1...

Node-RED Dashboard: Pi Control

Will English

June 26, 2017

[email protected]

1 Node-RED Dashboard

26 June 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.

Rev1 of this document 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. This journal is a record of my discoveries and a future source for personal reference.


26 June 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

Document Revisions

April 21, 2017 Base Document June 26, 2017 Add BlinkM - I²C Controlled RGB LED to Pi Control

https://nodered.org/

http://flows.nodered.org/node/node-red-dashboard

http://www.techrevwz.com/node-red-module-dashboard-add-a-gui-part-1-exclusive-guide.html

http://www.diyprojects.io/node-red-dashboard-gauges-charts-notifications-html/#.WPKwKtWqPpR

http://www.diyprojects.io/node-red-dashboard-gauges-charts-notifications-html/#.WPKwKtWqPpR

http://thingm.com/fileadmin/thingm/downloads/BlinkM_datasheet.pdf


26 June 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

Dashboard Template .................................................... 18

Example 1: Dashboard - Pi Control ............................... 20

Example 2: Dashboard - BlinkM ................................... 21


26 June 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****


26 June 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)


26 June 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)


26 June 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.


26 June 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.

Other Dashboard Widgets

List of choices

Button

Digital selector

Horizontal slider

Input field for text

Choose date from a calendar

Output Text

https://material.io/icons/

https://material.io/icons/

http://fontawesome.io/icons/


26 June 2017

Form layout

Output Gauge

Output Chart

Text to speech and file player

Notification

Change of page


26 June 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.


26 June 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.


26 June 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.


26 June 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


26 June 2017


26 June 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



26 June 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.


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:


26 June 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.


26 June 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


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.


26 June 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.


26 June 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.


26 June 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.

Node-RED Dashboard: Pi Control - WordPress.com Dashboard 3 26 June 2017 Contents Summary 1...

Documents

Transcript of Node-RED Dashboard: Pi Control - WordPress.com Dashboard 3 26 June 2017 Contents Summary 1...