Aircraft Tracking Application

Building A React Application to Track Aircraft from Radar Data

Overview

A project I had designed and built from scratch during my employment as an R&D Software Developer at NMSU's Physical Science Laboratory. This application was intended to interact with radar data that would be fed to the host computer over a local network, displaying aircraft positions and paths overlayed on a map. Users would have a live view of aircraft positions as well as a set of controls that would allow them to interact with the radar.

Upon being presented with the project goals, I developed wireframes and began researching required libraries and building a prototype. I built the application itself from the ground up in React with an Electron wrapper, allowing it to interact with a NodeJS backend to consume and process the radar data. The interface itself was largely constructed with the React Bootstrap library of visual components.

Note: Due to it's sensitive nature, I'm unable to provide specific details or images regarding this project on this page.

Planning

Upon receiving the conditions of the project, we began to discuss what language and libraries we could use to help meet the goals that had been set. We agreed early into the discussion to use React as the basis in order to create a user interface that would be more familiar and easy to comprehend for the users than previous iterations of the software. From there, I began developing and presenting wireframes using diagrams.net (formerly draw.io), which allowed me to utilize specific graphical component libraries, such as React Bootstrap. Iterating upon these wireframes and presenting them to upper management provided us with a direction forward as we began to build a prototype.

As a part of the research into the needs and requirements of the project, I would spend time observing users in how they were currently making use of the previous iteration of the tracking software. In particular, I would take note of the information they needed to have immediately on hand, as well as observing which controls they most frequently used and how easily accessible those controls were.

Public domain image.

Development

As React was meant to run in a browser, it does not natively have the capability to interact with networking ports that are set up with NodeJS. Thankfully, we had the Electron wrapper available that allowed us to run the application in a standard desktop window, as opposed to a browser. Electron would act as a liaison between the React front-end and the NodeJS back-end, utilizing IPC channels to send information back and forth between the interface and the networking ports and loggers.

In addition to a the React Bootstrap library and a handful of other minor libraries, the tracking capabilities were heavily reliant on the Leaflet.js library, which utilized a locally hosted OSM server for map data. Exploring the capabilities of this library allowed me to not only place icons onto the map but also draw the pathways that the aircraft had taken since the start of their flight.

At the time of writing, this project is still in development.

Page updated

Google Sites

Report abuse