Creating Apps Using App Designer in MATLAB

MATLAB is a robust and high-level programming language extensively used in engineering and scientific fields for system design. The most important fact about MATLAB is that it provides an easy-to-use graphical user interface (GUI). MATLAB has a built-in App Designer tool that allows users to develop a variety of applications that seamlessly translate their concepts into user-friendly GUIs. Overall, MATLAB is an invaluable tool for conveying complex information in a simplified and accessible manner.

In this tutorial, we will explore how to create a GUI App using App Designer in MATLAB.

How to Create Apps using MATLAB App Designer?

The step-by-step process of creating an application using App Designer in MATLAB is explained below:

Step (1) – Open MATLAB and launch the App Designer. There are two ways of doing this:

• Write 'appdesigner' command in the MATLAB command window and press enter.

• Click on the 'APPS' tab and select 'App Designer' option.

Step (2) – Create a Blank App.

Step (3) – Design a user interface by using the components like buttons, text fields, plots, etc.

Step (4) – Customize the properties of each component using the property editor tool displayed on the right.

Step (5) – Add functionality to components of the app by writing MATLAB codes.

Step (6) – Run the application by clicking on the 'Run' button in the App Designer ribbon and check how it works.

Step (7) – If there is any error in UI or functioning of the application, debug the app by utilizing the debugging tools provided by MATLAB.

Step (8) – Save the app by clicking on the 'Save' button in the App Designer window. In MATLAB, we can save the application either a '.mlapp' file or as a standalone app that can run without MATLAB.

This is all about steps involved in designing a GUI app in MATLAB.

Now, to understand more about the app designing in MATLAB app designer, let us design a simple calculator app that can calculate resistance, electric power, and electrical energy in a circuit.

Example: Create Apps using App Designer in MATLAB

Designing a calculator app to calculate resistance, electric power, and electrical energy requires six numeric edit fields, where, three of them would be editable for accepting Voltage (V), Current (I), and Time (t), whereas three are non-editable to hold the values of Resistance (R), Electric Power (P), and Electrical Energy (E).

It will also have a button to calculate and show the results. We can also add a label to the application for better appearance.

So, let's start developing the application.

Step (1) – Open the MATLAB App Designer and create a black application.

Step (2) – Drag and drop six numeric fields, six text edit fields, a label, and a button on the app canvas from the component library shown on the left side. Arrange these components as you want to appear in the application.

Step (3) – Write MATLAB codes to perform calculations of Resistance, Electric Power, Electrical Energy when the “Calculate” button is clicked.

Once you click on the highlighted option, you will get a space to paste the below code.

% Button pushed function: CalculateButton
function CalculateButtonPushed(app, event)
    % Get values from the editable fields
    V = app.VoltageEditField.Value;
    I = app.CurrentEditField.Value;
    t = app.TimeEditField.Value;

    % Calculate resistance, power, and energy
    R = V / I;
    P = V * I;
    E = P * t;

    % Update non-editable fields with calculated values
    app.ResistanceEditField.Value = R;
    app.ElectricPowerEditField.Value = P;
    app.ElectricalEnergyEditField.Value = E;
end

Step (4) – Run and test the app for its functionality.

MATLAB Code of App

