How to Use the In-Flight Display

By the end of this guide, you will have used the In-Flight Display to monitor airborne flights in real time with a full-screen IFE-style layout showing route progress, a satellite map, altitude profile, and live performance stats.

​

Navigate to the In-Flight Display

Open the Operations sidebar and click In-Flight Display under the Fleet group. The page loads full-screen with no table headers or navigation chrome — the entire viewport is the display.

​

Understand the three display zones

The page is divided into three stacked zones that each serve a distinct purpose.

​

Zone 1 — Flight hero arc

The top section (240 px tall) is a dark panel showing the route as a styled SVG arc on a deep navy background.

• Origin ICAO code — large monospace text on the left, with the airport name and local departure time beneath it.
• Destination ICAO code — large monospace text on the right, with the airport name and local scheduled arrival time beneath it.
• Arc path — a quadratic bezier curve spanning the width of the panel. The portion already traveled is rendered as a dimmer dashed blue line; the remaining portion is a bright solid blue line. The split point moves as the flight progresses.
• Aircraft marker — an orange aircraft icon positioned on the arc at the current progress point, rotated to match the arc’s tangent direction.
• Registration and type code — displayed in the top-left corner of the panel.
• LIVE badge — a green badge in the top-right corner appears when the display has an active SSE connection to the flight tracker. When the connection is absent, the badge is hidden and the display operates in demo mode using loader data.

The arc progress is computed from the trip’s departure_at and arrival_at timestamps, clamped between 0 and 1. When live tracking data is connected, the aircraft marker position reflects real-world progress rather than scheduled time.

​

Zone 2 — Map panel and altitude profile

The middle section fills the remaining vertical space between the hero arc and the stats bar. It is split horizontally:

• Left 60% — satellite map: A MapLibre satellite map showing the aircraft’s current position, the route line between origin and destination, and airport markers. The map centers on the active aircraft. When multiple flights are airborne, all aircraft appear on the map simultaneously; click a marker to follow a specific aircraft using the ?follow= query parameter.
• Right 40% — altitude profile: A chart showing the aircraft’s current altitude against a standard cruise profile curve. The current altitude is sourced from live tracking data when connected; otherwise it falls back to the value stored in the most recent flight_tracking row from the loader.

Both panels lazy-load on the client side. A skeleton placeholder renders in each panel while the components initialize.

​

Zone 3 — Eight-stat data bar

The bottom bar (80 px tall) displays eight performance values in a monospace grid, each labeled in blue uppercase text with the value in white below it. The stats bar only renders when both an active flight and a valid position record exist. If the aircraft has no tracking data and no fallback position, the bar is hidden.

​

Select an aircraft when multiple flights are airborne

When your workspace has more than one aircraft in airborne state, a slim selector bar appears above the hero arc showing the current aircraft registration and an index counter (e.g., N456PC · 2 / 3). Use the left and right arrow buttons to step through airborne aircraft. All zones update to reflect the selected aircraft.

​

Understand data sources and priority

The display pulls flight data from two sources and combines them:

1. Server loader (initial render) — On page load, the loader queries dispatch_status for all aircraft in your workspace with state = 'airborne', joins against aircraft and trip_legs to get origin, destination, and scheduled times, and fetches the most recent row from flight_tracking for each aircraft. This data is serialized into the initial HTML.
2. Live SSE tracking (client) — After page load, the useFlightTracker hook opens a server-sent events connection scoped to your workspace. When a position update arrives for the active aircraft’s registration, it immediately overrides the loader snapshot for altitude, speed, and heading. The LIVE badge appears when this connection is established.

Live SSE data takes precedence over loader data for all position-derived values (ALT, G/S, TAS, HDG, OAT). ETA, DIST, and DEST are always computed from the scheduled arrivalAt timestamp. Progress refreshes on a 10-second interval on the client so that the arc marker and time-based stats remain current even without a live tracking connection.

​

Understand the fallback behavior

If no aircraft is in airborne dispatch state, the loader falls back to trips in active status. For those trips, position is interpolated linearly between origin and destination coordinates based on elapsed fraction of the scheduled flight time, with a default altitude of 35,000 ft and speed of 400 kt when no flight_tracking row exists. If neither airborne dispatch records nor active trips are found, the page shows a minimal empty state reading No Active Flights. The display will update automatically the next time the page is loaded after a dispatch state change.

​

Monitor a flight from initial setup to landing

​

Related