Plot in UIAxes and demo of slider, knob and Gauge in App Designer in MATLAB

This video shows how to plot a voltage-current-resistance AC current equation in the MATLAB’ App Designer tool.

This video use the Slider, Knob, Gauge and UI Axes to demonstrate the plotting of the equation.

[Source Code]

classdef Plotting_App_Designer < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes matlab.ui.control.UIAxes
ThetaSliderLabel matlab.ui.control.Label
ThetaSlider matlab.ui.control.Slider
FrequencyKnobLabel matlab.ui.control.Label
FrequencyKnob matlab.ui.control.Knob
AmplitudeSliderLabel matlab.ui.control.Label
AmplitudeSlider matlab.ui.control.Slider
StartButton matlab.ui.control.Button
VoltageGaugeLabel matlab.ui.control.Label
VoltageGauge matlab.ui.control.SemicircularGauge
end

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

% Callback function: AmplitudeSlider, AmplitudeSlider,
% FrequencyKnob, FrequencyKnob, StartButton, ThetaSlider,
% ThetaSlider
function StartButtonPushed(app, event)

Theta = app.ThetaSlider.Value;
freq = app.FrequencyKnob.Value;
Ampl = app.AmplitudeSlider.Value;

time = 0:0.2:10;

Volt = Ampl*sin(freq*time + Theta);

plot(app.UIAxes, time, Volt);

for i=1:length(Volt)
app.VoltageGauge.Value = Volt(i);
pause(1);
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 UIAxes
app.UIAxes = uiaxes(app.UIFigure);
title(app.UIAxes, ‘Title’)
xlabel(app.UIAxes, ‘X’)
ylabel(app.UIAxes, ‘Y’)
app.UIAxes.Position = [254 222 365 217];

% Create ThetaSliderLabel
app.ThetaSliderLabel = uilabel(app.UIFigure);
app.ThetaSliderLabel.HorizontalAlignment = ‘right’;
app.ThetaSliderLabel.VerticalAlignment = ‘top’;
app.ThetaSliderLabel.Position = [24 424 36 15];
app.ThetaSliderLabel.Text = ‘Theta’;

% Create ThetaSlider
app.ThetaSlider = uislider(app.UIFigure);
app.ThetaSlider.Limits = [-90 90];
app.ThetaSlider.ValueChangedFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.ThetaSlider.ValueChangingFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.ThetaSlider.Position = [81 430 150 3];

% Create FrequencyKnobLabel
app.FrequencyKnobLabel = uilabel(app.UIFigure);
app.FrequencyKnobLabel.HorizontalAlignment = ‘center’;
app.FrequencyKnobLabel.VerticalAlignment = ‘top’;
app.FrequencyKnobLabel.Position = [106 220 63 15];
app.FrequencyKnobLabel.Text = ‘Frequency’;

% Create FrequencyKnob
app.FrequencyKnob = uiknob(app.UIFigure, ‘continuous’);
app.FrequencyKnob.Limits = [0 10];
app.FrequencyKnob.ValueChangedFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.FrequencyKnob.ValueChangingFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.FrequencyKnob.Position = [107 269 60 60];
app.FrequencyKnob.Value = 2;

% Create AmplitudeSliderLabel
app.AmplitudeSliderLabel = uilabel(app.UIFigure);
app.AmplitudeSliderLabel.HorizontalAlignment = ‘right’;
app.AmplitudeSliderLabel.VerticalAlignment = ‘top’;
app.AmplitudeSliderLabel.Position = [12 160 60 15];
app.AmplitudeSliderLabel.Text = ‘Amplitude’;

% Create AmplitudeSlider
app.AmplitudeSlider = uislider(app.UIFigure);
app.AmplitudeSlider.Limits = [0 20];
app.AmplitudeSlider.ValueChangedFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.AmplitudeSlider.ValueChangingFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.AmplitudeSlider.Position = [93 166 150 3];
app.AmplitudeSlider.Value = 5;

% Create StartButton
app.StartButton = uibutton(app.UIFigure, ‘push’);
app.StartButton.ButtonPushedFcn = createCallbackFcn(app, @StartButtonPushed, true);
app.StartButton.Position = [81 38 150 40];
app.StartButton.Text = ‘Start’;

% Create VoltageGaugeLabel
app.VoltageGaugeLabel = uilabel(app.UIFigure);
app.VoltageGaugeLabel.HorizontalAlignment = ‘center’;
app.VoltageGaugeLabel.VerticalAlignment = ‘top’;
app.VoltageGaugeLabel.Position = [441 26 47 15];
app.VoltageGaugeLabel.Text = ‘Voltage’;

% Create VoltageGauge
app.VoltageGauge = uigauge(app.UIFigure, ‘semicircular’);
app.VoltageGauge.Limits = [-20 20];
app.VoltageGauge.Position = [330 56 269 145];

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

% 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 Comment and post fron YouTube

Can you tell how to put images in axis in UIAxis?

For images in App Designer, I have shown it in my below video where I have customized the buttons with images:

How to design a simple Game in MATLAB using App Designer?

https://youtu.be/3IQMZQ7JBn0

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