Implement a sample Air Traffic Control using HTML5, JS and CSS

This article details a sample implementation for an Air Traffic Controller and demonstrates how a front end can be designed for it using standard HTML5, CSS, and regular JavaScript. This also in a way demonstrate the power of javascript standard and how much we can achieve just with standard javascript without using any third-party frameworks.

Project Source Code – source code for a sample implementation is available at the below GitHub link. feel free to download and extend it for fun and learning at the same time. Also, the readme file in the GitHub repo explains what flight simulation does and how and I will be providing an overview in the article as well. In the below link please ignore all other folders and directly move to FinalFolder and under it load the ATCFinalDemo.html file in the browser. The folder under which this file is available is shown below for reference.

https://github.com/ksmslearnings/AirTrafficControllerFunProject

How does it work and Technologies Involved

This project is purely implemented using HTML5, JavaScript and CSS and Html file directly holds a static JSON array holding a set of flight and their departure schedule. From technology point of view project uses –

HTML5 audio to add flight movement and departure audio for simulation and give more feel to the project. The same mp3 file has been used with multiple and separate Html5 audio elements since each flight needs to have its own audio simulation. It’s not feasible to manage all parallel flights with a single audio element. 3 mp3 files have been used for audio for Taxiway, seatbelt alert, and departure.

• HTML file holds a JSON array containing a flight schedule with a list of 8 to 9 flight details for various destinations. When the document loads in the browser, the flight schedule is set in real-time and the schedule is set to start a minimum of 60 seconds or more after the screen loads. Please see the actual JSON array in code for better details of the schedule and explained later in this article as well.
• Standard Javascript to run loops for continuous execution and here we have used windows.setInterval for running a set of JavaScript functions on a continuous basis at regular intervals.
• There are multiple JS functions to add flights to available gates, allocating the next available Runways to flights, and then move and depart the flights from the allocated runways. All these functions run in parallel and are controlled by a separate window.setInterval calls thereby adding parallel function execution in the Html document.
• Standard CSS for styling flight parking gates and runways and overall Html page.

• Flight details and schedule available in JSON array is parsed in JavaScript and as each flight reaches its departure time, it is allocated a Gate and if any runway already available then that is also allocated immediately on first come first serve basis. Allocated Gate and Runway are shown in same color coding for making UI more logical and easy to read as what is happening to each flight.

• Once a gate or runway is again made available, it color is updated and status and other details are reset back. On the available gate all details are reset as well to make it available for the next plane and flight. This is handle using JavaScript custom events in the code.

• Ultimately flights are shown moving towards the allocated runways and then departing from runway.

• Gates and Runways are made next available after 2 minutes of the previous flight departure. There are total of 5 gates and 4 runways so maximum of 4 flights can depart at the same time.

• When flight moves on the screen, pixel positions are changed on a continuous basis in a loop to show planes moving on the screen. Since Gates, Runways are displayed with a consistent width, height, and margin between them, pixel position of planes is handled using simple mathematics and have been tested on multiple browsers. Based on screen resolution there may be a chance that planes are displayed moving not very accurately on the path due to issues with accurate pixel position handling of planes.

JSON Data holding flight schedule looks like below and we can see Departure Time and Arrival Time are set in real time based on current datetime and set to future time starting 60 seconds after screen loads.

retrievedDepartures = [				
				{					
					FlightID:1,
					FlightNumber:"AZ901 - ND to MLB",	
					PlaneType:"Boeing 747",
					Type:"Depart",
					DepartTime: new Date(currentDateTime.getTime() + 1*60000),//when it moves to empty runway and fly away - 1*60000
					ArrivalTime: new Date(currentDateTime.getTime() + 2*60000),//when flight comes back on destination on empty runway and gate and complete journey
					From :"New Delhi",
					To : "Melbourne",
					Status: "OnTime",
					RunWayAssigned : '',
					GateAssigned : ''
				},
				
				{					
					FlightID:2,
					FlightNumber:"IND901 - MUM to PRS",	
					PlaneType:"Airbus 380",
					Type:"Depart",
					DepartTime: new Date(currentDateTime.getTime() + 1*60000),//when it moves to empty runway and fly away
					ArrivalTime: new Date(currentDateTime.getTime() + 3*60000),//when flight comes back on destination on empty runway and gate and complete journey
					From :"Mumbai",
					To : "Paris",
					Status: "OnTime",
					RunWayAssigned : '',
					GateAssigned : ''					
				},
and so on..

On same lines Runway and gates are also setup as static JSON arrays in the html file.

What is shown on screen

Below screenshots will better explain what is shown in the browser window and how above details all correlate and work together.

flight moving to runways, in this case 3 flights are scheduled for same time. We can see gates and runways are color coded in a group to shown flight allocation.

Below shows flights running on the runways (there is little positioning issue as I explained earlier based on screen resolution). Also we can see runways shows when they are net available ie 2 minutes from that flight departure time in this case.

And below we can see flight departing from runway as well.

Conclusion

This is a sample front end implementation for an air traffic controller and can be extended to work with a backend service feeding data to UI on continuous basis and show a current set of flights ready for departure. It can further be extended to have emergency landings as well as arrivals as well which is currently not supported. This also shows how much can be achieved with just plane JavaScript and Html5 without using any third party client side framework.