Documentation for HAniS - the HTML5 Image AnimationS webapp

First release: November, 2014
Page updated: May 20, 2024

Current release version 4.56 (May 20, 2024)

Just get the ZIP file

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...which itself was a spinoff of the VISITview teletraining package), 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.

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

Quick Start

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.

The HTML format

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>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Animation</title>
  <script type="text/javascript" src="./hanis_min.js"> </script>
</head>

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

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

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

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
debug=true
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
buttons_style=padding:5px;background:linear-gradient(white,blue);vertical-align:middle;margin-left:10px; font-family:arial;font-size:18px;padding:5px;border-radius:10px;

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

overlay_labels=Reflectivity, Visible Satellite, Watches
overlay_transparent_amount = 100, 100, 40
overlay_labels_style=font-family:arial;color:white;font-size:20px;padding:2px;background-color:green;
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

speed_style=width:40px;
zoom_style=width:120px;
toggle_size = 20,10,20
Finally, information about specifying colors in the configuration file. In HAniS, colors maybe specified in any of the following ways (each of which is a string of characters):

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.

Controls

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.

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

Tool-tips

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.

  

Style

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

By default, all control widgets also define a CSS "class" which is the name of the control (or the control name followed by the state -- e.g., looprock loop). This allows for externally-defined styling to be applied as well. To avoid conflicts with other stylesheets, you may disable this by using the parameter:

set_className = false

Or define a stylesheet that is targetted to the <div> element containing the HAniS animation, and over-ride other specifications (e.g., #handiv.loop).

Note:

Styling of the widgets (buttons, etc) can be accomplished in a few 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;). For controls that have two "states" (like startstop or zoom, you may specify two CSS strings, separated by an ampersand. For example: width:100px;background-color:orange;&width:100px;background-color:blue;

Most on-screen displays also have their own styles: It is a often CSS string (e.g., background-color:pink;). Here are some details (details can be linked from the Other parameters link above.

  1. popup_window_size=800,300 sets the width and height of the parent window.
  2. popup_style=background-color:red;font-size:36pt; sets the background color and font size for the "popup" window.
  3. setframe_style defines the style of the setframe control slider
  4. setframe_label_style sets the style for the textual part of the setframe control display. This is a CSS string.
  5. framelabel_style specifies the CSS styling for the "framelabel" display -- usually the height and width of the box.
  6. checkbox_style is a CSS string for the "checkbox" used for the "overlay controls" -- this is useful only to set the size of the actual checkbox (e.g., height:20px;width:20px;) and may not be supported by all browsers!
  7. divcan_style for the <div> element which contains the image window
  8. imagecan_style for the canvas element which contains the images and supplemental graphics (lines, messages, etc). Use this with some caution!
  9. initial_message_style sets the CSS style for the "initial_message" window.
  10. coordinates_display_style defines the style for the display of the cursor coordinates.
  11. distance_display_style defines the style for the display of the "distance" value.
  12. probe_display_style defines the style for the display of the "probe" value.
  13. times_label_style defines the style for the display of the "time" values.
  14. dirspd_display_style defines the style for the display of the "direction and speed" values.
  15. coordinates_display_style defines the style for the display of the "coordinates" values.
  16. tipbox__display_style defines the style for the display of the "tooltip" box.
  17. mark_prompts_style defines the style for the display of the "mark" control prompts..
  18. fadebar_style for changing the color, width, size, style and position of the fade control bar.
  19. slidebar_style for changing the color, width, size, style and position of the slide control bar.
Many of the styling specifications are done using CSS. Numerous examples are provided in the Examples section.

The style of the pointer (cursor) is left to the CSS type "default" except for when using the "extrap" mode. However, you may specify alternate style for the following modes as well:

In each case, you may specify a style other than "default". For example:
probe_cursor = crosshair

If the user invokes more than one mode at one time, HAniS will show the cursor style of the last one selected.

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.

window_size=800,400

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 . In this configuration, HAniS will also "fill" the available space when the image is zoomed/panned, as long as the aspect ratio is not changed. This will also be adjusted if you are using "dynamic sizing" of the browser window.

Normally, this is used with the "dynamic sizing" as illustrated in this example.

enable_smoothing = true

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.

overlay_smoothing = t, t, f, f, t, f

This is used to specify the smoothing for individual overlays. "t" (or "y") indicates the overlay should be smoothed when zoomed; whereas, "f" (or "n") indicates the overlay should not be smoothed. Without the "overlay_smoothing" parameter, the value of the "enable_smoothing" will be applied to all overlays.

dwell = 500

specifies that the nominal, default dwell rate for each frame is 500ms. You may also specify the minimum, 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 [,4500]

pause on the last frame of a loop the additional number of milliseconds given (2 seconds in this example). The default is zero. The optional second value is used with the start_looping parameter when specifying a "starting frame"...this value will keep the starting frame visible for the specified number of milliseconds (or about 4.5 seconds for the 4500 shown))))).

