Documentation for HAniS - the HTML5 Image AnimationS webapp

First release: November, 2014
Page updated: January, 2017

Current release version 3.7 (January 14, 2017)

Welcome to the homepage for the HTML5 AnimationS webapp (HAniS for short). This is a re-casting of the FLAniS Flash applet (which, of course was a re-casting of the original Java applet, AniS), done in HTML5. Why? Modern mobile devices no longer support Java or Flash. In addition, this version is coded in JavaScript (no relation to "Java") which has been standardized by an independent organization, rather than a company.

If you would like to test your browser's HTML5 capabilties, please visit HTML5 Test

What does HAniS do? Like it predecessors, it is a tool you can employ on your web pages that provides the ability to animate a sequence of individual images. It also lets you use overlays and provides many options for creating "hotspots", probing data, and the like. This version is coded entirely in JavaScript and uses the HTML5 standards so is usable on multiple platforms with modern browsers.

The HAniS Model is the same as it predecessors: once the program starts, it reads configuration information that persists throughout the run/session (like the controls and layout). If your content (image filenames, for example) is changing with time, and you want the user to be able to "refresh" the content, then you put the dynamic information into a file_of_filenames which is re-read when a "refresh" is done, and usually contains the updated image filenames (and perhaps other, dynamic content). There are a few different ways of specifying the configuration information, but the file_of_filenames is a text file that must reside on the server with your image files.

This document is the detailed information. If you want to take a quick look at the examples, please click here!. If you have questions or comments, please let us know! If you find errors or things that are not clear in this document, we would also appreciate hearing from you!

Quick Links in this Document

To run HAniS, you need these files:

  1. an HTML file that defines a <div> element where the display will appear that contains the size (width) specification and a mechansim to invoke the HAniS.setup() function that also names the configuration file (see below).
  2. the configuration file that contains the options ("parameters")
  3. the minimized JavaScript (hanis_min.js) file.
  4. Optionally, you may also have a "file_of_filenames" and perhaps some other supporting files to enable certain features (like the "probe"), as detailed below.

Downloading the code: You may pick up this ZIP archive file which contains the hanis_min.js file mentioned above, as well as the easy-to-read source code.
Here is a skeleton HTML file. This very basic skeleton is to illustrate a) how to embed the HAniS display in your HTML, and b) how to invoke it.
<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
  <title>My Animation</title>
  <script type="text/javascript" src="./hanis_min.js"> </script>

<body style="width:800px;" onload="HAniS.setup('config.txt','handiv')">

  <div id="handiv" style="width:800px;background-color:#808080;">

  <font size=-1>This webapp is Copyright© 2014, 2015 by Tom Whittaker
You may use the above as a template, since very few changes will be needed. If you copy this, then you must:

HAniS public functions

There are a few functions that you may call while HAniS is running:

The configuration file

This is a text file you create that contains the parameters and their values. We have tried to keep the same keyword values in this version. The general format is identical to previous versions:
keyword = value, value, value
Note that each parameter and its arguments MUST be on one line of text in the file! There are no "continuation" lines or marks available!

Here is an example of a very simple configuration file:

filenames=img0.png, img1.png, img2.png, img3.png
controls = startstop,step,zoom

What follows is an example of a more complex configuration file that includes styling of the control widgets and uses overlays and the file_of_filenames, etc.:

#This is a comment
dwell = 500
auto_refresh = 1
file_of_filenames = fof.txt
controls = startstop,step,refresh,overlay
controls_style = padding:5px;background-color:green;
controls_tooltip = Start/Stop the animation, Step one frame, Refresh images

startstop_labels = Animate, Stop Them, 120
startstop_style=left:10px;background:linear-gradient(blue, white);

overlay_labels=Reflectivity, Visible Satellite, Watches
overlay_transparent_amount = 100, 100, 40
overlay_tooltip = First overlay, Second overlay, Watch overlay

bottom_controls = speed,zoom, toggle
bottom_controls_style = padding:5px;background-color:pink;
bottom_controls_tooltip = Decrease or increase animation rate, click to zoom, Click on frame square to remove from animation; click again to add it back

