A React-based web application that simulates an analog airspeed indicator for the Piper PA-28 aircraft. The app uses GPS data to display real-time ground speed in an authentic-looking gauge interface.
Try the app live at: https://pa-28-airspeed-indicator-web-app.williamntw.com
Notes:
- The demo is served over HTTPS — required for browser Geolocation.
- For best GPS accuracy, open the URL on a mobile device and grant Location permission when prompted.
- If GPS permission is denied or unavailable, use the built-in Test Mode (🧪 Enable Test Mode) to simulate speeds.
- Report issues or feedback via the project repository (see repository links in this README).
- Authentic Full-Circle Design: 270° sweep gauge matching real aircraft instruments
- Extended Speed Range: 0-200 knots with professional aviation layout
- Live GPS Integration: Real-time speed tracking using the Geolocation API
- Aviation-Standard Color Arcs:
- Green (60-120kt) - Normal operating range
- Yellow (120-160kt) - Caution range
- Red (160-200kt) - Danger zone
- PA-28 V-Speeds: Labeled critical speeds with colored triangle markers
- Professional Needle: Tapered white needle with shadow effects
- Precision Tick Marks: Major ticks every 20 knots, minor ticks every 10 knots
- Digital Display: Large numeric readout positioned below the gauge
- Status Monitoring: GPS connection status and comprehensive error handling
- Test Mode: Built-in simulator for demonstration without GPS
- Mobile Responsive: Optimized layout that fits any screen without scrolling
- iOS Compatible: Enhanced iPhone/iPad GPS permission handling
The gauge displays critical speeds for Piper PA-28 aircraft with colored triangle markers. The values used by the app are defined in the code and can be edited if you need to tweak them for a different aircraft or variant. Current values (as used by the webapp) are:
| Speed | Value | Description | Color |
|---|---|---|---|
| Vso | 47 kt | Stall Speed (landing configuration) | Red |
| Vs | 50 kt | Stall Speed (clean) | Red |
| Vx | 64 kt | Best Angle of Climb | Green |
| Vy | 76 kt | Best Rate of Climb | Green |
| Va | 112 kt | Maneuvering Speed | Green |
| Vno | 121 kt | Maximum Structural Cruising Speed | Yellow |
| Vne | 148 kt | Never Exceed Speed | Red |
- Green Arc (56-121 kt): Normal operating range (as drawn on the gauge)
- Yellow Arc (121-148 kt): Caution range
- Red Arc (148-150 kt): Danger / never-exceed line
- 270° Sweep: Three-quarter circle from bottom-left to bottom-right
- 0-200 Knot Range: Extended range covering all GA aircraft speeds
- Precision Markings: Major ticks every 20kt, minor ticks every 10kt
- Authentic Styling: Black face, white markings, metallic bezel
- Node.js (v14 or higher)
- npm or yarn
-
Clone or download the project files
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser to
http://localhost:3000
-
Create optimized build:
npm run build
-
Deploy the
buildfolder to your hosting service
- HTTPS Required: GPS functionality only works on HTTPS or localhost
- Location Permission: Browser will request location access
- Mobile Recommended: Best GPS accuracy on mobile devices
- Motion Required: GPS speed is only available when moving
If you get "GPS Permission Denied" on iPhone:
- Open iPhone Settings
- Go to: Settings → Privacy & Security → Location Services
- Find Safari: Scroll down and tap "Safari"
- Enable Location: Select "While Using App" or "Ask Next Time"
- Return to webapp: Refresh the page
- Grant Permission: Tap "Allow" when Safari asks for location
Alternative: Use the built-in "Test Mode" to simulate different speeds without GPS.
For development/testing without actual GPS movement:
- Use the "🧪 Enable Test Mode" button when GPS fails
- Use the speed slider to simulate different airspeeds
- Click V-speed buttons for quick testing (Vso, Vx, Vy, Vno)
- Or use browser developer tools to simulate location
- Connect your GitHub repository
- Set build command:
npm run build - Set build output directory:
build - Deploy automatically on push
- Drag and drop the
buildfolder - Or connect via Git with same build settings
- Import project from GitHub
- Vercel will auto-detect React settings
- React 18: Component-based UI
- HTML5 Canvas: High-performance gauge rendering
- Geolocation API: Native browser GPS access
- CSS3: Responsive design with animations
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
- Optimized canvas rendering
- Efficient GPS polling (1Hz update rate)
- Responsive design for all screen sizes
- Not certified for actual flight navigation
- Ground speed ≠ airspeed (no wind correction)
- Always use official aviation instruments for flight
Constants and configuration used by the gauge have been extracted to a small module for easier editing:
- V‑speeds, arc ranges, gauge numeric limits, and color ranges live in
src/components/gaugeConstants.js. - The V‑speeds are exported as
V_SPEEDSin that module. Edit that file to change labels, values or colors.
Example (in src/components/gaugeConstants.js):
export const V_SPEEDS = [
{ speed: 47, label: "Vso", color: "#E12C2C" },
// ...
];
export const GAUGE_CONFIG = {
minSpeed: 20,
maxSpeed: 150,
// ... other gauge settings
};The legend UI has also been moved into its own component at src/components/VSpeedsLegend.js for clarity.
MIT License - Feel free to use and modify for your projects.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
For issues or questions:
- Check browser console for error messages
- Ensure HTTPS and location permissions
- Test GPS functionality while in motion
This project is licensed under the MIT License. See the LICENSE file for details
Crafted with ❤️ by William NG