Design a GUI in MATLAB using AppDesigner – create a Simple Calculator

This video explains simple and easy steps to design and create a GUI using AppDeginer tool in MATLAB.

[Source Code]

classdef myCalculator < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
TextArea matlab.ui.control.TextArea
Button matlab.ui.control.Button
Button_2 matlab.ui.control.Button
Button_3 matlab.ui.control.Button
Button_4 matlab.ui.control.Button
Button_5 matlab.ui.control.Button
Button_6 matlab.ui.control.Button
Button_7 matlab.ui.control.Button
Button_8 matlab.ui.control.Button
Button_9 matlab.ui.control.Button
Button_10 matlab.ui.control.Button
ClearButton matlab.ui.control.Button
Button_12 matlab.ui.control.Button
Button_13 matlab.ui.control.Button
Button_14 matlab.ui.control.Button
end

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

% Button pushed function: Button, Button_10, Button_12,
% Button_13, Button_2, Button_3, Button_4, Button_5,
% Button_6, Button_7, Button_8, Button_9
function buttonPressed(app, event)
app.TextArea.Value = [app.TextArea.Value{1} event.Source.Text];
end

% Button pushed function: ClearButton
function buttonClear(app, event)
app.TextArea.Value = ”;
end

% Button pushed function: Button_14
function buttonEqual(app, event)
try
app.TextArea.Value = [app.TextArea.Value{1} event.Source.Text …
num2str(eval(app.TextArea.Value{1}))];
catch
app.TextArea.Value = ‘Error!’;
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 TextArea
app.TextArea = uitextarea(app.UIFigure);
app.TextArea.HorizontalAlignment = ‘right’;
app.TextArea.FontSize = 36;
app.TextArea.FontWeight = ‘bold’;
app.TextArea.Position = [24 382 596 49];
app.TextArea.Value = {‘0’};

% Create Button
app.Button = uibutton(app.UIFigure, ‘push’);
app.Button.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button.Position = [24 305 100 22];
app.Button.Text = ‘1’;

% Create Button_2
app.Button_2 = uibutton(app.UIFigure, ‘push’);
app.Button_2.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_2.Position = [143 305 100 22];
app.Button_2.Text = ‘2’;

% Create Button_3
app.Button_3 = uibutton(app.UIFigure, ‘push’);
app.Button_3.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_3.Position = [259 305 100 22];
app.Button_3.Text = ‘3’;

% Create Button_4
app.Button_4 = uibutton(app.UIFigure, ‘push’);
app.Button_4.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_4.Position = [24 259 100 22];
app.Button_4.Text = ‘4’;

% Create Button_5
app.Button_5 = uibutton(app.UIFigure, ‘push’);
app.Button_5.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_5.Position = [143 259 100 22];
app.Button_5.Text = ‘5’;

% Create Button_6
app.Button_6 = uibutton(app.UIFigure, ‘push’);
app.Button_6.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_6.Position = [259 259 100 22];
app.Button_6.Text = ‘6’;

% Create Button_7
app.Button_7 = uibutton(app.UIFigure, ‘push’);
app.Button_7.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_7.Position = [259 216 100 22];
app.Button_7.Text = ‘7’;

% Create Button_8
app.Button_8 = uibutton(app.UIFigure, ‘push’);
app.Button_8.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_8.Position = [143 216 100 22];
app.Button_8.Text = ‘8’;

% Create Button_9
app.Button_9 = uibutton(app.UIFigure, ‘push’);
app.Button_9.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_9.Position = [24 216 100 22];
app.Button_9.Text = ‘9’;

% Create Button_10
app.Button_10 = uibutton(app.UIFigure, ‘push’);
app.Button_10.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_10.Position = [143 164 100 22];
app.Button_10.Text = ‘0’;

% Create ClearButton
app.ClearButton = uibutton(app.UIFigure, ‘push’);
app.ClearButton.ButtonPushedFcn = createCallbackFcn(app, @buttonClear, true);
app.ClearButton.Position = [418 305 100 22];
app.ClearButton.Text = ‘Clear’;

% Create Button_12
app.Button_12 = uibutton(app.UIFigure, ‘push’);
app.Button_12.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_12.Position = [418 259 100 22];
app.Button_12.Text = ‘+’;

% Create Button_13
app.Button_13 = uibutton(app.UIFigure, ‘push’);
app.Button_13.ButtonPushedFcn = createCallbackFcn(app, @buttonPressed, true);
app.Button_13.Position = [418 216 100 22];
app.Button_13.Text = ‘-‘;

% Create Button_14
app.Button_14 = uibutton(app.UIFigure, ‘push’);
app.Button_14.ButtonPushedFcn = createCallbackFcn(app, @buttonEqual, true);
app.Button_14.Position = [418 164 100 22];
app.Button_14.Text = ‘=’;

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

% 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

Top posts/ comments from YouTube channel

Why do you need to use the {1} when calling ‘app.TextArea.Value{1}’ ……you can’t just say .Value?

By default app.TextArea.Value returns the output in cell array format. Even if there is just a single data it will return a 1×1 cell array. So to access the elements of cell array and use them as a string value we read the data using curly brackets as: app.TextArea.Value{1}.

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