Colorbar of overlay in App Designer

In my app, I overlay an RGB image to a grayscale image in the same UIAxes. I would like to display the colorbar of the overlaid image. How can I do this?

I've seen this question in different forms (I need to overlay a color map over a gray scale image with with the colorbar on the side., How can I include a colorbar for an RGB image overlayed with a black & white image?, and Color map and color bar of the overlaid index image on a gray scale background image?), but the proposed solutions do not work within app designer.

Attached is the app with the necessary images. And the main functions are below. At the end are three different tests I did (they should be run one by one, while commenting the code of the others).

function LoadanatomyButtonPushed(app, event)
    aux = load('anatomy.mat');
    app.anatomy = aux.anatomy; 
    
    %plot the anatomical image
    imshow(app.anatomy,[],'Parent',app.UIAxes);
end

% Value changed function: ActivationmapButton
function ActivationmapButtonValueChanged(app, event)
    aux = load('activation.mat');
    app.activation = aux.activation;
    
    hold(app.UIAxes,'on');
    c = hot(256);
    RGB_im = ind2rgb(floor(256.*mat2gray(app.activation)),c); %transform indexed image to RGB
    h = imshow(RGB_im ,'Parent',app.UIAxes);
    set(h,'AlphaData', app.activation > 100);
    
    % Test one: this adds a gray colorbar, NOT a colorbar with the hot colormap.
     colorbar(app.UIAxes);
    
    % Test two: This adds the hot colorbar, but the gray image also turns into a colored one.
     theColorMap = c;
     theColorMap(1,:) = 0; % First row is black.
     theColorMap(end,:) = 1; % last row is white.
     colormap(app.UIAxes, theColorMap);
     colorbar(app.UIAxes);
     caxis(app.UIAxes,[0,0.6]);
    
    % Test three: This adds the hot colorbar, but the gray image also turns into a colored one.
     colormap(app.UIAxes,'hot');
     colorbar(app.UIAxes);
end

I think the issue is that I want to refer the colorbar to the h handle, but that is not possible since the first argument should be an axis, but the UIAxes has both images. Is there a workaround to that?

Thanks in advance for your suggestions :)

Answer 1

[Avni Agrawal]

Hi Milena,

I understand the issue you are encountering is related to displaying the colorbar for the overlaid image in MATLAB App Designer. When you overlay an RGB image onto a grayscale image in the same UIAxes, you want to display the colorbar for the overlaid image. However, the ‘colorbar’ function is unable to be directly associated with the overlaid image handle. You can create one more axes on top of your current axes namely ‘app.UIAxes_2’.

Here's an example of how you can modify your MATLAB App Designer code to incorporate the colorbar for the overlaid image in MATLAB App Designer:

        % Button pushed function: LoadanatomyButton
        function LoadanatomyButtonPushed(app, event)
            aux = load('anatomy.mat');
            app.anatomy = aux.anatomy;
            imagesc(app.UIAxes, app.anatomy);
            colormap(app.UIAxes, 'gray');
            % turn off the visibility of second axes
            app.UIAxes_2.Visible = 'off';
            %initial gray scale colorbar
            colorbar(app.UIAxes)
        end

        % Value changed function: ActivationmapButton
        function ActivationmapButtonValueChanged(app, event)
            aux = load('activation.mat');
            app.activation = aux.activation; 
            c = hot(256);
            RGB_im = ind2rgb(floor(256.*mat2gray(app.activation)),c);

            % add this image on new axes 2
            imagesc(app.UIAxes_2,RGB_im,'alphadata',app.activation>100);
            colormap(app.UIAxes_2,'jet');
            app.UIAxes_2.Visible = 'off';
            % colorbar for the axes 2
            colorbar(app.UIAxes_2);
        end
    end

This is the final result of overlaid image as expected

I hope this helps!