No products in the cart.
Introduction:
MATLAB App Designer is a drag and drops feature of MATLAB that lets you create professional apps without being an experienced software developer. Drag and drop visual components to layout your graphical user interface (GUI) design and use the integrated editor to program its behaviour quickly. In this blog, you will get to know the essential elements of the app designer. After going through the blog, you will be able to design a complex-looking yet simple app in MATLAB App Designer. The app that we will be creating is an Amplitude Modulation Analyzer.
Difference between App Designer and GUIDE:
App designer is the recommended environment for app development. MathWorks is no longer putting development effort into improving GUIDE and hasn't for several years. Meanwhile, a significant development effort is going into improving App Designer. Existing GUIDE apps can run in MATLAB, but they are no longer editable. App Designer looks much better and is easier to use than GUIDE. As of R2017b, App Designer can do anything GUIDE can do. App designer also supports Rich Canvas Interactions, Embedded Code Editor, Rich Property Editors, App Metadata Management etc. For more details or an in-depth comparison, you can refer to this link.
Main features of App Designer:
- Beginner-friendly interface makes it easy for new users to explore it independently.
- Design the user interface as well as the code behaviour of the app.
- The generated codes are fully object-oriented.
- Availability of many instrumentation devices like knob, lam, led, switch.
Now that we know some of the advantages of MATLAB App Designer, let's go through the interface of the app designer.
Starting with App Designer:
There are two ways to start the App Designer in MATLAB. These are:
- On the Home tab, go to 'New' and select 'App' from the drop-down menu.
Starting app designer by home tab
Starting app designer by command
Once the App Designer is launched, you should have the following screen in front of you.
App designer window
On the top side of the designer tab, you have the following options – New, Open, Save, App Details, Share, and Run.
Designer tab
The first three options are self-explanatory. 'App Details' option shows your app's name, summary, and description.
App details window
All three options are editable. You are advised to fill in the summary and description of your app so that whenever you share your app with someone, they can quickly get an overview of the functioning of your app.
The next button is 'Share', which, as the name suggests, is used to share your app with someone else. The 'Run' button is used to run the app.
The second tab, named canvas, gives you alignment and resizing options. As of now, you can leave it as it is.
The component library contains sliders, buttons, axes, led, gauges, etc.
Component library
It is divided into four parts: Common, Containers, Figure Tools, and Instrumentation. You can refer to the MATLAB documentation for a complete and detailed list of all the available components.
Designing your first app:
To start designing your app, you should first figure out what components you need. For example, if you need to show graphs in your app, you might need the Axes and Slider components. Also, have a rough idea in your mind of an interface that you want for your app. In this blog, we are creating a simple Amplitude Modulation App. We will start with dragging the Axes component on the design sheet.
Dragging axes component to Design View
In the app, I want to show three graphs for the message signal, carrier signal, and the modulated result respectively; therefore, I will have to set three axes on the design sheet.
All axes component in Design View
As you keep dragging specific components in the sheet, you might have noticed that new entries automatically appear in the component browser on the window's right side. You can also edit certain properties by selecting the specific component and modifying it in the properties section below.
Component Browser and Properties
We will change the title, x, and y-axis only for now. You can also double-click on the text to edit it.
Labeling the axes
Now I want to give some input to my app. Since the information needs to be numeric, I have to use Edit Field (Numeric) component, Slider component, or Knob component. I will be using the first two components mentioned earlier, so let's drag them to our design sheet.
Complete interface of app
As you can see, I have used four numeric fields and one slider component. I have already changed the labels of all the added components. Vm and Vc fields will be used to get the voltage or amplitude of the message and carrier signal. Similarly, Fm and Fc will be used to get the frequency of the message and carrier signal. Let's add additional labels to them by dragging the Label component.
Adding labels
I will change the labels to 'Voltage' and 'Frequency', respectively. You should get the following UI in your design view if you have been following along until now.
Final UI of app
For now, our work in the design view is completed. Click on the Code View to switch to the coding part of the App Designer.
Opening code view
Code View of app
You will notice specific new options have come out while some things have changed. Let's quickly glance over the new stuff. The first thing is the Editor tab on the top. It has some essential elements in the insert part. These are Callback, Function, Property, and App Input Arguments.
Editor tab in code view
A callback is a function that executes when a user interacts with a UI component in your app. We use callbacks to program the behaviour of our app. The function creates either a public function or a private function. Property is used to share data within an app. It is also of two types: public and private. App Input Arguments are used to bring in input arguments.
Callbacks, functions, and properties are accessible from the left side of the window under Code Browser. Below that, you can see App Layout, which shows a preview of your app. The right-side accessibility options are the same as before.
Code Browser and App Layout
Adding interactivity to the app components:
Now let's add some callbacks to our app so that the added components can respond to the user input. I will be sowing the more straightforward method of adding callbacks. It would be best to have a rough idea of the components for which you want the callbacks. For example, I want to take voltage input and frequency input in my app. The moment I get the frequency input, I want to display their graphs in the axes. Therefore, I will be adding callbacks for the Fc and Fm fields.
In the component browser in the code view, select the entry having the name 'FmEditField'. Right-click on it and go to callbacks.
Adding the first callback
Adding the first callback
After clicking on add callback button, your cursor will be placed in the following section.
Callback function
As you can see, you have created a private callback function for your app for the Fm Edit Field component. The value variable takes whatever value is being provided by the user.
Add the following lines of code in this function.
% Value changed function: fmEditField
function fmEditFieldValueChanged(app, event)
fm = app.fmEditField.Value;
vm = app.VmEditField.Value;
Ta=1/fm;
t=0:Ta/999:6*Ta;
ym=vm*sin(2*pi*fm*t);
plot(app.UIAxes, ym, 'r')
end
Here, we are also reading the value of the Vm edit field, but there is no response for that in the app. The moment we get the frequency or Fm, we plot the graph. So you can say that the Fm edit filed is creating some response in the app. Add another callback function for the Fc edit field by following the above steps. After adding the callback, write the following lines of code in the function.
% Value changed function: fcEditField
function fcEditFieldValueChanged(app, event)
fm = app.fmEditField.Value;
fc = app.fcEditField.Value;
vc = app.VcEditField.Value;
Ta=1/fm;
t=0:Ta/999:6*Ta;
yc=vc*sin(2*pi*fc*t);% Eqation of carrier signal
plot(app.UIAxes2, yc)
end
We are doing the same thing here, i.e., as soon as we have the value of Vc and Fc, we plot a graph for the carrier signal.
Now add a callback function for the slider component and write the following lines of code.
% Value changed function: ModulationSlider
function ModulationSliderValueChanged(app, event)
m = app.ModulationSlider.Value;
m = 0.01*m;
vc = app.VcEditField.Value;
fm = app.fmEditField.Value;
fc = app.fcEditField.Value;
Ta=1/fm;
t=0:Ta/999:6*Ta;
y = vc*(1+m*sin(2*pi*fm*t)).*sin(2*pi*fc*t);
plot(app.UIAxes3, y, 'g')
end
Run your first app:
If you have followed along until now, you should now have a fully functional app ready. Click on save and run it. On clicking run or the green arrow button, a separate window displays your app.
Running our app
I have given the app a name and tweaked the plot colours. You can do the same in the design view in the app properties.
Let's give some sample input and check whether the app is working or not.
Input:
Vm – 5
Vc – 5
Fm – 500
Fc – 2000
Modulation % – 20
Output result in app
Conclusion:
We have successfully created an Amplitude Modulation Analyzer as an app using MATLAB App Designer. Why did we even bother to do our work with an app? Well, the answer lies in our results. We can create an incredible looking impact with the help of apps. It also decreases the amount of work needed to get the output or outcome. Even a non-technical person can use the app to do their job.
Explore more:
Perform programming with the Indian Premier League in MATLAB and visualize the progress of each team as it's happening with the graphical power of MATLAB & App Designer.
Blood Cell Counter with MATLAB
In this webinar, you will learn the concepts of image segmentation for analyzing and counting red and white blood cells in MATLAB App Designer. This webinar is a must-watch if you want to create a project based on RBC & WBC Segmentation.
In this webinar, you will learn about your fitness and health and the importance of the parameters like BMI, WHR, WHtR, etc. You will be able to track your fitness within MATLAB with our Application.
Get instant access to the code, model, or application of the video or article you found helpful! Simply purchase the specific title, if available, and receive the download link right away! #MATLABHelper #CodeMadeEasy
Ready to take your MATLAB skills to the next level? Look no further! At MATLAB Helper, we've got you covered. From free community support to expert help and training, we've got all the resources you need to become a pro in no time. If you have any questions or queries, don't hesitate to reach out to us. Simply post a comment below or send us an email at [email protected].
And don't forget to connect with us on LinkedIn, Facebook, and Subscribe to our YouTube Channel! We're always sharing helpful tips and updates, so you can stay up-to-date on everything related to MATLAB. Plus, if you spot any bugs or errors on our website, just let us know and we'll make sure to fix it ASAP.
Ready to get started? Book your expert help with Research Assistance plan today and get personalized assistance tailored to your needs. Or, if you're looking for more comprehensive training, join one of our training modules and get hands-on experience with the latest techniques and technologies. The choice is yours – start learning and growing with MATLAB Helper today!
Education is our future. MATLAB is our feature. Happy MATLABing!
About the author