Generate arrow keys in MATLAB gui

Hello all,

I am trying to generate a gui that has 4 arrow key buttons (arranged as the usually are on a keyboard). I figured this would be a simple task but after a couple hours of trying on my own and searching the web I cannot figure out how to get it done.

Here's what I've tried so far:

• Creating an axes object over top of the button and adding a latex arrow to the axes
• Setting the Cdata of the button to be a picture of an arrow

For the first attempt I got an arrow to display but I couldn't get the axes to appear over top of the push button. After some searching it appears like this may or may not be possible, and no one ever really gave a clear answer on the topic.

For the second attempt I loaded an image of an arrow using imread and then used

set(handles.rarrow,'cdata',rarrow_img)

where rarrow_img is the variable that I loaded the image data into. This just replaced the push button with a black box.

Anyway, any help on this would be greatly appreciated. All I'm really looking to get is something like http://www.101computing.net/wp/wp-content/uploads/arrowKeys.png where each button then has a function I have yet to write (I'm looking to do manual image correlation and want to give people the option of using the mouse if for some reason they don't like keyboards...)

NOTE: I am using MATLAB r2011a for Mac (yes I know it is very outdated)

Andrew

[Walter Roberson]

uicontrols will always appear above axes elements before R2014b. From R2014b onwards, axes elements can appear on top of uicontrols.

Answer 1

[Alfonso Nieto-Castanon]

The cdata approach is probably simpler.

First check that variable rarrow_img contains the correct 3D matrix format (see the description of cdata in uicontrol properties). That means that rarrow_img should be a MxNx3 array with RGB values (between 0 and 1).

If that was already ok, then the most likely reason for your 'all-black' button may be that your rarrow_img variable is too large for the button size so you are only seeing a small portion of it (by default the data entered in cdata is rescaled and cropped to fit the button size). Try rescaling the image using something like the following instead:

 set(handles.rarrow,'units','pixels');
 buttonsize = get(handles.rarrow,'position');
 imagesize = size(rarrow_img);
 newsize = ceil(imagesize(1:2)/max(imagesize(1:2)./buttonsize([4 3])));
 newimage = rarrow_img(round(linspace(1,imagesize(1),newsize(1))),...
                       round(linspace(1,imagesize(2),newsize(2))),...
                       :);
 set(handles.rarrow,'cdata',newimage);

That will fit the entire image into the button without any cropping

[Andrew]

Thanks,

I had an inkling I had to resize the image but for some reason never checked it out.

I modified your code slightly... instead of doing my own image sampling, I used the imresize command from the image tool box. One quick question (and maybe I will need to ask another question for this): how do I get the image to resize when the window resizes. I have everything currently set to normalized units so that when the window resizes you can still see everything; however, I imagine I will need to re-interpolate the cdata each time the window is resized as well. Is there a function that is called on resize that I can set?

Andrew

[Alfonso Nieto-Castanon]

Yes, you may use SizeChangedFcn or ResizeFcn in figure properties for that.