Introduction

The project is based on a challenge given by the TIERS research group at the University of Turku (See tiers.utu.fi). The goal of the project was to build a web app to visualise live robot data like position and battery on a live camera view. Name labels on robots are especially useful when working with swarm of robots. The data is provided by the Robot Operating System (ROS) at the TIERS robot arena.

Solution

The web app is implemented as a basic full stack project in JavaScript. The Node.js back-end provides an API for ROS data feed. The front-end client is based on React.js framework with a canvas as the main element for the data visualisation. The app also includes some UI elements from the Material UI library.

An IP camera, like a surveillance camera or a mobile phone app, was chosen as the video source for the app. A still image from the robot arena can also be used as a background. The mapping of the robot position data on the video is based on perspective transform.

The goal of the UI design was to offer a simple, tool-like app that could be used side-by-side to the ROS programming tools.