How do I replace a button with an icon in App Designer?

In App Designer, I place a button that users can press to get more information. But rather than the standard App Designer button (a rectangle with rounded corners), I would like to have a circle around a question mark. I can select Icon in the Button menu to insert a circled question mark PNG, but it is still encased in a rectangle. Is there a way of getting rid of the rectangle?

[Jon]

This has been asked before. Sounds like you can't change the shape of a button.

Please see https://www.mathworks.com/matlabcentral/answers/1580009-use-icons-of-different-shapes-for-push-button-in-appdesigner

but as @Sean de Wolski suggest there

"You could use a uiimage instead. Then set it's ImageClickedFcn instead of ButtonPushedFcn callback"

[Niraj Desai]

Thanks for pointing that msg out. I'll try that.

Answer 1

[Amit Dhakite]

Hi Niraj,

To use a circular image as a button, and to avoid the outer rectangular covering, you can follow the steps mentioned below inside the callback function associated with the click:

1. Extract the x and y coordinates of the mouse click.
2. Initialize 3 variables, “centerX” and “centerY” representing the center, and “radius” representing the radius of the circular image.
3. Calculate the distance between the mouse clicked position and the center of the circle.
4. If the distance is smaller than the radius of the circle, it means that the mouse is clicked inside the circle, and then you can implement the desired functionality there.

Please refer to the code shown below to implement the above mentioned functionality:

% Get the coordinates of the click
rpoint = get(app.UIFigure, 'CurrentPoint'); 
clickX = rpoint(1); 
clickY = rpoint(2);

centerX = ;  % x-coordinate of the circular image's center 
centerY = ;  % y-coordinate of the circular image's center 
radius = ;    % Radius of the circular image 
distance = sqrt((clickX - centerX)^2 + (clickY - centerY)^2); 
if distance <= radius 
    % Desired functionality
end 

To know more about the axes properties such as “CurrentPoint”, please refer to the following link:

https://www.mathworks.com/help/matlab/ref/matlab.graphics.axis.axes-properties.html?searchHighlight=currentpoint&s_tid=srchtitle_support_results_1_currentpoint

Hope it helps!