prevent_shortcuts = true

specifying this parameter will prevent HAniS from using keyboard shortcuts (spacebar, left- and right-arrows, and ALT+R and ALT+C). This will allow keyboard events to pass through; otherwise, HAniS will prevent keyboard events from passing through.

List of keyboard shortcuts:

keyboard_propagate = true

This will allow HAniS to act on some keystrokes, as noted above, but then pass these event to the browser. Use with caution...

no_initial_focus = true

This will prevent HAniS from requesting the page's "focus" when starting. Requesting the focus can result in an undesirable page "scroll" at times.

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.

You may also specify the frame number to show, as an optional second argument (e.g., start_looping = false, 7). The default is "1", the first frame. When you use this form, HAniS will also give priority to requesting the images for that frame from the server.

You may also specify a 3rd parameter that affects the looping state after a refresh (manual or auto) is done. If the 3rd parameter is present, then the "looping state" when the "refresh" is done will be preserved. If this 3rd parameter is true then after a refresh, the designated frame (above) will be shown. If the value is false, then the frame being viewed when the refresh was done will not be changed. An example: start_looping = false, 7, true

start_rocking = true

specifies that animation will start up in "rocking mode". You must use this in conjunction with the looprock control.

active_probe = true

specifies that the data probe will always be active; this cannot be used in conjunction with the "probe control".

wheel_frames = true

specifies that the mouse "wheel" (and two-finger "drag") will be used to step through frames, and not to zoom in and out.

active_zoom = true

specifies that the zoom ability will always be active, unless the zoom control is also specified. In addition to "click-to-zoom" and "drag-to-roam", this parameter also enables zooming using a mouse "wheel" (if available) and by two-finger "pinching" (if touch is available).

If the zoom control is not used in conjuction with this parameter, then zooming is always enabled. If the zoom control is used, then zooming will only then be enabled. In this case, specifying the "active_zoom" parameter will also allow for pinch and wheel actions; otherwise, only tapping can be used for zooming.

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
zoom_scale = 1.5, 3.0, 5.0, 8.8
zoom_scale = hi_res

sets the zoom scaling values.

  1. zoom_scale = 3.4 sets the zoom scaling increment to 3.4. This means that for every click, the zoom factor will change by 3.4/10. (The default is 10, which is like the original value in AniS.) When using this form, you may also define the maximum_zoom parameter to set a limit.
  2. zoom_scale = 1.5, 3.0, 5.0, 8.8 defines the zoom scaling factor for each click. The first click will cause the image to be scaled by 1.5x from the original; the 2nd click, by 3.0x, etc.
  3. zoom_scale=hi_res will use the scaling factors from the defined high_res_zoom parameter to be used to define the scale factor for each click.

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

This value should be a multiple of the "zoom_scale".

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

cycle_zoom = true

