Displaying animation in UI Axes in app developer

Question

Gabriela 2024-3-28

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2100186-displaying-animation-in-ui-axes-in-app-developer

评论： Voss 2024-3-28

I am struggling to display my animation of a boat in the UI Axes, I have tried many things but the animation is just displayed on the app and not in the axes. I am unsure of where to go from here.

When I turn the visibility of the UI Axes off, the animation is still there. I want the animation to dissapear as well.

Any help would be greatly appreciated.

Here is my code for the animation

  % Code that executes after component creation
        function startupFcn2(app)
            
            
            animateFrames();
            function animateFrames()
                animFilename = 'The_Empty_Boat.gif'; % Output file name
                firstFrame = true;
                framesPerSecond = 24;
                delayTime = 1/framesPerSecond;
               
                % Create the gif
                
                for frame = 1:48
                    drawframe(app,frame);
                    drawnow; % Update the UIAxes
                    fig = app.UIAxes.Parent;
                    fig.Units = 'pixels';
                    fig.Position(3:4) = [600,600]; % Adjust width and height of the figure
                    set(fig, 'WindowButtonDownFcn', @(src, event)[]); % Disable mouse interaction with the animation
                    im = getframe(fig);
                    [A,map] = rgb2ind(im.cdata,256);
                    if firstFrame
                        firstFrame = false;
                        imwrite(A,map,animFilename, 'LoopCount', Inf, 'DelayTime', delayTime);
                    else
                        imwrite(A,map,animFilename, 'WriteMode', 'append', 'DelayTime', delayTime);
                    end
                end
              
                  app.PressStarttoplaythegameLabel.Visible = "on";
                
            end
            function drawframe(app,f)
                % Number of frames
                nframes = 48;
                % Compute the trajectory "phase" based on the current frame
                phase_rad = f/nframes * 2*pi;
                % Draw the sea
                draw_sea(phase_rad)
                % Draw boat
                draw_boat(phase_rad)
                % Set axes limits
                xlim(app.UIAxes, [-1 1])
                ylim(app.UIAxes, [ 0 2])
                % Equal axes scaling
                daspect(app.UIAxes, [1, 1, 1])
                app.UIAxes.XTick = [];
                app.UIAxes.YTick = [];
                hold(app.UIAxes, 'off')
            end
            function draw_sea(phase_rad)
                % Use [-1 +1] to fill entire plot
                x = linspace(-1, 1, 50);
                % Evaluate sea equation with the phase to create the moving illusion
                [y, ~] = eval_sea_eq(x + phase_rad);
                % Plot area under curve
                area(app.UIAxes, x, y)
                hold (app.UIAxes, 'on')
            end
            function draw_boat(phase_rad)
                % Define some boat size parameters
                body_height = 0.1;
                body_span   = 0.4;
                sail_height = 0.2;
                % Boat "body"
                b_xy(1,:) = [-body_span/2 -body_span/2*1.2 body_span/2*1.2 body_span/2 ];
                b_xy(2,:) = [      0       body_height     body_height         0       ];
                % Boat "body" fold
                f_xy(1,:) = [b_xy(1,1)      0           b_xy(1,end)];
                f_xy(2,:) = [b_xy(2,1)  body_height     b_xy(2,end)];
                % Sail
                s_xy(1,:) = [  -0.1            0                       0.1         ];
                s_xy(2,:) = [body_height (body_height + sail_height) body_height   ];
                % Get the boat y position and inclination angle
                [y, psi_rad] = eval_sea_eq(phase_rad);
                % Get rotation matrix
                z_rot = get_z_rot(psi_rad);
                % Rotate boat parts
                b_xy = z_rot'*b_xy;
                f_xy = z_rot'*f_xy;
                s_xy = z_rot'*s_xy;
                % Move boat parts
                b_xy(2,:) = b_xy(2,:) + y;
                f_xy(2,:) = f_xy(2,:) + y;
                s_xy(2,:) = s_xy(2,:) + y;
                % Plot the boat
                fill(app.UIAxes, b_xy(1,:), b_xy(2,:), 'r')
                fill(app.UIAxes, f_xy(1,:), f_xy(2,:), 'r')
                fill(app.UIAxes, s_xy(1,:), s_xy(2,:), 'r')
                hold(app.UIAxes, 'off')
            end
            function [y, dydx] = eval_sea_eq(x)
                % Outputs sea coordinates and slope
                % Scale factor
                c = 0.5;
                % Use only harmonics (x, 2*x, 3*x, etc.) to create the infinity loop illusion
                y       = (sin(x)*0.5 +   0.4*sin(2*x + pi/6) +   0.3*sin(3*x + pi/3) +   0.1*sin(5*x) + 2) * c;
                dydx    = (cos(x)*0.5 + 2*0.4*cos(2*x + pi/6) + 3*0.3*cos(3*x + pi/3) + 5*0.1*cos(5*x) + 0) * c; % Derivative
            end
            function z = get_z_rot(psi_rad)
                % Outputs rotation matrix about z-axis
                z = [cos(psi_rad), sin(psi_rad)
                    -sin(psi_rad), cos(psi_rad)];
            end

