A high-performance Progressive Web App speedometer built with vanilla HTML, CSS, and modern JavaScript (ES6+). Track your speed in real-time using GPS with beautiful analog and digital displays.
Try it out on your phone while walking or driving to see real-time speed tracking!
- 📍 Real-time GPS Tracking - Uses Browser Geolocation API with
watchPositionand high accuracy mode - 🎯 Dual Speed Calculation - Uses native GPS speed or calculates from position using Haversine formula
- 🎨 Dual Display Modes - Switch between analog gauge and digital display
- 🌓 Dark/Light Theme - OneDark theme with smooth transitions
- ⚡ Smooth Animations - 60 FPS needle animation using
requestAnimationFrame - 📊 Speed Smoothing - Exponential Moving Average (EMA) to reduce GPS jitter
- 📱 PWA Support - Install on your device, works offline
- 🔋 Battery Efficient - Optimized for low power consumption
- 📐 Responsive Design - Works on all screen sizes (mobile, tablet, desktop)
- ♿ Accessible - ARIA labels, keyboard navigation, reduced motion support
| Technology | Purpose |
|---|---|
| HTML5 | Semantic markup |
| CSS3 | Custom properties, Flexbox, Grid |
| ES6+ JavaScript | Modules, Classes, async/await |
| Canvas API | Analog gauge rendering |
| Geolocation API | GPS position and speed tracking |
| Service Worker | Offline functionality & caching |
| Web App Manifest | PWA installation |
Speedometer/
├── index.html # Main HTML entry point
├── public/
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service Worker
│ └── icons/ # App icons
│ └── icon.svg
├── src/
│ ├── css/
│ │ └── speedometer.css # Styles (OneDark theme)
│ ├── js/
│ │ ├── app.js # Main entry point
│ │ ├── gps.js # GPS module
│ │ ├── speed.js # Speed processing & smoothing
│ │ ├── animation.js # Canvas gauge renderer
│ │ └── ui.js # UI management
│ └── utils/
│ ├── haversine.js # Distance calculation
│ └── kalman.js # Kalman filter for GPS smoothing
├── LICENSE
└── README.md
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A local HTTP server (GPS requires secure context)
-
Clone the repository
git clone https://github.com/mamdous-usual/Speedometer.git cd Speedometer -
Start a local server
Using Python:
python3 -m http.server 8000
Using Node.js:
npx serve .Using PHP:
php -S localhost:8000
-
Open in browser
http://localhost:8000
Alternatively, install the "Live Server" extension and click "Go Live" on index.html.
- Push your code to GitHub
- Import the repository on Vercel
- Deploy with default settings - no configuration needed
For GitHub Pages deployment, you'll need to adjust paths in index.html, manifest.json, sw.js, and app.js to include your repository name prefix (e.g., /Speedometer/).
- Click "Start" to begin GPS tracking
- Allow location permission when prompted
- Move around (walk, bike, drive) to see your speed
- Toggle views using the analog/digital buttons in the header
- Switch themes with the sun/moon icon
- Click "Reset" to clear trip statistics
- Open Chrome DevTools (F12)
- Click ⋮ → More tools → Sensors
- Under "Location", select Custom location
- Change coordinates periodically to simulate movement
Edit src/js/speed.js:
const config = {
maxSpeed: 200, // Maximum speed on gauge (km/h)
smoothingAlpha: 0.25, // EMA smoothing factor (0-1)
minSpeedThreshold: 0.5, // Speeds below this show as 0
};Edit src/js/animation.js:
this.config = {
minSpeed: 0,
maxSpeed: 200,
startAngle: -225, // Gauge start angle
endAngle: 45, // Gauge end angle
tickMajorCount: 10, // Major tick marks
tickMinorCount: 4, // Minor ticks between majors
};The app uses the OneDark color scheme. Customize in src/css/speedometer.css:
/* Dark Theme */
[data-theme="dark"] {
--color-bg-primary: #282c34;
--color-accent: #61afef;
--gauge-low: #98c379; /* Green: 0-60 km/h */
--gauge-mid: #e5c07b; /* Yellow: 60-120 km/h */
--gauge-high: #e06c75; /* Red: 120+ km/h */
}
/* Light Theme */
[data-theme="light"] {
--color-bg-primary: #fafafa;
--color-accent: #4078f2;
}| Method | Description |
|---|---|
| Primary | Uses coords.speed from Geolocation API (m/s → km/h) |
| Fallback | Calculates speed using Haversine distance formula |
Uses Exponential Moving Average (EMA) with configurable alpha:
smoothedSpeed = α × currentSpeed + (1 - α) × previousSpeed
{
enableHighAccuracy: true, // Use GPS for best accuracy
maximumAge: 0, // No cached positions
timeout: 5000 // 5 second timeout
}| Browser | Version | Support |
|---|---|---|
| Chrome | 60+ | ✅ Full |
| Firefox | 55+ | ✅ Full |
| Safari | 11.1+ | ✅ Full |
| Edge | 79+ | ✅ Full |
| iOS Safari | 11.3+ | ✅ Full |
| Chrome Android | 60+ | ✅ Full |
- Open the app in your browser
- Tap "Add to Home Screen" (or Share → Add to Home Screen on iOS)
- The app will be installed with an icon
- Look for the install icon (⊕) in the address bar
- Click "Install"
The app will work offline after first load!
Convert the SVG icon to PNG at various sizes:
# Using ImageMagick
convert public/icons/icon.svg -resize 192x192 public/icons/icon-192x192.png
convert public/icons/icon.svg -resize 512x512 public/icons/icon-512x512.pngOr use Real Favicon Generator
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- OneDark Theme - Color scheme inspiration
- MDN Web Docs - Geolocation API documentation
Made with ❤️ using vanilla JavaScript
No frameworks. No dependencies. Just pure web.