What email address or phone number would you like to use to sign in to Docs.com?
If you already have an account that you use with Office or other Microsoft services, enter it here.
Or sign in with:
Signing in allows you to download and like content, and it provides the authors analytical data about your interactions with their content.
Embed code for: Node-RED Dashboard
Select a size
Will English April 20, 2017 firstname.lastname@example.org
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.
This document could not have been compiled were it not for the exceptional work of many other people:
Node-RED module Dashboard: Add a GUI (part 1) [Exclusive Guide]
Node-RED module Dashboard (Part 2): Gauges, Charts, Notifications, HTML
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
Dashboard Template 14
Example: Dashboard - Pi Control 16
Building the Raspbian OS – Pixel Desktop
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
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:
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****
sudo apt-get purge wolfram-engine sudo apt-get clean sudo apt-get autoremove
sudo apt- get purge libreoffice* sudo apt-get clean sudo apt-get autoremove
sudo apt-get purge minecraft-pi
sudo apt-get clean
sudo apt-get autoremove
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)
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@example.com
In a new Terminal session upgrade Node.js & Node-RED
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:
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.
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
https://material.io/icons/Material Design Icons (e.g. 'check', 'close') or
http://fontawesome.io/icons/Font Awesome Icons (e.g. 'fa-fire').
Display of HTML
Other Dashboard Widgets
List of choices
Input field for text
Choose date from a calendar
Choose color from a wheel
Text to speech and file player
Change of page
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).
Choose a Title. It will be displayed as the title of the page in the Header of the Web Browser page.
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 defines the Tabs (pages) that form a dashboard, the sequence of the pages in the dashboard, and the groups that are on a page.
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.
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.
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.
The Dashboard display group linked to the Switch
The size of the display element. Auto default
A text label for the switch
The Default is a two-color slide switch; with Custom both the Icon and its color can be chosen.
Node transparency passing an incoming message through to output, when the box is checked
Output when the Switch is turned On
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).
Name of the Node that is displayed on the Node-RED flow
Pi Control Flow & Dashboard
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.
The Dashboard display group linked to the 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.
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.
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.
Adventure Works Marketing Plan
[Type text]Page 4the title of the page in the Header of the Web Browser page.
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, an