toggle_size = 20,10,20

Names and Definitions of Controls and Parameters

The rest of this document describes the parameter names and values needed to drive the HAniS webapp. We begin with the controls and then describe the specification of the filenames of the images.


This controls parameter will position the controls above the image window. If you would like some (or all) of the controls below the image window, use the bottom_controls tag, as in:

Note: You must not specify the same control in both the controls and the bottom_controls parameters!

If you want to have your controls appear on more than one horizontal line, preceed the first one on the new line with a /. For example:
controls=startstop, step, speed, /framelabel, looprock, refresh, overlay
would make two lines of controls, with the "framelabel" being the first one on the second line. You may have more than one split. You may also use this on the bottom_controls.

Here are the details about each control:

Parameters that may also be used (details for those parameters related to filenames and overlays appear after this section):


Every control may have an optional "tool-tip" associated with it. The format is:

controls_tooltip = value for the tip of first control, tip for the 2nd one, etc.
The order of the tooltips must be identical to the order of the controls names in the controls parameter.
bottom_controls_tooltip = Click to step one frame forward/backward, Click to go to the
first or last frame,.....
specifies a "tooltip" for each of the bottom_controls. If you use the "toggle" control, there must be a place-holder "tooltip" in the list.
overlay_tooltip = Enable topographic display, Enable radar reflectivity display, Show the roads, Show the watches and warnings,....
specifies a "tooltip" for each of the overlays. If you use the "hidden" option on an overaly, there must be a place-holder "tooltip" in the list.



Styling of the "control" widgets is generally done with CSS strings. Most on-screen styling (for example, the display of the "probe") follows the format used in FlAniS..with the exception of the "font".

All control widget also define a CSS "class" which is the name of the control. This allows for externall-defined styling to be defined as well.


Styling of the widgets (buttons, etc) can be accomplished in two ways:
  1. Using the generalized controls_style and/or bottom_controls_style parameters. These are CSS strings, mostly useful for setting background colors, etc..
  2. Using the buttons_style parameter to set styles for all control buttons. This is a CSS string.
  3. Using a _style parameter for an individual control (e.g., startstop_style=). These are also CSS strings (e.g., width:100px;background-color:orange;)
  4. Most on-screen displays also have their own styles:
  5. divcan_style for the <div> element which contains the image window
  6. imagecan_style for the canvas element which contains the images and supplemental graphics (lines, messages, etc). Use this with some caution!
The styling specification is done using CSS. Numerous examples are provided in the Examples section.

Miscellaneous parameters

debug = true
Enables a "debug pop-up window" that will contain information about errors encountered, and other information that might be helpful in setting up your animations. The window may be moved around by dragging on the "title bar". "Pop-Ups" must be enabled in the browser. The default value for this parameter is "false".
use_progress_bar = true
By default, when images are being loaded from the server, a "Progress Bar" is displayed on the screen that shows the progress of loading the images. Set this to "false" to disable this.
initial_message = Please wait for the images to load<br>and then you may use the controls. <p>These images show the latest available<br>data from the server.<p>Click here to dismiss this message.
This causes a pop-up window to appear when HAniS starts up. You may use full HTML tags for formatting. The overall style may be specified by using the initial_message_style parameter, setting the CSS values. The default is:

   initial_message_style = background-color:red;top:10px;left:10px;height:100px;width:200px;

The pop-up will be dismissed when the user clicks on the window. You may also specify the number of seconds the window will remain visible using the initia_message_timeout parameter. For example

   initial_message_timeout = 5

will keep the message visible for 5 seconds. If you specify auto for the value, the window will be removed after all images are loaded.

Specifies that the display "window" for the images will be 800x400. The actual images will be re-scaled to this size.

To inherit the size of the <div> element for HAniS, you may use the form: window_size=div .

enable_smoothing = t
Setting this value to "t" (true) will cause images to be rendered with "smooth" edges using whatever built-in algorithm is available for the browser. The default is "f" (false), so images will not be smoothed.
dwell = 500 
specifies that the nominal, default dwell rate for each frame is 500ms. You may also specify the minimu, maximum and step for the speed buttons. For example:
    dwell = 500, 20, 2000, 50
