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.
Once the App Designer is launched, you should have the following screen in front of you.
On the top side of the designer tab, you have the following options – New, Open, Save, App Details, Share, and Run.
The first three options are self-explanatory. 'App Details' option shows your app's name, summary, and description.
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.
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.
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.
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.
We will change the title, x, and y-axis only for now. You can also double-click on the text to edit it.
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.
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.
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.
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.
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.
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.
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.
After clicking on add callback button, your cursor will be placed in the following section.
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;
plot(app.UIAxes, ym, 'r')
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;
yc=vc*sin(2*pi*fc*t);% Eqation of carrier signal
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;
y = vc*(1+m*sin(2*pi*fm*t)).*sin(2*pi*fc*t);
plot(app.UIAxes3, y, 'g')
For those who don't know what is happening here, we take the modulation level as input through the slider and calculate the output modulated signal. The equation in the y variable is an equation for Amplitude Modulation. For more information on the subject, you can refer to any Electronics Communication Systems textbook.
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.
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.
Vm – 5
Vc – 5
Fm – 500
Fc – 2000
Modulation % – 20
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.
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.
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.
Did you find some helpful content from our video or article and now looking for its code, model, or application? You can purchase the specific Title, if available, and instantly get the download link.
Thank you for reading this blog. Do share this blog if you found it helpful. If you have any queries, post them in the comments or contact us by emailing your questions to [email protected]. Follow us on LinkedIn Facebook, and Subscribe to our YouTube Channel. If you find any bug or error on this or any other page on our website, please inform us & we will correct it.
If you are looking for free help, you can post your comment below & wait for any community member to respond, which is not guaranteed. You can book Expert Help, a paid service, and get assistance in your requirement. If your timeline allows, we recommend you book the Research Assistance plan. If you want to get trained in MATLAB or Simulink, you may join one of our training modules.
If you are ready for the paid service, share your requirement with necessary attachments & inform us about any Service preference along with the timeline. Once evaluated, we will revert to you with more details and the next suggested step.
Education is our future. MATLAB is our feature. Happy MATLABing!