how to create mouse movement event on UIAxes in APP Designer to catch cursor location on the axes?

I have a UIAxes created in App designer. now I want to show cursor's x y location when mouse is moving on the axe, not click.

Answer 1

[Adam Danz]

Here are 2 methods to capture mouse coordinates within the axes of a figure.

In these demos the coordinates of the cursor's current point on the axes will appear in the text box. When the mouse leaves the axes, the textbox will clear.

Be aware of the limit in precision of CurrentPoint within axes (see this explanation). For example, you may not be able to select an exact coordinate such as (0,0).

Method 1: Use a pointer manager (requires Image Processing Toolbox)

Instead of using the WindowButtonMotionFcn which requires you to detect when the mouse enters the axes, use a pointer manager assigned to the axes that returns the axes' current point when the mouse is over the axes. This is more efficient than the WindowButtonMotionFcn.

Demo attached: showCurrentPointApp.mlapp

Add this to you app's startup function.

Key components

• Uses iptPointManager and iptSetPointerBehavior which respond to the cursor moving in the axes and exiting the axes.
• app.UIAxes - handle to the app's axes
• app.UIFigure - handle to the app's figure
• app.CurrentPositionEditField - handle to the text box
• startupFcn() - the app's startup function (see instructions to add startupFcn).

% Code that executes after component creation
function startupFcn(app)
    pm.enterFcn = [];
    pm.exitFcn  = @(~,~) set(app.CurrentPositionEditField, 'Value', '');
    pm.traverseFcn = @(~,~) set(app.CurrentPositionEditField, 'Value',...
        sprintf('%.2f,  %.2f', app.UIAxes.CurrentPoint(1,1:2)));
    iptSetPointerBehavior(app.UIAxes, pm)
    iptPointerManager(app.UIFigure,'enable');
    set(app.UIFigure,'WindowButtonMotionFcn',@(~,~)NaN) %dummy fcn so that currentpoint is continually updated
end

Method 2: Assign a WindowButtonMotion to the figure

As Mohammad Sami suggested, the WindowButtonMotion function is assigned in AppDesigner > Designer View > in the Component Browser select the figure handle > callback > WindowButtonMotionFcn.

Demo attached: showCurrentPointApp_method2.mlapp

Key components

• app.UIAxes - handle to the app's axes
• app.UIFigure - handle to the app's figure
• app.CurrentPositionEditField - handle to the text box
• UIFigureWindowButtonMotion() - See instructions above.

% Window button motion function: UIFigure
function UIFigureWindowButtonMotion(app, event)
    % Determine if mouse is within uiaxes
    cp = app.UIFigure.CurrentPoint;
    isInAxes = cp(1) >= app.UIAxes.Position(1) && ...
        cp(1) <= sum(app.UIAxes.Position([1,3])) && ...
        cp(2) >= app.UIAxes.Position(2) && ...
        cp(2) <= sum(app.UIAxes.Position([2,4]));
    if isInAxes
        % Update displayed coordinates
        set(app.CurrentPositionEditField, 'Value',...
            sprintf('%.2f,  %.2f', app.UIAxes.CurrentPoint(1,1:2)))
    else
        % Clear displayed coordinates
        set(app.CurrentPositionEditField, 'Value', '')
    end
end

[Jie Li]

Adam, the demo is so exciting! in UIFigureWindowButtonMotion function, what pm is? could you please provide more description on iptSetPointerBehavior, iptPointerManager, which I assume they are your own functions on detecting pointer's location. Looking forward to your reply. Thank you!

[Adam Danz]

@Jie Li, I've updated my answer with a different approach and I've updated the attached demo App as well.

There isn't a need to use the WindowButtonMotionFcn. Instead, the pointer control is done in the Startup function which is much more efficient than the previous version.

To understand pm, see the two links in my answer for iptPointManager and iptSetPointerBehavior.

In short, they are functions that control what happens when your mouse enters a particular object, in this case, the UIAxes. There are 3 actions that can be done

• when entering the object
• when traveling across the object
• when leaving the object

If you still have questions, I'd be happy to address them.

[Jie Li]

awesome, the pointer manager in image processing toolbox is quite easy to use. Thank you very much. Hope your solution can be seen by other pepole.

[Jie Li]

what if I don't have image processing toolbox, is it possible to find other ways?

[Adam Danz]

