Rsewiki - User contributions [en]

Backend

2026-10-13T12:41:02Z

Spring2026: /* Socket.IO Configuration */

== Backend documentation ==

__TOC__

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====
This function listens to certain MQTT messages from the protocol. The syntax of such message is:

<code>
mqttClient.on(title, payload)
</code>

The MQTT has different label titles i.e ("message" or "error") and payload is the content that follows that title. These determines what kind of output the MQTT protocol has sent.

If the label title is "message" it will contain a topic and a message.

If the label title is "error" it will contain an error message.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Sockets is the primary method of communication between the front-end and the back-end. There are two primary functions:
* socket.on (used in socket.js)
* io.emit (used in mqttConnection.js)
===== socket.on =====
"socket.on" listens for any commands that have been sent with a specific topic from the front end.

===== io.emit =====
"io.emit" sends commands to the front-end with a package.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Frontend

2026-10-13T12:32:45Z

Spring2026:

Backend

2026-10-13T11:08:33Z

Spring2026: /* mqttClient.publish */

== Backend documentation ==

__TOC__

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====
This function listens to certain MQTT messages from the protocol. The syntax of such message is:

<code>
mqttClient.on(title, payload)
</code>

The MQTT has different label titles i.e ("message" or "error") and payload is the content that follows that title. These determines what kind of output the MQTT protocol has sent.

If the label title is "message" it will contain a topic and a message.

If the label title is "error" it will contain an error message.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Backend

2026-10-13T11:08:11Z

Spring2026: /* MQTT Configuration */

== Backend documentation ==

__TOC__

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====
This function listens to certain MQTT messages from the protocol. The syntax of such message is:

<code>
mqttClient.on(title, payload)
</code>

The MQTT has different label titles i.e ("message" or "error") and payload is the content that follows that title. These determines what kind of output the MQTT protocol has sent.

If the label title is "message" it will contain a topic and a message.

If the label title is "error" it will contain an error message.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Frontend

2026-10-13T11:01:54Z

Spring2026:

== Frontend ==

The frontend is mainly structured around components, each responsible for specific functions. These components are used within pages, where they are combined to create complete pages with the required functionality. The frontend is developed using TypeScript, React, and Redux, with Tailwind CSS used for styling.

=== Components ===
Currently, the frontend consists of seven different components, organized as follows:

==== button ====

the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element <button> that can be used in the page you want to add a button.

the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.

==== dropdown ====

The dropdown menu does not have any specific properties of its own. It is mainly used as a placeholder that appears on the screen when the user clicks a button or hovers over it. The dropdown menu contains different buttons and does not require a separate `.ts` file, as it does not have any styling of its own.

==== inputfield ====

The InputField component It supports both text and password inputs and handles user interactions through event handlers such as onChange and onKeyDown. This component also uses Tailwind CSS for styling, which is defined directly within the tsx.

==== popupwindow ====

PopupWindow consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the popup window, providing a default version that can be reused. The TS file defines the styling using Tailwind CSS, allowing the popup window to be customized with different sizes and colors.

The PopupWindowContent folder contains the completed popup windows, which currently consist of two different components: SettingsPopupWindow and WidgetPopupWindow.

The reason these two components are not included in the general TS and TSX files is that they contain different content and functionality. When a new type of popup window is needed, a new component can be created under PopupWindowContent, where its specific content and functionality are defined, while the basic structure and styling are reused from PopupWindow.

==== sidebar ====

The Sidebar component consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the sidebar, including the ability to open, close, and resize it. It also stores the sidebar's state and previous width, allowing the user's settings to be preserved during the session.

The TS file defines the styling using Tailwind CSS. This includes the sidebar colors, the positioning of the toggle button and resize bar, and the rotation of the arrow when the sidebar is opened or closed.

The `SidebarContent` folder contains the left and right sidebar components. This is where developers can modify the content and functionality of each individual sidebar without changing the general Sidebar component.

The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.

==== tabbar ====

The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

The tabbar.tsx file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.

The tabs.tsx file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.

The tabLayout.tsx file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.

If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.

The tabMap.tsx file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.

