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

2 views (last 30 days)
Mandeguz
Mandeguz on 31 May 2017
Commented: Jan on 2 Jun 2017
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],...
'String',htmlStr,'Background','white',...
'callback',{@imagex_call,S});
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.

Sign in to answer this question.

Answers (1)

Jan
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.
  3 Comments
Show 1 older comment
Adam
Adam on 2 Jun 2017
Somewhere in the past I have done this type of thing, though I usually try to make sure it is a non-resizeable GUI. Otherwise, as Jan says, you have to use manually programmed ResizeFcn's to achieve what you want which is messy.
Regarding the ButtonDownFcn, yes, you need to use the one for your image rather than for your axes. Either that or set the 'HitTest' property of your image to 'off', but there is really no point in doing that rather than just implementing it at the image's ButtonDownFcn.
You should always keep hold of your image handle when you plot it - e.g.
hImage = imsgow( S.im );
then you can easily access it afterwards as e.g.
hImage.ButtonDownFcn = @(src,evt) disp( 'Image clicked' )
As an aside I regularly use this type of temporary callback when I do these kind of things just to check everything is hooked up correctly before I complicate the code with the callback I really want - it is useful to test the mechanism first with a simple callback.
Jan
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.

Categories

Find more on Display Image in Help Center and File Exchange

Tags

Community Treasure Hunt

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

Start Hunting!