Why does uiimage prevent underlying uifigure mouse button callbacks to trigger?

Hello there,

I am using MATLAB R2019b.

Contrary to uiaxes, it seems that uiimage will prevent any mouse button callbacks (WindowButtonDownFcn, WindowButtonUpFcn and WindowButtonMotionFcn) of the parent figure to trigger.

Example:

Below in my application, I have a superposition of an uifigure (grey array), uiaxes (white area) and uiiimage (map). When I click on the grey or white areas, the WindowButton callbacks are correctly triggered. This is not the case when I click on the map. This annoys me for my current application !! :)

Note that WindowScrollWHeelFcn is correctly triggered when scrolling on the uiimage object.

I suppose this comes from the fact that uiimage objects are also listening for clicks to trigger their own callback (ImageClickedFcn), contrary to UIaxes objects which do not have any callback properties. I have tried not defining any ImageClickedFcn and unchecking the interruptible property of the uiimage without success.

I suppose there is no workaround? This is sad because uiimage was quite the solution to the problems I had in my current application when using uiaxes ... ;-)

Nevermind and thanks for your help !

Answer 1

[Emmanuel Chambon]

I found a workaround with mlapptools : https://undocumentedmatlab.com/blog/matlab-callbacks-for-uifigure-javascript-events.

I hope that uiimage will get more callbacks in the future to propose more possible interactions ! :)

Answer 2

[Melinda Toth-Zubairi]

Hi Emmanuel,

Similar to other UI components, the uiimage function does block WindowButtonDownFcn and WindowButtonUpFcn callbacks. However, it does not block WindowButtonMotionFcn callbacks. Without a code snippet of what you are trying to accomplish, it is hard to diagnose the issue you were having.

If you want to try WindowButtonMotionFcn callbacks in R2019b App Designer, create an app with an image component and a numeric edit field. Then, create a WindowButtonMotionFcn callback funciton that counts the number of times the mouse position changes and update the edit field. This sample code shows you how to:

• Create a private property called mousePosChanged
• Initialize the private property in the UI figure's startupFcn
• Create a WindowButtonMotionFcn callback function that increments mousePosChanged and sets the value to the edit field.

    properties (Access = private)
        mousePosChanged % Mouse position changed
    end
    

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)
            app.mousePosChanged = 0;
        end

        % Window button motion function: UIFigure
        function UIFigureWindowButtonMotion(app, event)
            app.mousePosChanged = app.mousePosChanged + 1;
            app.CountEditField.Value = app.mousePosChanged;
        end
    end

[Adam Snyder]

I'm trying to make an app in app designer, and I find that the app.UIFigure.WindowButtonMotionFunction does not execute when I mouse over a uiimage object (R2020b). What am I missing? I should be printing random integers to the command window, which works if I'm not over the image, but doesn't work when the cursor is over the image. I'm up against a deadline so quick reply would be appreciated. Thanks!

classdef SIMineyCricket < matlab.apps.AppBase
    % Properties that correspond to app components
    properties (Access = public)
        UIFigure        matlab.ui.Figure
        SwitchLabel     matlab.ui.control.Label
        Switch          matlab.ui.control.Switch
        cricketImage    matlab.ui.control.Image
        refPinImage     matlab.ui.control.Image
        DataStreamAxes  matlab.ui.control.UIAxes
    end
    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startupFcn(app)
            app.UIFigure.UserData = struct('clickedObject',{[]},'lastPosition',{[]});
        end

        % Window button motion function: UIFigure
        function UIFigureWindowButtonMotion(app, event)
            disp(randi(10));
            if ~isempty(app.UIFigure.UserData.clickedObject)
                app.UIFigure.UserData.clickedObject.Position = [app.UIFigure.CurrentPoint,app.UIFigure.UserData.clickedObject.Position(3:4)];
            end
        end
        % Image clicked function: refPinImage
        function refPinImageClicked(app, event)
            disp('clicked pin')
            if ~isempty(app.UIFigure.UserData.clickedObject)
                %drop object
                app.UIFigure.UserData.clickedObject = []; 
            else
                %pick up object                
                app.UIFigure.UserData.clickedObject = event.Source; 
            end
        end
        % Window button down function: UIFigure
        function UIFigureWindowButtonDown(app, event)
            display(app.UIFigure.CurrentPoint);
        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 679 481];
            app.UIFigure.Name = 'MATLAB App';
            app.UIFigure.WindowButtonDownFcn = createCallbackFcn(app, @UIFigureWindowButtonDown, true);
            app.UIFigure.WindowButtonMotionFcn = createCallbackFcn(app, @UIFigureWindowButtonMotion, true);

            % Create SwitchLabel
            app.SwitchLabel = uilabel(app.UIFigure);
            app.SwitchLabel.HorizontalAlignment = 'center';
            app.SwitchLabel.Position = [605 190 42 22];
            app.SwitchLabel.Text = 'Switch';
            % Create Switch
            app.Switch = uiswitch(app.UIFigure, 'slider');
            app.Switch.Position = [603 227 45 20];
% Create cricketImage
app.cricketImage = uiimage(app.UIFigure);
app.cricketImage.Position = [11 15 341 222];
app.cricketImage.ImageSource = 'cricket.jpg';

% Create refPinImage
app.refPinImage = uiimage(app.UIFigure);
app.refPinImage.ImageClickedFcn = createCallbackFcn(app, @refPinImageClicked, true);
app.refPinImage.Position = [351 161 72 76];
app.refPinImage.ImageSource = 'pin.png';
% Create DataStreamAxes
app.DataStreamAxes = uiaxes(app.UIFigure);
title(app.DataStreamAxes, 'Data Stream')
xlabel(app.DataStreamAxes, 'time (s)')
ylabel(app.DataStreamAxes, 'mV')
app.DataStreamAxes.ColorOrder = [0 0.447 0.741;0.85 0.325 0.098;0.929 0.694 0.125;0.494 0.184 0.556;0.466 0.674 0.188;0.301 0.745 0.933;0.635 0.078 0.184];
app.DataStreamAxes.TickDir = 'out';
app.DataStreamAxes.Tag = 'DataStream';
app.DataStreamAxes.Position = [11 246 659 226];
% 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 = SIMineyCricket

% Create UIFigure and components
createComponents(app)

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

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

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