App designer 3d in GUI - Rotate3d ?

I've made an app with a plot3 plot. I just can't make my plot rotate by using the mouse - I've tried using "rotate3d on" but it does not fix it. Any suggestions?

Answer 1

[Elizabeth Reese]

I was able to do this using the following to control the UIAxes that I added to my AppDesigner app.

rotate3d(app.UIAxes,'on');

Note that this will turn the rotation permanently on, so I recommend having a toggle button to switch it on and off. Otherwise, every time you mouse over the axes, it will try to rotate.

Based on this documentation, however, interactivity with plots is not officially supported, so you may see some improvements/changes to this in future releases. https://www.mathworks.com/help/matlab/creating_guis/graphics-support-in-app-designer.html

[Markus Leuthold]

rotate3d() has a quite bad user experience. What's still missing is a tool which comes close to what cameratoolbar() provided, which is unfortunately not supported anymore with the new app designer

• no gimbal locks while rotating (quaternion based rotation handle)
• zoom to mouse pointer with scroll wheel
• mouse click callbacks with reasonable parameters (vertex idx if clicked on a patch, etc...)

Moreover, as of R2019B, 3d on axes created with the app designer is significantly slower than the old graphics system

[Vlad Atanasiu]

If you look for a solution for how to interactively rotate an image in 2D, here are some results after interaction with the helpfull MathWorks staff.

The best option for me was to activate the "rotate" tool, i.e. rotate3d, of the toolbar and rotate the image in 2D only by using the left and right arrow keys. Once you touch the image with the mouse or the trackpad, however, it will tilt in 3D.

The camroll of cameratoolbar does 2D rotation, but cameratoolbar in not functional anymore in Apps – as Markus remarked –, even if you modyify the code in m-files.

You might want to design the interface not as an App, but loosing some features of Apps.

Adding a slider and a SliderValueChanged callback has the unwanted effect of seeing the rotation outcome only after releasing the mousedown of the slider.

The use of the SliderValueChanging callback should provide continuous rotation as the slider is moved, but the graphic rendering is slow when changing the first value of app.UIAxes.View.

Here is some code to play with (save it as "rotateApp_dev.m" and run it from the Editor). Hope this helps.

classdef rotateApp_dev < matlab.apps.AppBase
% Test how to interactively rotate an image in the plane; the problems to
% solve where that image rotation with the current interactive tools
% (mouseover) tilt the image in 3D and that the camroll tool of the 
% cammeratoolbar is not functional in an App.
%
% The best solution is to activte the rotate3d tool of tooolbar and use the
% left and right arrow keys to rotate the image in 2D.


    % Properties that correspond to app components
    properties (Access = public)
        UIFigure     matlab.ui.Figure
        SliderLabel  matlab.ui.control.Label
        Slider       matlab.ui.control.Slider
        UIAxes       matlab.ui.control.UIAxes
    end

    
    properties (Access = public)
        imageData = imread('text.png'); % Description
    end
    
    % Variables
    properties (Access = private)
        
        LastCamroll = 0;
        
    end
    
    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function showImage(app)
            
            imshow(app.imageData,'parent', app.UIAxes);
            
        end

        % Value changed function: Slider
        function SliderValueChanged(app, event)
            
            value = app.Slider.Value;
            valueNew = value + app.LastCamroll;
            app.LastCamroll = value;
%             app.UIAxes.View = [value 90];
            camroll(app.UIAxes, valueNew)
            
        end
        
        % Value changing function: Slider
        function SliderValueChanging(app, event)
            
            value = app.Slider.Value;
            valueNew = value + app.LastCamroll;
            app.LastCamroll = value;
%             app.UIAxes.View = [value 90];
            camroll(app.UIAxes, valueNew)

%             value = app.Slider.Value;
%             app.UIAxes.View = [value 90];
%             camroll(app.UIAxes, value)
            
        end
        
        % Key press function: UIFigure
        function UIFigureKeyPress(app, event)
            key = event.Key;
            
            switch key
                case 'r'
                % roll camera clockwise
                
%                     value = app.Slider.Value + 5;
                    value = app.UIAxes.View;
                    value = value(1) + 5;
                    if value >= 180
                        value = 180;
                    elseif value <= -180
                        value = -180;
                    end
                    app.Slider.Value = value;
                    app.UIAxes.View = [value 90];

%                     CameraRollAngle = app.UIAxes.CameraUpVector;
%                     app.UIAxes.CameraUpVector = ...
%                         [sin(CameraRollAngle), -cos(CameraRollAngle), 0];

%                     app.UIAxes.CameraPosition = [-180 180 1000];
%                     app.UIAxes.CameraTarget = [180 180 0];
% 
%                     value = app.Slider.Value;
%                     value = value - 1; % degrees
%                     camroll(app.UIAxes, value)
                
                case 'l'
                % roll camera anti-clockwise
                
%                     value = app.Slider.Value - 5;
                    value = app.UIAxes.View;
                    value = value(1) - 5;
                    if value >= 180
                        value = 180;
                    elseif value <= -180
                        value = -180;
                    end
                    app.Slider.Value = value;
                    app.UIAxes.View = [value 90];
                
            end
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';
            app.UIFigure.KeyPressFcn = ...
                createCallbackFcn(app, @UIFigureKeyPress, true);

            % Create SliderLabel
            app.SliderLabel = uilabel(app.UIFigure);
            app.SliderLabel.HorizontalAlignment = 'right';
            app.SliderLabel.Position = [212 59 36 22];
            app.SliderLabel.Text = 'Slider';

            % Create Slider
            app.Slider = uislider(app.UIFigure);
            app.Slider.Limits = [-180 180];
            app.Slider.MajorTicks = [-180 -135 -90 -45 0 45 90 135 180];
            app.Slider.MajorTickLabels = ...
                {'-180', '-135', '-90', '-45', '0', '45', '90', '135', '180'};
            app.Slider.ValueChangedFcn = createCallbackFcn(app, @SliderValueChanged, true);
            app.Slider.ValueChangingFcn = ...
                createCallbackFcn(app, @SliderValueChanging, true);
            app.Slider.Position = [269 68 150 3];


            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, '')
            xlabel(app.UIAxes, '')
            ylabel(app.UIAxes, '')
            app.UIAxes.Position = [145 139 351 245];

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

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = rotateApp_dev

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            % Execute the startup function
            runStartupFcn(app, @showImage)

            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

[Alan Bindemann]

I have a globe plotting function that I've used for years which rotates very smoothly in a regular figure window using rotate3d. I echo Markus Leuthold's observation that in an app designer UIAxes object the rotation is much less responsive (at least in 2019a), to the point of being unusable. Also the lines don't render correctly in App Designer.

Here's an image from the UIAxes version. Note the graphics articfacts, and the missing lines.

And here is one from a normal figure window:

Answer 2

[Matheus Diniz Ferreira]

Hod did you plot a 3d graph in app designer?

[Shrikant Mahapatra]

The feature is available only from MATLAB 2017B (UIAxes supports 3D plots since then).