How to use FUXA with Raspberry Pi PLC

In this blog post, we will explore how to use FUXA with Raspberry Pi PLCs to create a front-end solution for enhanced control and monitoring.

Introduction

The Raspberry Pi is a versatile platform often used for various industrial applications. Its integration with Node-RED provides an intuitive way to control GPIO pins and manage automation tasks. However, for those who want to create more advanced and customizable front-end interfaces, FUXA is an excellent addition. By combining FUXA with Node-RED and MQTT, you can build a customizable user interface to monitor and control Raspberry Pi PLCs in real-time.

Hardware Requirements

To complete this you will need:

• Raspberry Pi PLC from the Raspberry Pi PLC family.
• Micro-SD card inserted on the Raspberry Pi PLC.
  
• Wires for connecting and testing input/output functionalities.

Software Requirements

The following software tools are required to set up your system:

• Raspberry Pi OS: Install this on your micro-SD card. We recommend using one of our pre-configured images to save time, as they come with many of the necessary settings already in place.
  
• Raspberry Pi PLC Library (rpiplc): If not pre-installed, you can install it by following the installations instructions here.
• MQTT Service: Install the MQTT broker (e.g., Mosquitto) using the following command:

sudo apt install mosquitto

• Node-RED: If Node-RED isn’t already installed, you can install it using this command:

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

• FUXA: Install the FUXA package globally using npm (for more installation options, refer to the official documentation):

npm install -g --unsafe-perm @frangoteam/fuxa-min

Establishing Pin Connections with Node-RED

Step 1: Access Node-RED

Open Node-RED by navigating to the following address in your web browser:

http://ip_raspberry_pi_plc:1880

Once there, you will need to install the "node-red-librpiplc" library:

1. Go to "Node-RED Menu -> Manage palette -> Install"
2. Search for "@industrial-shields/node-red-librpiplc" and install it.
   

Step 2: Setting up Output Pins

1. Add an MQTT Input node to listen to messages on "localhost:1883" (the MQTT default port).
2. Set the topic to listen for outputs using the wildcard topic "Q/#" to cover all output pins.
3. Add a JSON and Debug nodes to process and display the MQTT messages.
4. Use Switch nodes to manage different zones and outputs (e.g., Q0.0 to Q0.7 for the RPIPLC_21 model).
5. Add Change nodes to set values for each output pin. The payload should be configured as "msg.payload.value".
6. Add Digital Write or Analog Write nodes to handle the output, depending on your Raspberry Pi PLC’s configuration.
7. Finally, make sure to connect everything as shown in the diagram for handling the outputs.
   

Step 3: Setting up Input Pins

1. Add an Inject node with the desired payload and an appropriate topic (e.g., "I/<pin_name>" for input pins). Set the inject interval to 0.1 seconds to ensure the inputs are refreshed quickly.
2. Add Digital Read or Analog Read nodes based on your PLC model’s input configuration (e.g., from I0.0 to I0.6 will be digital and from I0.7 to I0.12 will be analog). Select the model and version of your RPIPLC and then the specific output node for each one.
   
3. Use Change nodes to process input values, similar to the output setup. Ensure each input pin is indexed correctly. You can do this by following these steps:
4. 1. Add a Change node and, under the "Set" option, select JSON as the format. Set it to "{"value":payload}" to store the input value in the "msg.payload".
      
   2. Click the Add button to create a new rule.. Set the field to "msg.payload.index" and in "to the value" field,  input the corresponding index value for the specific input.
   3. Duplicate this Change node for each input, and edit the index values accordingly to match each input pin.
   4. Add another Change node to assign the zone for the group of input pins. Connect all the input-related Change nodes to the input of this node. Modify this node by setting "msg.payload.zone" to the value corresponding to the zone.
5. Add a JSON and a Debug nodes connected to the output of the last Change node.
6. Create an MQTT Output node and configure it like "localhost:1883". Make sure to not write any topic, because we will follow the tip that appears by setting the topics with the configuration we have made.
7. Connect all nodes appropriately, ensuring they follow the established input pattern.

Final result

The final result, with both inputs and outputs configuration, should look something like that:

You can download the following JSON to import it from "Node-RED Menu -> Import -> Clipboard option -> select a file to import", and search for the JSON you just downloaded.

Node-RED json

Configuring Pins on FUXA

Step 1: Start FUXA

To launch FUXA, run the following command:

