App Designer 3D ellipsoid plot

Hey all,

I'm trying to get an ellipsoid to be interactive with a knob in the App Designer. However when I use the same code that produces a smooth static figure, I just can't seem to get it right in the App Designer.

It seems as though the axis limits are set between 0 and 1 and I can't find a way to change that. Also, the body does not get smaller when turning the knob (but it should with D increasing), just lighter - any idea why?

And each time I change the D value with the knob, a figure window pops up. How do I prevent this but still get to keep my figure from the App Designer?

        % Value changing function: DamageKnob
        function DamageKnobValueChanging(app, event)
            changingValue = event.Value;
            
            D = app.DamageKnob.Value;
            
            Xmax=240*(1-D);
            Ymax=120*(1-D);
            Tmax=80*(1-D);
            
            x = linspace(-250, 250, 50);
            [X,Y,Z] = meshgrid(x);
            
            V = ((X.^2)/(Xmax^2) + (Y.^2)/(Ymax^2) -(X.*Y)/(Xmax^2) + (Z.^2)/(Tmax^2));
            
            % specify colours
            r = 101/255;
            g = 119/255;
            b = 158/255;
            
            axis(app.UIAxes,'tight');

            hp = patch(app.UIAxes, isosurface(X,Y,Z,V,1));
            hp.EdgeColor = 'none';
            hp.FaceColor = [r g b];
            lighting gouraud;
      
            isonormals(X,Y,Z,V,hp)
            camlight(app.UIAxes);
            
            view(app.UIAxes, -20,30);
            
        end

The axes definition looks like this:

            % Create RightPanel
            app.RightPanel = uipanel(app.GridLayout);
            app.RightPanel.Layout.Row = 1;
            app.RightPanel.Layout.Column = 2;

            % Create UIAxes
            app.UIAxes = uiaxes(app.RightPanel);
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            app.UIAxes.DataAspectRatio = [0.58 1 1];
            app.UIAxes.PlotBoxAspectRatio = [1.58 1 1];
            app.UIAxes.FontName = 'Arial';
            app.UIAxes.XTick = [0 50 100 150 200 250];
            app.UIAxes.XTickLabel = {'0'; '50'; '100'; '150'; '200'; '250'};
            app.UIAxes.YTick = [0 50 100];
            app.UIAxes.YTickLabel = {'0'; '50'; '100'};
            app.UIAxes.ZTick = [0 50 100];
            app.UIAxes.ZTickLabel = {'0'; '50'; '100'};
            app.UIAxes.XGrid = 'on';
            app.UIAxes.YGrid = 'on';
            app.UIAxes.ZGrid = 'on';
            app.UIAxes.Projection = 'perspective';
            app.UIAxes.View = [-20 30];
            app.UIAxes.Position = [38 53 622 380];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';

I would now like to set the axis limits manually to the range I need them to be (which is tricky as I can't change the section of code in which they probably are defined). I hope someone out there will be able to help!

Cheers!

Answer 1

[Riya]

Hi JJ,

I understand that you are trying to create an interactive 3D ellipsoid in App Designer using a knob but are facing several issues like the axis limits resetting, the ellipsoid not resizing properly with changes in the knob value (“D”), and also unwanted figure windows opening each time the value is adjusted.

This is because the axes are not being cleared before plotting a new ellipsoid, and axis limits are not being explicitly set, which causes MATLAB to default them to “[0 1]”. Also, some plotting functions like “patch” can open new figure windows if not correctly linked to the App Designer’s “UIAxes”.

To fix this, you need to do the following:

1. Clear the axes before each plot using “cla(app.UIAxes);”
2. Manually set axis limits with “xlim”, “ylim”, and “zlim”.
3. Ensure that all plotting commands are linked to “app.UIAxes” to avoid new figure windows.

Kindly refer to the following updated portion of your code:

function DamageKnobValueChanging(app, event) 
D = event.Value; 

Xmax = 240 * (1 - D); 
Ymax = 120 * (1 - D); 
Tmax = 80 * (1 - D); 

x = linspace(-250, 250, 50); 
[X, Y, Z] = meshgrid(x); 

V = ((X.^2)/(Xmax^2) + (Y.^2)/(Ymax^2) - (X.*Y)/(Xmax^2) + (Z.^2)/(Tmax^2)); 

cla(app.UIAxes); % Clear previous plot 
axis(app.UIAxes, 'vis3d'); 
xlim(app.UIAxes, [-250 250]); 
ylim(app.UIAxes, [-250 250]); 
zlim(app.UIAxes, [-250 250]); 

hp = patch(app.UIAxes, isosurface(X, Y, Z, V, 1)); 
hp.EdgeColor = 'none'; 
hp.FaceColor = [101 119 158] / 255; 
lighting(app.UIAxes, 'gouraud'); 
isonormals(X, Y, Z, V, hp); 
camlight(app.UIAxes); 
view(app.UIAxes, -20, 30); 
end 

With these changes, your ellipsoid should now resize correctly with the knob, stay within your App Designer UI, and should also avoid spawning new figures.