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.

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.

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.

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.

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:

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:

We have covered many more topics using the MATLAB App Designer. Some of our most sought-after works are:

IPL with MATLAB

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.

Fitness Tracker with MATLAB

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.