sudo fuxa

Then navigate to the FUXA editor page:

http://ip_raspberry_pi_plc:1881/editor

Step 2: Establish MQTT Connection

1. Go to the "Setup" or "Edit Project" menu by clicking the gear-shaped button located at the top left of the page:
2. From the available options, select "Connections":
3. You will now be on the "Device settings" page. To connect to the pins of the Raspberry Pi PLC, we will use the MQTT protocol by connecting to what we previously set up in Node-RED. To start, click the plus (+) button to add a new device connection. Enter the device properties as shown in the image to entablish an MQTT client connection to port 1883 (t standard port for MQTT).
4. If the connection is successful, a green circle will appear next to the MQTT device.

Step 3: Add Output Pins

1. Once the connection is successfully created, click the "Edit device tags" button next to the MQTT device (this button is next to the pencil-shaped icon). Here, you will add the pins from the Raspberry Pi PLC that you want to use. In this case, we are adding the same ones used in the Node-RED flow for the RPIPLC_21 (from Q0.0 to Q0.7 and from I0.0 to I0.12).
2. Start by adding the output pins. Click the plus (+) button at the bottom right of the page to add the first connection. You will now be in the "Broker Topics to subscribe and publish" menu. Select the "Publish" option, and enter the topic name and path as "Q0.0_value". Click the "Publish" button and then close the window by clicking the "Close" button.
3. Next, create another connection, go to the "Publish" option again, and set the topic name as "Q0.0" and the topic path as "Q/Q0.0". Click the "Add attribute to payload" 3 times, then click the "JSON" button. In the "Key" column, enter "zone", "index" and "value" in each row, respectively. In the "Type" column, set the first two to "Static", and leave the third as "Tag". For the values, set "0" for both zone and index (in this example, zone will always be 0 for all pins), and for tag, select the previously created "Q0.0_value" topic.
4. Repeat this process for all output pins (Q0.0 to Q0.7). Once completed, you should have a configuration similar to what is shown in the image.

Step 4: Add Input Pins

