How can I put a figure in app designer?

I am working on making an app that dispays an elastic pendulum. At the moment, I have code that calls a function which plots what is happening based on initial values. However, I have no clue how I would display my figure in the app designer.

Heres is my code so far...

g = app.GravitySlider.Value;
K = app.SpringConstantSlider.Value;
L = 1; % give inital values for length and mass
M = 2;

r = 3 ;   % values for extension length, position and velocity                 
rdot = 1. ; 
phi = 0.1 ;                 
phidot = 0.1;

duration = 60;
interval = [0,duration];
movie = false;
fps = 30;
ivp=[r ;rdot ;phi ;phidot ;g ;M ;L ; K];

zzsolution(ivp,duration,fps, movie)

And here is my function "zzsolution"

function zzsolution(ivp,duration,fps,movie)

nframes = duration*fps;

sol = ode45(@zzSEQ,[0 duration], ivp);
t = linspace(0,duration,nframes);
X = deval(sol,t);

r = X(1,:)'; 
rdot = X(2,:)' ;

phi = X(3,:)'; 
phidot = X(4,:)' ;
L = X(7,:)' ;
L = L(1) ;

position = [r.*sin(phi), -r.*cos(phi)];

maxr = max(abs(r));
xmin = min(position(:,1))-0.1*maxr ;
xmax = max(position(:,1))+0.1*maxr ;
ymin = min(position(:,2))-0.1*maxr ;
ymax = max([0,max(position(:,2))])+0.1*maxr;

h = figure(1);
clf(h);
set(h,'name','The Spring Pendulum','numbertitle','off','Color','w') ;
stop = uicontrol('style','toggle','string','stop','background','white');



subplot(121);
% Pendulum suspension point
hold on
% Pendulum bob/mass
bob = plot(position(1,1),position(1,2),'MarkerSize',10,'Marker','.','Color','b');
% Pendulum string 
[xs ys] = Spring([0,0],[position(1,1),position(1 ,2)],20,L,0.1) ;
arm = plot(xs,ys,'LineWidth',.5,'Color','r');
% Trajectory of the pendulum bob
path = plot(position(1,1), position(1,2),'k');
% Axes properties
axis equal ;
grid on;
axis([xmin xmax ymin ymax]);
title('Spring Pendulum Animation','Color','k');
axis off ;


for i=1:length(t)-1
    if get(stop,'value')==0
    % update of all moving components
    set(bob,'XData',position(i,1),'YData',position(i ,2));
    [xs ys] = Spring([0 0],[position(i,1) position(i,2)]) ;
    set(arm,'XData',xs,'YData',ys) ;
    DEPL(i,:) = [position(i,1) position(i,2)] ;
    set(path,'Xdata',DEPL(:,1),'YData',DEPL(:,2)) ;
    
        
    % Pause for length of time step
        F(i) = getframe(h) ; 
        if movie == false
            pause(t(i+1)-t(i));
        end
    elseif get(stop,'value')==1 
        break
    end
end
if movie == true
   msgbox('Please wait animaition being saved') ;
   movie2avi(F,'SpringPendulum.avi','compression','Cinepak','fps',fps)
end
set(stop,'style','pushbutton','string','close','callback','close(gcf)');

I understand that my function is creating a figure, but I don't understand how I put this into an app. I know I can use app.UIAxes to plot in the app, but anytime I try adding them into my function I get an error. Thanks!

Answer 1

[Mario Malic]

Hello,

Your function does not have access to the handle of app or uiaxes in the app. The best would be to put your function in the App Designer within functions section.

function zzsolution(app, ivp,duration,fps,movie)
    h = app.UIAxes; % Change this to the handle of the axes you want to plot in
    % ... code
end

Below are just parts of adjustments that you will need to make:

• You're working with uiaxes only, so, you'll need two uiaxes components to display your results as subplot is not possible (there's a workaround here, but it is best not to complicate things)

h = app.UIAxes; % this is uiaxes now and you're not working anymore on a figure 
% below code is not going to work
% clf(h);
% set(h,'name','The Spring Pendulum','numbertitle','off','Color','w') ;
% stop = uicontrol('style','toggle','string','stop','background','white');

• Make sure you provide handle to the axes in functions such as plot, grid, hold, etc. You can also use dot notation to set the properties of uiaxes

hold(h, 'on')
% Pendulum bob/mass
bob = plot(h, position(1,1),position(1,2),'MarkerSize',10,'Marker','.','Color','b'); % notice the h
arm = plot(h, xs,ys,'LineWidth',.5,'Color','r');
% Axes properties
axis (h, 'equal');
grid (h, 'on'); % not sure if this would work
% or dot notation
h.XGrid = 'on'; % case-sensitive, check uiaxes properties

You'll have to make more adjustments such as getframe function since h is now uiaxes, I haven't worked with that function, maybe it supports uifigure.

Hope this helps to give an idea of things you need to do so you can proceed with the task.

[Colton Ray]

Your solution did work! However, I've run into the problem that the getframe and movie functions aren't supported in App Designer. Is there any way to work around this? Or is there a different way to let me animate the pendulum in App Designer?

[Mario Malic]

As mentioned, these are just a part of things you'll need to do. Functions getframe and movie are supported in figures, which you can also create, but they will be in external window (figure). If you want to have a decent looking animation, then you'll have to do it in a figure, as uifigure's performance is not so great.

[Colton Ray]

Ok! Thank you so much!