: Pi Control Will English June 26, 2017 will.english@vivaldi.net
1 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.
2 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-notificationshtml/#.wpkwktwqppr BlinkM I²C Controlled RGB LED http://thingm.com/fileadmin/thingm/downloads/blinkm_datasheet.pdf Document Revisions April 21, 2017 June 26, 2017 Base Document Add BlinkM - I²C Controlled RGB LED to Pi Control
3 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
4 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 wpasupplicant 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 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 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 npm@2.x 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 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 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
9 Form layout Output Gauge Output Chart Text to speech and file player Notification Change of page
10 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 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 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 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: Size: Label: Icon: If msg: On Payload: Off Payload: Topic: Name: 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). Label Name of the Node that is displayed on the Node-RED flow
14
15 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: Size: Label: Format: If msg: options: Topic: Name: The Dashboard display group linked to the Switch Node The size of the display element - 4x4 maintains display of the picker. A text label for the switch Output format of a chosen color. Hex is easiest for this purpose. Node transparency, passing an incoming message through to output, when the box is checked What to include in the Controls display. Label Name of the Node that is displayed on the Node-RED flow
16 Exec Calls out to a system command - a method of making external calls out from Node-RED to external programs or utilities. Command: Append: Name: The program or utility to be executed. The msg.payload to the command. 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 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 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: Size: Name: If msg: Template: The Dashboard display group linked to the Template The size of the display element. Auto default Name of the Node that is displayed on the Node-RED flow Node transparency passing an incoming message through to output, when the box is checked 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.
19 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.
20 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.
21 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.