If the desired layout does not already exist, a new layout can be created in `tabLayout.tsx`.

The new tab must then be registered in the tab mapping and management logic in `tabbar.tsx` so that it can be opened and displayed through the tab bar. If `tabMap.tsx` is used elsewhere in the application, the new tab should also be added there.

This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.

==== widget ====

The widget.tsx file acts as a central placeholder for the different widgets. It determines which widget should be displayed based on the provided widget name.
The widgets folder contains the individual widget components, where their specific content, functionality, and styling are developed.
When creating a new widget, developers should create a new component in the widgets folder and register it in widget.tsx so it can be displayed in the application.

Each widget is developed as an individual TSX component inside the widgets folder, containing its own functionality and styling. For example, TiltGraphWidget.tsx receives data from the backend using Socket.IO and displays it in a graph using Recharts.
A tab can contain from one and up to four individual widgets, depending on the selected layout. The widgets displayed in each tab are defined in tabs.tsx, while tabLayout.tsx determines how they are arranged on the screen.
This structure allows developers to create and modify individual widgets independently and reuse them across different tabs without changing their internal functionality.

=== Pages ===

Frontend

2026-10-13T11:01:38Z

Spring2026:

Backend

2026-10-13T10:59:54Z

Spring2026: /* Backend */

== Backend documentation ==

__TOC__

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====

Explain how to configure the MQTT broker,
connection settings,
and topics.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Robot dashboard

2026-10-13T10:59:41Z

Spring2026: /* Back-end */

__TOC__

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

# A file management software (Windows: RealFTP, Mac: FileZilla)
# 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

<code>
npm -v
</code>

and

<code>
node -v
</code>

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

<code>
sudo apt install -y nodejs npm
</code>

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

<code>
/home/local/svn/robobot/
</code>

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

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

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.

<pre>
npm install
npm install socket.io-client
npm audit fix
</pre>

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

<pre>
npm install
npm audit fix
</pre>

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

<code>
sudo nano /etc/systemd/system/webapp.service
</code>

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:
<pre>
[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
</pre>

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

<pre>
sudo systemctl daemon-reload
sudo systemctl enable webapp.service
sudo systemctl restart webapp.service
journalctl -u webapp.service -f
</pre>

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|Backend Documentation]].

== Front-end ==

[[Frontend]]

= Users note =

Backend

2026-10-13T10:57:35Z

Spring2026: /* MQTT Configuration */

== Backend ==

__TOC__

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====

Explain how to configure the MQTT broker,
connection settings,
and topics.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Backend

2026-10-13T10:57:07Z

Spring2026: /* Backend Architecutre */

Backend

2026-10-13T10:57:01Z

Spring2026: /* Introduction */

== Backend ==

__TOC__

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====

Explain how to configure the MQTT broker,
connection settings,
and topics.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Robot dashboard

2026-10-13T10:56:46Z

Spring2026: /* Back-end */

__TOC__

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

# A file management software (Windows: RealFTP, Mac: FileZilla)
# 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

<code>
npm -v
</code>

and

<code>
node -v
</code>

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

<code>
sudo apt install -y nodejs npm
</code>

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

<code>
/home/local/svn/robobot/
</code>

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

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

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.

<pre>
npm install
npm install socket.io-client
npm audit fix
</pre>

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

<pre>
npm install
npm audit fix
</pre>

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

