MATLAB: Generate arrow keys in MATLAB gui

arrow buttonsguiguideMATLABpush button

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

Best Answer

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
Related Question