.st0{fill:#FFFFFF;}

App Designer for Beginners 

 June 24, 2022

By  Shubham

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 home tab

  • Type 'appdesigner' in the command window and hit enter.
  • starting app designer by command

    Starting app designer by command

    Once the App Designer is launched, you should have the following screen in front of you.

    app designer window

    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

    Designer tab

    The first three options are self-explanatory. 'App Details' option shows your app's name, summary, and description.

    app details window

    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

    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

    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

    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

    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.

    naming the axes

    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 design view

    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

    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

    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

    Opening code view

    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

    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

    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 callbacks

    Adding the first callback

    adding callbacks 2

    Adding the first callback

    After clicking on add callback button, your cursor will be placed in the following section.

    callback function

    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

    running 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

    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.

    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!

    About the author 

    Shubham

    I have done my bachelor degree in electronics from University of Delhi. I like to tinker with the hardware to understand how it actually works.

    {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    MATLAB Helper ®

    Follow: YouTube Channel, LinkedIn Company, Facebook Page, Instagram Page

    Join Community of MATLAB Enthusiasts: Facebook Group, Telegram, LinkedIn Group

    Use Website Chat or WhatsApp at +91-8104622179

    >