> what if I don't have image processing toolbox

I've updated my answer showing Method #2 which uses a WindowButtonMotion function as Mohammad Sami suggested.

[Franck paulin Ludovig pehn Mayo]

hello @Adam Danz , i am new in matlab or have very little knowledge. I am trying to run the exact same code as yours using matlab 2021a .

I am using use first method; The problem is that i dont know what to write down bleow when using app designer ( I mean how should what should i write down here.)

• app.UIAxes - handle to the app's axes
• app.UIFigure - handle to the app's figure
• app.CurrentPositionEditField - handle to the text box.

Also, i would like to know if it is possible to add a line on it like x= 2 .

thank you , in advance.

[Adam Danz]

Hi frank, those variables are defined in my answer in bullet points (the same definitions you copied in your comment above). Each object in your app has its own handle and the handle names you are using can be seen in app designer.

About the line you want to add, if you want to be a static line that is always at x = 2 then you can use

xline(app.UIAxes,2)

where app.UIAxes is the handle to your axes.

If you want the x-line to move with the cursor, follow this demo:

https://www.mathworks.com/matlabcentral/answers/548721-ginput-and-currentpoint-property-do-no-match-real-axes-coordinates#answer_451698

[Franck paulin Ludovig pehn Mayo]

hello again Adam Danz,

thank you for you fast replies. Attached are the results and code.

unfortunately, the mouser is not tracking the position. it is all static.

[Franck paulin Ludovig pehn Mayo]

Also , i would like to know if it is possible to to include a thickness to the line x=2; i am doing an experiment with haptic ring where i want the program to notify me when i am on the rectangle(because the line is supposed to have a thickness).

concerning the plot, this is my code:

function UIAxesButtonDown(app, event)

app.UIAxes

a= xline(app.UIAxes,0.4)

plot(a,"LineWidth",2)

[Adam Danz]

You can't use my handle names unless they match your handle names. Do you have a text box named CurrentPositionEditField? It looks like yours is called EditField.

To change thickness of the xline: https://www.mathworks.com/help/matlab/ref/xline.html

[Franck paulin Ludovig pehn Mayo]

Hi , Adam.

Thank you very much for your answer. I was able to change the width of the line. However, I have matched my handle name with the box named ; I changed it into Current Position, but still i am unable to record the mouse position . I will write the code down below again for each handle name. Attached is the modified picture that has been made.

 % Code that executes after component creation
        function startupFcn(app)
    pm.enterFcn = [];
    pm.exitFcn  = @(~,~) set(app.CurrentPositionEditField, 'Value', '');
    pm.traverseFcn = @(~,~) set(app.CurrentPositionEditField, 'Value',...
    sprintf('%.2f,  %.2f', app.UIAxes.CurrentPoint(1,1:2)));
    iptSetPointerBehavior(app.UIAxes, pm)
    iptPointerManager(app.UIFigure,'enable');
    set(app.UIFigure,'WindowButtonMotionFcn',@(~,~)NaN) %dummy fcn so that currentpoint is continually updated
        end
        
        
   % Button down function: UIAxes
        function UIAxesButtonDown(app, event)
                app.UIAxes
               xl= xline(app.UIAxes,0.4,'-b');
               xl.LineWidth = 5;
        end
        
        
    % Value changed function: CurrentPosiionEditField
        function CurrentPosiionEditFieldValueChanged(app, event)
            value = app.CurrentPosiionEditField.Value;
                    app.CurrentPosiionEditField 
        end
        
        
      % Button down function: UIFigure
        function UIFigureButtonDown(app, event)
                 app.UIFigure
        end

[Adam Danz]

1. Do you get any errors? You likely got errors when you were using "CurrentPosiionEditField" before you renamed the EditField but you never mentioned that. Always report error mesages in their entirety.
2. When you download the app attached to my answer (the first one) and run it, do you have any problems? This confirms that the feature works on your system and rules out any version-difference issues. I just ran it in R2021a and have no problems on my end.
3. You added the startupFcn correctly following these instructions, right? It's not clear from your copy-pasted code above since the startupFcn sould be within the methods section of the code but it's correctly categorized as a callback function in the image attachment.
4. Why do you have a separately defined UIFigureWindowButtonMotionFcn? The last line of code in my example from Method 1 sets the WindowButtonMotionFcn to a dummy function (NaN) and since you have a separate WindowButtonMotionFcn for your figure, that could be interferring.
5. The UIFigureButtonDown function may also be interfering. First remove the WindowButtonMotionFcn from your app (not from the startupFcn) and if there are still problems, then remove the UIFigureButtonDown function, too.