indicates the minimum is 20ms, maximum is 2s, and the step-per-click is 50ms.
pause = 2000
pause on the last frame of a loop the additional number of milliseconds given (2 seconds in this example). The default is zero.
start_looping = false
specifies that animation will not automatically start as the images are being loaded from the server. Without this option, the animation will start when the first image is received.

active_zoom = true
specifies that the zoom ability will always be active; this cannot be used in conjunction with the "zoom control". If you specify this parameter, user left-clicks on the image will zoom at that point, right-clicks will zoom out. While zoomed, the image may be roams by dragging the mouse around.

keep_zoom = true
specifies that the zoom level and position will be restored after a "refresh" is done. Without this parameter, the zoom is reset to the "un-zoomed" view.
zoom_scale = 3.4
sets the zoom scale factor to 3.4. The default is 1.0. This is the value that determines the zoom "step" for each mouse click. Note that a value of 10.0 approximates what the old AniS did.
maximum_zoom = 15.4
sets the maximum zoom factor to 15.4. This is useful if you want to prevent the user from zooming in "too far" (usually resulting in a highly pixelated display).
initial_zoom = 2.0,200,155
Specifies that the image window will initially have the zoom factor set to 2.0 and that it will be centered at x=200, y=155. If the center point parameters are not supplied, it will be centered at the center of the original image.

When using window_size or automatic resizing, you can specify: initial_zoom=auto. This will cause the zoom factor to be computed so as to initially show the "full resolution" image when HAniS starts. (You may also specify the center point when using the "auto" mode.)

Note that when specifying this option, the "zoom" control will automatically be started with the zoom "on".

overlay_zoom = y,y,y,n
specifies whether an overlay will be zoomed along with other images. If the value is "y", then the overlay will be zoomed. This is the default.

If the value is "n" then the overlay will NOT be zoomed. This is useful for overlays which are legends, since the legend information will remain on the frame during zoom and roam.

If the value is "d" then the overlay will be NOT be displayed when the scene is zoomed. It will only appear when the scene is "un-zoomed".

high_res_zoom = 2.0, 2.5
specifies that high resolution images will be used when the user zooms higher than 1.8x and 2.5x. Note: in order to maintain the locations, the high resolution images must be exactly these ratios larger than the original images. For example, the "2.0" means that if the original image is 500x500, the high resolution one must be 1000x1000.
high_res_basemap = bgres1.png, bgres2.png
specifies that two higher resolution images are available for the "background" image. These will be used when the user zooms higher than the values specified in the "high_res_zoom" parameter. Note: this can only be specified in the file_of_filenames, and must be the same on each "frame" of the animation (for example, geographically-related images like map boundaries or roads).
high_res_overlay = 3,ovres1.png, ovres2.png
specifies that two higher resolution images are available for overlay #3 (the third one in the overlay list), and will be used when the user zooms to a higher value than specified in the "high_res_zoom" parameter. Note: this can only be specified in the file_of_filenames and must be the same on each frame of the animation (for example, roads or city names).
coordinates = 43., -100., 30., -66.3
coordinates = PS, 60, 120, 33.5, 120.5, 6378137.000, 0.08181919157505, 5600., 1, 0, 36
coordinates = CE, 110., -4.4, 104.96, 206264.797, 35.84, 0, 36
coordinates = LCC, 55., 32., 90., 43.5, 101.5, 6378137.000, 0.08181919157505, 5000., 0,0 
Specifies the map projection information used with the location control. This may also be used with the file_of_filenames. There are 3 forms:
map_scale = 347.32
specifies the conversion from pixels to "physical units"
distance_unit = km
specifies the string to be appended to the "distance readout" when the distance control is used.
auto_refresh = 16
specifies that the base images will be automatically reloaded from the source every 16 minutes. If you want to be able to enable/disable automatically refreshing images, use the "autorefresh" control, described above.
sprites = spritefile.gif, 1,1, -16, -16, 19,1, 37,1, 1,19, 19,19, 37,19
specifies that the spritefile.gif file is an image file that contains (in this case) 6 individual "icons" (used in conjunction with the hotspot parameter, below). [Collections of images within a single file are referred to as "sprites".]

