How to Create a GUI Button in MATLAB App?
Last Updated :
09 Mar, 2022
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
classdef appadd1 < matlab.apps.AppBase
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
methods (Access = private)
function ClickButtonPushed(app, event)
a = app.EditField.Value;
c = a*a;
app.EditField2.Value = c;
end
end
methods (Access = private)
function createComponents(app)
app.UIFigure = uifigure( 'Visible' , 'off' );
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = 'MATLAB App' ;
app.ClickButton = uibutton(app.UIFigure, 'push' );
app.ClickButton.ButtonPushedFcn = createCallbackFcn(app, @ClickButtonPushed, true);
app.ClickButton.Position = [188 278 100 22];
app.ClickButton.Text = 'Click' ;
app.EditField = uieditfield(app.UIFigure, 'numeric' );
app.EditField.Position = [287 397 146 40];
app.EditField2 = uieditfield(app.UIFigure, 'numeric' );
app.EditField2.Position = [287 329 138 52];
app.EnterNumberLabel = uilabel(app.UIFigure);
app.EnterNumberLabel.Position = [21 403 107 43];
app.EnterNumberLabel.Text = 'Enter Number' ;
app.ResultLabel = uilabel(app.UIFigure);
app.ResultLabel.Position = [21 352 70 46];
app.ResultLabel.Text = 'Result' ;
app.UIFigure.Visible = 'on' ;
end
end
methods (Access = public)
function app = appadd1
createComponents(app)
registerApp(app, app.UIFigure)
if nargout == 0
clear app
end
end
function delete(app)
delete(app.UIFigure)
end
end
end
|
Output:
Share your thoughts in the comments
Please Login to comment...