You could combine the 2 lines that create the xline: xline(app.UIAxes,0.4,'-b','LineWidth',5);

[Adam Danz]

I just added a WindowButtonMotion & UIFigureButtonDown function to the demo app and a the pointer behavior worked as expected.

I also added a UIAxesButtonDown function and a ValueChangedFcn to the edit field and that also did not cause a problem.

You should still rule those problems out using my list above but if you get the same results, then something else is in the way whether it's another part of your code, a version or system issue, etc.

To be clear, when you say, "I am unable to record the mouse position" do you mean the text edit field is not updating when the cursor moves into the axes? If so, what's happening instead? Are you giving the app a few seconds to render before testing it?

[Franck paulin Ludovig pehn Mayo]

1. Yes. When running the program i have the desired outcome. The only is that when the cursor moves into the axes , there is nothing to be recorded. it still stays at 0.
2. Yes, i am able to run your attached file without any issue.
3. Yes, i followed all the instructions concerning startupFcn as shown .
4. I was trying to use the second method since the first one was not working . It is empty inside.Nothing is written. I have just deleted that callback. But still not working.
5. I have removed one after the other but still not working.

However, i may have an error here. it is written: Line 33: The value assigned to variable 'value' might be unused.

Would you mind screenshoting those parts and upload them.Sorry for disturbing you.

  % Value changed function: CurrentPosiionEditField
        function CurrentPosiionEditFieldValueChanged(app, event)
                 value=  app.CurrentPosiionEditField.Value;
                    app.CurrentPosiionEditField
        end
    end

[Adam Danz]

If you attach the app I can take a look at it.

[Franck paulin Ludovig pehn Mayo]

attached is the file

[Adam Danz]

Problem 1

Immediately after running the cursor through the axes on your app, this warning appeared in the command window. It's an error message wrapped as a warning:

