Undocumented Matlab
  • SERVICES
    • Consulting
    • Development
    • Training
    • Gallery
    • Testimonials
  • PRODUCTS
    • IQML: IQFeed-Matlab connector
    • IB-Matlab: InteractiveBrokers-Matlab connector
    • EODML: EODHistoricalData-Matlab connector
    • Webinars
  • BOOKS
    • Secrets of MATLAB-Java Programming
    • Accelerating MATLAB Performance
    • MATLAB Succinctly
  • ARTICLES
  • ABOUT
    • Policies
  • CONTACT
  • SERVICES
    • Consulting
    • Development
    • Training
    • Gallery
    • Testimonials
  • PRODUCTS
    • IQML: IQFeed-Matlab connector
    • IB-Matlab: InteractiveBrokers-Matlab connector
    • EODML: EODHistoricalData-Matlab connector
    • Webinars
  • BOOKS
    • Secrets of MATLAB-Java Programming
    • Accelerating MATLAB Performance
    • MATLAB Succinctly
  • ARTICLES
  • ABOUT
    • Policies
  • CONTACT

Displaying animated GIFs

May 22, 2013 16 Comments

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])

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{:}));

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])

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>');

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. Images in Matlab uicontrols & labels – Images can be added to Matlab controls and labels in a variety of manners, documented and undocumented. ...
  4. HTML support in Matlab uicomponents – Matlab uicomponents support HTML and CSS, enabling colored items, superscript/subscript, fonts, bold/italic/underline and many other modifications...
  5. Blurred Matlab figure window – Matlab figure windows can be blurred using a semi-transparent overlaid window - this article explains how...
  6. Multi-line uitable column headers – Matlab uitables can present long column headers in multiple lines, for improved readability. ...
GUI HTML Pure Matlab Undocumented feature
Print Print
« Previous
Next »
16 Responses
  1. Real-time trading system demo | Undocumented Matlab May 29, 2013 at 06:15 Reply

    […] Undocumented Matlab Charting Matlab’s unsupported hidden underbelly Skip to content HomeAboutConsultingTrainingIB-MatlabMatlab-Java bookTODOPoliciesSite map ← Displaying animated GIFs […]

  2. Rich-contents log panel | Undocumented Matlab September 19, 2013 at 09:36 Reply

    […] Animated GIF logo image (rotating Dollar sign) […]

  3. Animated busy (spinning) icon | Undocumented Matlab April 16, 2014 at 11:02 Reply

    […] We can also simply embed the animated GIF image directly in our GUI, as I explained here. […]

  4. derphelix July 13, 2014 at 14:29 Reply

    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).

    • Yair Altman July 13, 2014 at 16:07 Reply

      Clearing the Matlab variable that holds the Java object’s reference should enable the Java object to be garbage-collected by the JVM.

  5. Transparency in uicontrols | Undocumented Matlab December 10, 2014 at 11:02 Reply

    […] note: I have shown another alternative for displaying clickable transparent images in my article on displaying animated/transparent GIFs. Readers might also find interest in the related article on transparent uipanels. Next week I plan […]

  6. lalitkumar annaldas February 15, 2015 at 06:17 Reply

    hey,
    but what if i wanted to display the animated gif file on one of the axes present in the GUI of MATLAB instead of displaying it on external figure window.
    If you can help me please forward the code to my mail ID:-
    heavensfallhere2010@gmail.com

    • Yair Altman February 15, 2015 at 06:30 Reply

      @Lalitkumar – if you insist on using an axes (why???), then you could use a timer to refresh the displayed image frame at a certain frequency.

  7. Greg Mason March 17, 2015 at 07:45 Reply

    This post has been very helpful, but now I’m trying to use the deploytool to package my GUI for distribution. Unfortunately when it’s packaged the address still maps back to my local drive and the GIF doesn’t work – is there a way to hide / embed the GIF in the package so the end user won’t see the picture file in their directory but still have it show up in the GUI?

    Thanks again.

    • Yair Altman March 17, 2015 at 08:51 Reply

      @Grep – you could place the GIF on some website (either your own or some public image-sharing site) and let the HTML img src point to the relevant URL rather than to local disk file. Of course, the user would need to have internet connection to that URL in order to see the GIF.

    • Greg Mason March 17, 2015 at 10:55 Reply

      Unfortunately one of the reasons for distributing is when people are not connected to the inter/intranet they can still run the programs without needing a matlab license.

      However, I appear to have found a workaround. The below code is in my .m file and the file “Pic_For_Error.gif” is included in the Shared Resources and Helper Files section of deploytool (the same section that the .fig file is included). Hope this helps anyone that may want to distribute their GUIs with GIFs!

      fname = 'Pic_For_Error.gif';
      hFig = figure('Color','w');
      jLabel = javaObjectEDT('javax.swing.JLabel',javaObjectEDT('javax.swing.ImageIcon',which(fname)));
      [hJ,hC] = javacomponent(jLabel,getpixelposition(hFig).*[0 0 1 1],hFig);

      fname = 'Pic_For_Error.gif'; hFig = figure('Color','w'); jLabel = javaObjectEDT('javax.swing.JLabel',javaObjectEDT('javax.swing.ImageIcon',which(fname))); [hJ,hC] = javacomponent(jLabel,getpixelposition(hFig).*[0 0 1 1],hFig);

      • Yair Altman March 17, 2015 at 10:59

        @Greg – you said you didn’t want the image to appear in the deployment folder, but that’s exactly what you did above…

    • Greg Mason March 17, 2015 at 11:32 Reply

      Sorry – maybe my vernacular was not correct. What I did not want was for the GIF file to be seen by the end user. They would only see the .exe, that way the GIF will always work whether or not they move the .exe between folders and they wouldn’t be able to change the location/delete the GIF either.

      When I use the deploytool as described with the code above, the end result is a just a single .exe file that can be moved and distributed yet still has a functioning GIF. The end user will only see the .exe which was my goal.

      • Yair Altman March 18, 2015 at 14:47

        @Greg – I assume that you are aware of the fact that the compiled binary is simply a self-extracting exe that anyone can open using winzip and see the internal image resources (although not the code – those files are encrypted).

  8. ME March 30, 2015 at 09:36 Reply

    thank you very much !!
    What if I want to hide a GIF that was already displayed ?

    • ME March 30, 2015 at 10:06 Reply

      … using a pushbutton

