App Designer 2021a - Plotting inside the GUI instead of a figure window

I am currently using the latest Matlab 2021a. In the app designer when I try to plot a contniously acquired data from a gas/temperature sensor using arduino, a pop up figure window opens up displaying the realtime data even when I specified the proper UIAxes.

I read that the "figure" is faster than the GUI Axes but stil it's kinda weird if you make an app and a separate pop up window opens instead of the Axes that you specifically put for the very purpose. I have also provided a portion of the code for a better understanding. Thank you !

            
% this code is for the pushbutton callback. 
            app.flag = 0;
            global a;
            app.h = animatedline;
            ax = gca;
            app.stop = false;
            startTime = datetime('now');
           
            while ~app.stop
             v = readVoltage(a,'A0');
             t = datetime('now') - startTime;
             if v >= 0.5 && v <= 0.65
                 app.StatusLamp.Color = 'g';
             else
                 app.StatusLamp.Color = [0.90,0.90,0.90];
             end
             %add point to animation         
            
             plot(app.UIAxes,datenum(t),v);
             addpoints(app.h,datenum(t),v);
             ax.XLim = datenum([t-seconds(15) t]);
             datetick('x','keeplimits')
             drawnow
             
             app.stop = app.flag;
             
             
             app.TemperatureCEditField.Value = v;      
            
            end

[Geoff Hayes]

Das - I see in your code that you have

ax = gca;

and so you assign to ax the current axes which may not be the axes of your app (i.e. not app.UIAxes). This may cause a figure to be created and part of your code may write to that figure. Consider removing the ax local variable and just reference app.UIAxes where needed. (Or set the local variable to this value and just use ax everywhere.)

[Das Siddharth]

Thank you so much Geoff for your quick reply. I had done that in the past as this was the very first thing that popped in my mind. Even after your suggestion there's this pop up which can be seen in the attachment. I saw few videos in which people have achieved a live plot inside the GUI while specifying "animatedline(app.UIAxes)" but this doesn't work for me. If I do that I don't get any plot at all.

[Geoff Hayes]

Hmm...when you create the animated line, should you specify the axes as per animated line axes input?

app.h = animatedline(app.UIAxes);

[Das Siddharth]

I don't think so but I have seen it in one video but it only works for me when I don't. Btw the upper plot in which I want to plot the data the x and y axis keeps changing in response to that pop-up figure but the actual plotting is only limited to the figure.

That's the issue there are very few documentation about the new App designer and it's quite a mess.

Answer 1

[Cris LaPierre]

You need to specify the uiaxes to plot into in an app. Otherwise, your plot command will create a new figure window for the plot.

plot(app.UIAxes,...)
app.h = animatedline(app.UIAxes) 

I'd also suggest using app.UIAxes instead of gca. It avoids any potential ambiguity

Another observation. You appear to be plotting your data one value at a time. When you use plot for a single data point, you must specify a marker style or it will not appear in the figure. Also, if you don't specify hold on, each plot command will clear the axes before plotting.

Also, it is recommended to avoid using datenum when possible. You should be able to directly plot using t, which should be a duration. Use xtickformat to set the display format.

[Das Siddharth]

Thank you so much Chris for your insightful tips for a live plot. I did remove the gca in order to remove ambiguity but the pop up figure is still an issue. But your remark on using a marker was very helpful. Now I get data plots inside the GUI with the specified marker but the pop up is still there. I thank you again for your time and guidance.

Best

Sid

[Cris LaPierre]

The pop up is your animated line. Did you modify your animated line code to specify an axes?

app.h = animatedline(app.UIAxes) 

[Das Siddharth]

If I do so, there's no plot at all. On top of that it throws an error saying "it should be a handle."

[Cris LaPierre]

I do need to make one correction. It looks like animatedlines do not accept anything other than doubles for X. That means modifying the approach slightly, but it's still doable.

We don't have enough of your code to actually run it, so I created a simplified example.

I created two properties to share data within the app.

properties (Access = private)
    startTime % Start time
    h % handle to animated line
end

I use the startup function to set up the axes and obtain a startTime.

% Code that executes after component creation
function startupFcn(app)
    app.startTime = datetime('now');
    
    plot(app.UIAxes,second(0),rand(1),'bs')
    app.h = animatedline(app.UIAxes,second(0),rand(1));
end

I then added a new point every time a button was pushed. That code looked like this.

%  Button pushed function: Button
function ButtonPushed(app, event)
    t = datetime('now') - app.startTime;
    
    hold(app.UIAxes,'on')
    plot(app.UIAxes,seconds(t),rand(1),'bs')
    hold(app.UIAxes,'off')
    addpoints(app.h,seconds(t),rand(1))
end

The results of both plots appear in the UIAxes in the app.