Warning: Error occurred while executing the listener callback for event WindowMouseMotion defined for class matlab.ui.Figure:
Unrecognized method, property, or field 'CurrentPositionEditField' for class 'showcurentPosition2021'.
Error in showcurentPosition2021>@(~,~)set(app.CurrentPositionEditField,'Value',sprintf('%.2f,  %.2f',app.UIAxes.CurrentPoint(1,1:2))) (line 18)
    pm.traverseFcn = @(~,~) set(app.CurrentPositionEditField, 'Value',...
Error in iptPointerManager>callIfNotEmpty (line 164)
    fcn(varargin{:});
Error in iptPointerManager>createPointerManager/updatePointer (line 351)
            callIfNotEmpty(overMe.PointerBehavior.traverseFcn, hFigure, currentPoint); 

The 2nd line of the error message indicates that you should look at the handle names in your app.

This is why I asked if you have any error messages. Any time you have errors or warnings, it's nearly always helpful to share them in their entirety.

Problem 2

The CurrentPositionEditField is described as a textbox in my answer and is required to be a text-edit-field. Yours is a numeric-edit-field which only accepts numbers, not text. So you'll need to remove that component and replace it with an "Edit Field (text)".

After correcting those two problems, the current point tracking appears as expected in the text box.

[Franck paulin Ludovig pehn Mayo]

Thank you Adam. It is working , you are just the best.

[Franck paulin Ludovig pehn Mayo]

@Adam Danz Good morning/afternoon/evening,

Is there anyway i can save in the background every mouse movement with respect to time? Like i mean each movement is saved at the moment of the motion.

example: Mouseposition: x= 1 , y= 2.1 and t= 0.002s

x = 2 , y = 3.9 and =0.02s

like all these informaion will be saved automatically.

[Adam Danz]

Yes but it may be very memory-intesive which may slow down performance. Currently the pointer manager from method #1 in my answer tracks mouse movement any time the mouse is within the axes. Performance and memory issues could be mitigated by selectively recording mouse movement during short periods of time. For example, you could turn mouse tracking on or off via a button in the app or by some condition that the app could detect.

You would need to create an app property to store the mouse movements within an nx2 array (or 2xn) of (x,y) coordinates:

• Share Data Within App Designer Apps
• Step-by-step guide to declaring app props

You'd also need to modify the traverseFcn function (from method #1 in my answer) so that it updates the array and clears the array when needed.

Since this question does not pertain to the original thread, you are encouraged to ask a new question if you need additional help. You can tag me using the @[name] to draw my attention to the question but, just FYI, I do not have much time these days to contribute to answers that may require considerable development.

[Franck paulin Ludovig pehn Mayo]

@Adam Danz Hello Adam,

I have opened a new thread concerning the saving but no one seems to know the answer. Any help please? I have a huge project. I am done with the mechanical and design part. The coding part is my weakest point.

[Adam Danz]

Sorry that no one has responded yet. The soonest I can think about this is in a few weeks but in the meantime if no one answers the question you can search The forum or try to start implementing it using the advice in my comment above.

[Franck paulin Ludovig pehn Mayo]

@Adam Danz alright.THANK YOU

[Shaik Asif]

Hello @Adam Danz , My problem is I have 2 circles which are genereted using randi commands in UI Axes. I want to find out the Diameter of those circles , by selecting any three points on the circles . I have a Code for finding out the Circle Diameter , But i need to Enter the Coordinates Manually , Check My code . is there any better solution , Where i can find out the diameter Automatically. ??

 syms h k r ;
          
             
            x1 = app.x1EditField.Value ; 
            y1 = app.y1EditField.Value ; 
            x2 = app.x2EditField.Value ; 
            y2 = app.y2EditField.Value ;
            x3 = app.x3EditField.Value ;
            y3 = app.y3EditField.Value ;
            
             eqns = [(x1-h)^2+(y1-k)^2==r^2,(x2-h)^2+(y2-k)^2==r^2,(x3-h)^2+(y3-k)^2==r^2];
             S = solve(eqns, [h k r]);
             radius = double(S.r(2));
             diameter = radius*2 ;
             app.EditField.Value = diameter;

[Franck paulin Ludovig pehn Mayo]

hello adam, i have finally found a way of saving all data vs time.

right now , i would like to combine your code with this one below. i have tried but i dont have any success. Is it possible to combine both?

% Plot patch on uiaxes
hold(app.UIAxes, 'on')
region1 = patch(app.UIAxes,[1.5 3.5 3.5 1.5],[0 0 5 5],'b','FaceAlpha',0.07,...
    'LineWidth',2,'LineStyle','--','tag','region1');
% Define pointer behavior for patch
pm.enterFcn = @(~,~) cursorPositionFeedback(app, region1, 'in');
pm.exitFcn  = @(~,~) cursorPositionFeedback(app, region1, 'out');
pm.traverseFcn = [];
iptSetPointerBehavior(region1, pm)
% Enable pointer manager for app
iptPointerManager(app.UIFigure,'enable');
function cursorPositionFeedback(app, hobj, inout)
% When inout is 'in', change hobj facecolor to red and update textbox.
% When inout is 'out' change hobj facecolor to blue, and clear textbox.
% Check tag property of hobj to identify the object.
switch lower(inout)
    case 'in'
        facecolor = 'r';
        txt = 'Inside region 1';
        pointer = 'fleur';
    case 'out'
        facecolor = 'b';
        txt = '';
        pointer = 'crosshair';
end
hobj.FaceColor = facecolor;
app.TextArea.Value = txt;
set(app.UIFigure, 'Pointer', pointer)
end  

[Adam Danz]

I will look at this one Tuesday and replace this comment with my response.

[Franck paulin Ludovig pehn Mayo]

@Adam Danz thank you

[Franck paulin Ludovig pehn Mayo]

@Adam Danz I have tried combining both but the problem i have been facing is that when the cursor is out of the area it does not go back to the initial color . It still stays to green instead of blue.

Furthemore, there is nothing that is shown in the text area.

Attached is the code.

[Adam Danz]

Hi Franck, I tested your attached app. It throws a warning when you enter/leave the patch area.

Warning: Error occurred while executing the listener callback for event WindowMouseMotion defined for class matlab.ui.Figure:
Unrecognized method, property, or field 'TextArea' for class 'showCurrentPointApp_test01'.
Error in showCurrentPointApp_test01/startupFcn/cursorPositionFeedback (line 46)
app.TextArea.Value = txt;
Error in showCurrentPointApp_test01>@(~,~)cursorPositionFeedback(app,region1,'in') (line 25)
pm.enterFcn = @(~,~) cursorPositionFeedback(app, region1, 'in');
Error in iptPointerManager>callIfNotEmpty (line 164)
    fcn(varargin{:});
Error in iptPointerManager>createPointerManager/updatePointer (line 350)
            callIfNotEmpty(overMe.PointerBehavior.enterFcn, hFigure, currentPoint); 

The warning indicates the problem "Unrecognized method, property, or field 'TextArea' "

Your TextArea is named TextAreaEditField. After fixing that, problem solved.

[Franck paulin Ludovig pehn Mayo]

@Adam Danz thank you.it is working

Answer 2

[Mohammad Sami]

You can set the callback WindowButtonMotionFcn on the app.UIFigure.

https://www.mathworks.com/help/releases/R2020b/matlab/ref/matlab.ui.figureappd-properties.html#bu4i700-1-WindowButtonMotionFcn

To add the callback in AppDesigner see the picture below. Select app.UIFigure in component browser/

Click callbacks and scroll to find WindowButtonMotionFcn. Click the dropdown and select add.

% Window button motion function: UIFigure
function UIFigureWindowButtonMotion(app, event)
    % you can leave this empty if you don't want live update
    disp(app.UIAxes.CurrentPoint); % you will have to differentiate if this actually inside uiaxes.
    disp(app.UIFigure.CurrentPoint);
end

[Mohammad Sami]

Details of the current point variable is available in the documentation.

If the WindowButtonMotionFcn is not set, the Current Point will only show the last clicked point.

https://www.mathworks.com/help/releases/R2020b/matlab/ref/matlab.ui.control.uiaxes-properties.html?searchHighlight=uiaxes%20currentpoint&s_tid=doc_srchtitle#mw_f31653a9-2154-4067-b9c1-71901b9b7606

[Jie Li]

Thank you very much for the solution. would you kindly give me more explaination on how to differentiate if the nouse pointer currently is inside one specific uiaxes, not inside other uiaxes?

[Mohammad Sami]

I will need to do some tests. Will reply you if I find the way to differentiate.

[Mohammad Sami]

From what I can see in the data

% If the cursor is completely outside the UIAxes
Columns 1 through 2

         -1.26587301587302           1.1579754601227
         -1.26587301587302           1.1579754601227

  Column 3

          9.16025403784439
                       0.5
                       
% If the cursor is inside any of the UIAxes

  Columns 1 through 2

          1.92297485039581        -0.157787889333874
          1.92297485039581        -0.157787889333874

  Column 3

                         1
                         0

Based on this I suggest you do two things. This likely may only work for 2D UIAxes.

u1 = app.UIAxes.CurrentPoint;
if isequal(u1(:,3),[1;0])
    x1 = u1(1,1);
    y1 = u1(1,2);
    x1lim = app.UIAxes.XLim;
    y1lim = app.UIAxes.YLim;
    insideAxes = x1 >= x1lim(1) & x1 <= x1lim(2) & y1 >= y1lim(1) & y1 <= y1lim(2);
else
    insideAxes = false;
end
u2 = app.UIAxes2.CurrentPoint;
if isequal(u2(:,3),[1;0])
    x2 = u2(1,1);
    y2 = u2(1,2);
    x2lim = app.UIAxes2.XLim;
    y2lim = app.UIAxes2.YLim;
    insideAxes2 = x2 >= x2lim(1) & x2 <= x2lim(2) & y2 >= y2lim(1) & y2 <= y2lim(2);
else
    insideAxes2 = false;
end

[Mohammad Sami]

You can convert this into a function.

function [inside,point] = insideAxes(app,Axes)
    u = Axes.CurrentPoint;
    if isequal(u(:,3),[1;0])
        x = u(1,1);
        y = u(1,2);
        xlim = Axes.XLim;
        ylim = Axes.YLim;
        inside = x >= xlim(1) & x <= xlim(2) & y >= ylim(1) & y <= ylim(2);
        point = u(1,1:2);
    else
        inside = false;
        point = [NaN, NaN];
    end
end

function someotherfunc(app)
     [inside1,point1] = app.insideAxes(app.UIAxes);
     [inside2,point2] = app.insideAxes(app.UIAxes2);
end