{"id":880,"date":"2024-02-08T10:46:15","date_gmt":"2024-02-08T15:46:15","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=880"},"modified":"2026-01-30T11:49:50","modified_gmt":"2026-01-30T16:49:50","slug":"creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/02\/08\/creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft\/","title":{"rendered":"Creating a Flight Tracking Dashboard, Part 1: Visualizing an Aircraft"},"content":{"rendered":"
\n
\n\n\n\n
\"\"<\/td>\nGuest Writer: Ken Deeley<\/a>
\n<\/strong><\/p>\n
\n
\n
Ken is an application engineer in Cambridge, UK, supporting MathWorks users with their technical computing projects. Ken joined the MathWorks customer training team in 2011 after research work in mathematics with applications to motion planning for autonomous guided vehicle (AGV) robotics. Ken specializes in software development, machine learning, and financial applications, with a particular focus on graphics and app development. He enjoys training MathWorks users on best practices, working with customers on consulting projects, and capturing common customer workflows and requirements to inform future MathWorks development activities.<\/div>\n<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n

\"Open<\/a><\/p>\n

Overview<\/span><\/h1>\n
MATLAB provides a large suite of visualization functions tailored to scientific and engineering applications. In addition, MATLAB enables you to develop domain-specific visualizations. These can be embedded in all data analytics workflows, ranging from small-scale interactive tasks<\/a> to more complex reports<\/a>, apps<\/a> and web apps<\/a> such as dashboard-like front ends.<\/div>\n
Let's assume that we've been tasked with developing a custom dashboard for monitoring an aircraft during a flight. Over the course of this three-part blog series, we'll see how to put together this dashboard by breaking it down into several simpler steps.<\/div>\n
Here's a screenshot of what we'll be laying out. We'll be including visualizations for tracking the aircraft during its flight, and flight instruments to display the flight data. There will also be some controls for configuring the appearance of the dashboard.<\/div>\n
\"\"<\/div>\n
<\/div>\n
In this first blog post, we'll focus on creating an important part of the dashboard - a visualization to display a model of the aircraft together with its current attitude (roll, pitch, and yaw). We'll learn some general visualization techniques such as working with stereolithography (STL) files, 3D surfaces, and transforming 3D graphics.<\/div>\n
In the next post in this series<\/a>, we'll see how to encapsulate the 3D graphics and helper functions in a custom aircraft chart. This approach is more suited to modular application development. In the third and final post, we'll see how to connect the aircraft chart with other controls and displays in the final dashboard.<\/div>\n
Let's get started!<\/div>\n
\n
Table of Contents<\/span><\/div>\n
Import and visualize a 3D aircraft model.
\n<\/a>Improve the default 3D visualization of the aircraft.
\n<\/a>Prepare the aircraft for geometric transformation.
\n<\/a>Adjust the aircraft's attitude using the transform.
\n<\/a>Summary
\n<\/a>Roll, pitch, and yaw functions.
\n<\/a>References<\/a><\/div>\n<\/div>\n
<\/div>\n

Import and visualize a 3D aircraft model.<\/h2>\n
We need a 3D aircraft model for our dashboard, so let's download one. We'll download a generic airplane design by Yorchmur on printables.com<\/span> [1]. It's common for 3D models to be saved in STL<\/span><\/a> (stereolithography) files. These contain a surface triangulation (vertices, edges and faces) in a structured format. MATLAB provides the stlread<\/span><\/a> function for importing data from STL files.<\/div>\n
The output of this function is a triangulation<\/span><\/a>, containing vertices, edges, and faces. A triangulation is an efficient way to represent a large or complex surface. The Points<\/span> property of the triangulation stores the vertices. The ConnectivityList<\/span> property specifies how the vertices are connected within the triangulation - each row of this matrix represents a triangle.<\/div>\n
\n
\n
url = \"https:\/\/files.printables.com\/media\/prints\/34767\/stls\/343468_b085a064-c28f-4861-b1a0-6a559929a7e2\/avion31.stl\"<\/span>;<\/div>\n<\/div>\n
\n
opts = weboptions(\"ContentReader\"<\/span>, @stlread);<\/div>\n<\/div>\n
\n
tr = webread(url, opts);<\/div>\n<\/div>\n
\n
disp(tr)<\/div>\n
\n
\n
triangulation with properties:
\nPoints: [261401\u00d73 double]
\nConnectivityList: [519617\u00d73 double]<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
It's easy to visualize the 3D surface defined by this triangulation. Triangulations have several dedicated visualization functions, including trisurf<\/span><\/a>, trimesh<\/span><\/a>, and triplot<\/span><\/a>. We'll use trisurf<\/span> to render our aircraft using a smooth surface plot. In fact, trisurf<\/span><\/a> creates a patch<\/span><\/a> for optimal performance.<\/div>\n
\n
\n
figure<\/div>\n<\/div>\n
\n
trisurf(tr)<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Improve the default 3D visualization of the aircraft.<\/h2>\n
We can see an aircraft-shaped blob in our axes, but this visualization won't win any prizes. Let's improve our aircraft visualization by customizing some axes<\/span> and patch<\/span> properties. These objects are highly customizable - see Axes Properties<\/span><\/a> and Patch Properties<\/span><\/a> for further details.<\/div>\n
We'll paint the aircraft, add lighting to the scene from directly above, and make the aircraft skin extra shiny using the material<\/span><\/a> function.<\/div>\n
The lighting properties for patch<\/span> and surface<\/span> objects are only activated when there is a light<\/span><\/a> object in the axes. See Lighting Overview<\/span><\/a> for further details.<\/div>\n
First, we'll create a two-color scheme for painting the aircraft, using gray and blue. The colormap will have 500 points, comprising 250 gray and 250 blue points. This means that any point on the aircraft with z<\/span>-coordinate below 500 will be colored gray, whereas any point with z<\/span>-coordinate above 250 will be blue. The choice of 250 corresponds to the z<\/span>-coordinate of the base of the aircraft's tail.<\/div>\n
\n
\n
blue = [0, 0.447, 0.741];<\/div>\n<\/div>\n
\n
gray = 0.95 * ones(1, 3);<\/div>\n<\/div>\n
\n
onesMatrix = ones(250, 3);<\/div>\n<\/div>\n
\n
paintJob = [gray .* onesMatrix; blue .* onesMatrix];<\/div>\n<\/div>\n<\/div>\n
Here, the units are arbitrary and could be rescaled if needed.<\/div>\n
\n
\n
x = [-2000, 2000];<\/div>\n<\/div>\n
\n
y = [-2500, 4500];<\/div>\n<\/div>\n
\n
z = [-2500, 2500];<\/div>\n<\/div>\n<\/div>\n
Create the figure<\/span> and axes<\/span>.<\/div>\n
\n
\n
f = figure;<\/div>\n<\/div>\n
\n
ax = axes(\"Parent\"<\/span>, f, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"Colormap\"<\/span>, paintJob, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"View\"<\/span>, [225, 25], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"DataAspectRatio\"<\/span>, [1, 1, 1], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"XLim\"<\/span>, x, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"YLim\"<\/span>, y, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"ZLim\"<\/span>, z, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"XTickLabel\"<\/span>, [], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"YTickLabel\"<\/span>, [], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"ZTickLabel\"<\/span>, [], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"NextPlot\"<\/span>, \"add\"<\/span>);<\/div>\n<\/div>\n
\n
aircraft = trisurf(tr, \"Parent\"<\/span>, ax, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"FaceAlpha\"<\/span>, 0.9, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"FaceColor\"<\/span>, \"interp\"<\/span>, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"EdgeAlpha\"<\/span>, 0, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\"FaceLighting\"<\/span>, \"gouraud\"<\/span>);<\/div>\n<\/div>\n
\n
title(\"Aircraft Attitude\"<\/span>)<\/div>\n<\/div>\n
\n
light(ax, \"Position\"<\/span>, [0, 0, 1])<\/div>\n<\/div>\n
\n
material(ax, \"shiny\"<\/span>)<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Prepare the aircraft for geometric transformation.<\/h2>\n
Great, now we have a visualization of the aircraft that looks reasonable. However, the aircraft has a fixed attitude, with zero pitch, roll, and yaw. To visualize the changing attitude of the aircraft during a flight, we need the ability to set the pitch, roll, and yaw angles to any value.<\/div>\n
We'll approach this task using a transform.<\/span> In this context, a transform<\/span> is a geometric operation such as a rotation, scaling, or translation applied to a graphics object within a 3D axes.<\/div>\n
MATLAB provides the hgtransform<\/span><\/a> function to create transform objects. The idea is that the transform is a container in which we can place any number of 3D graphics objects. When we apply a geometric transformation on this container, it takes care of moving all its constituent graphics objects.<\/div>\n
Rather than perform the calculations needed to update the coordinates of each graphics object when we want to apply a transform, we instead manipulate the Matrix<\/span> property of the transform. This is a 4-by-4 matrix representing the required transform, with default value equal to the 4-by-4 identity matrix, representing the null transform.<\/div>\n
For further details on how this matrix is used to transform objects in 3D coordinate systems, see Cleve's excellent blog posts ([2]<\/a> and [3]<\/a>) describing his interactive Grafix<\/span> tool.<\/div>\n
Let's create a new transform in the axes, and place our aircraft inside.<\/div>\n
\n
\n
tf = hgtransform(\"Parent\"<\/span>, ax);<\/div>\n<\/div>\n
\n
aircraft.Parent = tf;<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Adjust the aircraft's attitude using the transform.<\/h2>\n
We're now ready to adjust the aircraft's attitude. We'll use the three functions roll<\/span>, pitch<\/span>, and yaw<\/span> defined below to do this. For example, here is the code listing for the roll<\/span> function, which in turn relies on the rotate<\/span> helper function.<\/div>\n
\n
function <\/span>roll(aircraft, theta)<\/div>\n
<\/div>\n
rotate(aircraft, theta, \"y\"<\/span>)<\/div>\n
<\/div>\n
end<\/span><\/div>\n
<\/div>\n
function <\/span>rotate(aircraft, theta, rotationAxis)<\/div>\n
<\/div>\n
arguments <\/span>(Input)<\/div>\n
\u00a0\u00a0\u00a0\u00a0aircraft(1, 1) matlab.graphics.primitive.Patch<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0theta(1, 1) double {mustBeReal, mustBeFinite}<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0rotationAxis(1, 1) string {mustBeMember(rotationAxis, [\"x\", \"y\", \"z\"])}<\/span><\/div>\n
end<\/span><\/div>\n
<\/div>\n
theta = deg2rad(theta);<\/div>\n
tf = aircraft.Parent;<\/div>\n
tf.Matrix = tf.Matrix * makehgtform(rotationAxis + \"rotate\"<\/span>, theta);<\/div>\n
<\/div>\n
end<\/span><\/div>\n<\/div>\n
The roll<\/span> function accepts the aircraft triangulation and an angle (specified in degrees). These values are passed onto the rotate<\/span> function, together with the string \"y\"<\/span>, representing a rotation around the y<\/span>-axis. The rotate<\/span> function then converts the angle from degrees to radians (using deg2rad<\/span><\/a>) for compatibility with makehgtform<\/span><\/a>. This is a convenience function for creating the required 4-by-4 transformation matrix for a broad range of common operations, including the rotations we need to implement attitude adjustments to the aircraft. The pitch<\/span> and yaw<\/span> functions are implemented in a similar way.<\/div>\n
As an example, the following code creates the transformation matrix representing a rotation of 15 degrees about the z-axis. This corresponds to changing the aircraft's yaw.<\/div>\n
\n
\n
yawAdjustment = makehgtform(\"zrotate\"<\/span>, deg2rad(15));<\/div>\n<\/div>\n
\n
disp(\"Transformation matrix for a 15 degree rotation about the z-axis:\"<\/span>)<\/div>\n
\n
\n
Transformation matrix for a 15 degree rotation about the z-axis:<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
disp(yawAdjustment)<\/div>\n
\n
\n
0.96593 -0.25882 0 0
\n0.25882 0.96593\u00a0 0 0
\n0\u00a0 \u00a0 \u00a0 \u00a00\u00a0 \u00a0 \u00a0 \u00a0 1 0
\n0\u00a0 \u00a0 \u00a0 \u00a00\u00a0 \u00a0 \u00a0 \u00a0 0 1<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Next, apply this transformation to our aircraft. Note that if we want to apply a sequence of transformations represented by the matrices $ T_1, T_2, \\dots, T_n $<\/span> to our aircraft, we multiply the transformation matrices on the right ($ T_1T_2\\cdots T_n $<\/span>) to accumulate the changes. This property of transformation matrices makes it easy to adjust the aircraft's attitude thoughout the flight.<\/div>\n
\n
\n
tf.Matrix = tf.Matrix * yawAdjustment;<\/div>\n<\/div>\n<\/div>\n
Finally, we'll use the roll<\/span> function to create an animation of our aircraft performing a loop.<\/div>\n
\n
\n
for <\/span>k = 1:72<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0roll(aircraft, 5)<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0pause(0.05)<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
\n
\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Summary<\/h2>\n
We've seen how to import STL model data into MATLAB and create a customized visualization of the corresponding 3D surface. We also introduced the concept of transforms, and how to use these to move 3D graphics objects around in a convenient way.<\/div>\n
In the next post, we'll see how to encapsulate the 3D graphics and roll<\/span>, pitch<\/span>, and yaw<\/span> functions in a custom aircraft chart. This approach is more suited to modular application development, and enables us to share the visualization with colleagues or embed it in a larger application.<\/div>\n

Roll, pitch, and yaw functions.<\/h2>\n
\n
\n
function <\/span>roll(aircraft, theta)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
rotate(aircraft, theta, \"y\"<\/span>)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
function <\/span>pitch(aircraft, theta)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
rotate(aircraft, theta, \"x\"<\/span>)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
function <\/span>yaw(aircraft, theta)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
rotate(aircraft, theta, \"z\"<\/span>)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
function <\/span>rotate(aircraft, theta, rotationAxis)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
arguments <\/span>( Input )<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0aircraft(1, 1) matlab.graphics.primitive.Patch<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0theta(1, 1) double {mustBeReal, mustBeFinite}<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0rotationAxis(1, 1) string {mustBeMember(rotationAxis, [\"x\", \"y\", \"z\"])}<\/span><\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
theta = deg2rad(theta);<\/div>\n<\/div>\n
\n
tf = aircraft.Parent;<\/div>\n<\/div>\n
\n
tf.Matrix = tf.Matrix * makehgtform(rotationAxis + \"rotate\"<\/span>, theta);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n<\/div>\n

References<\/h2>\n