How do I use an image as a resizeable pushbutton in a GUI?

3 views (last 30 days)
So currently I have a pushbutton that can change to a specific picture via a popup menu. I also have a resizeable figure with resizeable pushbuttons.
However, the image itself does not change size, only the frame that it is in. How do I make the image itself fit the frame so that it is not cropped? I don't mind stretching or resolution right now, I just want to be able to see the entire image.
What I've done so far is use HTML and string concatenation to call an image as part of the string of a uicontrol:
%uses HTML to change size of image to match figure
hS1 = '<html><img src="file:///C:/Users/Project626';
hS2 = '" width="20px" " height:"20px" /></html>';
htmlStr = strcat(hS1,S.img,hS2);
%creates callback for image
S.imagex = uicontrol(S.fig,'units', 'normalized',...
'position',[.01 .83 .12 .16],...
with S.img being the name/path of the image stored as a string. Now S.imagex is an image with the callback @imagex_call.
At one point, I had another function change the pixel count for hS2 (and thus the image) based off of the resizing of the figure (using SizeChangedFcn). However, changing the width and height does absolutely nothing to my image, not even if I use percents instead of pixels.
If anyone who actually knows HTML (because I don't) can explain what I'm missing here, that would be very helpful.

Answers (1)

Jan on 1 Jun 2017
Edited: Jan on 1 Jun 2017
I cannot follow you in the first sentence already: A push button can change a specific picture via a popupmenu? Are there unspecific picturs also? How does the push button interact with a popup menu? The next sentence is strange also: Resizable push buttons?
The image is displayed as the background of a button? Then it is displayed pixel by pixel and you cannot resize it automatically. This would be the same if you use the CData property directly.
Now S.imagex is an image with the callback @imagex_call.
No, S.imagex is the handle of a button.
I had another function change the pixel count for hS2
Please post the code when you want the readers to understand, what this mean.
I think, you have chosen the wrong way. Displaying images in a button works somehow, but it is neither convenient nor powerful. An auto-resizing will not work.
You can try it the other way around: Create an image in an invisible axes and use its ButtonDownFcn as callback. Then the resizing is easy and you can use it as push button. If you like the position of the image can be shifted temporarily in the callback to get the look&feel of a button.
Alternatively you can store the image data in e.g. the UserData of the button and then use the ResizeFcn of the figure to update the CData of the button by a imresize 'd version of the image.
Jan on 2 Jun 2017
You can either use the ButtonDownFcn of the image as shown by Adam, or set the 'HitTest' property of the image to 'off', such that the mous click is forwarded to the underlying element, which is the axes. Both methods are equivalent.

Sign in to comment.

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!