appdesigner's ui axes update is extremely slow and laggy
6 views (last 30 days)
Show older comments
I would like to show real-time streaming of 4 signals coming in at 60Hz via ui axes through using appdesigner. I have used both plot and animatedline functions, and they are both extremely slow and laggy when the plot update is applied to the ui axes. On the other hand, the same animatedline applied on new axes, not to the ui axes, is properly showing the incoming data stream like actual real-time signals without much delay or lag. Is there a way to efficiently show data streaming without such delay on the ui axes?
Code 1 below is the sample appdesigner code where animatedline is applied to the ui axes, hence the data stream on the GUI doesn't look real-time at all.
% Code 1 - Extremely slow and laggy
classdef App1 < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes1 matlab.ui.control.UIAxes
UIAxes2 matlab.ui.control.UIAxes
UIAxes3 matlab.ui.control.UIAxes
UIAxes4 matlab.ui.control.UIAxes
StartButton matlab.ui.control.StateButton
end
methods (Access = private)
% Value changed function: StartButton
function StartButtonValueChanged(app, event)
value = app.StartButton.Value;
% Generate fake data streams
dataStream1 = rand(6000, 1);
dataStream2 = rand(6000, 1);
dataStream3 = rand(6000, 1);
dataStream4 = rand(6000, 1);
% Set up animated lines
line1 = animatedline(app.UIAxes1, 'MaximumNumPoints', 60);
line2 = animatedline(app.UIAxes2, 'MaximumNumPoints', 60);
line3 = animatedline(app.UIAxes3, 'MaximumNumPoints', 60);
line4 = animatedline(app.UIAxes4, 'MaximumNumPoints', 60);
for i = 1:6000
% Set data
currentTime = i;
addpoints(line1, i, dataStream1(i));
addpoints(line2, i, dataStream2(i));
addpoints(line3, i, dataStream3(i));
addpoints(line4, i, dataStream4(i));
drawnow;
end
end
end
% App initialization and construction
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure
app.UIFigure = uifigure;
app.UIFigure.Position = [100 100 860 739];
app.UIFigure.Name = 'UI Figure';
setAutoResize(app, app.UIFigure, true)
% Create UIAxes1
app.UIAxes1 = uiaxes(app.UIFigure);
title(app.UIAxes1, 'Signal 1');
xlabel(app.UIAxes1, 'X');
ylabel(app.UIAxes1, 'Y');
app.UIAxes1.Position = [113 553 635 158];
% Create UIAxes2
app.UIAxes2 = uiaxes(app.UIFigure);
title(app.UIAxes2, 'Signal 2');
xlabel(app.UIAxes2, 'X');
ylabel(app.UIAxes2, 'Y');
app.UIAxes2.Position = [113 394 635 158];
% Create UIAxes3
app.UIAxes3 = uiaxes(app.UIFigure);
title(app.UIAxes3, 'Signal 3');
xlabel(app.UIAxes3, 'X');
ylabel(app.UIAxes3, 'Y');
app.UIAxes3.Position = [113 235 635 158];
% Create UIAxes4
app.UIAxes4 = uiaxes(app.UIFigure);
title(app.UIAxes4, 'Signal 4');
xlabel(app.UIAxes4, 'X');
ylabel(app.UIAxes4, 'Y');
app.UIAxes4.Position = [113 76 635 158];
% Create StartButton
app.StartButton = uibutton(app.UIFigure, 'state');
app.StartButton.ValueChangedFcn = createCallbackFcn(app, @StartButtonValueChanged, true);
app.StartButton.Text = 'Start';
app.StartButton.FontSize = 20;
app.StartButton.Position = [381 22 100 33];
end
end
methods (Access = public)
% Construct app
function app = App1()
% Create and configure 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
Code 2 below is the sample appdesigner code where animatedline is not applied to the ui axes, and the animatedline update looks real-time.
% Code 2
classdef App1 < matlab.apps.AppBase
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes1 matlab.ui.control.UIAxes
UIAxes2 matlab.ui.control.UIAxes
UIAxes3 matlab.ui.control.UIAxes
UIAxes4 matlab.ui.control.UIAxes
StartButton matlab.ui.control.StateButton
end
methods (Access = private)
% Value changed function: StartButton
function StartButtonValueChanged(app, event)
value = app.StartButton.Value;
% Generate fake data streams
dataStream1 = rand(6000, 1);
dataStream2 = rand(6000, 1);
dataStream3 = rand(6000, 1);
dataStream4 = rand(6000, 1);
figure1 = subplot(4,1,1);
figure2 = subplot(4,1,2);
figure3 = subplot(4,1,3);
figure4 = subplot(4,1,4);
% Set up animated lines
line1 = animatedline(figure1, 'MaximumNumPoints', 60);
line2 = animatedline(figure2, 'MaximumNumPoints', 60);
line3 = animatedline(figure3, 'MaximumNumPoints', 60);
line4 = animatedline(figure4, 'MaximumNumPoints', 60);
for i = 1:6000
% Set data
currentTime = i;
addpoints(line1, i, dataStream1(i));
addpoints(line2, i, dataStream2(i));
addpoints(line3, i, dataStream3(i));
addpoints(line4, i, dataStream4(i));
drawnow;
end
end
end
% App initialization and construction
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure
app.UIFigure = uifigure;
app.UIFigure.Position = [100 100 860 739];
app.UIFigure.Name = 'UI Figure';
setAutoResize(app, app.UIFigure, true)
% Create UIAxes1
app.UIAxes1 = uiaxes(app.UIFigure);
title(app.UIAxes1, 'Signal 1');
xlabel(app.UIAxes1, 'X');
ylabel(app.UIAxes1, 'Y');
app.UIAxes1.Position = [113 553 635 158];
% Create UIAxes2
app.UIAxes2 = uiaxes(app.UIFigure);
title(app.UIAxes2, 'Signal 2');
xlabel(app.UIAxes2, 'X');
ylabel(app.UIAxes2, 'Y');
app.UIAxes2.Position = [113 394 635 158];
% Create UIAxes3
app.UIAxes3 = uiaxes(app.UIFigure);
title(app.UIAxes3, 'Signal 3');
xlabel(app.UIAxes3, 'X');
ylabel(app.UIAxes3, 'Y');
app.UIAxes3.Position = [113 235 635 158];
% Create UIAxes4
app.UIAxes4 = uiaxes(app.UIFigure);
title(app.UIAxes4, 'Signal 4');
xlabel(app.UIAxes4, 'X');
ylabel(app.UIAxes4, 'Y');
app.UIAxes4.Position = [113 76 635 158];
% Create StartButton
app.StartButton = uibutton(app.UIFigure, 'state');
app.StartButton.ValueChangedFcn = createCallbackFcn(app, @StartButtonValueChanged, true);
app.StartButton.Text = 'Start';
app.StartButton.FontSize = 20;
app.StartButton.Position = [381 22 100 33];
end
end
methods (Access = public)
% Construct app
function app = App1()
% Create and configure 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
0 Comments
Answers (1)
jared ross
on 29 Jun 2018
When I had this problem with a project I had the app call a function that updated the graph and everything else in a while loop and it was a lot faster.
This is an example of how I called the function with a plot in the app
Function_Name (app.UIAxes,app.StopButton);
Function Example
function Function_Name (axes,stop)
values = 0;
t = 0;
while ( (value < 10)&&(stop.Value ~= 1) )
% Get values to graph
% Graph
plot(axes, value, t);
axis(axes,...); % Can be used to adjust max and min while plotting live data
drawnow;
end
end
0 Comments
See Also
Categories
Find more on Develop Apps Using App Designer in Help Center and File Exchange
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!