Displaying images in Matlab figures has always been sort-of awkward. We need to read the image file into a Matlab matrix (possibly with accompanying colormap), then create an invisible axis in our figure window, and finally display the image data within this axis, typically with the imagesc function. In practice, this is not as difficult as it may seem, and can be done in 3 lines of code (imread(); axes(); imagesc();). To display images in uicontrols, we need to set their CData property with the image data. Unfortunately, this is only supported for static (non-animated) images.
But what if we want to display an animated image? There are several image formats that enable animation, GIF being the most well-known. Animated GIFs are used ubiquitously, for anything from logos to simple visualizations. I often use them myself in my utilities and this blog, to illustrate functionality or usage. Creating animated GIFs is so easy — I often use Picasion, but there are numerous alternatives.
So let’s assume that I have the animated GIF featured here:
animated GIF
This example serves as the logo in a demo live trading application that I’ll present tomorrow at the MATLAB Computational Finance Conference.
To display this image in a Matlab GUI, we could use a mini-browser control that we can easily integrate within the figure. But an even simpler and less resource-intensive solution is to integrate an HTML panel:
hFig = figure('Color','w'); je = javax.swing.JEditorPane('text/html', '<html><img src="file:/C:\Yair\animated.gif"/></html>'); [hj, hc] = javacomponent(je,[],hFig); set(hc, 'pos', [10,10,70,70])
Animated GIF image integrated in Matlab figure
Notes:
- Although the GIF image is 64×64 pixels, we set the containing
JEditorPane‘s size to 70×70, to account for the border and a small margin. You can obviously play with the size. - The image source was specified using the
file:/protocol, as I explained here.
If our animated GIF uses transparency, we should set the container’s background to the same color as the figure, as I explained here:
bgcolor = num2cell(get(hFig,'Color')); hj.setBackground(java.awt.Color(bgcolor{:}));
Animated transparent GIF image integrated in Matlab figure
For anyone wondering, we could just as easily have used a simple JLabel rather than a JEditorPane (see here). The only difference is that we would need to also take care of the background:
hFig = figure('Color','w'); je = javax.swing.JLabel('<html><img src="file:/C:\Yair\animated.gif"/></html>'); je.setBackground(java.awt.Color(1,1,1)); %=white [hj, hc] = javacomponent(je,[],hFig); set(hc, 'pos', [10,10,70,70])
We can similarly display animated GIFs on any uicontrol, due to the inherent nature of uicontrols that they accept HTML contents. So, we can place our animated GIF in buttons, drop-downs, listboxes etc. It’s not as straight-forward in drop-downs/listboxes as it is in buttons, but then again not many people need animated images in drop-downs or listboxes as they do in buttons. For push/toggle buttons, checkboxes and radio-buttons, displaying animated GIFs is trivially simple:
h1 = uicontrol('style','push', 'pos', [10,10,70,70], 'String','<html><img src="file:/C:\Yair\animated.gif"/></html>'); h2 = uicontrol('style','check', 'pos', [90,10,70,70], 'String','<html><img src="file:/C:\Yair\animated.gif"/></html>'); h3 = uicontrol('style','radio', 'pos',[170,10,70,70], 'String','<html><img src="file:/C:\Yair\animated.gif"/></html>');
Animated transparent GIF image integrated in Matlab uicontrols
The standard documented manner of displaying animated GIFs in Matlab is to imread all image frames from the GIF file, then start a timer that will periodically replace the axes image (or uicontrol CData property) with the next image frame in an endless loop. This is relatively tedious to set up, results in noticeable flicker and is relatively CPU intensive. I believe that the undocumented mechanism I’ve explained above is simpler to code and lighter on graphic resources.
Today’s article was a tribute to two old friends, whom I never met in person so far: a client who has recently asked me about this issue, and a member of a Graphics team who said he liked my related posts. I hope to meet both of them at the conference tomorrow. If you are interested in any aspect of computational finance, you will surely find some interesting presentations at this conference. So if you’re in town, I urge you to attend (free registration; my presentation is scheduled for 4:50pm). Otherwise, we could meet anywhere in New York tomorrow (Friday May 24), to discuss how I could bring value to your needs, either financial-oriented or not.
Related posts:
- Displaying hidden handle properties I present two ways of checking undocumented hidden properties in Matlab Handle Graphics (HG) handles...
- Spicing up Matlab uicontrol tooltips Matlab uicontrol tooltips can be spiced-up using HTML and CSS, including fonts, colors, tables and images...
- Images in Matlab uicontrols & labels Images can be added to Matlab controls and labels in a variety of manners, documented and undocumented. ...
- Multi-line uitable column headers Matlab uitables can present long column headers in multiple lines, for improved readability. ...