Robot dashboard

Introduction

The Robot Dashboard is a browser-based application developed to provide a centralized interface for monitoring and interacting with autonomous robots but as fo. The dashboard enables users to visualize real-time robot data, monitor system status, and interact with different robot components through a customizable interface.

The application was developed as part of a bachelor's project at the Technical University of Denmark (DTU) in Spring 2026. Its main objective was to create a flexible and user-friendly platform that simplifies robot monitoring and interaction without requiring users to work directly with the underlying communication systems.

The dashboard is specifically designed for the type 'Robobot' and is currently only compatible with this robot type. While the system has a modular architecture that allows for future extensions, supporting other robot types would require additional development and modifications to the existing implementation.

The dashboard consists of a frontend built with React, TypeScript, and Tailwind CSS, and a backend developed using Node.js and Express. Communication between the dashboard and the robots is handled through MQTT, while Socket.IO enables real-time updates between the backend and frontend.

Key Features

• Real-time monitoring: Displays live robot information, including position, status, and sensor data.
• Customizable dashboard: Allows users to organize and interact with different widgets across multiple tabs.
• Robot interaction: Provides an interface for monitoring and interacting with robot components.
• Widget-based interface: Includes widgets for robot information, position, driver controls, edge sensors, and debugging.
• User authentication: Restricts dashboard access through a password-based login system.

The dashboard is designed to provide a foundation for future development, allowing additional widgets and functionalities to be integrated as needed.

Developers note

This following section is for developers, it goes through the set up procedure and how the back-end and front-end is set up for further development.

Requirements

For further development of the dashboard these are the requirements to have.

• Have installed Node.js
• Have installed npm
• Have a code editor (VScode or other)
• Have Downloaded Type-Script

Set up

Before setting up the robot dashboard two necessary software programs is required.

1. A file management software (Windows: RealFTP, Mac: FileZilla)
2. A file editing software (Windows: PuTTY, Mac: Terminal)

Installing nodejs and npm on the robot

For the dashboard software to function it is important to make sure that node.js and npm is installed on the robot. To check this run the following code in the terminal

npm -v

and

node -v

If npm and node is not installed, install them using the command:

sudo apt install -y nodejs npm

File placement

To make the dashboard software functional we need to transfer the necessary files. It is important that the files are in the correct placement with the correct names for the software to start when the system boots.

When transferring the files locate the path:

/home/local/svn/robobot/

Create a folder named "Browser-based-dashboard-for-autonomous-robots" such that the folder path looks like this.

/home/local/svn/robobot/Browser-based-dashboard-for-autonomous-robots

In this folder we will transfer the back-end and the front-end. It is important that the back-end folder is called "back-end-node-js" as this name is used for the software to start when the system boots. Otherwise you will need to change the work directory in the upcomming service file.

When the back-end and front-end have been transferred to the robot in the "Browser-based-dashboard-for-autonomous-robots" folder, the following commands will be needed for each folder.

back-end

In the back-end run the following commands to make sure every needed package is installed.

npm install
npm install socket.io-client
npm audit fix

front-end

In the front-end run the following commands to make sure every needed package is installed.

npm install
npm audit fix

Making the software start when the system boots

The first thing is to make sure the robot will start the dashboard software on boot up. To do this we will use the editing software to create a service file using the command.

sudo nano /etc/systemd/system/webapp.service

This will create a file named "webapp.service", which is responsible for ensuring that the dashboard software starts automatically when the system boots.

In this file write the following code:

[Unit]
Description=Webapp starter that waits for network and MQTT
Wants=network-online.target
After=network-online.target
StartLimitIntervalSec=0

[Service]
Type=simple
User=local
#Change to the backend folder path
WorkingDirectory=/home/local/svn/robobot/Browser-based-dashboard-for-autonomous-robots/back-end-node-js
Environment=NODE_ENV=production
Environment=ROBOT_PORT=9090

#Wait for network
ExecStartPre=/bin/bash -c '\
  echo "Waiting for network..."; \
  until hostname -I >/dev/null 2>&1; do \
    echo "No IP yet. Retrying..."; \
    sleep 2; \
  done; \
  echo "Network ready." \
'

#Start Node with dynamically set ROBOT_HOST
ExecStart=/bin/bash -c 'ROBOT_HOST=$(hostname -I | awk "{print $1}"); \
        ROBOT_HOST=$(echo "$ROBOT_HOST" | xargs); \
        echo "Starting web app with ROBOT_HOST=$ROBOT_HOST"; \
        export ROBOT_HOST; exec /usr/bin/node server.js \
'

Restart=always
RestartSec=5
TimeoutStartSec=120

[Install]
WantedBy=multi-user.target

After writing this code save it and exit. To activate this service file run the following sequence of code:

sudo systemctl daemon-reload
sudo systemctl enable webapp.service
sudo systemctl restart webapp.service
journalctl -u webapp.service -f 

With this you should be able to access the dashboard at http://<IP ADRESS>:9090

Back-end

The backend of the Robot Dashboard is responsible for managing communication between the frontend and the Robobot. It is developed using Node.js and Express, with MQTT handling communication with the robot and Socket.IO providing real-time updates to the frontend.

The backend acts as an intermediary between the robot and the web application, processing incoming robot data and forwarding relevant information to the dashboard.

The backend consists of several files and components, each serving a specific purpose. Some files can be modified to customize the dashboard's functionality, while others contain core functionality and should generally remain unchanged to ensure the system operates correctly.

This section provides an overview of the backend architecture, its file structure, and guidelines for configuring and modifying the system.

For detailed information about the backend structure and configuration, see Backend Documentation.

Front-end

Frontend