Web-browser viewable GUI animations of .PNGs, .GIFs, etc.

Creates javascript/html GUI-driven animation of still images (GIFs, JPEGs, etc.).
Updated 17 Apr 2017

View License

Editor's Note: This file was selected as MATLAB Central Pick of the Week

Let's say you have 24 .png graphics files you have generated in Matlab. You would like to view them as an animation, so you convert them to a movie format like .avi or .mpeg, with each graphics file being a separate frame of the movie.
There are three problems with the resulting movie:
(1) You find you can't view it on certain platforms or without installing a particular piece of software; bewildering messages about "missing codecs" appear on your screen when you try to view the movie on a Linux machine.
(2) The movie file is HUGE, despite consisting of only 24 frames.

(3) The image quality is much worse than in the original graphics files.

The solution to these problems is to view the animation with a javascript/html page that cycles through each individual graphics file in turn. Such a page is portable, being viewable in any javascript-enabled Web browser; its size is not much larger than the sum of its frames; and the image quality is the same as that of the original graphics files. The result is much like an animated GIF, except that the animation can be paused, sped up, etc., using the javascript GUI controls.

jsanim.m allows you to generate a browser-viewable javascript/html GUI page for viewing animations of any browser-compatible graphics file type (.gif, .png, .jpg, etc.).

jsanim.m has numerous options, but at its simplest, it can be called with the syntax:

where fileList is a cell array of filenames of image files. The resulting html file can be opened in a Web browser.

Version 2 allows more control than version 1; it has step forward, step back, fast forward, and rewind buttons, in addition to the play/stop control from version 1. It also allows rotation of images. Version 2 is basically just a wrapper for the online javascript tool hosted at vidmyfigs.com.

Cite As

Kevin Bartlett (2024). Web-browser viewable GUI animations of .PNGs, .GIFs, etc. (https://www.mathworks.com/matlabcentral/fileexchange/36052-web-browser-viewable-gui-animations-of-pngs-gifs-etc), MATLAB Central File Exchange. Retrieved .

MATLAB Release Compatibility
Created with R2016b
Compatible with any release
Platform Compatibility
Windows macOS Linux
Find more on Printing and Saving in Help Center and MATLAB Answers

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!
Version Published Release Notes

Calling syntax is somewhat different than for version 1; some input arguments are no longer accepted.

Bugfixes pointed out by TideMan. Now possible to change frameDelays and loopPauses from their default values.

Added some troubleshooting tips to the documentation.