weight & balance

front-end development (reactjs)

Weight and Balance Overview Mockup


The weight and balance graphic is a supplemental learning tool to help teach student pilots how to balance the weight on their airplane before the flight. Compared to other airplanes, the Tecnam P2006T follows a different charting method. This meant that the model could not be included with the current implementation used by Sharper Edge Train Solutions Ltd. As a result, I was responsible for creating a new weight and balance graph.

what is a weight and balance graph?

The table multiplies the weight added to the plane by the length of the arm (distance from datum) to calculate the moment of the applied weight. This moment is then graphed to give the pilot a visual indicator of whether or not their plane is within the balance requirements.


Old Weight and Balance Mockup

The original weight and balance was built 2 years prior to this project. It used jQuery with a clunky table implementation that made it difficult to propagate into another plane. To address this flaw, along with the fact that the graph implementation was completely different, I decided to utilize ReactJS for the new weight and balance.


Excel Prototype Mockup, Input

Excel Prototype Mockup, Graphs

Before starting implementation, I built a sample of the weight and balance in Excel to confirm that I understood what the problem was and how it needed to be solved. This excel document originally served as the basis for the ReactJS implementation. Now, the authors find the document useful to write weight and balance questions for the preparation guide.

design / implementation

After getting approval on the function of the Excel prototype, I began building the weight and balance with ReactJS. In order to build the project, I first needed to break down the application into its base components:

resolving dependencies

the table behaves like a Excel sheet with formulas, the dependencies between cells needed to be resolved. Therefore, I utilized DFS (depth first search) to resolve the order in which the cells should be processed and confirm that there are no circular dependencies.

testing / struggles

While building the weight and balance, I came across the following issues:

final design

In the final design, a student can insert their airplane's basic empty weight and any other weights that they will fly with. If any errors occur in their input, the app will highlight the cell red and give an appropriate error message. As the student inputs their data, the graphs automatically update and give them instant feedback.

what would i improve / change next time?