Files

root 0c9de30d41 Initial commit: Pixel-ADSB flight tracker

Retro SNES-style side-view ADS-B aircraft tracker with pixel art sprites,
animated celestial bodies, weather visualization, and directional views.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-20 11:10:25 -08:00

14 KiB

Raw Blame History

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:

Helicopter
- Detection: altitude < 5000 ft AND speed < 150 knots
- Priority: Checked first before other types
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
Wide Body (777, 787, A350)
- High altitude: > 40000 ft OR speed > 500 knots
- Larger twin-engine design
Narrow Body (737, A320)
- Default category for most commercial aircraft
- Typical cruise altitudes and speeds
Regional Jet (CRJ, ERJ)
- Callsigns: SKW, RPA, ASH, PDT, CHQ, ENY
- OR: altitude < 25000 ft AND speed < 350 knots
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

// 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:

Sky gradient - Dynamic colors based on time of day
Clouds - Happy or rain clouds based on weather
Sun - Moves across sky based on actual sun position
Moon - Phase-accurate sprite from sheet
Desert background - Full-width Vegas landscape
Grid lines - Altitude reference (every 10,000 feet)
Base station - ADS-B receiver building with antenna
Aircraft - Scaled, positioned, and oriented correctly
Scale indicators - Altitude labels on left side
Compass indicators - North/South directional arrows

Aircraft Direction Logic

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

// 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:

{
  "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

# 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