The following is the complete MATLAB code of the above application.

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                        matlab.ui.Figure
        ElectricalCalculatorLabel       matlab.ui.control.Label
        CalculateButton                 matlab.ui.control.Button
        ElectricPowerEditField          matlab.ui.control.NumericEditField
        ElectricPowerEditFieldLabel     matlab.ui.control.Label
        ElectricalEnergyEditField       matlab.ui.control.NumericEditField
        ElectricalEnergyEditFieldLabel  matlab.ui.control.Label
        CurrentEditField                matlab.ui.control.NumericEditField
        CurrentEditFieldLabel           matlab.ui.control.Label
        TimeEditField                   matlab.ui.control.NumericEditField
        TimeEditFieldLabel              matlab.ui.control.Label
        ResistanceEditField             matlab.ui.control.NumericEditField
        ResistanceEditFieldLabel        matlab.ui.control.Label
        VoltageEditField                matlab.ui.control.NumericEditField
        VoltageEditFieldLabel           matlab.ui.control.Label
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: CalculateButton
        function CalculateButtonPushed(app, event)
            % Get values from the editable fields
            V = app.VoltageEditField.Value;
            I = app.CurrentEditField.Value;
            t = app.TimeEditField.Value;

            % Calculate resistance, power, and energy
            R = V / I;
            P = V * I;
            E = P * t;

            % Update non-editable fields with calculated values
            app.ResistanceEditField.Value = R;
            app.ElectricPowerEditField.Value = P;
            app.ElectricalEnergyEditField.Value = E;
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create VoltageEditFieldLabel
            app.VoltageEditFieldLabel = uilabel(app.UIFigure);
            app.VoltageEditFieldLabel.HorizontalAlignment = 'right';
            app.VoltageEditFieldLabel.FontWeight = 'bold';
            app.VoltageEditFieldLabel.Position = [207 378 47 22];
            app.VoltageEditFieldLabel.Text = 'Voltage';

            % Create VoltageEditField
            app.VoltageEditField = uieditfield(app.UIFigure, 'numeric');
            app.VoltageEditField.Position = [269 378 100 22];

            % Create ResistanceEditFieldLabel
            app.ResistanceEditFieldLabel = uilabel(app.UIFigure);
            app.ResistanceEditFieldLabel.HorizontalAlignment = 'right';
            app.ResistanceEditFieldLabel.FontWeight = 'bold';
            app.ResistanceEditFieldLabel.Position = [186 219 68 22];
            app.ResistanceEditFieldLabel.Text = 'Resistance';

            % Create ResistanceEditField
            app.ResistanceEditField = uieditfield(app.UIFigure, 'numeric');
            app.ResistanceEditField.Editable = 'off';
            app.ResistanceEditField.Position = [269 219 100 22];

            % Create TimeEditFieldLabel
            app.TimeEditFieldLabel = uilabel(app.UIFigure);
            app.TimeEditFieldLabel.HorizontalAlignment = 'right';
            app.TimeEditFieldLabel.FontWeight = 'bold';
            app.TimeEditFieldLabel.Position = [221 300 33 22];
            app.TimeEditFieldLabel.Text = 'Time';

            % Create TimeEditField
            app.TimeEditField = uieditfield(app.UIFigure, 'numeric');
            app.TimeEditField.Position = [269 300 100 22];

            % Create CurrentEditFieldLabel
            app.CurrentEditFieldLabel = uilabel(app.UIFigure);
            app.CurrentEditFieldLabel.HorizontalAlignment = 'right';
            app.CurrentEditFieldLabel.FontWeight = 'bold';
            app.CurrentEditFieldLabel.Position = [206 338 48 22];
            app.CurrentEditFieldLabel.Text = 'Current';

            % Create CurrentEditField
            app.CurrentEditField = uieditfield(app.UIFigure, 'numeric');
            app.CurrentEditField.Position = [269 338 100 22];

            % Create ElectricalEnergyEditFieldLabel
            app.ElectricalEnergyEditFieldLabel = uilabel(app.UIFigure);
            app.ElectricalEnergyEditFieldLabel.HorizontalAlignment = 'right';
            app.ElectricalEnergyEditFieldLabel.FontWeight = 'bold';
            app.ElectricalEnergyEditFieldLabel.Position = [152 156 102 22];
            app.ElectricalEnergyEditFieldLabel.Text = 'Electrical Energy';

            % Create ElectricalEnergyEditField
            app.ElectricalEnergyEditField = uieditfield(app.UIFigure, 'numeric');
            app.ElectricalEnergyEditField.Editable = 'off';
            app.ElectricalEnergyEditField.Position = [269 156 100 22];

            % Create ElectricPowerEditFieldLabel
            app.ElectricPowerEditFieldLabel = uilabel(app.UIFigure);
            app.ElectricPowerEditFieldLabel.HorizontalAlignment = 'right';
            app.ElectricPowerEditFieldLabel.FontWeight = 'bold';
            app.ElectricPowerEditFieldLabel.Position = [166 187 88 22];
            app.ElectricPowerEditFieldLabel.Text = 'Electric Power';

            % Create ElectricPowerEditField
            app.ElectricPowerEditField = uieditfield(app.UIFigure, 'numeric');
            app.ElectricPowerEditField.Position = [269 187 100 22];

            % Create CalculateButton
            app.CalculateButton = uibutton(app.UIFigure, 'push');
            app.CalculateButton.ButtonPushedFcn = createCallbackFcn(app, @CalculateButtonPushed, true);
            app.CalculateButton.FontWeight = 'bold';
            app.CalculateButton.Position = [269 263 100 22];
            app.CalculateButton.Text = 'Calculate';

            % Create ElectricalCalculatorLabel
            app.ElectricalCalculatorLabel = uilabel(app.UIFigure);
            app.ElectricalCalculatorLabel.HorizontalAlignment = 'center';
            app.ElectricalCalculatorLabel.FontSize = 18;
            app.ElectricalCalculatorLabel.FontWeight = 'bold';
            app.ElectricalCalculatorLabel.Position = [199 416 186 23];
            app.ElectricalCalculatorLabel.Text = 'Electrical Calculator';

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Conclusion

In this tutorial, we have explained the step-by-step process of creating an application in MATLAB with the help of an example. You can follow the same steps to create any kind of GUI app using the MATLAB app designer.