The order of the arguments is:

If the "w,h" values for an icon are listed as negative (the "-16,-16" in the example above), then all subsequent icons have that same size. If you later include another "w,h" values that are negative, then that becomes the width and height, etc.

You may also use an alternative form that is more suitable for icons arranged on a rectangular spritesheet.

 sprites = spritefile.gif, row, 10,20,20, row,8,20,20, 2,10,30, row...
Where each "row" signifies a row in the spritesheet. The width and height are then specified. Each time the "row" keyword is encountered, the x coordinate is set to 0 (zero) and the y coordinate is increment by the maximum height in the previous row.
hotspot = 10, 20, 50, 50, nopan/4, fof, mynewfof.txt, Click here for a new view
hotspot = 30, 500, 50, 50, nopan, popup, this is the pop-up message
hotspot = 110, 0, icon, lnkimg.gif, pan, link,
hotspot = 83.5, 92.1, sprite, 3, pan/2, popup, The message for the sprite icon
specifies four "hotspots" on the image display. This is normally used within a "file_of_filenames"; however, you may now use this within the config file as well (see note at the end of this section).

The parameters are specified in one of three formats:

  hotspot = x, y, width, height, pan, action, value [,tooltip]
  hotspot = x, y, icon, filename, nopan, action, value [,tooltip]
  hotspot = x, y, sprite, index, pan/overlay, action, value [,tooltip]

NOTE -- sensing a hotspot click action takes priority over zooming. If the user puts the mouse pointer on a hotspot and clicks, only the hotspot action will happen.

NOTE -- see "file_of_filenames", below, for additional information.

You may define the hotspot(s) in the main config file now. If you have more than one, however, you must make the name unique by appending a digit (or more). For example:

  hotspot2 = .....
  hotspot3 = .....
hotzone = 6, 0xff00ff, fof, mystuff/fof3.txt
hotzone = 6, 0xffff00, link,
hotzone = 6, 0x00ffff, popup, This is the popup message...
specifies that overlay #6 should be treated as a image with "hot zones". Usually, this image would be mostly transparent, with the "hot zones" having an opaque color. The colors specified above should exactlymatch the color of the pixels in the "hot zone". If you want semi-transparency, you must use the overlay_transparent_amount parameter (described below).

The action (fof, link, popup) are identical to the "hot spots", noted above.

NOTE: this can only be used in a file_of_filenames!!

hoverzone = 0xfe00fe, fof, temp/fof.txt, Click me, (100, 200, 200, 200, 200,100, 100,100, 100,200)
The polygon defined by the "x,y" coordinate pairs in the last parameter (inside the parentheses) using the color "#fe00fe" will appear whenever the user moves the pointer over the polygon region, and zooming is not enabled. If the user clicks in the region, a new file_of_filenames will be loaded from the file temp/fof.txt. Other "actions" are "link" and "popup" as defined above.

NOTE: this can only be used in a file_of_filenames!!