will cause the zoom level to be reset back to the initialzoom value (usually 1.0) when the maximumzoom has been reached and the user clicks or taps again.

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 2.0x and 2.5x. Note: in order to maintain the locations, the high resolution images must be exactly these factors larger than the original images. For example, the "2.0" means that if the original image is 500x300, the first high resolution one must be 1000x600, and the 2nd must be 1250x750.

If you only want these images to be used when the user zooms (that is, without intermediate steps before the higher resolution image is used), then also set the parameter zoom_scale = hi_res

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 & 5,images/hires/, images/hires2/

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.

In addition, for overlay #5, the designated directories (for the two resolutions) contain higher resolution images with exactly the same filenames as the original overlays, so that you may have high_res image for each frame.

Note that the image_base parameter value (if specified) will be applied to these directory names as well as the images for overlay #3, above.

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:

If you are using images remapped from McIDAS, click here for an example of obtaining the correct projection parameters.

map_scale = 347.32
map_scale = 101.3, 83.1

specifies the conversion from pixels to "physical units". The second form gives scale in (x,y) order and should be used for non-equal scales.

show_bearing = to

specifies that when the distance line is drawn, the value of the angle (bearing) to the endpoint of the line will be shown as well as the distance. You may also specify "from" in order to get the bearing from the endpoint to the origin.

distance_unit = km

specifies the string to be appended to the "distance readout" when the distance control is used. If using coordinates, this value is also used to convert to the desired unit. Valid values are: km (kilometers), mi (statute miles), nm (nautical miles).

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.

sprite_filenames = one.gif, two.gif, three.gif

Lists the filenames of individual "sprite" images to be used with hotspots. The first image in the list is reference as "1", except as noted below.

Note you may append "/zoom" and/or "/animate" to the filenames. "/zoom" indicates that the icon image will be zoomed along with the display images. "/animate" indicates you are using an animated GIF image -- these are handled separately from all other display elements. Use some caution as defining many (meaning > 100) of these may impact the performance when the scene changes (e.g., zooming).

To avoid conflicts with filename paths, you may use "?" in place of "/" for these (e.g., "?zoom" or "?animate").

sprite_images_offset = 201

Specifies the indexing offset for the sprite_filenames images (above) when used in conjuction with spritesheets. The default is "1".

If this parameter is not specified and both sprites= and sprite_filenames= are used, then if an indexed overlay (see appending "/hotspot" to the overlay_label) is used, it will only use the images from the sprite_filenames. Hotspots defined in the config or file_of_filenames will only use the spritesheet icons.

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, http://www.ssec.wisc.edu/hanis, show homepage, sametab
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 [,tabname]]
  hotspot = x, y, icon, filename, nopan, action, value [,tooltip [,tabname]]
  hotspot = x, y, sprite, index, pan/overlay, action, value [,tooltip [,tabname]]

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

center_hotspots = true
will cause the "rectangular form" of the hotspots to be centered at the (x,y) coordinates given.

show_hotspots = true, #ffffff80
will cause a semi-transparent white rectangle to appear whenever the pointer is simply moved over a hotspot. Be careful when using this and defining a large number of hotspots!

hotzone = 6, 0xff00ff, fof, mystuff/fof3.txt
hotzone = 6, 0xffff00, link, https://weather.gov
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....)

anigif_filename = myanimation.gif

Defines the "default" filename for the animated GIF image. If not specified, "hanimate.gif" will be used.

anigif_prompt = Enter filename for the animated GIF

When an "anigif" is done, this will prompt the user to enter a filename; otherwise, the default (defined above) will be used.

mp4_quantization = 30

This sets the effective quality of the saved MP4 movie to a "medium" value. You may specify values from 10 (high quality, large file!) to 51 (very low quality, small file). The default value is 27. See this page for more information.

capture_filename = myimage.png

Defines the "base" filename for capture images. The default is "haimage.png".

capture_prompt = Enter filename for image

When a "capture" is done, this will prompt the user to enter a filename; otherwise, the default "haimage.png" will be used.

saveall_list = 0,1,4