1. Now, add the input pins. Create a new connection and stay in the "Subscribe" option. In the search bar, type "I/#" and click the magnifying glass (search) button. This should list all the topics created in the Node-RED flow.
2. Select the "I/I0.0" topic and click the "JSON" button to see the possible addresses. Deselect the "index" and "zone" fields, as they are not needed for this project. In the "Name" column, enter "I0.0" (otherwise, its default name will be "I/I0.0[value]". Save the connection by clicking the "Subscribe" button, and then close the window by clicking the "Close" one.
3. Repeat this process for the other input pins. Once finished, the configuration should look like the example in the image.

Final device configuration

You can download this entire configuration, including device and tag connections, by downloading the following file:

Device settings json

To import this configuration, go to the "Device settings" page, click on the kebab menu (the three points one), and select "Import devices".

Creation of the dashboard

Now that the previous configuration is done, we can create and all the necessary elements to the dashboard to view and interact with the pins of our Raspberry Pi PLC.

Step 1: Set up Views

1. First, navigate to the editor page by going to "<http://ip_raspberry_pi_plc:1881/editor", or access the "Views" section from the "Setup" menu.
2. Once there, you have two options: either use the default view or create a new one. To create a new one, click the plus (+) button in the "Views" drop-down menu, enter a name fore view, and click OK to save it.





3. Once the view is created or selected, click on the kebab menu (the three dots) to access its properties. Here, you can adjust the dimensions by manually changing the width and height or selecting from predefined sizes. You can also change the background color from the default white to a different color.





4. In the "Setup" menu, go to the "Layout" option inside the "User Interface" category. If you have multiple views, you can select which one will be the default (the first view, shown when entering the page). You can also configure whether to show the navigation menu or require login on start.

Step 2: Add Digital Outputs

1. To start adding elements to the interface, first add titles like "Outputs" and "Inputs" using the "Text Tool".

 



2. Then, add switch buttons. Click on a switch and open the "Property" menu from the pop-up window that appears on the left.





3. Customize the switch with the colors, values and text of your choice.
   
4. Under the "Tag" field, select the MQTT device and choose the "Q0.0_value" tag to assign this switch to the tag.
5. Copy the switch and  adjust the tag for the other outputs. Use the "Text Tool" to label each switch with the corresponding pin identifier (e.g., Q0.0, Q0.1) to easily identify which pin each switch controls.
6. Save the project using the "Save" button in the top left corner. Now, you can go to the main page at "<http://ip_raspberry_pi_plc:1881" and test whether the switches work as expected.

Setup 3: Add Digital inputs

1. To display the digital input values, use a table. First, add a table using the "Table" button.





2. Click on the table and then on the "Property" button on the right. Customize the colors and font size as desired before adding the input elements.





3. Open the "Table customizer" by clicking the pencil-shaped button.
4. Change each column name and type with the corresponding kebab button (3 points one) of each column. Set the first column name as "Pin" and the second one as "Value". Set both column types as "Label".
5. Add a row for each digital input pin using the plus (+) button at the bottom left of the window. .
6. Type the pin name (e.g., I0.0, I0.1) in the left column. For the right column, change the row type to "Variable" and assign the corresponding tag for each input.
7. Save your changes by clicking the OK button, and then save the project. You can now test the input pins on the main page.

Step 4: Display Analog Inputs

Analog inputs can be displayed using different types of visualizations. Since analog inputs can have a range of values (not just 0 or 1), we’ll explore more visual options.

1. Circular Gauge:

1. Add a circular gauge.





2. Click the "Property" button to configure it. Select the tag for the input you want to display.
3. Choose one of the three available designs and customize it. Set the minimum value to 0 and the maximum to 4096, which represents the range of possible values (where 4096 equals 10V).
4. Save the project and verify that it works correctly. For example, if you connect a 10V source, the gauge should be fully filled; with 5V, it will be half-filled; with 3.3V, it will be one-third filled.

2. Line Chart:

1. To track the evolution of changes in the analog input, add a line chart. First, configure the line chart settings by going to the "Setup" menu and selecting "Line Charts".
2. Add a new configuration using the plus (+) button and name it. Open its options by clicking the kebab menu and choose "Add Line" to assign the corresponding tag for the input. Customize the color and other settings if needed.
3. Add a line chart to the dashboard by using the Chart button.





4. Assign it to the configuration you just created via the "Property" menu. Hide the legend or make other adjustments if desired.
5. Save the project and check if the line chart is working correctly on the main page.

3. Bar Graph:

1. We will add all the analog outputs in the same graph. There are different options to do it, but in this case we will use a bar graph.
2. Here we will do a similar thing like with the line chart. Create a new graph configuration by clicking the plus (+) button. Then, use the kebab menu to add the source tags for the analog inputs. Customize the colors and other options as needed, then save the configuration.
   
3. Add the bar graph to the dashboard using the "Bar Graph" button.





4. In the "Property" menu, select the graph configuration you just created in the "Graph to show". Customize the colors and other options as needed, then save the configuration.
5. Save the project and check if the line chart is working correctly on the main page.

Using Scripts to Automate Outputs

We can create a script and associate it with a button or image to automate actions. For example, you can have an image that, when clicked, turns off all outputs.

1. First, navigate to the "Scripts" page from the Setup menu.
2. Click the plus (+) button at the bottom right of the page to add a new script. Then, open the kebab menu (three dots) and select "Edit Script Name". Name the script's main function, like "resetOutputs()", to easily identify it later if you end up creating multiple scripts.





3. Next, click the less-than sign ("<") in the top right corner of the window. This will open a drop-down menu. From the System Functions list, select "$setTag(TagID, value)". You will then need to select the output tag that you want to modify.





4. After selecting the tag, set its value to 0 (to turn the output off). Repeat this step for all the output tags you want to modify. For better code organization, you can place these commands inside a function and call the function, which will be useful if your script grows in complexity.
5. Add any image you want using the Image Tool (embedded) button, and adjust its size as needed.





6. Click on the image and then the Property button. Navigate to the second tab, called Events, and add a new event associated with this image. Set the event type to "click", the action to "Run Script", and choose the script you just created, "resetOutputs()".

Final result

After following these steps, you'll have a fully functional interface in FUXA, capable of interacting with your Raspberry Pi PLC. Test both the inputs and outputs to ensure everything is working as intended.

With this setup, you now have a robust front-end solution that integrates Node-RED and FUXA, providing a highly customizable and interactive control system for your Raspberry Pi PLC.

You can download the entire FUXA example, including all device and tag configurations, scripts, and the interface design, by downloading the following JSON file and importing it using the Save button at the top left of the page:

FUXA project json