Leave a Reply
HTML tags such as <b> or <i> are accepted.
Wrap code fragments inside <pre lang="matlab"> tags, like this:
<pre lang="matlab">
a = magic(3);
disp(sum(a))
</pre>
I reserve the right to edit/delete comments (read the site policies).
Not all comments will be answered. You can always email me (altmany at gmail) for private consulting.

Click here to cancel reply.

Useful links
  •  Email Yair Altman
  •  Subscribe to new posts (feed)
  •  Subscribe to new posts (reader)
  •  Subscribe to comments (feed)
 
Accelerating MATLAB Performance book
Recent Posts

Speeding-up builtin Matlab functions – part 3

Improving graphics interactivity

Interesting Matlab puzzle – analysis

Interesting Matlab puzzle

Undocumented plot marker types

Matlab toolstrip – part 9 (popup figures)

Matlab toolstrip – part 8 (galleries)

Matlab toolstrip – part 7 (selection controls)

Matlab toolstrip – part 6 (complex controls)

Matlab toolstrip – part 5 (icons)

Matlab toolstrip – part 4 (control customization)

Reverting axes controls in figure toolbar

Matlab toolstrip – part 3 (basic customization)

Matlab toolstrip – part 2 (ToolGroup App)

Matlab toolstrip – part 1

Categories
  • Desktop (45)
  • Figure window (59)
  • Guest bloggers (65)
  • GUI (165)
  • Handle graphics (84)
  • Hidden property (42)
  • Icons (15)
  • Java (174)
  • Listeners (22)
  • Memory (16)
  • Mex (13)
  • Presumed future risk (394)
    • High risk of breaking in future versions (100)
    • Low risk of breaking in future versions (160)
    • Medium risk of breaking in future versions (136)
  • Public presentation (6)
  • Semi-documented feature (10)
  • Semi-documented function (35)
  • Stock Matlab function (140)
  • Toolbox (10)
  • UI controls (52)
  • Uncategorized (13)
  • Undocumented feature (217)
  • Undocumented function (37)
Tags
AppDesigner (9) Callbacks (31) Compiler (10) Desktop (38) Donn Shull (10) Editor (8) Figure (19) FindJObj (27) GUI (141) GUIDE (8) Handle graphics (78) HG2 (34) Hidden property (51) HTML (26) Icons (9) Internal component (39) Java (178) JavaFrame (20) JIDE (19) JMI (8) Listener (17) Malcolm Lidierth (8) MCOS (11) Memory (13) Menubar (9) Mex (14) Optical illusion (11) Performance (78) Profiler (9) Pure Matlab (187) schema (7) schema.class (8) schema.prop (18) Semi-documented feature (6) Semi-documented function (33) Toolbar (14) Toolstrip (13) uicontrol (37) uifigure (8) UIInspect (12) uitable (6) uitools (20) Undocumented feature (187) Undocumented function (37) Undocumented property (20)
Recent Comments
Contact us
Captcha image for Custom Contact Forms plugin. You must type the numbers shown in the image
Undocumented Matlab © 2009 - Yair Altman
This website and Octahedron Ltd. are not affiliated with The MathWorks Inc.; MATLAB® is a registered trademark of The MathWorks Inc.
Scroll to top