Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mgschoen/driverless-cockpit
Real-time data-visualizations for a self-driving racing car
https://github.com/mgschoen/driverless-cockpit
autonomous-driving canvas data-visualization formula-student formula-student-driverless konvajs racing-car real-time visualization vuejs
Last synced: 24 days ago
JSON representation
Real-time data-visualizations for a self-driving racing car
- Host: GitHub
- URL: https://github.com/mgschoen/driverless-cockpit
- Owner: mgschoen
- Created: 2024-03-18T17:19:16.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-05T09:48:48.000Z (9 months ago)
- Last Synced: 2024-10-15T02:47:09.943Z (2 months ago)
- Topics: autonomous-driving, canvas, data-visualization, formula-student, formula-student-driverless, konvajs, racing-car, real-time, visualization, vuejs
- Language: JavaScript
- Homepage: https://driverless-cockpit.onrender.com/
- Size: 3.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Driverless Cockpit
Web-based real-time data-visualizations for a self-driving racing car.
This webapp was used by UAS Munich's motorsport team [munichmotorsport](https://munichmotorsport.de/) during the 2018 season of [Formula Student](https://www.global-formula-racing.com/en/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.](https://driverless-cockpit.onrender.com/)**
## Stack
- NodeJS
- Express
- MongoDB
- VueJS
- Vuex
- Bootstrap
- KonvaJS
- Apache Echarts
## Architecture
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](https://konvajs.org/index.html). Changes to single parameters over time are drawn as line charts with [Apache Echarts](https://echarts.apache.org/en/index.html).
## Usage
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](https://github.com/mgschoen/driverless-cockpit/tree/main/api/data).
### Prerequisites:
- NodeJS 20.12 installed on your machine
### Install
Clone this repo. In your terminal, navigate to the repo's root folder and run
```sh
npm install
```
### Local development
The following command starts both the backend and a webpack-dev-server with the client app:
```sh
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`](http://localhost:8080).
### Backend-only
To start just the backend, execute
```sh
npm run api:start
```
### Client-only
To start just the dev-server without the backend, run
```sh
npm run frontend:dev
```
Build the app for production:
```sh
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:
```sh
# use deployed public API
API_ROOT=https://driverless-cockpit-demobackend.onrender.com/ npm run frontend:dev
```