How to Create a GUI Button in MATLAB App?
MATLAB app builder helps in building apps in GUI without having proper software development knowledge. Matlab helps you create professional apps hassle-free, using it. There are so many components available in Matlab App Builder.
Step 1: Open MATLAB and Select Design App.
Step 2: Now drag and drop the button in the Design tab from the Component Library dialog box. This is situated in the leftmost part of the app builder window.
Step 3: You can customize your button as per your preference, i.e., can change its many properties under the Component Browser dialog box.
Step 4: These different drag-drop options help you customize your button.
- The button option helps you change text over the button, change its alignment, and set the icon and its alignment over the button.
- Font And Color help you pick the font style, and color for your button.
- Interactivity controls how to behave with the user.
- Position specifies the position of the button in the defined app.
- Callback Execution Control controls its incorruptibility.
- Parent/Child controls visibility.
- Identifiers are used to add tags to your button.
Step 5: Now we enable the button function by using the callback function. We will understand callback by example. First, add a callback function, right-click on the button, choose Callbacks, then Add ButtonPushedFcn callback.
It will add the function for you in the code part and will look up like this.
You can add your code below the comment, your code here. These codes will be executed whenever the button will be clicked.
Let’s try to understand Buttons via practical examples to make them functional. For example, we want to design a MATLAB app to add two numbers.
Step 1: First we select the component and drag & drop 3 inputs fields(numeric), a button, and arrange them in your preferred manner. Our app looks like this
Step 2: For the above design, the lines of code that are added to our code is:
% Properties that correspond to app components properties (Access = public) UIFigure matlab.ui.Figure ResultLabel matlab.ui.control.Label EnterSecondNumberLabel matlab.ui.control.Label EnterFirstNumberLabel matlab.ui.control.Label EditField3 matlab.ui.control.NumericEditField EditField3Label matlab.ui.control.Label EditField2 matlab.ui.control.NumericEditField EditField2Label matlab.ui.control.Label EditField matlab.ui.control.NumericEditField EditFieldLabel matlab.ui.control.Label AddButton matlab.ui.control.Button end
Step 3: Now add an AddButtonPushed callback on the button.
Step 4: Now in the coding part, the function would be created. Add the following code in the function to make our button functional.
% Callbacks that handle component events methods (Access = private) % Button pushed function: AddButton function AddButtonPushed(app, event) % Taking input from num field 1 a = app.Num1EditField.Value; % Taking input from num field 1 b = app.Num2EditField.Value; % Calculating Sum c = a+b; % Displaying Output app.AnswerEditField.Value = c; end end
Example 1:
t
Output:
Now take another example and calculate the square of any number using the Button component. For this select two labels, two inputs fields(numeric), and a button. Our app looks like this
Example 2:
Matlab
% MATLAB code for Button component classdef appadd1 < matlab.apps.AppBase % Properties that correspond to app components properties (Access = public) UIFigure matlab.ui.Figure ResultLabel matlab.ui.control.Label EnterNumberLabel matlab.ui.control.Label EditField2 matlab.ui.control.NumericEditField EditField matlab.ui.control.NumericEditField ClickButton matlab.ui.control.Button end % Callbacks that handle component events methods (Access = private) % Button pushed function: ClickButton function ClickButtonPushed(app, event) % Taking input from num field 1 a = app.EditField.Value; c = a*a; % Displaying Output app.EditField2.Value = c; 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 ClickButton app.ClickButton = uibutton(app.UIFigure, 'push' ); app.ClickButton.ButtonPushedFcn = createCallbackFcn(app, @ClickButtonPushed, true); app.ClickButton.Position = [188 278 100 22]; app.ClickButton.Text = 'Click' ; % Create EditField app.EditField = uieditfield(app.UIFigure, 'numeric' ); app.EditField.Position = [287 397 146 40]; % Create EditField3 app.EditField2 = uieditfield(app.UIFigure, 'numeric' ); app.EditField2.Position = [287 329 138 52]; % Create EnterNumberLabel app.EnterNumberLabel = uilabel(app.UIFigure); app.EnterNumberLabel.Position = [21 403 107 43]; app.EnterNumberLabel.Text = 'Enter Number' ; % Create ResultLabel app.ResultLabel = uilabel(app.UIFigure); app.ResultLabel.Position = [21 352 70 46]; app.ResultLabel.Text = 'Result' ; % 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 = appadd1 % 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 |
Output: