Displaying animated GIFs

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

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

Animated GIF image integrated in Matlab figure


Notes:

  1. 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.
  2. 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

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

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.

Matlab Computational Finance Conference - 23 May 2013

Related posts:

  1. Animated busy (spinning) icon An animated spinning icon label can easily be embedded in Matlab GUI. ...
  2. Displaying hidden handle properties I present two ways of checking undocumented hidden properties in Matlab Handle Graphics (HG) handles...
  3. Spicing up Matlab uicontrol tooltips Matlab uicontrol tooltips can be spiced-up using HTML and CSS, including fonts, colors, tables and images...
  4. Rich-contents log panel Matlab listboxes and editboxes can be used to display rich-contents HTML-formatted strings, which is ideal for log panels. ...
  5. Multi-line uitable column headers Matlab uitables can present long column headers in multiple lines, for improved readability. ...
  6. Images in Matlab uicontrols & labels Images can be added to Matlab controls and labels in a variety of manners, documented and undocumented. ...

Categories: GUI, Low risk of breaking in future versions, Undocumented feature

Tags: , , ,

Bookmark and SharePrint Print

6 Responses to Displaying animated GIFs

  1. Pingback: Real-time trading system demo | Undocumented Matlab

  2. Pingback: Rich-contents log panel | Undocumented Matlab

  3. Pingback: Animated busy (spinning) icon | Undocumented Matlab

  4. derphelix says:

    Thank you very much for charing this undocumented feature with us.

    But i wonder: Do you know how i could delete the the javax.swing.JEditorPane ?

    Everytime I’m trying to delte the hc variable, matlab will use more memory than before the deletion (seen in the TaskManager).

  5. Pingback: Transparency in uicontrols | Undocumented Matlab

Leave a Reply

Your email address will not be published. Required fields are marked *

*

<pre lang="matlab">
a = magic(3);
sum(a)
</pre>