BeaglePlay + NodeRed

Hello Everybody! This will be a simple starter project to get you adjusted to NodeRed. I am a beginner, so hopefully my tutorial and tips will help you. This will be an extension of a previous project I did. You will need to go through that tutorial first, then join me back here for some NodeRed training. Let's get started!

BeaglePlay + Qwiic Capactive Touch Slider

What is NodeRed?

NodeRed is a programming tool for wiring together hardware devices along with application programming interfaces. It is a flow-based programming tool that uses "boxes" or nodes in your palette. Luckily for us, this programming tool is compatible with BeaglePlay.

What is NodeRed UI/Dashboard ?

NodeRed dashboard utilizes the dashboard functions available in NodeRed to give your flow life! When I say life I just mean a visual of your flow! The dashboard functions give you that option with a gauge, text output, charts, buttons, audio, and even more choices to download.

Let's Begin

First, you will want to download Node-Red on your BeaglePlay. I will post the instructions below for you all to follow.

Open the Terminal on BeaglePlay, type:

sudo apt update
// password = “temppwd”

The password will be "temppwd", if you as the user have not changed it.

Next type:

sudo apt install npm
sudo npm install -g --unsafe-perm node-red

Now to begin NodeRed on your BP, type:

node-red

Once you have NodeRed downloaded on your BeaglePlay, we can get started with the fun stuff. Begin running NodeRed on your play. I type the command "node-red" to begin mine.

Now you can open the editor in a website URL:

localhost:1880

To open the UI interface, type this in your URL:

<your IP Address>:1880/ui

To locate your IP Address there are two ways:

1. Ethernet connection: Type "sudo ifconfig" in your terminal and look for eth0, this will be where your IP Address is located. (pictured below)

2. Wi-Fi Connection: In the "wpa_gui" app, (the same place you connected Wi-FI at the beginning) the IP Address is located at the bottom of the screen. (pictured below)

This website will give you access to the editor. Now we can begin making flows. We need the pythonshell node to get us started.

1. Download Pythonshell

Since BeaglePlay uses Linux OS and python, you will want to download the python shell. This node gives you access to execute the python script through NodeRed. Once that is downloaded it will be readily available. Instructions to download can be found in the pictures below.

2. Begin Flow Workspace

Now you can start your flow in NodeRed. For this example I used the nodes : pythonshell, function, and debug. The specific dashboard nodes I used were the LED and Text. If you would like to download more dashboard nodes, you can download them the same way you downloaded the pythonshell node.

Drag the pythonshell Node onto the workspace from the palette (to the left of your workspace). Open the node and input your python code as pictured below. Make sure to select continuous when executing the python shell. You will always need a debug node to see the output of your program. Once those are wired together, deploy the flow by clicking the big red button in the corner labeled "deploy". This will give you the same output as your Linux OS in your debug window.

**Lil Tip: Every time an edit is made to your dashboard nodes, you will always have to re-deploy. A blue dot will show on the node alerting you to re-deploy**

Quick Tip: Make sure to click to blue button next to your python node. This will run the program so you can see the output in the debug window to the right. Just click on the bug tab to the right of the workspace to open the debug window.

Now let's give this output an actual visual!

3. Introducing NodeRed UI

To download this application the same way as the pythonshell down below in the "1. Downlaod Pythonshell". Search "node-red-dashboard" instead of "pythonshell".

If you are coming from my previous example, Hello! Also, I will be doing the example in the "How can I expand on this" section. To create a visual for NodeRed we will need to bring up the UI interface. Instructions located above.

Now you can see the visuals that the dashboard nodes will give. I used the text and LED dashboard nodes. You may use whatever your imagination you would like to show the visual. I'll keep the example simple for this tutorial.

You will need to use a function node depending on the output you would like. For the text dashboard, I made a function to print the output. The function node utilizes JavaScript for programming. I did a program to print the different regions depending on the input. I will insert that below.

var region = msg.payload // integer initialized
var output = {};
if (region.startsWith("Pad.Left")) {
output.payload = "Left Pad";// print output
} else if (region.startsWith("Pad.Middle")) {
output.payload = "Middle Pad"; //print output
}
else if (region.startsWith("Pad.Right")) {
output.payload = "Right Pad"; //print output
}
else {
output.payload = "No Touch";//print output
}
return [output];

Input this code in your function block. This will print in a more formal format than "Pad.Left". Wire together the function with the pythonshell and debug node. You will see an output in the debug window, depending on what you programmed the output to be.

Now onto the actual UI aspect of this step. The code used above is to print a text, therefore the text dashboard will be used. You must edit the group to create a tab for this specific output. Name it as you would like but mine is showed below.

Without these specifications, you will not be able to see your output visually using dashboard. This gives the output a destination. Once that is done, you can wire everything together as pictured below.

I added the LED as a fun touch to the project. To get the LED node, you perform the same steps as downloading the pythonshell. In the search bar in install type "node-red-contrib-ui-led". This is the node I am using. It will display a light depending on the region touched on the Capacitive touch slider. I have it to flash yellow for left, green for middle, and purple for right. This node is a simple true or false statement that requires no programming. You simply just change it how you see fit.

4. The Visual!

Now that all of the work is done, we can see the output with the UI interface. Open it as previously stated and your Tab should be on the left. Don't forget to run the python script like I told you to! Now we have an output of the different regions along with the LED flashing lights.