diff --git a/PROJECT_DOCUMENTATION.md b/PROJECT_DOCUMENTATION.md deleted file mode 100644 index 7e3b9ab..0000000 --- a/PROJECT_DOCUMENTATION.md +++ /dev/null @@ -1,434 +0,0 @@ -# Pixel ADS-B View - Project Documentation - -## Overview -A retro SNES-style side-view flight tracker that displays ADS-B aircraft data in a fun pixel art interface with custom ChatGPT-generated sprites for aircraft, scenery, celestial bodies, and weather. - -## Project Structure -``` -/root/IceNet-ADS-B/pixel-view/ -├── index.html - Main HTML interface (v=36) -├── pixel-view.js - JavaScript rendering engine -├── server.py - Python WebSocket server -├── smallProp.png - Small propeller aircraft sprite -├── regionalJet.png - Regional jet sprite -├── narrowBody.png - Narrow body jet sprite (737/A320) -├── wideBody.png - Wide body jet sprite (777/787) -├── heavy.png - Jumbo jet sprite (747/A380) -├── helicopter.png - Helicopter sprite -├── desert.png - Vegas desert landscape background -├── base.png - ADS-B receiver station building with antenna -├── sun.png - Animated sun sprite -├── moon_6_phases.png - Moon sprite sheet (2x3 grid, 6 phases) -├── happycloud.png - Sunny weather cloud sprite -├── raincloud.png - Rainy/snowy weather cloud sprite -└── PROJECT_DOCUMENTATION.md - This file -``` - -## Current Configuration - -### Display Settings -- **Canvas Resolution**: 800x600 pixels -- **Container Max Width**: 1400px -- **Aircraft Sprite Size**: 110px tall (scaled from original images) -- **Moon Size**: 120px tall (200% scale) -- **Base Station**: 150px height -- **Cloud Height**: 90px (150% scale) -- **Sun Size**: 50px tall -- **Cache Version**: v=36 -- **Frame Rate**: 10 FPS (retro feel) - -### Visual Assets -All sprites are **COMPLETE** and integrated: - -**Aircraft (6 types):** -- ✅ **smallProp.png** (193K) - Right-facing, transparent background -- ✅ **regionalJet.png** (185K) - Right-facing, transparent background -- ✅ **narrowBody.png** (193K) - Right-facing, transparent background -- ✅ **wideBody.png** (264K) - Right-facing, transparent background -- ✅ **heavy.png** (361K) - Right-facing, transparent background -- ✅ **helicopter.png** (216K) - Right-facing, transparent background - -**Scenery:** -- ✅ **desert.png** (371K) - Vegas desert landscape, full-width background -- ✅ **base.png** - ADS-B receiver station with antenna tower, transparent background - -**Celestial:** -- ✅ **sun.png** - Animated sun sprite -- ✅ **moon_6_phases.png** (1.4M) - Sprite sheet with 6 moon phases - -**Weather:** -- ✅ **happycloud.png** - Clear weather clouds -- ✅ **raincloud.png** - Rain/snow weather clouds - -## Features Implemented - -### 1. Custom Pixel Art Aircraft Rendering -- **PNG image-based rendering** with fallback to sprite arrays -- Images loaded asynchronously via JavaScript Image objects -- Scaled dynamically to 110px height while maintaining aspect ratio -- **Horizontal flipping** for westbound aircraft (track > 90° and < 270°) -- Visual feedback: - - **Approaching**: Full brightness, saturated colors - - **Departing**: 85% opacity, desaturated -- Located in: `pixel-view.js:1347-1395` - -### 2. Aircraft Type Categorization -Six aircraft categories with intelligent detection: - -1. **Helicopter** - - Detection: altitude < 5000 ft AND speed < 150 knots - - Priority: Checked first before other types - -2. **Heavy** (747, A380) - - Callsigns: CPA, UAE, ETH, QTR, SIA, etc. - - OR: altitude > 42000 ft OR speed > 550 knots - - Features: Upper deck hump visible in sprite - -3. **Wide Body** (777, 787, A350) - - High altitude: > 40000 ft OR speed > 500 knots - - Larger twin-engine design - -4. **Narrow Body** (737, A320) - - Default category for most commercial aircraft - - Typical cruise altitudes and speeds - -5. **Regional Jet** (CRJ, ERJ) - - Callsigns: SKW, RPA, ASH, PDT, CHQ, ENY - - OR: altitude < 25000 ft AND speed < 350 knots - -6. **Small Prop** (Cessna, GA) - - Callsigns starting with 'N' or very short - - OR: altitude < 10000 ft AND speed < 200 knots - -### 3. Vegas Desert Landscape Background -- **Full-width background image** (desert.png) -- Cropped Vegas desert scene with mountains -- Scales to canvas width while maintaining aspect ratio -- Transparent background removed for clean integration -- Positioned at bottom of display -- Located in: `pixel-view.js:1138-1147` - -### 4. ADS-B Receiver Station -- **Base.png sprite** overlaid on desert background -- Shows receiver building with antenna tower -- 150px height, maintains aspect ratio -- Centered horizontally at screen bottom -- Transparent background allows desert to show through -- Located in: `pixel-view.js:1149-1161` - -### 5. Dynamic Sky Colors (Based on Sun Position) -Sky colors change throughout the day based on actual sunrise/sunset times: -- **Night**: Dark blue/purple (#1c2c4c → #2c3c5c) -- **Dawn**: Orange/pink sunrise (#4c5c8c → #dc8c5c) -- **Day**: Bright blue (#6ca4dc → #b4d4ec) -- **Dusk**: Orange/purple sunset (#6c5c9c → #dc9c6c) -- 30-minute transition periods for smooth changes -- Weather adjustments (darker for rain/snow) -- Located in: `pixel-view.js:678-795` - -### 6. Accurate Sun Positioning & Sprite -**Sun:** -- PNG sprite rendering (sun.png) -- Astronomical calculations for altitude (0-90°) and azimuth (90-270°) -- Moves from east (sunrise) to west (sunset) -- 50px height display size -- Dims when cloudy, hidden during rain/snow -- Located in: `pixel-view.js:940-1027` - -### 7. Realistic Moon Phases -**Moon Sprite System:** -- **6-phase sprite sheet** (moon_6_phases.png) -- 2x3 grid layout: - - Row 1: Waxing Crescent, First Quarter, Waxing Gibbous - - Row 2: Full Moon, Waning Gibbous, Last Quarter -- Waning crescent uses mirrored waxing crescent -- **Phase calculation** based on 29.53-day lunar cycle -- Scaled to 120px height (200% of original design) -- Maintains aspect ratio automatically -- Brighter at night (100% alpha), dimmer during day (60% alpha) -- Opposite positioning from sun (12-hour offset) -- New moon phase not displayed -- Located in: `pixel-view.js:876-938`, `pixel-view.js:1029-1138` - -**Moon Phases:** -- Phase 0.00-0.05: New Moon (not displayed) -- Phase 0.05-0.20: Waxing Crescent -- Phase 0.20-0.30: First Quarter -- Phase 0.30-0.48: Waxing Gibbous -- Phase 0.48-0.52: Full Moon -- Phase 0.52-0.70: Waning Gibbous -- Phase 0.70-0.80: Last Quarter -- Phase 0.80-0.95: Waning Crescent (mirrored) -- Phase 0.95-1.00: New Moon (not displayed) - -### 8. Weather Cloud Sprites -**Cloud System:** -- Automatic cloud type selection based on weather conditions -- **happycloud.png**: Clear/normal weather -- **raincloud.png**: Rain or snow conditions -- 90px height (150% scale), maintains aspect ratio -- Animated horizontal scrolling -- Randomized vertical positions for natural distribution -- Varying speeds for depth effect -- 4 clouds for clear weather, 8 clouds for rain/cloudy -- NO pixelated weather effects - clouds represent weather visually -- Located in: `pixel-view.js:797-850` - -### 9. Sunrise/Sunset Display -- Actual sunrise and sunset times from Open-Meteo API -- Format: "☀ 6:45 AM / 🌙 5:30 PM" -- Updates every 10 minutes -- Located in: `index.html:169` - -### 10. Weather Integration -- Real-time weather from Open-Meteo API -- Conditions: - - **Clear**: Sunny clouds, full brightness - - **Cloudy**: More clouds, dimmed sun - - **Rain**: Rain clouds, darker sky, no sun - - **Snow**: Rain clouds, darker sky, no sun -- Temperature in Fahrenheit -- Updates every 10 minutes -- Located in: `pixel-view.js:797-850` - -## Technical Details - -### Image Loading System -```javascript -// Aircraft images -this.aircraftImages = { - smallProp: new Image(), - regionalJet: new Image(), - narrowBody: new Image(), - wideBody: new Image(), - heavy: new Image(), - helicopter: new Image() -}; - -// Environment images -this.desertImage = new Image(); // Vegas desert landscape -this.baseImage = new Image(); // Receiver station -this.sunImage = new Image(); // Sun sprite -this.moonSprite = new Image(); // Moon phases sprite sheet -this.happyCloudImage = new Image(); // Clear weather clouds -this.rainCloudImage = new Image(); // Rain weather clouds -``` - -### Rendering Pipeline & Layer Order -Layers drawn from bottom to top: - -1. **Sky gradient** - Dynamic colors based on time of day -2. **Clouds** - Happy or rain clouds based on weather -3. **Sun** - Moves across sky based on actual sun position -4. **Moon** - Phase-accurate sprite from sheet -5. **Desert background** - Full-width Vegas landscape -6. **Grid lines** - Altitude reference (every 10,000 feet) -7. **Base station** - ADS-B receiver building with antenna -8. **Aircraft** - Scaled, positioned, and oriented correctly -9. **Scale indicators** - Altitude labels on left side -10. **Compass indicators** - North/South directional arrows - -### Aircraft Direction Logic -```javascript -// Sprites face right (eastward) by default -// Flip horizontally when heading west -const isFacingLeft = flight.track > 90 && flight.track < 270; - -// Heading ranges: -// 0°-90° (N to E): Face right ➡️ -// 90°-180° (E to S): Face right ➡️ -// 180°-270° (S to W): Flip left ⬅️ -// 270°-360° (W to N): Flip left ⬅️ -``` - -### Moon Sprite Sheet Cropping -```javascript -// 2x3 grid: 3 columns, 2 rows -const spriteWidth = moonSprite.width / 3; -const spriteHeight = moonSprite.height / 2; - -// Select sprite based on phase -const sx = spritePos.col * spriteWidth; // X position in sheet -const sy = spritePos.row * spriteHeight; // Y position in sheet - -// Draw cropped section -ctx.drawImage(moonSprite, - sx, sy, spriteWidth, spriteHeight, // Source rectangle - destX, destY, targetWidth, targetHeight // Destination -); -``` - -### API Endpoints Used -- **Open-Meteo Forecast API**: Weather and sunrise/sunset - - Endpoint: `https://api.open-meteo.com/v1/forecast` - - Parameters: latitude, longitude, current_weather, daily - - Update interval: 10 minutes - -### WebSocket Communication -- **Server**: Python 3 with aiohttp -- **Port**: 2001 -- **Protocol**: JSON messages -- **Update Rate**: 1 second -- **Message Format**: - ```json - { - "type": "flights", - "flights": [ - { - "icao": "ABC123", - "callsign": "UAL123", - "lat": 36.1, - "lon": -115.2, - "altitude": 35000, - "speed": 450, - "track": 90 - } - ] - } - ``` - -### ADS-B Data Processing -- Server scans network for SBS receivers (port 30003) -- Common receiver IPs: .38, .100, .101 -- Parses SBS/BaseStation format messages -- Broadcasts to WebSocket clients every 1 second -- Cleans up flights not seen in 60 seconds - -### Receiver Location -- **Default**: Las Vegas, NV (36.2788°N, 115.2283°W) -- **API**: `/api/receiver-location` -- **Uses**: Distance calculations, weather data, sun/moon positioning - -## Image Processing Details - -### Original Source -- Generated via ChatGPT/DALL-E with custom prompts -- Downloaded from SMB share: `\\192.168.0.150\allen\Projects\PixelADSB` -- Credentials: allen / *69ChopsOne69* - -### Processing Commands -```bash -# Download from SMB -smbclient //192.168.0.150/allen -U 'allen%*69ChopsOne69*' \ - -c "cd Projects\\PixelADSB; prompt OFF; mget *.png" - -# Flip aircraft sprites (originally facing left) -for img in smallProp.png regionalJet.png narrowBody.png \ - wideBody.png heavy.png helicopter.png -do - convert "$img" -flop "$img" -done - -# Rename background -mv VegasDesertBackground.png desert.png -``` - -### Image Specifications -**Aircraft:** -- Original: High-resolution PNG (185K - 361K) -- Facing: RIGHT (east) after horizontal flip -- Background: Transparent -- Display: 110px height, aspect ratio maintained - -**Desert:** -- Original: 839K → Cropped: 371K -- White background removed (transparent) -- Display: Full canvas width, aspect ratio maintained - -**Base Station:** -- Transparent background -- Display: 150px height, centered - -**Moon:** -- Sprite sheet: 1.4M (2x3 grid) -- Display: 120px height per phase -- Aspect ratio maintained for each phase - -**Sun:** -- Display: 50px tall - -**Clouds:** -- Display: 90px height -- Two variants: happy (clear), rain (bad weather) - -## Server Management - -### Running the Server -```bash -cd /root/IceNet-ADS-B/pixel-view -python3 server.py -``` - -### Server Access -- **Local**: http://192.168.0.254:2001 -- **WebSocket**: ws://192.168.0.254:2001/ws -- **Tailscale Funnel**: Available (check tailscale status) - -### Background Processes -Multiple server instances may be running in background. -- Check: `ps aux | grep server.py` -- Kill all: `pkill -9 -f server.py` - -## Version History -- **v=36** (Current): Removed pixelated weather effects -- **v=35**: Moon scaled to 200% (120px) -- **v=34**: Moon aspect ratio fix -- **v=33**: Moon sprite sheet implementation (6 phases) -- **v=32**: Aircraft direction logic fixed -- **v=31**: Desert background implementation -- **v=30**: Desert + base layering -- **v=29**: Base station sprite added -- **v=24**: Cloud sprites (happy + rain) -- **v=20**: Aircraft size 110px -- **v=16**: PNG image rendering with custom sprites - -## Key Code Locations - -### Aircraft -- `pixel-view.js:85-92` - Aircraft image loading -- `pixel-view.js:1347-1349` - Direction logic (flip when westbound) -- `pixel-view.js:1374-1393` - PNG rendering with flip - -### Scenery -- `pixel-view.js:95-113` - Desert and base image loading -- `pixel-view.js:1138-1147` - Desert background rendering (full width) -- `pixel-view.js:1149-1161` - Base station rendering (on top) - -### Celestial -- `pixel-view.js:115-123` - Sun image loading -- `pixel-view.js:145-153` - Moon sprite sheet loading -- `pixel-view.js:940-1027` - Sun sprite rendering -- `pixel-view.js:1029-1059` - Moon phase calculation -- `pixel-view.js:1061-1138` - Moon sprite rendering with cropping - -### Weather -- `pixel-view.js:125-143` - Cloud sprite loading -- `pixel-view.js:797-850` - Cloud rendering (auto-selects rain vs happy) - -### Sky -- `pixel-view.js:678-795` - Dynamic sky colors - -## Removed Features -The following pixel-generated features were removed and replaced with sprite images: -- ❌ Pixel-generated mountains (replaced by desert.png) -- ❌ Pixel-generated cacti (included in desert.png) -- ❌ Pixel-generated ADS-B tower (replaced by base.png) -- ❌ Pixelated rain/snow effects (weather shown via cloud sprites) - -## Status -✅ **COMPLETE** - All features implemented and working -- All 6 aircraft sprites integrated -- Vegas desert landscape background -- ADS-B receiver station sprite -- 6-phase moon sprite system -- Sun sprite -- Weather cloud sprites (happy + rain) -- Helicopter detection active -- Accurate celestial positioning -- Weather-reactive visuals -- All sprites properly layered - ---- -Last Updated: December 30, 2025 -Project Status: Complete and Operational -Current Version: v=36 diff --git a/README.md b/README.md index c9b5b30..4f94928 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,7 @@ Access at http://localhost:2001 (or configured port in config.json) ## Documentation -- [CONFIG.md](CONFIG.md) - Configuration options -- [PROJECT_DOCUMENTATION.md](PROJECT_DOCUMENTATION.md) - Technical details +- [CONFIG.md](CONFIG.md) - Configuration options and background themes - [CLAUDE.md](CLAUDE.md) - Development guidance ## Aircraft Types diff --git a/plane-right.png b/plane-right.png deleted file mode 100644 index 74654d3..0000000 Binary files a/plane-right.png and /dev/null differ