Welcome, guest | Sign In | My Account | Store | Cart
#!/usr/bin/env python
from __future__ import print_function
'''makes html with javascript to animate a sequence of images'''

__author__ = 'Brian Fiedler'
# This module can be imported to access the function makeanim. 
# Or it can be run independently as a script from the command line.
# Suppose the command "ls mydir/*.png" gives the list of files to be animated.
# python janim.py myimages/*.png > myanimator.html
# python janim.py -i listofimageurls.txt -o myanimator.html -t "rainfall animation"
# myanimator.html wll be viewable in a browser, but you may want to add more html to it.
# Or you can embed myanimator.html within another web page, with html code like:
# <object type="text/html" data="myanimator.html" width="930" height="680" >error message here</object>
# (The width and height in the above example is for 900x600 images, with controls at the bottom.)
# Alternative to using janim.py from the command line:
# files = glob.glob("pngs/*.png")
# janim.makeanim(files,outfile="myanimator.html",sortOrder=True,ctlOnSide=True,titlestring="rainfall animation")
# For a similar animator, but with more features, see http://www.ssec.wisc.edu/hanis/

def makeanim(files=[],ctlOnSide=False,revOrder=False,sortOrder=False,
    # files is a list of paths to the image files

    # possible to append more paths to files:
    if fileOfFileNames: # file with image file names, either on new lines or separated by white space
        urls = open(fileOfFileNames).read().split()
        files += [x.strip() for x in urls if x.strip()]

    if sortOrder: files.sort()
    if revOrder: files.reverse()

    nim=len(files) #number of image files

    #### some large template strings follow:

    top = """<html>
    // semi-colons are optional in javascript, and are often not included in this code!  
    var maxFrameNum=%d 
    var delay = 1000 // time between frames in milliseconds
    var frameNum = 0    // The frame counter: keeps track of current frame
    var timeout_id = null  // Allows us to stop the animation with clearTimeout( )
    var aniFrames = new Array()
    script = """

    document.onkeydown = myKeyDownHandler;

    function myKeyDownHandler(e){
        if (timeout_id!=null) {killAnimate()} 
    //  if (e.which==13) {Animate()} // oddly, the enter key seems to be reserved for repeating the last click  
        if (e.which==39 || e.which==40) {incrementFrame()} // rightarrow
        if (e.which==37 || e.which==38) {decrementFrame()} // leftarrow
    //    alert(e.which+" was pressed")

    // This function performs the animation. 
    function xanimate() {
        timeout_id = setTimeout("xanimate()", delay )  // Display the next frame after delay millisecs
    //A better way? http://creativejs.com/resources/requestanimationframe/ 
    function yanimate() {
        timeout_id = setTimeout( function() {
        }, delay );  // Display the next frame after delay millisecs

    function slower() {
        if (delay > 4000) delay = 4000

    function faster() {
        if (delay < 50 ) delay = 50

    function incrementFrame(){
        if (frameNum > maxFrameNum) { frameNum = 0  }

    function decrementFrame(){
        if (frameNum < 0 ) { frameNum = maxFrameNum  }

    // Note that we refer to the onscreen image and text using the id imageWindow and textWindow,  defined by us.
    function showFrame(){
        var str = "" + frameNum
        var pad = "000"
        var frameNumPad = pad.substring(0, pad.length - str.length) + str    
        document.getElementById('textWindow').innerHTML = frameNumPad // Display frame number as text 
        document.imageWindow.src = aniFrames[frameNum].src // Display the current frame image

    function killAnimate(){
    if (timeout_id) clearTimeout(timeout_id)

    form = """
    <form>  <!-- This form contains buttons to control the animation -->
        <input value="Slower" onclick="slower()" type="button">
        <input value="1 sec" onclick="delay=1000;" type="button">
        <input value="Faster" onclick="faster()" type="button">
        <input style="color: rgb(0, 0, 0); background-color: rgb(153, 255, 153);"
               value="Start" onclick="if (timeout_id == null) yanimate( );" type="button">
        <input value="Stop" onclick="killAnimate();" type="button">
        <input value="-1" onclick="killAnimate(); decrementFrame();" type="button">
        <input value="+1" onclick="killAnimate(); incrementFrame();" type="button">
        <input value="First" onclick="killAnimate(); frameNum=0; showFrame();" type="button">
        <input value="Last" onclick="killAnimate(); frameNum=maxFrameNum; showFrame();" type="button">
        &nbsp;&nbsp;<b id='textWindow'>000</b> 

    ### use the paths to images stored in files list to make javascript links to the images: 

    imagecode = """aniFrames[%d] = new Image();\naniFrames[%d].src = "%s";\n"""
    imagepaths = "" 
    for i in range(nim):
        imagepaths += imagecode % (i,i,files[i])

    # show the first image, before animation replaces it:
    firstimgtag = '<img name="imageWindow" src="%s" alt="your image should have been seen here!">' % files[0] 

    ### now put together the web page containing javascript and html for your animation:

    webpage = top % (titlestring,nim-1) 
    webpage += imagepaths
    webpage += script 
    webpage += "<body><center>\n"
    if ctlOnSide: #controls are on the left side of the image
        webpage += "<table><tr><td width=1>\n"
        webpage += form
        webpage += "</td><td>\n"
        webpage += firstimgtag
        webpage += "</td></tr></table>\n"
    else: #controls are below the image
        webpage += firstimgtag
        webpage += form 
    webpage += "</center></body></html>\n"
    if outfile: # write out the html file
        ouf = open(outfile,'w')
    else: # written the html file contents as a string
        return webpage

#### optionally process command line arguments for a call to makeanim
if __name__ == '__main__':
    import argparse 
    parser = argparse.ArgumentParser(description= "produces html with javascript for animation" )
    parser.add_argument("-s","--side", dest="ctlOnSide",action="store_true",help="put controls on side")
    parser.add_argument("--sort", dest="sortOrder",action="store_true",help="sorts the image order")
    parser.add_argument("--rev", dest="revOrder",action="store_true",help="reverses the image order")
    parser.add_argument("-t","--title", dest="titlestring",type=str,
                     help="title string in quotes",default="javascript animation")
    parser.add_argument("-i","--fof", dest="fileOfFileNames",type=str,help="name of file containing file urls",default="")
    parser.add_argument("-o","--outfile", dest="outfile",type=str,help="name of html output file",default="")
    parser.add_argument("files",help="paths to image files",nargs='*')
    args = parser.parse_args()

    if len(args.files) == 0:
        webpage = makeanim(args.files,ctlOnSide=args.ctlOnSide,revOrder=args.revOrder,sortOrder=args.sortOrder,
             titlestring=args.titlestring, fileOfFileNames=args.fileOfFileNames,outfile=args.outfile)
        if not args.outfile:

Diff to Previous Revision

--- revision 1 2016-06-01 23:51:36
+++ revision 2 2016-08-07 20:41:12
@@ -22,7 +22,7 @@
 # For a similar animator, but with more features, see http://www.ssec.wisc.edu/hanis/
-def makeanim(files[],ctlOnSide=False,revOrder=False,sortOrder=False,
+def makeanim(files=[],ctlOnSide=False,revOrder=False,sortOrder=False,
     # files is a list of paths to the image files