Real-time telemetry dashboard for Greenpower electric racing cars using the eChook telemetry boards. Built with Vue 3 and designed for teams to monitor car performance during races, and analyze race data after the race.
- Live data streaming via WebSocket (MessagePack encoded)
- Auto-reconnection and gap-filling on resume
- Configurable data retention (up to 50k points)
- Synchronized time-series charts with ECharts
- Lap highlighting with alternating colors
- Zoom, pan, and keyboard shortcuts (L, R, 1-9, arrows)
- Customizable metric visibility
- Real-time car position on OpenStreetMap
- Historical trail with speed-based color gradient
- Configurable trail length and auto-fitting
- Automatic race and lap detection
- Lap-to-lap comparison with delta highlighting
- CSV export for external analysis
- Public spectator view (no login required)
- Real-time car selector with live stats
- Privacy opt-out for teams
- User management (view, edit, delete)
- Active car monitoring with JSON inspection
- Track boundary editor with interactive map
- Server statistics and health monitoring
- Node.js 18+
- eChook Server running
# Clone the repository
git clone https://github.com/eChook/eChookLive.git
cd eChookLive
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your server URLs# Start dev server with hot reload
npm run dev
# Run tests
npm run test
# Run tests with UI
npm run test:ui# Build for production
npm run build
# Preview production build
npm run previewCreate a .env file in the project root:
VITE_API_URL=https://your-server.com
VITE_WS_URL=wss://your-server.com| Variable | Description | Default |
|---|---|---|
VITE_API_URL |
REST API base URL | http://localhost:3000 |
VITE_WS_URL |
WebSocket server URL | ws://localhost:3000 |
src/
├── assets/ # Static assets (images, fonts)
├── components/ # Vue components
│ ├── tabs/ # Tab panel components
│ └── ui/ # Reusable UI components
├── composables/ # Vue composables
│ ├── useChartZoom.js # Chart zoom state
│ ├── useHistory.js # History fetching
│ ├── useSocket.js # WebSocket management
│ └── useToast.js # Toast notifications
├── router/ # Vue Router configuration
├── stores/ # Pinia stores
│ ├── admin.js # Admin panel state
│ ├── auth.js # Authentication state
│ ├── settings.js # User preferences
│ ├── spectator.js # Spectator mode state
│ └── telemetry.js # Core telemetry data
├── utils/ # Utility functions
│ ├── formatting.js # Value formatting
│ ├── raceAnalytics.js # Race/lap detection
│ ├── telemetryKeys.js # Key metadata
│ └── unitConversions.js # Unit scaling
└── views/ # Page-level components
├── DashboardView.vue
├── LoginView.vue
├── RegisterView.vue
└── SpectatorView.vue
| Key | Action |
|---|---|
Tab |
Cycle between Graph / Map / Laps tabs |
Space |
Pause / Resume live data |
L |
Unlock chart zoom (return to live) |
R |
Zoom to current race |
1-9 |
Zoom to specific lap |
← → |
Pan chart left/right |
+ - |
Zoom in/out |
? |
Show keyboard shortcuts help |
| Category | Technology |
|---|---|
| Framework | Vue 3 (Composition API) |
| Build Tool | Vite 7 |
| State | Pinia with persistence |
| Routing | Vue Router 4 |
| Charts | ECharts 6 |
| Maps | Leaflet + OpenStreetMap |
| WebSocket | Socket.IO Client |
| UI | Tailwind CSS + HeadlessUI |
| Icons | Heroicons |
| Testing | Vitest |
This frontend requires an eChook Server backend with:
- REST API for authentication and history
- WebSocket (Socket.IO) for real-time data
- MessagePack encoding for efficient data transfer
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.