06/27/2025
ROKIT | Node-RED | HTML | JavaScript

ROKIT Dashboard with Node-RED for ctrlX AUTOMATION

Introduction

In this article I will show you a newly developed dashboard for controlling an AGV (Automated Guided Vehicle) equipped with ROKIT (The Robotics Kit by Bosch Rexroth) components, realizing functions such as single instruction control and template trajectory cruising.

The Dashboard can be directly imported into the Core on the AGV, or it can be used in the virtual Core on the PC, but in this case, you need additional simulation software because you are controlling a virtual AGV in the simulator.

For more information about Rokit, please go here.

Rokit components

General

The software provides an operation panel that constructs VDA 5050 commands based on the user's parameter settings and sends them to Navigator via MQTT. Navigator then converts them into lower-level commands to control motors and other actuators to achieve motion.

Among them, the MQTT broker can be installed on the Core, or the broker node in Node-RED can be used.

More information about MQTT connection can be found here.

More information on VDA 5050 standard directives can be found here.

Below is the topology diagram of the AGV system.

Topology diagram of the AGV system

Graphical interface

The dash is divided into 4 pages: Home, Manual, Automatic, Settings. The right and bottom sidebars of each page are fixed and are used for some common input and output functions. The following is a description of each page.

GUI Overview
  • Home: The homepage can be used to display the basic information of the AGV and is currently left blank.

Home Page
  • Manual: This page provides a single command operation panel. Different sports modes can be selected according to the different hardware structures of AGV, such as TOS (Turn on Spot). Note: Please check the parameter settings carefully before clicking the arrow buttons. Please check the comment box for the meaning of each parameter.

Manual Page
  • Automatic: This page provides a variety of automatic driving templates, and each trajectory can also select a different driving direction.  Please check the comment box for the meaning of each parameter.

Automatic Page
  • Settings: This page is used for some general settings. Currently there are settings for MQTT connection and VDA 5050 commands. Set up and save the content on this page before you start using the dashboard.

Settings Page

Flows

The dash is written based on Node-Red's flow programming combined with HTML, JavaScript and CSS. Here I introduce the overall framework and logic behind the flow.

  • CSS: All styles are written in the template node. These CSS codes are divided into different groups by element. For example, the button node contains all the styles related to the button, such as the color and size of the button.

Flow: CSS group
  • Init: All global variables will be initialized here. Note that this group also contains an MQTT broker node (1). If you want to use the MQTT Broker node in node red, please search for “node-red-contrib-aedes” in the “Manage Palette” and download it. Otherwise, just delete this node.

Flow: Init group
  • Comm: This group contains the common areas of each page, namely the left and bottom sidebars of the page. The template node (1) contains the HTML code of the graphical interface. The function nodes (2) named build is used to construct the VDA command. There is also an MQTT receiving node (3) and sending node. The receiving node is used to receive the status information sent back by Navigator, such as the absolute position and speed of the AGV. The send node (4) is used to send commands to Navigator.

Flow: Comm group
  • Home: Still under development. The page content can be customized as needed.

Flow: Home page group
  • Manual: This group contains the graphical interface of the Manual page and all functions on this page. The template node (1) is used to write the main frame interface in the middle of the page. This contains several text boxes and buttons. The function nodes (2) named build are similar to those in comm and are used to construct different commands. There is a subgroup here for loading images saved locally on the Core. Note that all illustrations need to be manually uploaded to the specified location in Core. The specific steps are as shown below. In addition, there is only one MQTT sender node and no receiver node, because we don't need feedback from Navigator here.

Flow: Manual page group
  • Automatic: On this page, there are also some illustrations loaded locally to show the trajectory templates. Please refer to the Manual section for specific steps. The template node and function nodes with HTML and JavaScript are similar to those in Manual. The difference is that there is an MQTT receiving node (1) to obtain status feedback from Navigator. Because before sending the automatic tracking command, it is necessary to determine whether the AGV has completed the previous command.

Flow: Automatic page group
  • Settings: This page contains settings related to MQTT and commands. The existing content is for reference only, and users can add other global settings.

Flow: Settings page group

Apply

There are two application scenarios for this dash: the first is running on the physical Core of the AGV, and the second is running on the virtual Core of the PC. Different usage scenarios correspond to different parameter settings. This tutorial only introduces the general application steps on Core and does not involve the parameter settings of the physical AGV or the use of simulation software.

  1. Download and unzip the attachment, which contains a json file and some png images.

  1. Connect to Core and open the device-dashboard in your browser. If you can’t find Node-RED in the Navigation bar, please go to Settings>Apps to install it. If this is your first time using Node-RED on Core, please watch another tutorial first.

  1. Upload the illustration to Core first. Click button Manage app data > Node-RED Configuration.

    Step 3: Find the root of Node-Red on Core

    Then create a new folder called “rokit” with “+” button.

    Step 3: create a new folder

    Go into folder “rokit” and upload all images from step 1.

    Step 3: Upload images
  2. Open Node-RED > Flow Editor and click the menu button in the upper right corner and click Import. Then click the button “select a file to import”, find the json file in the first step and upload it. Finally, click import.

    Step 4: Open Node-Red and import the flow
  3. Now you will see the complete project in the current flow. At this point you will find that there are errors in the Init group. Because you haven't installed the MQTT Broker node yet. If you already run a broker on your AGV, then just delete this node here. If you want to use it in Node-Red, click “menu button > Manage palette”, then search for “node-red-contrib-aedes” and install it.

    Step 5: Install MQTT broker node or delete it
  4. At this point you will no longer see errors and warnings can be ignored. Select any MQTT send or receive node, double-click it, and then click the Edit button in the Server column of the editing window. In this page you can fill in the correct “IP address” and “Port” according to your broker settings. After modification, click Update and Done. If a green “connected” appears under the MQTT node, it means you have successfully set up the MQTT connection.

    Step 6: Modify MQTT server settings
  5. Click the “Deploy” button in the upper right corner to complete the compilation of the project. Then go back to “device-dashboard” of the Core, click the button “Dashboard” under “Node-RED”. Now you will see the ROKIT-Dashboard.

  6. Before you start using it, you need to complete the general settings about MQTT and VDA 5050 command on the settings page. After setting all items correctly, click “Save All”. At this time, you will see the position feedback from the AGV in the Output window. If not, it means that the MQTT connection was not established successfully. Please check the relevant settings.

    Step 8: Modify general settings first
  7. Finally, you can go to the Manual or Automatic page to operate your AGV. For detailed usage, please refer to the comment box on the page.

Notice: This project is only a sample for reference, and some functions are still defective. If you have any questions or suggestions, please leave a comment to discuss.

Related Links

4
src.zip
397.43KB
Types
How-to
Products
Controls
Markets
Robotics

Latest published/updated articles