3 个评论
显示 1更早的评论隐藏 1更早的评论

Gabriela 2024-3-28

The app isn't saving into my documents and I don't know why. I have the file in MATLAB but not in the docuements on my laptop.

Voss 2024-3-28

Maybe it's in the current working directory (i.e., the directory shown toward the top of the main MATLAB window, or returned by running pwd on the command line).

Or if you are using MATLAB Online, the mlapp will be somewhere in your MATLAB Drive folder.

请先登录，再进行评论。

请先登录，再回答此问题。

Answer 1

Voss 2024-3-28

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2100186-displaying-animation-in-ui-axes-in-app-developer#answer_1432986

在 MATLAB Online 中打开

"the animation is just displayed on the app and not in the axes"

I'm not sure what this means. I put your code into a script that creates the referenced components (uifigure, uiaxes, uibutton), and it runs fine (see attached). The sea and the boat appear in the axes, and a gif file is created.

"When I turn the visibility of the UI Axes off, the animation is still there. I want the animation to dissapear as well."

You'll have to set the visibility of the boat and sea as well. One way to do that is:

app.UIAxes.Visible = 'off'; % turn off the axes
set(get(app.UIAxes,'Children'),'Visible','off'); % turn off everything in the axes as well

5 个评论
显示 3更早的评论隐藏 3更早的评论

Voss 2024-3-28

编辑：Voss 2024-3-28

You're welcome!

To explain, essentially this gets whatever is in the uiaxes (lines, images, surfaces, whatever).

get(app.UIAxes,'Children')

So this

set(get(app.UIAxes,'Children'),'Visible','off');

sets the Visible property of all those things to 'off'.

See the Children property of a uiaxes:

https://www.mathworks.com/help/matlab/ref/matlab.ui.control.uiaxes-properties.html#d126e1988520

I did it this way because I don't have a direct handle to those graphics objects, because when your code creates those objects in the uiaxes (using the area() and fill() functions) the output from area() or fill() is not captured.

If you modified your code to capture those outputs, e.g.:

% Plot the boat

app.boat = [ ...

fill(app.UIAxes, b_xy(1,:), b_xy(2,:), 'r') ...

fill(app.UIAxes, f_xy(1,:), f_xy(2,:), 'r') ...

fill(app.UIAxes, s_xy(1,:), s_xy(2,:), 'r') ...

];

and

% Plot area under curve

app.sea = area(app.UIAxes, x, y);

(which requires adding boat and sea properties to your app) then you could modify the graphics objects corresponding to the boat and the sea later however you wish, including setting their visibility, but also changing their color or location or whatever.

Gabriela 2024-3-28

Thank you!

Voss 2024-3-28

You're welcome!

请先登录，再进行评论。

Displaying animation in UI Axes in app developer

3 个评论
显示 1更早的评论隐藏 1更早的评论

采纳的回答

5 个评论
显示 3更早的评论隐藏 3更早的评论

更多回答（0 个）

另请参阅

类别

标签

Community Treasure Hunt

Displaying animation in UI Axes in app developer

3 个评论 显示 1更早的评论隐藏 1更早的评论

采纳的回答

5 个评论 显示 3更早的评论隐藏 3更早的评论

更多回答（0 个）

另请参阅

类别

标签

Community Treasure Hunt

3 个评论
显示 1更早的评论隐藏 1更早的评论

5 个评论
显示 3更早的评论隐藏 3更早的评论