🚗 Speedometer

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.

🌐 Live Demo

👉 View Live App

Try it out on your phone while walking or driving to see real-time speed tracking!

✨ Features

• 📍 Real-time GPS Tracking - Uses Browser Geolocation API with watchPosition and 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

🛠️ Tech Stack

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

📁 Project Structure

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

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A local HTTP server (GPS requires secure context)

Installation

1. Clone the repository

   git clone https://github.com/mamdous-usual/Speedometer.git
   cd Speedometer

2. Start a local server

   Using Python:

   python3 -m http.server 8000

   Using Node.js:

   npx serve .

   Using PHP:

   php -S localhost:8000

3. Open in browser

   http://localhost:8000
   

VS Code Live Server

Alternatively, install the "Live Server" extension and click "Go Live" on index.html.

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the repository on Vercel
3. Deploy with default settings - no configuration needed

GitHub Pages

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/).

📖 Usage

1. Click "Start" to begin GPS tracking
2. Allow location permission when prompted
3. Move around (walk, bike, drive) to see your speed
4. Toggle views using the analog/digital buttons in the header
5. Switch themes with the sun/moon icon
6. Click "Reset" to clear trip statistics

Desktop Testing (Without GPS Movement)

1. Open Chrome DevTools (F12)
2. Click ⋮ → More tools → Sensors
3. Under "Location", select Custom location
4. Change coordinates periodically to simulate movement

⚙️ Configuration

Speed Settings

Edit src/js/speed.js:

constconfig={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};

Gauge Appearance

Edit src/js/animation.js:

this.config={minSpeed: 0,maxSpeed: 200,startAngle: -225,// Gauge start angleendAngle: 45,// Gauge end angletickMajorCount: 10,// Major tick markstickMinorCount: 4,// Minor ticks between majors};

🎨 Theming

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;
}

🔧 Technical Details

Speed Calculation

Method	Description
Primary	Uses coords.speed from Geolocation API (m/s → km/h)
Fallback	Calculates speed using Haversine distance formula

Smoothing Algorithm

Uses Exponential Moving Average (EMA) with configurable alpha:

smoothedSpeed = α × currentSpeed + (1 - α) × previousSpeed

Geolocation Options

{enableHighAccuracy: true,// Use GPS for best accuracymaximumAge: 0,// No cached positionstimeout: 5000// 5 second timeout}

🌐 Browser Support

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

📱 PWA Installation

Mobile (Android/iOS)

1. Open the app in your browser
2. Tap "Add to Home Screen" (or Share → Add to Home Screen on iOS)
3. The app will be installed with an icon

Desktop (Chrome/Edge)

1. Look for the install icon (⊕) in the address bar
2. Click "Install"

The app will work offline after first load!

🖼️ Generating App Icons

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.png

Or use Real Favicon Generator

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• OneDark Theme - Color scheme inspiration
• MDN Web Docs - Geolocation API documentation

---

Made with ❤️ using vanilla JavaScript
_{No frameworks. No dependencies. Just pure web.}