Examples of setting up the interactive Image Composite Explorer (ICE) Version 5 (HTML5) for your own use

page updated 7/20/2018

Version 5 - Released 2017

Translation into Portuguese (thanks to Artur Weber)

Translation into Russian (thanks to StudyCrumb)

Overview

The ICE5 was developed for the NASA Earth Observatory at the University of Wisconsin-Madison, Space Science and Engineering Center by Tom Whittaker. It is a tool that can be used to let people explore satellite images and data using a web browser. It is designed to be flexible within its intended purpose, and can be easily configured using simple HTML parameters, as described below.

The ICE is coded in JavaScript using HTML5 standards and will, therefore, run in any modern web browser.

End-user environment

The ICE5 is run through a web browser. It was coded in HTML5 and CSS3. This can be used in any modern web browser, but may not be suitable for small screen devices (e.g., smartphone).

Modes of configuration

The ICE has five basic modes of operation:

Color (RGB) combining
Arithmetic combinations
Animations
Showing 3 images
Showing a single image

In each of these modes, a common set of tools is provided --

Choosing the "Select Region" radio button enables the selection of a rectangular region by "dragging" the mouse pointer (holding left button while moving pointer). The "Outline Region" allows you to specify a region by a closed polygon.
Once a region is selected, a number of diagrams can be produced in a second window that help analyze the data. For those diagrams (like a scatter plot) that need two sets of data, the user may select the thumbnails by clicking on them; otherwise, the first two will be selected automatically.
Note that when using the "Showing 3 images" mode, clicking on a thumbnail will cause the corresponding image to be displayed in the big panel. If you want to do a scatter diagram in this mode, the program will always use the last two images viewed.
The probe will read out the values from the original 3 images. There are two forms of the probe: a simple 3-value readout, and a small graph designed to be used with images that represent a time-sequence. If the 'calibration' parameter is supplied, the probe readout will be in those units. If the 'navigation' parameter is supplied, then the probe readout will also contain the latitude and longitude of the point.
The "Zoom/Roam" checkbox activates this mode. Zooming in is done by a left button click; zooming out is a right click. (The Restore button zooms out all the way.) Roaming is done by "dragging" the mouse pointer, which is why this mode and the 'Select Region' mode are radio buttons.
You may also specify "overlays" -- images that will be displayed on top of the normal images, by the user selecting a checkbox.

What you need

Making ICE5 available to your users is as easy as putting the "ice5_min.js" file into an accessible directory on your Web server. (Right click on this link and "Save As".) You then need to make your GIF or JPEG images available on the same server (usually in a subdirectory of where you put the code). Finally, you need to imbed the webapp start-up and parameters into the HTML for one of your Web pages on that server.

The basic structure of the parameters that configure ICE5 is a JavaScript object, similar to this:


<html>
<head>
<script src="ice5_min.js">lt;script>
<script>
var ice5params = {
  filenames : "images/band02.jpg,images/band06.jpg,images/band07.jpg",
    labels : "0.87 micron,1.64 micron,2.13 micron",
    do_rgb : "yes",
    bgcolor :"#FFFF00"
};
</script>
<head>

<body onload="ICE5.init(ice5params, 'ice5div')">

<div id="ice5div"> <div>

<body>
<html>

You will need to decide which mode you want to use for a particular situation -- that's what the following examples will help you with:

Examples of the modes

To present a color (RGB) combining operation, you would include this list of parameters in your HTML page:

<script>
var ice5params = {
  filenames : "images/band02.jpg,images/band06.jpg,images/band07.jpg",
  labels : "0.87 micron,1.64 micron,2.13 micron",
  do_rgb : "yes",
  bgcolor :"#FFFF00"
};
</script>