Skip to content

Overhaul web UI and improve ADS-B emitter category support#195

Open
m3ftwz wants to merge 7 commits intoantirez:masterfrom
m3ftwz:ui-overhaul
Open

Overhaul web UI and improve ADS-B emitter category support#195
m3ftwz wants to merge 7 commits intoantirez:masterfrom
m3ftwz:ui-overhaul

Conversation

@m3ftwz
Copy link
Contributor

@m3ftwz m3ftwz commented Mar 10, 2026

Summary

Overhaul of the web interface, replacing the monolithic gmap.html with a modular, multi-file architecture served from web/. This PR also includes backend changes to properly decode and expose ADS-B emitter categories, improved --ifile replay timing, and a more correct embedded HTTP server.

Screenshot From 2026-03-13 12-34-11

Web UI

Modular architecture

The single gmap.html file has been reorganized into a structured web/ directory:

  • web/index.html — minimal shell, external CSS/JS
  • web/assets/css/style.css — glassmorphism-styled dark theme
  • web/assets/js/main.js — app entry point and data fetch loop
  • web/assets/js/aircraft.js — marker icon selection by emitter category, rotation logic
  • web/assets/js/panel.js — info panel rendering, dragging, copy-to-clipboard
  • web/assets/js/trail.js — flight trail drawing with altitude-based color gradient
  • web/assets/js/lib/icons.js — inline SVG aircraft silhouettes (jet, heavy, private jet, prop, helicopter, glider, drone, balloon, ground vehicle, obstacle)
  • web/assets/js/lib/storage.js — localStorage helpers for map view persistence
  • web/assets/js/lib/utils.js — clipboard utility

SVG aircraft silhouettes

Aircraft markers now use distinct top-down SVG silhouettes based on ADS-B emitter category instead of a generic Font Awesome plane icon for all aircraft. Icons include: single-engine prop, twin turboprop, jet, heavy jet, private jet, helicopter, glider, balloon, drone, ground vehicle, and obstacle marker.
Non-directional icons (balloon, obstacle, parachute) do not rotate with track heading.

Flight trail visualization

Selecting an aircraft now draws its flight trail on the map with:

  • Altitude-based color gradient (white → yellow → green → cyan → blue → purple)
  • Adaptive trail sampling — more points recorded during turns, fewer on straight legs

Other UI improvements

  • Replaced interact.js dependency with native Pointer Events for panel dragging
  • Replaced Font Awesome dependency with self-contained inline SVGs
  • Added clear selection button and Escape key to deselect aircraft
  • Added copy-to-clipboard buttons with visual feedback on individual fields
  • Emitter category label displayed in the info panel
  • Dark map tile layer for better contrast with aircraft markers
  • Glassmorphism panel styling with backdrop blur

Backend (dump1090.c)

ADS-B emitter category support

  • Introduced emitter_category, using a flat 0–31 encoding that combines the category set (A–D) and code (0–7)
  • Added emitter_category_labels lookup table with human-readable labels per FAA AC 20-165B
  • emitter_category is now stored on the aircraft struct, decoded from identification messages, and included in the /data.json response

Improved --ifile replay timing

  • Replaced the fixed 5 ms usleep() delay with a sample-rate-proportional nanosleep() delay, so file replay matches real-time SDR data rate
  • Replay pacing now also applies in --net mode (previously only --interactive)

HTTP server improvements

  • Proper 404 and 500 status codes instead of always returning 200
  • Fixed content types: application/json (no charset), added text/css, application/javascript, text/plain
  • Static file routing for all web/ assets with explicit path allowlist (no directory traversal)

Misc

  • Trailing whitespace cleanup
  • Added #include <time.h> for nanosleep() / struct timespec

Note: This work was developed with assistance from GPT 5.4 (Codex) and Claude Opus 4.6 (Claude Code).

m3ftwz added 7 commits March 10, 2026 14:41
Reorganize the monolithic gmap.html into a modular web/ directory with
separate JS modules for aircraft icons, flight trails, info panel, and
map state. Aircraft markers now use distinct SVG silhouettes based on
emitter category instead of a generic plane icon. Selecting an aircraft
draws an altitude-colored flight trail with adaptive sampling.

On the backend, decode the full ADS-B emitter category (A0–D7) instead
of just the coarse aircraft_type, expose it in /data.json, and add
human-readable labels per FAA AC 20-165B. Fix --ifile replay to pace
data at the real SDR sample rate using nanosleep(), and return proper
HTTP status codes (404/500) from the embedded server.
@m3ftwz
Copy link
Contributor Author

m3ftwz commented Mar 11, 2026

Ready and tested with a real RTL-SDR dongle and antenna :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant