How to design Radio button, check boxes and drop down menu in MATLAB App Designer?

This video shows the steps to design the Radio Buttons, Check Box, and drop down menu, buttons, panels and other widgets usage in App Designer in MATLAB R2018a.
In this video using the above mentioned widgets a simple Calculator GUI is designed which can be toggled/ switched between Addition-Subtraction or Multiplication-Subtraction option.

The output is displayed either in String format or Numeric format based on the drop-down menu option selection by the user.

We will be glad to hear from you regarding any query, suggestions or appreciations at: programmerworld1990@gmail.com

Source code:

classdef AppDesigner_RadioButton_CheckBox_DropDownUsage < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
EditField matlab.ui.control.NumericEditField
EditField2 matlab.ui.control.NumericEditField
OperationSelectionPanel matlab.ui.container.Panel
ShowMultiplicationDivisionOptionsCheckBox matlab.ui.control.CheckBox
ButtonGroup matlab.ui.container.ButtonGroup
AdditionButton matlab.ui.control.RadioButton
SubtractionButton matlab.ui.control.RadioButton
ButtonGroup_2 matlab.ui.container.ButtonGroup
MulitplicationButton matlab.ui.control.RadioButton
DivisionButton matlab.ui.control.RadioButton
ResultFormatDropDownLabel matlab.ui.control.Label
ResultFormatDropDown matlab.ui.control.DropDown
ResultTextAreaLabel matlab.ui.control.Label
ResultTextArea matlab.ui.control.TextArea
ComputeButton matlab.ui.control.Button
end

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

% Value changed function:
% ShowMultiplicationDivisionOptionsCheckBox
function ShowMultiplicationDivisionOptionsCheckBoxValueChanged(app, event)
value = app.ShowMultiplicationDivisionOptionsCheckBox.Value;

switch value
case 0
app.AdditionButton.Visible = ‘on’;
app.SubtractionButton.Visible = ‘on’;
app.MulitplicationButton.Visible = ‘off’;
app.DivisionButton.Visible = ‘off’;
case 1
app.AdditionButton.Visible = ‘off’;
app.SubtractionButton.Visible = ‘off’;
app.MulitplicationButton.Visible = ‘on’;
app.DivisionButton.Visible = ‘on’;
end

end

% Callback function
function ComputeButtonValueChanged(app, event)
value = app.ComputeButton.Value;

end

% Button pushed function: ComputeButton
function ComputeButtonPushed(app, event)

result = 0;

switch app.ShowMultiplicationDivisionOptionsCheckBox.Value
case 0
if(app.AdditionButton.Value)
% Addition operation
result = app.EditField.Value + app.EditField2.Value;
end
if(app.SubtractionButton.Value)
% Subtraction operation
result = app.EditField.Value – app.EditField2.Value;
end

case 1
if(app.MulitplicationButton.Value)
% Multiplication operation
result = app.EditField.Value * app.EditField2.Value;
end
if(app.DivisionButton.Value)
% Division operation
result = app.EditField.Value / app.EditField2.Value;
end
end

if(strcmp(app.ResultFormatDropDown.Value, ‘Numeric’))
app.ResultTextArea.Value = num2str(result);
else
app.ResultTextArea.Value = [‘”‘ num2str(result) ‘”‘];

end

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 = ‘UI Figure’;

% Create EditField
app.EditField = uieditfield(app.UIFigure, ‘numeric’);
app.EditField.Position = [96 392 121 43];

% Create EditField2
app.EditField2 = uieditfield(app.UIFigure, ‘numeric’);
app.EditField2.Position = [397 392 141 43];

% Create OperationSelectionPanel
app.OperationSelectionPanel = uipanel(app.UIFigure);
app.OperationSelectionPanel.Title = ‘Operation Selection’;
app.OperationSelectionPanel.Position = [68 180 506 184];

% Create ShowMultiplicationDivisionOptionsCheckBox
app.ShowMultiplicationDivisionOptionsCheckBox = uicheckbox(app.OperationSelectionPanel);
app.ShowMultiplicationDivisionOptionsCheckBox.ValueChangedFcn = createCallbackFcn(app, @ShowMultiplicationDivisionOptionsCheckBoxValueChanged, true);
app.ShowMultiplicationDivisionOptionsCheckBox.Text = ‘ Show Multiplication Division Options ‘;
app.ShowMultiplicationDivisionOptionsCheckBox.Position = [28 133 224 22];

% Create ButtonGroup
app.ButtonGroup = uibuttongroup(app.OperationSelectionPanel);
app.ButtonGroup.BorderType = ‘none’;
app.ButtonGroup.Position = [43 11 123 106];

% Create AdditionButton
app.AdditionButton = uiradiobutton(app.ButtonGroup);
app.AdditionButton.Text = ‘Addition’;
app.AdditionButton.Position = [11 80 65 22];
app.AdditionButton.Value = true;

% Create SubtractionButton
app.SubtractionButton = uiradiobutton(app.ButtonGroup);
app.SubtractionButton.Text = ‘Subtraction’;
app.SubtractionButton.Position = [11 43 83 22];

% Create ButtonGroup_2
app.ButtonGroup_2 = uibuttongroup(app.OperationSelectionPanel);
app.ButtonGroup_2.BorderType = ‘none’;
app.ButtonGroup_2.Position = [191 11 123 106];

% Create MulitplicationButton
app.MulitplicationButton = uiradiobutton(app.ButtonGroup_2);
app.MulitplicationButton.Visible = ‘off’;
app.MulitplicationButton.Text = ‘Mulitplication’;
app.MulitplicationButton.Position = [11 80 91 22];
app.MulitplicationButton.Value = true;

% Create DivisionButton
app.DivisionButton = uiradiobutton(app.ButtonGroup_2);
app.DivisionButton.Visible = ‘off’;
app.DivisionButton.Text = ‘Division’;
app.DivisionButton.Position = [11 43 65 22];

% Create ResultFormatDropDownLabel
app.ResultFormatDropDownLabel = uilabel(app.UIFigure);
app.ResultFormatDropDownLabel.HorizontalAlignment = ‘right’;
app.ResultFormatDropDownLabel.Position = [155 91 81 22];
app.ResultFormatDropDownLabel.Text = ‘Result Format’;

% Create ResultFormatDropDown
app.ResultFormatDropDown = uidropdown(app.UIFigure);
app.ResultFormatDropDown.Items = {‘Numeric’, ‘Text’};
app.ResultFormatDropDown.Position = [251 91 100 22];
app.ResultFormatDropDown.Value = ‘Numeric’;

% Create ResultTextAreaLabel
app.ResultTextAreaLabel = uilabel(app.UIFigure);
app.ResultTextAreaLabel.HorizontalAlignment = ‘right’;
app.ResultTextAreaLabel.Position = [101 33 39 22];
app.ResultTextAreaLabel.Text = ‘Result’;

% Create ResultTextArea
app.ResultTextArea = uitextarea(app.UIFigure);
app.ResultTextArea.HorizontalAlignment = ‘center’;
app.ResultTextArea.FontSize = 22;
app.ResultTextArea.Position = [155 14 369 60];
app.ResultTextArea.Value = {‘0’};

% Create ComputeButton
app.ComputeButton = uibutton(app.UIFigure, ‘push’);
app.ComputeButton.ButtonPushedFcn = createCallbackFcn(app, @ComputeButtonPushed, true);
app.ComputeButton.Position = [233 145 100 22];
app.ComputeButton.Text = ‘Compute’;

% 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 = AppDesigner_RadioButton_CheckBox_DropDownUsage

% 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

Leave a Reply

%d bloggers like this: