Select 3D ROI from three orthogonal projections of a 3D model in App Designer.

In App Designer, I have 3 axes showing 3 orthogonal projections of a 3D model, where each projection has a 2D ROI and all the 2D ROIs are correlated. It mean, when I draw ROI on one axes, such as app.roi{1} = drawpolygon(app.Projection1);, the ROIs on the other two axes would be automatically created. And when I change the ROI the one axes, the other two would be automatically updated. You can refer to my GUI design attached below.

I have the model to correctly handle the ROI mutual coordinate calculation. I use the following code to draw ROIs, monitor the ROI changes, and update the other two ROIs.

% Callbacks that handle component events
    methods (Access = private)
        ...
        % Button pushed function: DrawROIButton
        function DrawROIButtonPushed(app, event)
        % function to draw ROI on one projection and automatically create
        % the other two corresponding ROIs.
            
            % draw ROIs and get positions
            switch app.projection
                case 1
                    ...
                case 2
                    ...
                case 3
                    ...
            end
            
            % update ROIs when a ROI changes
            addlistener(app.roi{1}, 'MovingROI', @(src, evt) app.reDraw23);
            addlistener(app.roi{2}, 'MovingROI', @(src, evt) app.reDraw13);
            addlistener(app.roi{3}, 'MovingROI', @(src, evt) app.reDraw12);           
        end

The ROIs drawing part (the switch statement part) works smoothly. However, it seems the ROI updating code only allow me to update the other two ROIs ONLY when I make changes to the projection where I drew ROI on. For example, I draw an ROI on projection 1 and the ROIs on the other two could be created correctly. If I modify the ROI on the projection 1, the other two ROIs could be updated with no problem. BUT, if I modify the ROI on the projection 2, the ones on the other two projections would not be updated. This happens no matter whatever projection I choose to draw ROI on.

I suspected that the callback functions, addlistener(app.roi{2}, 'MovingROI', @(src, evt) app.reDraw13) and addlistener(app.roi{3}, 'MovingROI', @(src, evt) app.reDraw12), are not working when I draw and modify ROI on the projection 1. But I don't know how to fix the issues. Any thoughts or comments will be appreciated.

[Varun]

Hello! Can you please attach your mlapp file to this question? That will help me and others look into the issue better!

Answer 1

[Yatharth]

Hi Kai, I understand that the projections are not being updated when you are trying to modify a projection other than the one you drew on. It seems that the event listeners are only triggered when the ROI on the corresponding projection is modified, which is why the other two ROIs are not updated when you modify the ROI on a different projection.

You could try to modify all the ROI within the switch case itself and see if you get your desired output, here is the modified approach.

% Callbacks that handle component events
methods (Access = private)
    % ...
    
    % Button pushed function: DrawROIButton
    function DrawROIButtonPushed(app, event)
        % Function to draw ROI on one projection and automatically create
        % the other two corresponding ROIs.

        % Draw ROIs and get positions
        switch app. projection
            case 1
                % Draw ROI on Projection 1
                app.roi{1} = drawpolygon(app.Projection1);
                
                % Update ROIs when any ROI changes
                addlistener(app.roi{1}, 'MovingROI', @(src, evt) app.reDraw23);
                addlistener(app.roi{1}, 'MovingROI', @(src, evt) app.reDraw13);
                addlistener(app.roi{1}, 'MovingROI', @(src, evt) app.reDraw12);
            case 2
                % Draw ROI on Projection 2
                app.roi{2} = drawpolygon(app.Projection2);
                
                % Update ROIs when any ROI changes
                addlistener(app.roi{2}, 'MovingROI', @(src, evt) app.reDraw23);
                addlistener(app.roi{2}, 'MovingROI', @(src, evt) app.reDraw13);
                addlistener(app.roi{2}, 'MovingROI', @(src, evt) app.reDraw12);
            case 3
                % Draw ROI on Projection 3
                app.roi{3} = drawpolygon(app.Projection3);
                
                % Update ROIs when any ROI changes
                addlistener(app.roi{3}, 'MovingROI', @(src, evt) app.reDraw23);
                addlistener(app.roi{3}, 'MovingROI', @(src, evt) app.reDraw13);
                addlistener(app.roi{3}, 'MovingROI', @(src, evt) app.reDraw12);
        end
    end
    
    % ...
    
    % Functions to update the other two ROIs
    function reDraw23(app, ~, ~)
        % Update ROIs on Projection 2 and Projection 3
        % based on changes in ROI on Projection 1
        % ...
    end
    
    function reDraw13(app, ~, ~)
        % Update ROIs on Projection 1 and Projection 3
        % based on changes in ROI on Projection 2
        % ...
    end
    
    function reDraw12(app, ~, ~)
        % Update ROIs on Projection 1 and Projection 2
        % based on changes in ROI on Projection 3
        % ...
    end
    end

In this modified code, I have added the ~ placeholders for the unused “src“ and “evt” arguments in the update functions. This ensures that the event listeners are properly triggered when any ROI is modified, regardless of the projection.

By setting up the event listeners in this way, any modification to an ROI will trigger the appropriate update functions for the other projections, ensuring that all ROIs stay correlated and updated.

I tried recreating something similar in MATLAB, you could follow similar approach to customise your code

classdef ROIGUI < handle
    properties
        roi = cell(3, 1);
    end
    
    methods
        function drawROIs(obj)
            figure;
            for i = 1:3
                subplot(1, 3, i);
                obj.roi{i} = drawrectangle();
                addlistener(obj.roi{i}, 'ROIMoved', @(src, evt) obj.updateROIs(src, evt));
            end
        end
        
        function updateROIs(obj, src, ~)
            roiPos = src.Position;
            for i = 1:3
                if obj.roi{i} ~= src
                    obj.roi{i}.Position = roiPos;
                end
            end
        end
    end
end

To run the above code use the commands:

>> gui = ROIGUI();

>>gui.drawROIs();I hope this helps.

[AG1]quotes

[Kai]

Your solution works! Thank you so much for your help!