This says to save the "base" (aka "background") images (value=0) and the first and 4th overlays, when using the saveall control. The default is to just save the base images.

saveall_filename = localimage#.png

This specifies the "template" for the local filename. If you include the # character, then that will be replaced by index numbers, starting at 0 (zero). If you do not include a #, then the index numbers will be appended to the given name.

saveall_prompt = Enter the local filename template to use

This will cause a pop-up prompt to solicit the template for the filename to use. Again, if a # is specified, that will be replaced by the index values.

NOTE: if neither the saveall_filename or saveall_prompt is specified, the default local filename will be the same as the original image filename. This will also be the case if the user does not enter a filename when the saveall_prompt is used.

saveall_toggle = true

When using the saveall control. setting this value to "true" will cause only the images for the enabled frames to be saved (that is, the toggle boxes are not red colored). The default is "false", so all will be saved.

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!

initial_enhancement = 3

The specified enhancement table (starting with #1) will be used to initially enhance the specified image (background of overlay).

keep_enhancement = true

During a "refresh", the enhancement will be remembered and then applied to the updated images.

enhance_prompt = Choose colorization

Changes the default drop-down menu first item from the default ("Pick Enhancement") to whatever is specified.

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!

This parameter may also be used in a file_of_filenames to redefine the probe table on-the-fly.

probe_undefined = Missing, 2 [,equal]

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.

If the optional ",equal" is appended, then a match will be made only to table entries that are equal (plus/minus the delta value specified) to the RGB of the pixel.

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.

probe_base_image=true

This specifies that probing should use the "base" images instead of overlay images (you cannot do both).

transparency = 255,0,127

Speicifies that for every overlay image (however, see below), 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").

transparency_list = 3,5,1,8

Specifies that the transparency value (above) will only be applied to the overlays listed (first overlay is "1"). With a large number of overlays, it is prudent to use this option!

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, 10,420,639, 479

specifies that when images are zoomed, if the first designated overlay in the overlay_preserve_list is "on", then two regions (0,0,639,49 and 610,0,639,479) will be preserved. If the second designated overlay is "on", then the region (10,420,639,479) in that image will also be preserved.

The values of the coordinates are ordered: x_upper_left,y_upper_left, x_lower_right, y_lower_right.

You must provide 4 points for each group. The ampersand (&) is used to designate more than one preserved region for a single overlay.

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.

If you are using a probe then the value of the probe will not be displayed for the first "preserved region". You can supress that using the optional parameter:
probe_hide=false

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". You may also use "a" (for "always") to indicate this preserved region should always be shown, whether or not the associated overlay is being displayed.

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 [,true]

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

The optional "true" parameter can be used when this "hide_" is used along with a "_preserve" that is opaque and covers spans across the entire bottom, to allow the image to show more when zoomed. For example: hide_bottom=24,true

hide_top = 31 [,true]

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

The optional "true" parameter can be used when this "hide_" is used along with a "_preserve" that is opaque and covers spans across the entire top, to allow the image to show more when zoomed. For example: hide_top=31,true

hide_left =18 [,true]

The left 18 pixels 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 left side of an image from appearing in the zoomed and roamed display, when these annotation lines have been "preserved".

The optional "true" parameter can be used when this "hide_" is used along with a "_preserve" that is opaque and covers spans across the entire left side, to allow the image to show more when zoomed. For example: hide_left=18,true

hide_right =23 [,true]

The right 23 pixels 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 right side of an image from appearing in the zoomed and roamed display, when these annotation lines have been "preserved".

The optional "true" parameter can be used when this "hide_" is used along with a "_preserve" that is opaque and covers spans across the entire right side, to allow the image to show more when zoomed. For example: hide_right=23,true

hide_background = true

This option will supress the display of the background image(s). It is useful when the background is blank. Note that you must at least one opaque overlay image when this option is used!

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

You may also use the parameter name overlay_zorder for bakcward compatibility.

If "animated sprite icons" are used, they will appear on top of the stack, regardless of the order specified by the overlay_order parameter. See below.

overlay_ontop = 6

Indicates that overlay #6 will be displayed on top of everything else in the display, including any "animated sprite icon images". This is primarily useful for "navigation widgets" that use hotspots to all the user to change the scene (usually invoking a different file_of_filenames that changes to a different geographic region).

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!

use_for_all_frames = 3,5, 0,1

The values are pairs of overlay and frame numbers (with overlay #0 refering to the "base" images). For the specified overlay, only image identified by the "frame number" will be read and used for all frames. In the example, overlay #3 (numbering starts at 1) will only use the image specified for frame #5 for all frames in the loop. Similarly, for the "base" images, only the image named for the first frame will be used for all frames. NOTE: you must still have placeholders for the unused image filenames.

overlay_slice = 2,5,7

This parameter is used only in the config file. It specifies which overlays will be "sliced" (resampled) when read and the slice parameter is designated in the "file_of_filenames". Note that when an overlay is specified herein, the "check_image_size" will not be applied to the images in that overlay.

slice = 100,130, 480, 321
slice = 100,130, 480, 321, 0, 0, 200, 100

This parameter specifies the domain from the original image(s) that should be "sliced out" and used. This parameter is only available in the "file_of_filenames". The slicing will be applied only to those overlays designated in the overlay_slice parameter (above).

The values are the x,y coordinate of the upper left and lower right, respectively.

In the second form, the x,y coordinates in the target frame are specified. By default, these are the size of the frame; however, this parameter gives you the option to map the image into a subset of the frame.

redirect = ../myotherdata/, 2,5, 7, 9

This parameter allows you to over-ride the "image_base" parameter (or the default) for the specified overlays. This is only available in the "file_of_filenames". The designated overlays will be fetched from the designated path.

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.

extrap_times_filename = mytimes.txt

The times and associated frame numbers will be read from "mytimes.txt" file. Each line of this file looks like: 

1 2017133 16:44:29
Where the "1" is the frame number, the "2017133" is the Julian date (ignored), and the "16:44:29" is the time in "hh:mm:ss" format. This format was used by the old "Extrap" Java applet.

extrap_times_template=(\d\d\d\d)\d\d\.jpg

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:
(\d\d\d\d)
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:
rad030000.jpg
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:
extrap_times_template={(\d\d\d\d)}

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.

extrap_prompts_position = bottom

This will cause the prompts for using the extrap tool to appear near the bottom of the display window. The default is near the top of window.

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

overlay_labels_style = font-family:arial;color:white;font-size:20px;padding:2px;background-color:green;

specifies the CSS of the overlay_labels. When using the menu form of specifying overlay menus, this parameter is used to define the characteristics of all the menus. (See below...)

menuN_labels_style = bottom:-30px;display:flex;right:0px;font-family:serif;font-size:20px;font-weight:bold;background-color:orange;

when using the menu form of defining overlay selections, this parameter is used to specify the CSS for an individual menu. The "N" is a number corresponding to the menu in the controls=" parameter.

NOTE: this parameter will replace the overlay_labels_style parameter for the designated menu.

probe_display_style = #500, #fff,18px arial, #500, 10, 4,4

Set the background color to #500 (red), the foreground color to #fff (white), and the font to 18px arial. There should be a drop shadow, with a color of #500 (red), a blur of 10 and offsets of 4 pixel and 4 lines. If the last 4 parameters are omitted, not "drop-shadow" effect is used.

coordinates_display_style = orange, black,12px serif, Latitude = , Longitude = , 2 [, #330, 10, 10, 10]

Set the background color to "orange", the foreground color to "black", and the font to "12px serif", the prefix on the latitude value to "Latitude = ", the prefix on the longitude value to "Longitude = ", and the number of decimal digits to use for the values to "2". The optional 4 parameters are then end are for a "drop-shadow" effect, they are: color, blur, x-ffset, and y-offset. By default, no "drop-shadow" effect is used.

distance_display_style = #FF000060, yellow, 18px arial bold, 2, pink [,#330,10,10,10]

Set the background color to "red" with a transparency of "60", the foreground color to "yellow", use a font of "18px arial bold", show "2" decimal places, and draw the line in "pink". The optional 4 parameters are then end are for a "drop-shadow" effect, they are: color, blur, x-ffset, and y-offset. By default, no "drop-shadow" effect is used.

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, label for 3, ...

Specify the labels to use for the framelable control. There must be one label for each "frame". Note that you can include some HTML in the label -- for example, if you want the label to be a link to another URL, you might say: frame_labels = label for 1, <a href="http://www.ssec.wisc.edu">label for 2</a>, label for 3,...

framenumber_index_values = one, two, three

provides a list of alternate labels that will be used for the %FRAMENUMBERINDEX% in the action section of a hotspot.

mark_prompts = Click on first 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.

mark_close = false

When the mark mode is enabled using the mark control, the polygon will not be closed and the points listed will not repeat the starting point. The default is "true" (closed polygon and first point also listed at end).

mark_cursor = pointer

Change the "style" of the cursor when in "mark" mode. This must be one of the CSS-defined types (crosshair, grab, default, etc..)

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_layout_width = t

This causes the toggle boxes to be able to use the entire width of the <div> that contains the HAniS display. By default, they will only use the width of the images.

toggle_colors = blue, red, orange

This sets the colors of the 3 states for toggle control's little boxes. The defaults are blue, red, orange...as shown, for "on", "off", "frame showing".

framelabel_position = 100,80

This sets the default position of the frame label window to the x,y coordinates specified. These coordinates are relative to the upper left corner of the <div> that contains the HAniS display. If you move this on top of the image, you must include a framelabel_style and set the z-index to a value greater than 99.

annotate_position = 100, -140

This sets the default position of the annotate control panel to the x,y coordinates specified. These coordinates are relative to the upper left corner of the <div> that contains the HAniS display.

annotate_defaults = 5, 7, 2, Smokey skies

This sets the defaults for the annotate control pop-up window for type, color, width/size, and text -- in that order. It is keyed by numbers which represent the position in the pull-down menu for each item.

Type = 1=Arrow, 2=Circle, 3=Box, 4=Polygon, 5=Draw, 6=Text, 7=Line

Color = 1=Black, 2=White, 3=Red, 4=Green, 5=Blue, 6=Yellow, 7=Orange, 8=Cyan, 9=Magenta

Width = 1, 2, 3, 4, 5, 6, 7, 8, 9=10,10=12, 11=14, 12=16, 13=18, 14=20, 15=24, 16=28, 17=32, 18=36, 19=38

skip_missing = 3

Whenever images are loaded, any frames that are "missing" will be skipped during the animnation. If the toggle control is used, the corresponding toggle box will be displayed using the color defined with the skip_missing_color (see below).

The value ("3" shown) is the index of the overlay to test against. The first overlay is number one.

A value of zero says to use the base (or background) images instead of any overlay.

skip_missing_color = #504450

When the skip_missing option is used with the "toggle" control, the default color of the box(es) for missing frames is "transparent", so the background color will be shown. You may change this using the skip_missing_color=#ff0000 parameter using the standard format: #RRGGBB or #RRGGBBAA.

active_fade = true

The fade control will be active; you do not need to declare the actual control unless you want the user to be able to toggle the state on/off.

fadebar_style = color, line-width, box-width, box-height [,type [,position]]
where

active_slide = true

The slide control will be active; you do not need to declare the actual control unless you want the user to be able to toggle the state on/off.

slidebar_style = color, line-width, box-width, box-height [,type [,position]]
See fadebar_style, above....the only difference is that when using "slide", a vertical line is drawn through the middle of the widget to separate the two images.

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
looprock_style=background-color:orange;

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

zoom_labels = Zoom, Un-zoom, 30
zoom_style=background-color:green;

location_labels = Show Location, Hide Location, 100
location_style=background-color:green;

probe_labels = Show Probe, Hide Probe, 90
probe_style=background-color:green;

extrap_labels = Extrap, Normal, 40
extrap_labels__style=background-color:green;

probe_label = Readout, 25
looprock_style=background-color:green;

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

firstlast_labels = First, Last, 30
firstlast_style=background:linear-gradient(red,blue);

speed_labels = Slower, Faster
speed_style=height:30px;width:50px

show_labels = Capture Image, Capture Image
show_style=background-color:orange;

Using Multiple Menus for Overlay Selection

The menu control is used to provide a single pop-up widget with the checkboxes for all overlays arranged in a vertical column. This is used instead of the overlay control. If you would like to have multiple menu controls in order to group the overlays, do this:

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 = http://www.my.host/mydir/

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 = http://www.my.host/myimagedir/

sets the base URL of the image files, but not the file_of_filenames. See above.

overlay_base = http://www.my.host/mydir/olays/

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, 2
    In this case, the root name is file and since there are 4 images specified with the numbering starting at 0 and an increment of 2, the actual filenames must be: file0, file2, file4, and file6. Please note that the default base_starting_number is zero, and the default for the increment is 1.

    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:
       file0
   file1
   file2
   file3
    Lines beginning with # are ignored, so you may put comments into your file_of_filenames. Similarly, "blank" lines are also ignored.

    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 "<a href='http://www.ssec.wisc.edu'>label two</a>" 
    file2 "label three"

    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,http://www.ssec.wisc.edu,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

background_static=n

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. (Also see: nonstatic_prefix)

fof_substitute = myotherfof.txt

will force the list of image filenames in the named file to be used when this file_of_filenames is loaded, completely replacing the list of image filenames. Only the image filenames will be replaced; all other parameters in this file_of_filenames will be used as specified.

In addition, the following parameters may be included in the file_of_filenames (you should not have image filenames that begin with any of these words!): 

frame_labels
fof_extension
fof_substitute
redirect
image_base
overlay_base
overlay_slice
slice
high_res_basemap
high_res_overlay
high_res_zoom
hoverzone
hotzone
hotspot
toggle_onoff
coordinates
map_scale
times

Overlays


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; however, you may use the transparency parameter (above) to designate a particular color or gray level to be made "transparent".

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

Normally, the overlay checkboxes and labels are shown in the User Interface, just below the controls. If you would prefer to have these in a pop-up / drop-down menu, then use the "control" named menu. This provides a button, which you may style, that will be used to pop-up (or hide) the drop-down list of checkboxes.

In addition, you need to specify the overlay or the menu (or multiple menus) 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".

    Note: if the same overlay image is to be used on all frames, you need only specify the name once. For example, a basemap outline image: 

       overlay_filenames = map.gif, ofileB0 & ofileB1 & ofileB2 & ofileB3, ofileC0 & ofileC1 & ofileC2 & ofileC3
  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
  3. If you are using the use_for_all_frames option, you do not need to replicate those filenames for each frame. For example: 
    back1.gif overlay=one.gif, two.gif, three.gif, four.gif
back2.gif
back3.gif
    or if you have a mix: 
    back1.gif overlay=img1.gif, two.gif, three.gif, four.gif
back2.gif overlay=img2.gif
back3.gif overlay=img3.gif
    and in this case, the use_for_all_frames would be:
    use_for_all_frames = 2,1, 3,1, 4,1

HAniS public functions

There are a few functions that you may call from your own JavaScript code while HAniS is running:

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

Many thanks to James Davies for the HAniS "logo" art at the top of this page!

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.

The Animated GIF library was developed and is licensed by Johan Nordberg (https://github.com/jnordberg/gif.js)

The MP4 encoder was developed and is licensed by Trevor Sundberg (https://github.com/TrevorSundberg/h264-mp4-encoder/)

Copyright Notice

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

This program was developed through funding provided by StormQuest Technologies. Other organizations have contributed support for requested enhancements.

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.