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.

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)

Downloads and 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

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

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
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

Back-end

Backend

Front-end

Frontend