Web-based real-time data-visualizations for a self-driving racing car.

This webapp was used by UAS Munich's motorsport team munichmotorsport during the 2018 season of Formula Student to monitor, debug and refine their driverless car.

The app visualizes position, rotation, steering angle, acceleration, speed and many other internal parameters of the car both in real-time and retrospectively. It also displays track boundaries recognized by the car's camera-based recognition system.

View demo app here.

• NodeJS
• Express
• MongoDB
• VueJS
• Vuex
• Bootstrap
• KonvaJS
• Apache Echarts

The app consists of a NodeJS backend and a VueJS web application.

The backend accepts TCP Messages from the car. Each message represents one discrete snapshot of the vehicle's internal state. TCP Messages are converted to JSON, optionally stored in MongoDB, and provided to the client via an HTTP API.

The Vue app fetches its data either periodically to represent real-time state, or chunked to display a recorded sequence of data. The car's location, orientation and surroundings are visualized on a 2D canvas using KonvaJS. Changes to single parameters over time are drawn as line charts with Apache Echarts.

This monorepo contains the client application and a simplified version of the backend for public use. Instead of connecting to a real vehicle, this demo backend reads mocked messages from a local CSV.

• NodeJS 20.12 installed on your machine

Clone this repo. In your terminal, navigate to the repo's root folder and run

npm install

The following command starts both the backend and a webpack-dev-server with the client app:

npm run dev

Webpack will auto-open the app in the browser and output the URL in your terminal. Usually, the URL is http://localhost:8080.

To start just the backend, execute

npm run api:start

To start just the dev-server without the backend, run

npm run frontend:dev

Build the app for production:

npm run frontend:build

Both commands respect the environment variable API_ROOT to overwrite the default API URL. Use this e.g. to develop against the deployed backend at https://driverless-cockpit-demobackend.onrender.com/. The default API_ROOT is http://localhost:3000/.

Example:

# use deployed public API
API_ROOT=https://driverless-cockpit-demobackend.onrender.com/ npm run frontend:dev