<code>
sudo nano /etc/systemd/system/webapp.service
</code>

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:
<pre>
[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
</pre>

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

<pre>
sudo systemctl daemon-reload
sudo systemctl enable webapp.service
sudo systemctl restart webapp.service
journalctl -u webapp.service -f
</pre>

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.

[[Backend]]

== Front-end ==

[[Frontend]]

= Users note =

Backend

2026-10-13T10:55:12Z

Spring2026: /* MQTT Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
The MQTT protocol is created in the "mqttConnection.js" file, and is the main file for communicating with the robot. To communicate different commands is used:
* mqttClient.subscribe
* mqttClient.unsubscribe
* mqttClient.publish
* mqttClient.on

===== mqttClient.subscribe =====
This is used to make the back-end begin to listen to a certain topic. The syntax of such message is:

<code>
mqttClient.subscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.unsubscribe =====
This is used to make the back-end stop listening to a topic. The syntax of such message is:

<code>
mqttClient.unsubscribe("dtubot/drive/T0/gyroo");
</code>

* "dtubot" identifies the robot platform.
* "drive" represents telemetry topics used to receive data from the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroo" represents the topic that is subscribed to.

===== mqttClient.publish =====
This is to send a message to a specific topic, which the robot will receive. The syntax of such message is:

<code>
mqttClient.publish("dtubot/cmd/T0", "gyroc Start");
</code>

* "dtubot" identifies the robot platform.
* "cmd" represents telemetry topics used to send commands to the robot.
* "T0" is dependent on the number of Teensy Boards and is zero-indexed. It mentions which Teensy board it will listen to.
* "gyroc Start" is the command that is sent to the robot.

===== mqttClient.on =====

Explain how to configure the MQTT broker,
connection settings,
and topics.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Backend

2026-10-13T10:44:29Z

Spring2026: /* Service filles Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== Service filles Configuration ====

The <code>services/</code> directory contains files responsible for handling specific backend functionalities and communication between different components of the Robot Dashboard.

Each service is responsible for a particular task, helping separate the application's functionality and making the codebase easier to maintain.

===== Tab Service =====

The <code>tabService.js</code> file is responsible for managing MQTT subscriptions based on the active dashboard tab. It communicates with <code>mqttConnection.js</code> to start and stop subscriptions, ensuring that the backend only subscribes to the data required by the selected tab.

The file contains three main functions:

* '''tabChanged(previousTabTitle, newTabTitle):''' Handles switching between dashboard tabs by stopping subscriptions associated with the previously active tab and starting subscriptions required by the newly selected tab.
* '''onlyTabClosed(previousTabTitle):''' Handles closing the last open tab by stopping its associated MQTT subscriptions.
* '''tabChangedNoPrevious(newTabTitle):''' Handles opening a tab when no previous tab was active by starting the subscriptions required by the selected tab.

Each dashboard tab is associated with specific MQTT subscriptions, such as heartbeat data, IMU sensor readings, robot information, and distance sensor data.

When adding a new tab that requires MQTT data, the corresponding subscription handling should be added to the relevant functions in <code>tabService.js</code>.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Backend

2026-10-13T10:42:04Z

Spring2026: /* Core files and Restrictions */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== Service filles Configuration ====
The service files acts as the logic in the code and the ones that can and should be modifcied is <code> tabService </code>

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

Backend

2026-10-13T10:39:13Z

Spring2026: /* Running the backend */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== Service filles Configuration ====
The service files acts as the logic in the code and the ones that can and should be modifcied is <code> tabService </code>

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

Backend

2026-10-13T10:38:20Z

Spring2026: /* API Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== Service filles Configuration ====
The service files acts as the logic in the code and the ones that can and should be modifcied is <code> tabService </code>

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Frontend

2026-10-13T10:37:35Z

Spring2026:

Backend

2026-10-13T10:34:44Z

Spring2026: /* Authentication and Session Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:34:22Z

Spring2026: /* Authentication and Session Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

The \<code>security/\</code> directory contains the script responsible for handling authentication. This script should remain unchanged unless modifications to the authentication mechanism are required, as changes may affect the security and functionality of the application.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:29:16Z

Spring2026: /* Authentication and Session Configuration */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:27:36Z

Spring2026: /* Session Secret */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory
<code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:27:30Z

Spring2026: /* Session Secret */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated, type from the root directory <code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:27:13Z

Spring2026: /* Session Secret */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated type in the root directory <code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:26:20Z

Spring2026: /* Session Secret */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

If a new session needs to be generated type <code> node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" </code>

== Core files and Restrictions ==

== Running the backend ==

Frontend

2026-10-13T10:25:32Z

Spring2026:

Frontend

2026-10-13T10:25:05Z

Spring2026:

== Frontend ==

The frontend is mainly structured around components, each responsible for specific functions. These components are used within pages, where they are combined to create complete pages with the required functionality. The frontend is developed using TypeScript, React, and Redux, with Tailwind CSS used for styling.

=== Components ===
Currently, the frontend consists of seven different components, organized as follows:

==== button ====

the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element <button> that can be used in the page you want to add a button.

the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.

==== dropdown ====

The dropdown menu does not have any specific properties of its own. It is mainly used as a placeholder that appears on the screen when the user clicks a button or hovers over it. The dropdown menu contains different buttons and does not require a separate `.ts` file, as it does not have any styling of its own.

==== inputfield ====

The InputField component It supports both text and password inputs and handles user interactions through event handlers such as onChange and onKeyDown. This component also uses Tailwind CSS for styling, which is defined directly within the tsx.

==== popupwindow ====

PopupWindow consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the popup window, providing a default version that can be reused. The TS file defines the styling using Tailwind CSS, allowing the popup window to be customized with different sizes and colors.

The PopupWindowContent folder contains the completed popup windows, which currently consist of two different components: SettingsPopupWindow and WidgetPopupWindow.

The reason these two components are not included in the general TS and TSX files is that they contain different content and functionality. When a new type of popup window is needed, a new component can be created under PopupWindowContent, where its specific content and functionality are defined, while the basic structure and styling are reused from PopupWindow.

==== sidebar ====

The Sidebar component consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the sidebar, including the ability to open, close, and resize it. It also stores the sidebar's state and previous width, allowing the user's settings to be preserved during the session.

The TS file defines the styling using Tailwind CSS. This includes the sidebar colors, the positioning of the toggle button and resize bar, and the rotation of the arrow when the sidebar is opened or closed.

The `SidebarContent` folder contains the left and right sidebar components. This is where developers can modify the content and functionality of each individual sidebar without changing the general Sidebar component.

The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.

==== tabbar ====

### Tabbar

The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

The tabbar.tsx file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.

The tabs.tsx file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.

The tabLayout.tsx file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.

If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.

The tabMap.tsx file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.

If the desired layout does not already exist, a new layout can be created in `tabLayout.tsx`.

The new tab must then be registered in the tab mapping and management logic in `tabbar.tsx` so that it can be opened and displayed through the tab bar. If `tabMap.tsx` is used elsewhere in the application, the new tab should also be added there.

This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.

==== widget ====

=== Pages ===

Frontend

2026-10-13T10:23:31Z

Spring2026:

== Frontend ==

The frontend is mainly structured around components, each responsible for specific functions. These components are used within pages, where they are combined to create complete pages with the required functionality. The frontend is developed using TypeScript, React, and Redux, with Tailwind CSS used for styling.

=== Components ===
Currently, the frontend consists of seven different components, organized as follows:

==== button ====

the tsx-file defines the button's properties and functionality, including its type, size, color, and whether it is disabled. This file also creates the HTML button element <button> that can be used in the page you want to add a button.

the ts-file defines the button's styling using Tailwind CSS, including colors, text sizes, rounded corners, and hover effects. This file does not contain any HTML.

==== dropdown ====

The dropdown menu does not have any specific properties of its own. It is mainly used as a placeholder that appears on the screen when the user clicks a button or hovers over it. The dropdown menu contains different buttons and does not require a separate `.ts` file, as it does not have any styling of its own.

==== inputfield ====

The InputField component It supports both text and password inputs and handles user interactions through event handlers such as onChange and onKeyDown. This component also uses Tailwind CSS for styling, which is defined directly within the tsx.

==== popupwindow ====

PopupWindow consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the popup window, providing a default version that can be reused. The TS file defines the styling using Tailwind CSS, allowing the popup window to be customized with different sizes and colors.

The PopupWindowContent folder contains the completed popup windows, which currently consist of two different components: SettingsPopupWindow and WidgetPopupWindow.

The reason these two components are not included in the general TS and TSX files is that they contain different content and functionality. When a new type of popup window is needed, a new component can be created under PopupWindowContent, where its specific content and functionality are defined, while the basic structure and styling are reused from PopupWindow.

==== sidebar ====

The Sidebar component consists of a TSX file and a TS file. The TSX file defines the basic structure and functionality of the sidebar, including the ability to open, close, and resize it. It also stores the sidebar's state and previous width, allowing the user's settings to be preserved during the session.

The TS file defines the styling using Tailwind CSS. This includes the sidebar colors, the positioning of the toggle button and resize bar, and the rotation of the arrow when the sidebar is opened or closed.

The `SidebarContent` folder contains the left and right sidebar components. This is where developers can modify the content and functionality of each individual sidebar without changing the general Sidebar component.

The reason for this structure is to separate the basic structure and styling from the specific content of each sidebar. This allows developers to reuse the existing Sidebar component when creating new sidebars, while customizing their content and functionality as needed.

==== tabbar ====

### Tabbar

The Tabbar is structured into four TSX files, each responsible for a specific part of the tab system. This structure separates the management of tabs from their content and layouts, making it easier for developers to maintain and extend the system.

**tabbar.tsx**

This file contains the main functionality of the tab bar. It handles opening, closing, and switching between tabs, as well as managing which tabs are currently open. It also uses React Router for navigation and Socket.IO to notify the backend when the active tab changes.

**tabs.tsx**

This file contains the predefined tabs available in the dashboard. Each tab defines which widgets should be displayed and which layout should be used.

If a developer wants to modify the widgets displayed in an existing tab or create a new tab, this is where its content and layout are defined.

**tabLayout.tsx**

This file contains the different layout templates used by the tabs. Each layout determines how the widgets are arranged on the screen, including their positions and sizes.

The layouts use resizable panels, allowing users to adjust the size of individual widgets. The styling is defined directly within the TSX file using Tailwind CSS.

If a developer wants to create a new layout, modify an existing one, or change the styling of the layouts, changes should be made in this file.

**tabMap.tsx**

This file maps tab names to their corresponding React components. This allows the application to identify the correct component based on the tab name.

### Adding a new tab

When creating a new tab, developers should first define the tab in `tabs.tsx`, where they select the required layout and widgets.

If the desired layout does not already exist, a new layout can be created in `tabLayout.tsx`.

The new tab must then be registered in the tab mapping and management logic in `tabbar.tsx` so that it can be opened and displayed through the tab bar. If `tabMap.tsx` is used elsewhere in the application, the new tab should also be added there.

This structure allows developers to reuse existing layouts and widgets without having to recreate the tab system for each new tab.

==== widget ====

=== Pages ===

Backend

2026-10-13T10:22:47Z

Spring2026: /* Step 2: Update the Environment Variable */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application, go to the robot's terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:19:53Z

Spring2026: /* Step 2: Update the Environment Variable */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application go to either your terminal and type <code>sudo systemctl restart webapp.service</code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:19:38Z

Spring2026: /* Step 2: Update the Environment Variable */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.
# To restart the backend application go to either your terminal and type <code>sudo systemctl restart webapp.service<\code>

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:15:41Z

Spring2026: /* Changing the Administrator Password */

== Backend ==

__TOC__

=== Introduction ===

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.

== Backend Architecutre ==

The backend of the Robot Dashboard is built using Node.js and Express and acts as a communication layer between the Robobot and the frontend application.

The architecture consists of three main components:

# '''Express:''' Handles HTTP requests, including user authentication and session management.
#'''MQTT:''' Enables communication between the backend and the Tuype robot through a publish-subscribe messaging system.
# '''Socket.IO:''' Establishes real-time, bidirectional communication between the backend and frontend, allowing robot data to be displayed without manually refreshing the page.

=== Communication Flow ===

The backend acts as an intermediary between the frontend and Robobot.

# The Robobot publishes data to specific MQTT topics through an MQTT broker.
# The backend subscribes to relevant topics and receives incoming robot data.
# The backend processes the received messages and forwards relevant information to the frontend using Socket.IO.
# The frontend receives these updates and displays them in the corresponding dashboard widgets.

For interactions that require sending information or commands to the robot, the communication can also work in the opposite direction, with the backend publishing messages to the appropriate MQTT topics.

=== Model-View-Controller===

The Robot Dashboard was designed using the Model–View–Controller (MVC) architectural pattern to separate the application's user interface, application logic, and communication handling.

The architecture consists of three main components:

*'''Model:''' Represents the backend logic and is responsible for processing data and managing the application's functionality.
*'''View:''' Represents the frontend user interface, where users can interact with the dashboard and visualize real-time robot data.
*'''Controller:''' Acts as an intermediary between the Model, View, and Tuype robot. It handles communication through REST APIs, Socket.IO, and MQTT, as well as session management.

[[file: ModelViewController.png | 700px]]

When a user interacts with the dashboard, the input is sent from the View to the Controller. The Controller processes the request and communicates with the Model when application logic or data processing is required.

For robot-related interactions, the Controller communicates with the Tuype robot through MQTT. The robot publishes data to MQTT topics, which the backend subscribes to and forwards to the frontend through Socket.IO.

The Controller is also responsible for sending updates back to the View, allowing the dashboard to display real-time information without requiring the user to refresh the page.

=== Authentication and Session Management ===

The backend implements a password-based authentication system to restrict access to the Robot Dashboard.

User authentication is handled through Express, where the provided password is verified against a stored password hash using bcrypt. Upon successful authentication, a session is established using
<code>
express-session
</code>

The session is maintained through a cookie, allowing the backend to recognize authenticated users across subsequent requests without requiring them to log in repeatedly.

The current implementation uses a single shared password rather than individual user accounts.

== Backend Codebase Overview ==

The backend source code of the Robot Dashboard is located in the <code>back-end-node-js/</code> directory, which serves as the root directory of the backend application.

The codebase is organized into several directories and files, each responsible for specific functionality, including API handling, MQTT communication, security, and real-time communication. This separation helps developers navigate the codebase, understand the responsibilities of individual modules, and identify relevant files for maintenance or further development.

The following sections provide an overview of the backend directory structure and the responsibilities of its main files and modules.

=== Configuration and Customization ===

The backend contains several configuration settings that allow developers to adapt the system to different requirements.

Some settings can be modified without affecting the underlying application logic, while others require changes across multiple files to maintain proper communication between the frontend, backend, and Robobot

This section outlines the available configuration options, their purposes, and the considerations developers should be aware of before making changes.

==== Environment Variables ====

The backend contains two <code>.env</code> files located in different directories, each serving a different purpose:

* '''Root directory (<code>back-end-node-js/.env</code>):''' Contains the environment variables used by the main backend application, including <code>AdminPassword</code> and <code>SessionSecret</code>. These variables are used for authentication and session management.

* '''Scripts directory (<code>back-end-node-js/scripts/.env</code>):''' Contains environment variables used specifically by scripts and test files within the <code>scripts/</code> directory. These settings are separate from the main backend configuration.

===== Main Backend Environment Variables =====

The main backend <code>.env</code> file contains two environment variables:

* '''AdminPassword:''' Stores the bcrypt-hashed administrator password. This value should only be modified when changing the dashboard's login password. The new password must first be hashed using bcrypt before replacing the existing value.

* '''SessionSecret:''' Used to sign session cookies and protect their integrity. This value should generally remain unchanged, as modifying it may invalidate existing user sessions. It should only be changed when necessary, such as when rotating a compromised secret.

Both variables contain sensitive information and should not be publicly shared or included in version control.

When modifying environment variables, ensure that the correct <code>.env</code> file is updated, as changes to one file may not affect the other.

For instructions on modifying these settings, see [[#Authentication and Session Configuration|Authentication and Session Configuration]].

==== MQTT Configuration ====
Explain how to configure the MQTT broker,
connection settings, and topics.

==== API Configuration ====
Explain configurable API settings and endpoints.

==== Socket.IO Configuration ====
Explain real-time communication settings.

==== Authentication and Session Configuration ====
Explain which authentication and session settings
can be modified.
=== Authentication and Session Configuration ===

This section explains how to modify the authentication settings used by the Robot Dashboard.

==== Changing the Administrator Password ====

The administrator password is stored as a bcrypt hash in the <code>.env</code> file located in the backend root directory.

To change the administrator password, follow these steps:

===== Step 1: Generate a New Password Hash =====

# Open <code>back-end-node-js/scripts/generateHash.js</code>.
# Locate the variable <code>userPassword</code> and replace its current value with the desired new password.
# Open a terminal and navigate to the <code>scripts/</code> directory.
# Run the following command to generate a new bcrypt hash:
#: <code>node generateHash.js</code>
# Copy the generated hash (the second output in the terminal).

===== Step 2: Update the Environment Variable =====

# Open the <code>.env</code> file located in the backend root directory (<code>back-end-node-js/.env</code>).
# Locate the <code>AdminPassword</code> variable.
# Replace its existing value with the newly generated bcrypt hash.
# Save the file and restart the backend application to apply the changes.

===== Step 3: Verify the New Password =====

# Open <code>back-end-node-js/scripts/testHash.js</code>.
# Update the test password to match the newly chosen administrator password.
# Ensure that the test script compares the new password against the newly generated hash.
# Run the test script from the <code>scripts/</code> directory:
#: <code>node testHash.js</code>
# The script should return <code>true</code> if the password matches the hash, or <code>false</code> if they do not match.

'''Note:''' The administrator password must always be hashed using bcrypt before being stored in the <code>.env</code> file. Never store plaintext passwords in environment variables or commit passwords and hashes to version control.

==== Session Secret ====

The <code>SessionSecret</code> variable is used to sign session cookies. It should not be modified during normal configuration.

If the secret needs to be rotated, replace it with a new, securely generated random value. Changing the secret may invalidate existing sessions, requiring users to log in again.

== Core files and Restrictions ==

== Running the backend ==

Backend

2026-10-13T10:00:04Z

Spring2026: /* Changing the Administrator Password */

Backend

2026-10-13T09:59:03Z

Spring2026: /* Changing the Administrator Password */

Robot dashboard

2026-10-13T09:55:28Z

Spring2026: /* Requirements */

__TOC__

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

# A file management software (Windows: RealFTP, Mac: FileZilla)
# 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

<code>
npm -v
</code>

and

<code>
node -v
</code>

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

<code>
sudo apt install -y nodejs npm
</code>

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

<code>
/home/local/svn/robobot/
</code>

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

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

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.

<pre>
npm install
npm install socket.io-client
npm audit fix
</pre>

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

<pre>
npm install
npm audit fix
</pre>

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

<code>
sudo nano /etc/systemd/system/webapp.service
</code>

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:
<pre>
[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
</pre>

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

<pre>
sudo systemctl daemon-reload
sudo systemctl enable webapp.service
sudo systemctl restart webapp.service
journalctl -u webapp.service -f
</pre>

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

== Back-end ==
[[Backend]]

== Front-end ==

[[Frontend]]

= Users note =

Backend

2026-10-13T09:55:10Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:54:28Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:53:31Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:50:31Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:49:34Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:49:25Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:48:09Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:46:09Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:44:44Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:44:32Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:44:21Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:40:47Z

Spring2026: /* Environment Variables */

Robot dashboard

2026-10-13T09:40:21Z

Spring2026: /* Requirements */

__TOC__

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

== Set up ==

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

# A file management software (Windows: RealFTP, Mac: FileZilla)
# 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

<code>
npm -v
</code>

and

<code>
node -v
</code>

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

<code>
sudo apt install -y nodejs npm
</code>

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

<code>
/home/local/svn/robobot/
</code>

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

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

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.

<pre>
npm install
npm install socket.io-client
npm audit fix
</pre>

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

<pre>
npm install
npm audit fix
</pre>

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

<code>
sudo nano /etc/systemd/system/webapp.service
</code>

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:
<pre>
[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
</pre>

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

<pre>
sudo systemctl daemon-reload
sudo systemctl enable webapp.service
sudo systemctl restart webapp.service
journalctl -u webapp.service -f
</pre>

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

== Back-end ==
[[Backend]]

== Front-end ==

[[Frontend]]

= Users note =

Backend

2026-10-13T09:32:51Z

Spring2026: /* Environment Variables */

Backend

2026-10-13T09:31:09Z

Spring2026: /* Authentication and Session Configuration */