Today, I'm going to demonstrate how
to create an interactive analysis app in MATLAB using
App Designer, a built in environment for creating
professional apps that anyone can
use without being an expert in software development.
As an example, I will create an app
that allows users to design, visualize, and analyze
airfoils.
An airfoil is a 2D cross-sectional representation
of a wing that can be used to model
the performance of a particular aircraft in flight.
In order to follow along with the video,
you'll need to understand a few key fluid mechanics concepts.
The angle of attack of an airfoil
is the angle between a reference line on the airfoil
and the relative motion of the flow it is moving through.
Aircrafts usually move through the air
at a certain angle of attack to produce
lift, which is an upwards acting force on the airfoil
or wing that allows it to fly.
Finally, the Reynolds number is a dimensionless number
used to characterize the effects of viscosity
in the flow pattern of a fluid, in our case, air.
There are two main components to app design,
user interface, which you can build in the Design View,
and the app's behavior, which you can code and modify
in App Designer's code view.
We'll start with the Design View first.
To start off, I'll show you how to organize your apps
layout with containers.
Tap groups enable you to organize your apps components
into categories that the user can navigate between.
To create a tab group, scroll down in the component library
to the container section.
Then click and drag the tab group icon
onto the body of your app.
For my app, I want a design tab where
users can manipulate airfoil characteristics and an analysis
tab for visualizing plots and analysis
pertaining to that airfoil.
I'll also add panels, which further divide
each tab into subsections.
Next, I'll add individual components to my panels.
I'll start by adding a section for inputs needed for the model
airfoil.
I'll add in some numeric edit fields
where users can edit the airfoil's thickness, length,
maximum camber, and maximum camber position.
In the Analysis tab, I'll also add a numeric edit field
to manipulate the aircraft speed, which
we'll later use to calculate the Reynolds number of the airfoil.
I'll also add a radio button group
for selecting the altitude at which the aircraft is flying.
This affects the kinematic viscosity of the air,
another parameter used to calculate Reynolds number.
Now, I will add the components for displaying our results.
First, I'll add a text area where the resulting Reynolds
number will be displayed.
Next, I'm going to add a set of axes in each tab.
In the Design tab, these axes will be her
visualizing the airfoil itself.
And in the Analysis tab, these axes
will show a plot of the lift coefficient
versus angle of attack.
Finally, I'll add a button in the Analysis tab, which
will allow the user to actuate the Reynolds number
calculation I've described.
Next, I'm going to show you how to program the app you've
designed in the code view.
When you switch to the code view,
you'll see a white code area that you can type in.
The gray code areas contain code written for you
by App Designer based on actions you've
taken in the Design View.
These aren't editable, so you don't need to worry about them.
The first thing I've done here is created
a function called plot update.
This function is the same as any normal MATLAB
code I would write for plotting an airfoil.
But for all the code pertaining to the actual plotting,
I have specified the axes that I want the plot to appear on.
In this case, I'll specify the set of axes
in my Design tab, app.uiaxes.
Notice how I need to do this not only for the plot command,
but also for the hold and access limit commands.
I will call this function every time
I want the plot in my app to update.
So every time the user updates a value
in the numeric edit fields.
To do this, I've added a callback for each
of the numeric edit fields.
A callback is a function that executes when a user interacts
with a component.
To add a callback, right click on the numeric edit field
and select the value changed function callback.
As an example, I'll demonstrate how
to write a callback for the maximum camber parameter.
The most important thing to keep in mind here
is that the maximum camber value is also
used in the plot update function, where I
refer to it as the variable m.
So when the user updates the maximum camera value
in this edit field, the plot update function
also has to recognize a change.
In order to do this, I'll create a new property,
which is a variable that is shared globally
across all callbacks in the app.
I'll call my property maximum camber.
And then, modify the value changed function callback
so that the app on maximum camper property
takes on the value that the user typed into the Edit field.
You can apply the same process to the other numeric edit
fields in the app.
Once you understand the basics of creating callbacks that
respond to the user's actions in the appropriate way
and creating properties that can be shared across callbacks,
you can customize your app to do just about anything.
For example, I've also created a radio button group with some
if statements that determine which of the three values
for kinematic viscosity should be used in the Reynolds number
calculation based on the altitude selected by the user.
I've incorporated another button push callback
to perform the Reynolds number calculation
and display that calculated value in a text area.
One final type of callback that can be useful
is a startup function callback.
The code you type for this callback
will automatically execute when the app is first opened.
For my app, I've set default values
for the airfoil characteristics and called the plot update
function to have this default airfoil appear on the axes
when the app is first opened.
Here's what my finished app looks like.
With the skills you've learned in this video,
you should be well on your way to designing
even more robust and professional looking
apps for interactive analysis.
If you want to learn more about App Designer
and its capabilities, check out App Designer's page
on the MathWorks website, where you
can access more in-depth information about App
Designer's features and explore examples
created by other MATLAB users.
Thanks for watching.