{"id":1503,"date":"2024-07-31T08:00:37","date_gmt":"2024-07-31T12:00:37","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=1503"},"modified":"2026-01-30T11:56:06","modified_gmt":"2026-01-30T16:56:06","slug":"creating-a-flight-tracking-dashboard-part-2-developing-an-aircraft-chart","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/07\/31\/creating-a-flight-tracking-dashboard-part-2-developing-an-aircraft-chart\/","title":{"rendered":"Creating a Flight Tracking Dashboard, Part 2: Developing an Aircraft Chart"},"content":{"rendered":"<div class=\"rtcContent\">\n<div>\n<table style=\"background-color: #e2f0ff\">\n<tbody>\n<tr>\n<td style=\"width: 120px;padding: 3px;vertical-align: middle\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-832\" src=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/02\/kdeeley-150x150.jpg\" alt=\"\" width=\"110\" height=\"110\" \/><\/td>\n<td style=\"vertical-align: middle;padding: 3px\"><strong>Guest Writer: <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/2987674\">Ken Deeley<\/a><br \/>\n<\/strong><\/p>\n<div class=\"content\">\n<div class=\"SectionBlock first active\">\n<div class=\"SD57BF6401\">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 class=\"rtcContent\">\n<div>\n<hr \/>\n<\/div>\n<div>\n<p><a href=\"https:\/\/matlab.mathworks.com\/open\/github\/v1?repo=MATLAB-Graphics-and-App-Building\/matlab-gaab-blog-2024&amp;file=FlightTrackingDashboard\/FlightTrackingDashboard_Part2.mlx\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.mathworks.com\/images\/responsive\/global\/open-in-matlab-online.svg\" alt=\"Open in MATLAB Online\" \/><\/a><\/p>\n<\/div>\n<h1 id=\"H_701E9FF1\" style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><span style=\"font-weight: bold\">Overview<\/span><\/h1>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In the <a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/02\/08\/creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft\/\">first blog post<\/a> of this series, we saw how to visualize a model of the aircraft together with its current attitude. In this post, we'll see how to encapsulate the 3D graphics and helper functions used to visualize the aircraft in a custom chart.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Throughout this post, we'll use the term <span style=\"font-style: italic\">chart<\/span> to refer to a MATLAB class that provides a convenient visualization API for end users. Charts are also more suitable for modular application development, since they can be dynamically updated after creation, and reused between multiple applications. For more information about charts, see the <a href=\"https:\/\/www.mathworks.com\/company\/newsletters\/articles\/creating-specialized-charts-with-matlab-object-oriented-programming.html\">technical article<\/a> [1].<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">By the end of this post, we'll have an aircraft chart equipped with the <span style=\"font-weight: bold;font-family: monospace\">roll<\/span>, <span style=\"font-weight: bold;font-family: monospace\">pitch<\/span>, and <span style=\"font-weight: bold;font-family: monospace\">yaw<\/span> functions for setting the attitude of the aircraft.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 364px;height: 273px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/07\/FlightTrackingDashboard_Part2.mlx-07-30-24_1.gif\" alt=\"AircraftRoll.gif\" width=\"364\" height=\"273\" \/><\/div>\n<div style=\"margin-bottom: 20px;padding-bottom: 4px\">\n<div style=\"margin: 0px;padding: 10px 0px 10px 5px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: bold;text-align: start\"><span style=\"font-weight: bold\">Table of Contents<\/span><\/div>\n<div style=\"margin: -1px 0px 0px;padding: 10px 0px 10px 7px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: start\"><a href=\"#H_BC629322\">Create a new chart class.<br \/>\n<\/a><a href=\"#H_191FFBF7\">Define the setup and update methods.<br \/>\n<\/a><a href=\"#H_C2F00636\">Add data to the chart.<br \/>\n<\/a><a href=\"#H_8644B7E1\">Add graphics objects to the chart.<br \/>\n<\/a><a href=\"#H_8CC72E22\">Customize the chart's constructor.<br \/>\n<\/a><a href=\"#H_C09B0640\">Update the chart's graphics.<br \/>\n<\/a><a href=\"#H_F1572E37\">Equip the chart with rotation methods.<br \/>\n<\/a><a href=\"#H_8326C370\">Test the chart.<br \/>\n<\/a><a href=\"#H_08CDD73F\">Further charts.<br \/>\n<\/a><a href=\"#H_1ED2C0EE\">Summary<br \/>\n<\/a><a href=\"#H_0926CC6D\">References<\/a><\/div>\n<\/div>\n<h2 id=\"H_BC629322\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Create a new chart class.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Since R2019b, MATLAB provides a <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/matlab.graphics.chartcontainer.chartcontainer-class.html\">framework for developing custom charts<\/a>. We'll start by creating a new chart class within this framework, named <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span>.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">classdef <\/span>AircraftChart &lt; matlab.graphics.chartcontainer.ChartContainer<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In this example, the chart will only contain graphics objects. If you need your chart to contain control objects, such as buttons or check boxes, or if you need to share your chart as a reusable component in App Designer, you should use the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/matlab.ui.componentcontainer.componentcontainer-class.html\"><span style=\"font-weight: bold;font-family: monospace\">ComponentContainer<\/span><\/a> framework (introduced in R2020b). We\u2019ll see some examples of components in part 3 of this blog series.<\/div>\n<h2 id=\"H_191FFBF7\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Define the <span style=\"font-weight: bold;font-family: monospace\">setup<\/span> and <span style=\"font-family: monospace\">update<\/span> methods.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">If we try to create an <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span> object from our class, we'll get the following error.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">&gt;&gt; AC = AircraftChart<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">Abstract <span style=\"color: #a709f5\">classes cannot be instantiated. Class 'AircraftChart' inherits abstract methods or properties but does not implement<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">them. See the <span style=\"color: #a709f5\">list of methods and properties that 'AircraftChart' must implement if you do not intend the class to be abstract.<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">This is because charts derived from <span style=\"font-weight: bold;font-family: monospace\">ChartContainer<\/span> must implement the following two methods:<\/div>\n<ul style=\"margin: 10px 0px 20px;padding-left: 0px;font-family: Helvetica, Arial, sans-serif;font-size: 14px\">\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><span style=\"font-weight: bold;font-family: monospace\">setup<\/span> - responsible for initializing the chart's graphics as part of the construction process.<\/li>\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\"><span style=\"font-weight: bold;font-family: monospace\">update<\/span> - responsible for refreshing the chart's graphics when the chart's data or properties are changed by an end user.<\/li>\n<\/ul>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Let's add these methods to our <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span>. Note that we need to make these methods <span style=\"font-style: italic\">protected<\/span> (i.e., accessible within the current class and any subclasses) for consistency with <span style=\"font-weight: bold;font-family: monospace\">ChartContainer<\/span>.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">classdef <\/span>AircraftChart &lt; matlab.graphics.chartcontainer.ChartContainer<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">methods <\/span>( Access = protected )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">function <\/span>setup( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">function <\/span>update( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We can now create a chart object:<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">&gt;&gt; AC = AircraftChart<\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">This is not very useful though - we don't yet have any data or graphics.<\/div>\n<h2 id=\"H_C2F00636\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Add data to the chart.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">As we saw in the <a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/02\/08\/creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft\/\">first blog post<\/a>, the data required for the visualization can be represented conveniently as a single <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/triangulation.html\"><span style=\"font-weight: bold;font-family: monospace\">triangulation<\/span><\/a> object. Let's add this as a property in the <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span> class. As the default value, we'll use the triangulation obtained from the <span style=\"font-weight: bold;font-family: monospace\">avion31<\/span> STL file we used previously.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">classdef <\/span>AircraftChart &lt; matlab.graphics.chartcontainer.ChartContainer<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">properties<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Triangulation<span style=\"color: #a0522d\">(:, 3) triangulation <\/span>= stlread( <span style=\"color: #a709f5\">\"avion31.stl\" <\/span>)<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">methods <\/span>( Access = protected )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">function <\/span>setup( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">function <\/span>update( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The end user of the chart can easily change the aircraft STL file by setting the <span style=\"font-weight: bold;font-family: monospace\">Triangulation<\/span> property.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">&gt;&gt; AC = AircraftChart<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">&gt;&gt; AC.Triangulation = stlread( <span style=\"color: #a709f5\">\"NewSTLFile.stl\" <\/span>);<\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The <span style=\"font-weight: bold;font-family: monospace\">update<\/span> method is called automatically when the end user sets any public property of the chart. This is the mechanism we'll use to ensure the chart updates dynamically in response to changes made by the end user. Before we do this, we need to add graphics objects to the chart.<\/div>\n<h2 id=\"H_8644B7E1\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Add graphics objects to the chart.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The <span style=\"font-weight: bold;font-family: monospace\">ChartContainer<\/span> framework provides a <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/tiledlayout.html\">tiled layout<\/a> in which to add the chart's graphics objects. We can access this tiled layout using the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/matlab.graphics.chartcontainer.chartcontainer.getlayout.html\"><span style=\"font-weight: bold;font-family: monospace\">getLayout<\/span><\/a> method. The tiled layout provides the flexibility to add multiple axes, or axes with different types such as <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/geoaxes.html\"><span style=\"font-weight: bold;font-family: monospace\">geoaxes<\/span><\/a> or <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/polaraxes.html\"><span style=\"font-weight: bold;font-family: monospace\">polaraxes<\/span><\/a>.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>setup( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">tl = obj.getLayout();<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In this example, we need to initialize the following graphics objects:<\/div>\n<ul style=\"margin: 10px 0px 20px;padding-left: 0px;font-family: Helvetica, Arial, sans-serif;font-size: 14px\">\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\">An <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/axes.html\"><span style=\"font-weight: bold;font-family: monospace\">axes<\/span><\/a> object, that we'll parent to the tiled layout.<\/li>\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\">A transform object created using <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/hgtransform.html\"><span style=\"font-weight: bold;font-family: monospace\">hgtransform<\/span><\/a>, that we'll parent to the axes. This is used to enable easy rotation of the aircraft around the three coordinate axes.<\/li>\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\">A <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/patch.html\"><span style=\"font-weight: bold;font-family: monospace\">patch<\/span><\/a> object, that we'll parent to the transform object. Recall that we used the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/trisurf.html\"><span style=\"font-weight: bold;font-family: monospace\">trisurf<\/span><\/a> function to create the patch.<\/li>\n<\/ul>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">First, we'll add the graphics objects as chart properties.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">classdef <\/span>AircraftChart &lt; matlab.graphics.chartcontainer.ChartContainer<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">properties <\/span>( Access = private )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Axes<span style=\"color: #a0522d\">(:, 1) matlab.graphics.axis.Axes {mustBeScalarOrEmpty}<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Transform<span style=\"color: #a0522d\">(:, 1) matlab.graphics.primitive.Transform {mustBeScalarOrEmpty}<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Patch<span style=\"color: #a0522d\">(:, 1) matlab.graphics.primitive.Patch {mustBeScalarOrEmpty}<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">There's no reason for an end user to retrieve or modify these objects directly, so we declare the attribute <span style=\"font-weight: bold;font-family: monospace\">Access = private<\/span> for these properties.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We also add <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_oop\/validate-property-values.html\">property validation<\/a> to ensure that these properties are used correctly within the class. Each of these properties should either be empty (when the class is first loaded) or a scalar value (when the <span style=\"font-weight: bold;font-family: monospace\">setup<\/span> method is called). Using the size validation <span style=\"font-weight: bold;font-family: monospace\">(:, 1)<\/span> combined with the validator <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/mustbescalarorempty.html\"><span style=\"font-weight: bold;font-family: monospace\">mustBeScalarOrEmpty<\/span><\/a> ensures that these properties either have size 0-by-1 or 1-by-1.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The type validation (e.g., <span style=\"font-weight: bold;font-family: monospace\">matlab.graphics.axis.Axes<\/span>) ensures that code within the class assigns values of the correct data type, e.g., to avoid confusion between the different types of axes. Conveniently, adding this type validation also enables tab-completion on properties of the graphics objects when these properties are referenced in methods.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Don't worry if these class names seem long - it's easy to discover the appropriate type to use by creating a graphics object at the command line and calling the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/class.html\"><span style=\"font-weight: bold;font-family: monospace\">class<\/span><\/a> function.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">&gt;&gt; class(axes)<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">ans =<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">'matlab.graphics.axis.Axes'<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Next, we'll create and assign the graphics objects in the chart's <span style=\"font-weight: bold;font-family: monospace\">setup<\/span> method. This is called automatically whenever a chart object is created. Here, we place the code we used in the <a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/02\/08\/creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft\/\">first blog post<\/a> for creating the axes, transform, and patch objects.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>setup( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Obtain the chart's tiled layout.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">tl = obj.getLayout();<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Define the color scheme used for the aircraft.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">blue = [0, 0.447, 0.741];<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">gray = 0.95 * ones(1, 3);<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">onesMatrix = ones(250, 3);<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">paintJob = [gray .* onesMatrix; blue .* onesMatrix];<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Create and customize the axes.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">x = [-2000, 2000];<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">y = [-2500, 4500];<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">z = [-2500, 2500];<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.Axes = axes( <span style=\"color: #a709f5\">\"Parent\"<\/span>, tl, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"Colormap\"<\/span>, paintJob, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"View\"<\/span>, [225, 25], <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"DataAspectRatio\"<\/span>, [1, 1, 1], <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"XLim\"<\/span>, x, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"YLim\"<\/span>, y, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"ZLim\"<\/span>, z, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"XTickLabel\"<\/span>, [], <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"YTickLabel\"<\/span>, [], <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"ZTickLabel\"<\/span>, [], <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"NextPlot\"<\/span>, <span style=\"color: #a709f5\">\"add\"<\/span>);<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Add the transform and patch.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.Transform = hgtransform( <span style=\"color: #a709f5\">\"Parent\"<\/span>, obj.Axes );<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.Patch = trisurf( obj.Triangulation, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"Parent\"<\/span>, obj.Transform, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"FaceAlpha\"<\/span>, 0.9, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"FaceColor\"<\/span>, <span style=\"color: #a709f5\">\"interp\"<\/span>, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"EdgeAlpha\"<\/span>, 0, <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a709f5\">\"FaceLighting\"<\/span>, <span style=\"color: #a709f5\">\"gouraud\" <\/span>);<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Add a title, lighting from above, and give the patch a shiny appearance by adjusting lighting properties.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">title( obj.Axes, <span style=\"color: #a709f5\">\"Aircraft Attitude\" <\/span>)<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">light( obj.Axes, <span style=\"color: #a709f5\">\"Position\"<\/span>, [0, 0, 1] )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">material( obj.Axes, <span style=\"color: #a709f5\">\"shiny\" <\/span>)<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Note that we do not include creation of the figure within the chart class. This is because a chart does not own or maintain a figure. Rather, it's best to think of a chart as a graphics object that may be placed in a figure, or any other appropriate container, e.g., a tab within a tab group, a panel, another tiled layout, or a grid layout. This is an important concept when using the chart in a modular application.<\/div>\n<h2 id=\"H_8CC72E22\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Customize the chart's constructor.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We'd like our chart to have a convenient, user-friendly API for end users to work with. To enable autocompletion on the input arguments accepted by the chart, we'll modify the default constructor of <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span>.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Chart constructors should accept name-value pair arguments, so we maintain this behavior using an <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/function-argument-validation-1.html\">arguments block<\/a>, <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/validate-name-value-arguments.html\">validating the name-value pairs<\/a> from properties of the <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span> class.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We also set any name-value pairs on the chart that the end user has passed in to the constructor.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>obj = AircraftChart( namedArgs )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">arguments <\/span>( Input )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0namedArgs.?AircraftChart<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Set any user-defined properties.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">set( obj, namedArgs )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<h2 id=\"H_C09B0640\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Update the chart's graphics.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">The <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span> has one public property (<span style=\"font-weight: bold;font-family: monospace\">Triangulation<\/span>). When the end user sets this property, we expect the chart to update dynamically. This is the purpose of the <span style=\"font-weight: bold;font-family: monospace\">update<\/span> method. In our example, to avoid deleting and recreating the patch object, which could impair performance, we update the properties of the existing patch. This code uses the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/creating_plots\/how-patch-data-relates-to-a-colormap.html\">face-vertex representation<\/a> of the patch object.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>update( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">faces = obj.Triangulation(:, :);<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">points = obj.Triangulation.Points;<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">set( obj.Patch, <span style=\"color: #a709f5\">\"Faces\"<\/span>, faces, <span style=\"color: #a709f5\">\"Vertices\"<\/span>, points, <span style=\"color: #a709f5\">\"FaceVertexCData\"<\/span>, points(:, 3) )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In general, we can provide end users with a rich API comprising many properties for customizing the style and appearance of the chart. The <span style=\"font-weight: bold;font-family: monospace\">update<\/span> method handles changes made by the end user to these properties by refreshing the chart's private graphics properties.<\/div>\n<h2 id=\"H_F1572E37\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Equip the chart with rotation methods.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Next, we'll transfer the <span style=\"font-weight: bold;font-family: monospace\">roll<\/span>, <span style=\"font-weight: bold;font-family: monospace\">pitch<\/span>, and <span style=\"font-weight: bold;font-family: monospace\">yaw<\/span> functions we discussed in the <a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/02\/08\/creating-a-flight-tracking-dashboard-part-1-visualizing-an-aircraft\/\">first blog post<\/a> to the <span style=\"font-weight: bold;font-family: monospace\">AircraftChart<\/span>. These will become public methods of the chart, available for end users to call.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>roll( obj, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.rotate( <span style=\"color: #a709f5\">\"roll\"<\/span>, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% roll<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>pitch( obj, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.rotate( <span style=\"color: #a709f5\">\"pitch\"<\/span>, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% pitch<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>yaw( obj, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.rotate( <span style=\"color: #a709f5\">\"yaw\"<\/span>, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% yaw<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">On the other hand, the <span style=\"font-weight: bold;font-family: monospace\">rotate<\/span> helper function will become a private chart method, since an end user should not call this method directly.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>rotate( obj, type, theta )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">arguments<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #008013\">% Chart object.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0obj<span style=\"color: #a0522d\">(1, 1) AircraftChart<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #008013\">% Possible angles of rotation: roll, pitch and yaw.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0type<span style=\"color: #a0522d\">(1, 1) string <\/span><span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #a0522d\">{mustBeMember( type, [\"roll\", \"pitch\", \"yaw\"] )}<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #008013\">% Angular value to rotate by.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0theta<span style=\"color: #a0522d\">(1, 1) double {mustBeReal, mustBeFinite}<\/span> = 0<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% arguments<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">switch <\/span>type<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">case <\/span><span style=\"color: #a709f5\">\"roll\"<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rotAxis = <span style=\"color: #a709f5\">\"y\"<\/span>;<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">case <\/span><span style=\"color: #a709f5\">\"pitch\"<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rotAxis = <span style=\"color: #a709f5\">\"x\"<\/span>;<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0<span style=\"color: #0e00ff\">case <\/span><span style=\"color: #a709f5\">\"yaw\"<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rotAxis = <span style=\"color: #a709f5\">\"z\"<\/span>;<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% switch\/case<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% Convert the angle to radians and then update the<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #008013\">% transformation matrix.<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">theta = deg2rad( theta );<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.Transform.Matrix = obj.Transform.Matrix * <span style=\"color: #0e00ff\">...<\/span><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">\u00a0\u00a0\u00a0\u00a0makehgtform( rotAxis + <span style=\"color: #a709f5\">\"rotate\"<\/span>, theta );<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% rotate<\/span><\/div>\n<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">It's good practice to include a method for restoring the original state of the chart. We'll do this by adding a <span style=\"font-weight: bold;font-family: monospace\">reset<\/span> method that sets the transformation matrix back to its original value of $I_4 $,\u00a0the 4-by-4 identify matrix.<\/div>\n<div class=\"preformatted-matlab\" style=\"margin: 10px 3px 10px 55px;padding: 10px 10px 10px 5px\">\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">function <\/span>reset( obj )<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\">obj.Transform.Matrix = eye( 4 );<\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><\/div>\n<div style=\"border-radius: 0px;padding: 0px;line-height: 15.6px;min-height: 16px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 12px\"><span style=\"color: #0e00ff\">end <\/span><span style=\"color: #008013\">% reset<\/span><\/div>\n<\/div>\n<h2 id=\"H_8326C370\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Test the chart.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We're now ready to test the chart! Let's try out a 360-degree roll. Note that we\u2019ve added a <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/pause.html\"><span style=\"font-weight: bold;font-family: monospace\">pause<\/span><\/a> command to slow down the animation speed and ensure that each iteration of the loop is captured as a single frame in the resulting animation.<\/div>\n<div style=\"background-color: #f5f5f5;margin: 10px 15px 10px 0\">\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 4px 4px 0px 0px;padding: 6px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\">f = figure;<\/div>\n<\/div>\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 0px;padding: 0px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\">AC = AircraftChart( <span style=\"color: #a709f5\">\"Parent\"<\/span>, f );<\/div>\n<\/div>\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 0px;padding: 0px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\"><\/div>\n<\/div>\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 0px;padding: 0px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\"><span style=\"color: #0e00ff\">for <\/span>k = 1 : 72<\/div>\n<\/div>\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 0px;padding: 0px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\">\u00a0\u00a0\u00a0\u00a0AC.roll( 5 )<\/div>\n<\/div>\n<div class=\"inlineWrapper\">\n<div style=\"border-radius: 0px;padding: 0px 45px 0px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\">\u00a0\u00a0\u00a0\u00a0pause( 0.05 )<\/div>\n<\/div>\n<div class=\"inlineWrapper outputs\">\n<div style=\"border-radius: 0px;padding: 0px 45px 4px 13px;line-height: 18.004px;min-height: 0px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px\"><span style=\"color: #0e00ff\">end<\/span><\/div>\n<\/div>\n<div style=\"padding: 10px 0px 6px 17px;font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 14px;line-height: 17.234px\">\n<div class=\"inlineElement eoOutputWrapper disableDefaultGestureHandling embeddedOutputsFigure\" data-testid=\"output_0\">\n<div class=\"figureElement eoOutputContent\" role=\"article\">\n<p><img decoding=\"async\" class=\"figureImage figureContainingNode\" style=\"width: 500px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/07\/FlightTrackingDashboard_Part2.mlx-07-30-24_2.png\" \/><\/p>\n<div class=\"outputLayer selectedOutputDecorationLayer doNotExport\" aria-hidden=\"true\"><\/div>\n<div class=\"outputLayer activeOutputDecorationLayer doNotExport\" aria-hidden=\"true\"><\/div>\n<div class=\"outputLayer scrollableOutputDecorationLayer doNotExport\" aria-hidden=\"true\"><\/div>\n<div class=\"outputLayer navigationFocusLayer doNotExport\" role=\"application\" aria-hidden=\"false\" aria-label=\"figure output \"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"H_08CDD73F\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Further charts.<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">Taking a similar approach, we could wrap up the graphics required for the map plot used on the dashboard into a custom chart named <span style=\"font-weight: bold;font-family: monospace\">LocationChart<\/span>. This chart encapsulates the following graphics objects:<\/div>\n<ul style=\"margin: 10px 0px 20px;padding-left: 0px;font-family: Helvetica, Arial, sans-serif;font-size: 14px\">\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\">A geographics axes (see <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/geoaxes.html\"><span style=\"font-weight: bold;font-family: monospace\">geoaxes<\/span><\/a>)<\/li>\n<li style=\"margin-left: 56px;line-height: 21px;min-height: 0px;text-align: left\">Line objects used for the flight path of the aircraft and the current position marker (see <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/geoplot.html\"><span style=\"font-weight: bold;font-family: monospace\">geoplot<\/span><\/a>).<\/li>\n<\/ul>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In the third part of this series, we\u2019ll provide all the code for the components that make up the dashboard.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"imageNode\" style=\"vertical-align: baseline;width: 569px;height: 503px\" src=\"http:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/07\/FlightTrackingDashboard_Part2.mlx-07-30-24_3.png\" alt=\"\" width=\"569\" height=\"503\" \/><\/div>\n<h2 id=\"H_1ED2C0EE\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">Summary<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">We've seen how to take our initial visualization code for the aircraft and encapsulate it into a reusable chart. The chart can be used by colleagues as a standalone visualization within a script or function, or integrated into a larger application. We've also introduced some best programming practices for developing a chart class in MATLAB.<\/div>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">In the next post, we'll see how to build up the dashboard by writing further modular components and integrating them into a MATLAB app.<\/div>\n<h2 id=\"H_0926CC6D\" style=\"margin: 3px 10px 5px 4px;padding: 0px;line-height: 20px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 20px;font-weight: bold;text-align: left\">References<\/h2>\n<div style=\"margin: 2px 10px 9px 4px;padding: 0px;line-height: 21px;min-height: 0px;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;font-weight: 400;text-align: left\">[1] <a href=\"https:\/\/www.mathworks.com\/company\/newsletters\/articles\/creating-specialized-charts-with-matlab-object-oriented-programming.html\"><span style=\"font-style: italic\">Creating Specialized Charts with MATLAB Object-Oriented Programming<\/span><\/a>, Ken Deeley and David Sampson (2018).<\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<p><script type=\"text\/javascript\">\n{ let css = '.eoOutputWrapper { width: calc(90vw - 10px) !important; }';\nlet head = document.head || document.getElementsByTagName('head')[0];\nlet style = document.createElement('style');\nhead.appendChild(style);\nstyle.type = 'text\/css';\nif (style.styleSheet) {\n    style.styleSheet.cssText = css;\n} else {\n    style.appendChild(document.createTextNode(css));\n}<\/p>\n<p>}<\/script><a href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/07\/FlightTrackingDashboard_Part2.mlx\"><button class=\"btn btn-sm btn_color_blue pull-right add_margin_10\">Download Live Script<\/button><\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/files\/2024\/07\/FlightTrackingDashboard_Part2.mlx-07-30-24_1.gif\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div>\n<p>Guest Writer: Ken Deeley<\/p>\n<p>Ken is an application engineer in Cambridge, UK, supporting MathWorks users with their technical computing projects. Ken joined the MathWorks customer training team... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/07\/31\/creating-a-flight-tracking-dashboard-part-2-developing-an-aircraft-chart\/\">read more >><\/a><\/p>\n","protected":false},"author":198,"featured_media":1491,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,11,2],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/1503"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/comments?post=1503"}],"version-history":[{"count":8,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/1503\/revisions"}],"predecessor-version":[{"id":3643,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/1503\/revisions\/3643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media\/1491"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media?parent=1503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/categories?post=1503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/tags?post=1503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}