overlay_allow_hoverzones = y,y,n,y,n
This parameter is used to disable the display of hoverzones when the designated overlays are enabled. The parameter values correspond to the "overlay number", and must include place-holders for any hidden overlays. The default for all overlays is "y" (meaning that hoverzones will always be displayed and will take precedence over any hotzone defined by an overlay.
show_image_file = true
This will cause the show control to pop up a new tab or window with the image from the original URL. This only works with "base images" and not overlays. Do not include this parameter unless you want this feature!
show_prompt = Right-click to save or copy the image<br> <font size='-1'>(to save in some browsers, you may need to first 'Open in New Tab')</font> <p>
Will show the text (using HTML markup) at the top of the image displayed when the show control is used, instead of the default. Presently, some browsers will require an extra step, as stated above, if the user wants to "Save As" the image. (Note the text above is the default....)
enhance_filename = myenhtables.txt
The named file contains one or more "enhancement tables" that define how to colorize gray scale images. Click here for more details. This parameter may also be named "enhance_table". When the enhance control is used, this parameter is required.

Do not use the probe_table parameter when this parameter is used!

overlay_enhance = 3
The overlay number 3 (the first overlay is #1) will be used with the enhance tool to provide colorized views of this gray-scale image. If this parameter is not specified, then the enhancements will be applied to the background ("base") images instead. See "enhance_filename".
auto_enhance_background = 3
The enhancement table number 3 (the first table is #1) will be used to automatically enhance (colorize) the gray-scale background images. (Please note this may reduce the loop speed for larger images!)
auto_enhance = 2,4,x,1
The first 2 overlays (as gray-scale images) will be automatically colorized (enhanced) using table numbers 2 and 4. The 4th overlay will be enhanced using table number 1. The 3rd overlay will not be enhanced. (The first table entry is 1.)

(Please note this may reduce the loop speed for larger images!)

probe_table = probevalues.txt
Names the text file that contains the look-up values for the probe. See the example for details on the format of this file.

Do not use the enhance_filename parameter when this is used!

probe_undefined = Missing, 2
Specifies that the displayed value for pixels whose RGB values cannot be found in the table will say "Missing". The optional value of "2" says that if a match cannot be made in the table, see if any table entries have an RGB value within 2 counts of the pixel value; if so, show that value.
overlay_probe_table = 2, 4, 0, 3
Specifies that the first overlay will use Table #2, the 2nd overlay will use Table #4, the 3rd overlay is not to be probed, and the 4th overlay will use Table #3.
transparency = 255,0,127
Speicifies that for every overlay image, any pixel that has an RGB value of (Red=255, Green=0, and Blue=127) will be made transparent. Use this with caution for large numbers of overlay images.

If the color value is a gray shade (where Red=Green=Blue) then you may use the form: transparency = 255 (which would be "white").

overlay_transparent_amount = 100, 40, 20
The non-transparent pixels in overlays should be set to the opacity percentage indicated. In this case, the first overlay (see overlay_labels) is 100 opaque, the second is 40% and the third is 20%. 0 = totally transparent (you will not see anything! 100 = totally opaque (what would normally happen).
overlay_preserve=0,0,639,49, 610,0,639,479
specifies that when images are zoomed, the two rectangular areas specified (top 50 lines, right-most 30 pixels) should be preserved from the original overlay image. This is useful for showing labels and logos that are part of the original images. There may be one or more such rectangles; the number of values must be a multiple of 4.

The values of the coordinates are ordered: x_upper_left,y_upper_left, x_lower_right, y_lower_right. The (0,0) point for images is in the upper_left corner. The 'x' coordinate is horizontal, the 'y' coordinate is vertical.

You must also provide a list of which overlays this overlay_preserve should be applied to (see below), or no preserve will be done.

overlay_preserve_list=false, false, true, false, true, false
Specifies which overlays the "overlay_preserve" regions should be applied to. You may use "t" and "f" for the values as well as "true" and "false".
image_preserve=0,0,639,49, 610,0,639,479
Specifies the region(s) in the background images that should be preserved when the images are zoomed. (See above.)
hide_bottom = 24
The bottom 24 lines of a zoomed image will be hidden when the image is zoomed/roamed. This is usually used with the image_preserver parameter to prevent annotation lines on the bottom of an image from appearing in the zoomed and roamed display, when these annotation lines have been "preserved".
hide_top = 31
The top 31 lines of a zoomed image will be hidden when the image is zoomed/roamed. This is usually used with the image_preserver parameter to prevent annotation lines on the top of an image from appearing in the zoomed and roamed display, when these annotation lines have been "preserved".
overlay_spacer = 10, 20, 1, 19
Add an extra 10 pixels to the spacing to the left of the first overlay checkbox, 20 pixels between the 1st and 2nd, just one pixel between the 2nd and 3rd, and 19 pixels between the 3rd and 4th. Values given are treated as a CSS style "margin-left:".
overlay_order = 2, 3, 4, 1
Defines the "stacking order" for overlays in the display. Without this parameter, overlays are stacked in the order given in the overlay_labels parameter, with the first overlay being on the bottom and the last one at the top. By using the overlay_order parameter, you change the ordering. Here, the 4th overlay will be on the bottom and the 3rd will be on top. The values are the stacking order (1 at the bottom). The list is in order of the overlays (so the first item on the list is the stacking order for the first overlay).
overlay_clear = n, z, s
Specifies that when a new file_of_filenames is loaded, whether the visible state of the overlay shall be set to "off". Values are: "n" = never, "s" = if a hotspot, 'z' if a hotzone or hoverzone.
check_image_size = f
This will disable the checking of the dimensions (height and width) of images are they are read. By default, all images MUST be the same size as the first image read; otherwise, they are treated as "missing". USE WITH CAUTION!

Styling Labels and Related Parameters

Each of the following parameters allows you to specify alternate labels for many of the controls. For those controls having more than one label, you may also specify a 3rd parameter which is the width (in pixels) of the button -- this can be helpful to avoid any automatic resizing when toggling button states.

For the "...labels_colors" parameters, the first three values define the colors for the "active" state of the button and are the a) text, b) top portion of the button, and c) bottom portion of the button (the colors are automatically scaled between these). The optional second set of 3 colors define the "in-active" state colors; the default is off-white.

times = 1200,1300,1400,1500
Specify the times (hours and minutes, HHMM format) for each of the images for use only with the extrap feature. There must be one item for each frame.
Specifies that the 'times' required for the extrap feature should be picked up from the filenames specified in the file_of_filenames. There must be one specification of:
in the template, as this matches 4 digits and the parentheses indicate the value is the time (HHMM format). In this case, the pattern will match the first occurance on a line in the f_o_f that has 6 digits, followed by ".jpg". So if a line looks like this:
then the time for this image would be picked up as "0300".

If you imbed the times in the file_of_filenames using the "FlAniS method" of enclosing the time in curly brackets (like: backimage.png {1330} overlay=....), then you must now use this:

times_label_style = 0xffff00, -5, CDT, 0x222, 14px arial, true
Provide for altering the values displayed on the "extrap" display. The parameters are:
color, UTC offset, timezone label, background_color, font, AM/PM (=true) The optional "UTC offset" may be a decimal value (e.g., -5.5), and the "timezone label" is optional. Both foreground and background colors are in the form: 0xRRGGBB (RR=red, GG=green, BB=blue), although you may also use color names (e.g., red, green, etc).. Finally, the 'true' indicates that times should be labeled with "AM" or "PM" (12-hour clock), instead of a 24-hour format.
extrap_prompts = Click on target's initial position,Click on target's final position,Move pointer around or click here to select target
The extrap function has three states. This parameter allows you to change the prompting text for these. You must supply all 3 prompts.
to_from_lock = false
Specifies that the extrapolation feature will show times along a line from the pointer position. A value of true would reverse this.
overlay_labels_color = white, red, white, white, green, #f30
specifies the color of the text for the overlay_labels on the checkboxes. There must be one specification for each declared overlay, even if one is "hidden" or "always". The colors may be a name, or the form "#RRGGBB" or "#RGB".
probe_display_style = 0x101010, 0xf0f0f0, 14, 1, mm/h, Rate=
Define the color of the background (0x101010), and the foreground (0xf0f0f0) for the probe readout. The font size should be 14. The last 3 parameters are optional since they may be defined in the associated probe table: number of decimal places to show (2), the units (mm/h), and a label prefix (Rate=). As shown, the resulting probe readout would be of the form: Rate=23.58 mm/h
setframe_label = Image Frame Number *
set the template to use for labelling the "setframe" control slider/scrollbar. The given string of characters must contain an asterisk ("*") character; the actual frame number will replace this when displayed.
frame_labels = label for 1, label for 2, ...
Specify the labels to use for the framelable control. There must be one label for each "frame".
mark_prompts = Click on frist point to mark, Save points, Remove last point
When the mark mode is enabled using the mark control, these are the on-screen prompts that the user will see.
mark_prompts_style = 12pt arial [,white]
This sets the font for the prompts and, optionally, the color of the marks and lines. The prompts will always be white letters with a black background.
toggle_size = 5,10,3
this sets the toggle control's little boxes width to 5, the height to 10, and the spacing between them to 3. This can be very helpful if you have a large number of frames and don't want to make your webapp width too large just to accomodate these boxes.
toggle_colors = blue, red, orange
this sets the colors of the 3 states for toggle control's little boxes. The defaults are blue, red, shown, for "on", "off", "frame showing".

Setting non-default button and widget labels

Most also (optionally) end with the value of the "width" of the control button:
startstop_labels = Start, Stop, 20
startstop_style=font-weight:bold;position:absolute;top:20px;left:100px;background:linear-gradient(blue, white);

looprock_labels = Loop, Rock, 20

autorefresh_labels = Disable Auto Refresh, Enable Auto Refresh, 30  
refresh_label = Refresh

zoom_labels = Zoom, Un-zoom, 30

location_labels = Show Location, Hide Location, 100

extrap_labels = Extrap, Normal, 40

probe_label = Readout, 25

step_labels = Backward one, Forward one
step_style = height:25px;width:25px;

firstlast_labels = First, Last, 30

speed_labels = Slower, Faster

show_labels = Capture Image, Capture Image

Using a Base Address for Files and/or Images

The following parameters specify the prefix to be used on the filenames when fetched by HAniS, except as noted. The config file never uses these prefixes.

image_base =
this directs that the base URL of the image files (and the file_of_filenames, if used) should be the value given. The default URL is the directory containing the HTML. Note that the hostname in the specified URL must be the same as the hostname where the webapp is read from.

Note that if this is a directory reference, it MUST end with a slash character (that is: / ).

image_only_base =
sets the base URL of the image files, but not the file_of_filenames. See above.
overlay_base =
this specifies that the base URL of the overlay image files should be the value given. If this is not specified, but the image_base_ is specified, the image_base_ will be used. Note that the hostname in the specified URL must be the same as the hostname where the webapp is read from.

Note that if this is a directory reference, it MUST end with a slash character (that is: / ).

Image file names

All the image files can be in GIF, JPEG or PNG formats. The files identified using the parameter names described in this section should fill the desired window. If used, overlays should be the same size and have the same geometry as these "background" images.

For the background images, the image files may be specified in one of three, mutually exclusive, ways.

  1. Using a "root" name, to which successive numbers are appended to create the actual filenames:
       basename = file
       num_frames = 4
       base_starting_number = 0
    In this case, the root name is file and since there are 4 images specified with the numbering starting at 0, the actual filenames must be: file0, file1, file2, and file3. Please note that the default base_starting_number is zero, and so it would not have to specified in this case...

    Also, please see the Note below about this form and wildcards

  2. Using the filenames themselvels:
       filenames = file0, file1, file2, file3
  3. Using a file which contains a list of the image filenames (one per record)
       file_of_filenames = name-of-file-containing-filenames
    where the file "name-of-file-containing-filenames" contains lines of text that are in the form:
    Lines beginning with # are ignored, so you may put comments into your file_of_filenames.

    NOTE: If you want to specify an optional frame label (see the controls section above), you may put the value with quote marks after the filenames. (The label may, optionally, contain a date-time to be reformatted for the user's timezone -- see "frame_label", above.) For example:
        file0 "label one" 
        file1 "label two" 

    NOTE: if you are using overlays, then you may put them into the file_of_filenames as well. Please see the section, below, on overlays.

    NOTE: if you would like to re-define hotspots in the file_of_filenames, use any of the forms specified in the definition of the parameter "hotspot" (above). Some examples:

        hotspot=x,y,w,h,pan,fof,mpx_ncr20090405.txt, Click here to load new data
        hotspot=x,y,icon,himage3.png,pan,popup,This is the popup text and may be  in bold
        hotspot=x,y,icon,hotimage1.gif,nopan,link,,Click here to open a link to the SSEC homepage

    You may also re-define the "map_scale" parameter within the file_of_filenames.
NOTE: For the first form (specifying a "basename"), you may also use a wildcard format. There are two forms of this, one using a single * (to substitute numbers 0,1,2...,10,11,.. at that point) and the second using one or more ? (to substitute the numbers with leading zeroes for all the ? marks). For example, if you say:
   basename = file*.gif
the actual filenames must be: file0.gif, file1.gif, file2.gif, and file3.gif

You may also use the form:

   basename = file????.gif
the actual filenames in this case must be: file0000.gif, file0001.gif, file0002.gif, and file0003.gif

Note that in both these cases,

NOTE: For background images that are changing on the server, but have the same filename, you may specify the parameter


to force the image(s) to be reloaded when a refresh is done. Otherwise, whatever caching may be used by the browser will likely be employed.


You may also use overlays -- one or more images that are (optionally) displayed on top of the base image, usually in such a way that part of the base image shows through. For example, a map or plotted data may be an overlay. In order to let some of the base (background) image show through, you must have the background of your overlays be "transparent". Presently only PNG and GIF image formats permit this. You may also specify the opacity/transparency of the non-transparent portions of overlay images -- see the overlay_transparent_amount parameter (above).

You may also specify the color of the labels for each overlay using the overlay_labels_colors parameter (above).

In addition, you need to specify the overlay control, and provide a few more parameters:

Overlay file names

Note: If you are using the file_of_filenames for the image files, you must use that method for specifying the overlay filenames as well! (See below...)

  1. If you are not using the file_of_filenames for the background image file(s), you may use the overlay_filenames parameter. The grouping of names -- commas separate the overlays and ampersands separate frames for each overlay.
       overlay_filenames = ofileA0 & ofileA1 & ofileA2 & ofileA3, ofileB0 & ofileB1 & ofileB2 & ofileB3, ofileC0 & ofileC1 & ofileC2 & ofileC3
    where the digits refer to a "frame number" and the letters (A,B,C) refer to an "overlay number".
  2. You may also use a text file (the "file_of_filenames" form) to specify all the filenames. (As mentioned, this form is required if you are also using the file_of_filenames for the background/base images). To use overlays with this form, the filenames for all the overlays for one frame appear on one line.
          file0 overlay=ofileA0, ofileB0, ofileC0
          file1 overlay=ofileA1, ofileB1, ofileC1
          file2 overlay=ofileA2, ofileB2, ofileC2
          file3 overlay=ofileA3,ofileB3, ofileC3
    NOTE: You MUST supply all overlay file names for each frame, even if the filename is repeated!!

    NOTE: If you want to specify an optional frame label (see the controls section above), you may put the value with quote marks between the filenames and the keyword that follows. For example:
        file0 "label one" overlay=ofileA0, ofileB0, ofileC0
        file1 "label two" overlay=ofileA1, ofileB1, ofileC1

Software Updates

Since the first release version, here is a summary of changes:

Significant differences between FlAniS and HAniS

Join the HAniS mailing list

If you would like to get notified of updates to HAniS, send an message using this form. and we'll get you signed up. Note this is the same list that is used for AniS and FlAniS as well -- it's just one big, happy family...

We are grateful to the Space Science & Engineering Center (SSEC) at the University of Wisconsin-Madison, for their continued encouragement and for providing hosting for HAniS and the mailing list.

Contributed code

Additional code was contributed by Catalyst IT. Map projection code was derived from the mapx library from the National Snow and Ice Data Center in Colorado.

Copyright Notice

The software described herein, HAniS (HTML5 AnimationS), an HTML5-based animator for the web and is Copyright© 2014-2017 by StormQuest Technologies and Tom Whittaker.

This program was developed through funding provided by StormQuest Technologies.

This program is free software; you can redistribute it and/or modify it but you may NOT repackage and sell it.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

The developers or their employers are not responsible for any and all ramifications, etc., which may result from using this software, or software derived therefrom. Furthermore, you agree to hold us harmless from any consequences related to the use of this software.

That's it.