RAMSDIS Online setup guide

(How-to create your own online loops)

This is a guide on how to set up a RAMSDIS Online "like" server to display your own satellite data. This guide goes over using javascript to loop the imagery. You may also use a java applet to view the loops. If you would like to go the java route then I'd highly recommend an applet called AniS. You can get more information about this applet here.

This guide only goes over the html portion of displaying the data. You will need to setup your ingest system to make either gif’s or jpeg’s of the data and then push the data onto a web server.

File Naming convention: If your using RAMSDIS or McIDAS, then the easiest naming convention is to name the files using the frame number as the filename (e.g. 101.gif or 101.jpg). This way the online queue will match your ingest queue and you will not have to keep track of what name to give new data as it is ingested. Otherwise name the files with any prefix and ending in a number that is sequential.

Here is the process we use for displaying the data: Imagery is ingested on RAMSDIS and displayed. A GIF or JPG is then created and pushed to our web server with the file naming convention as above.

To get started, download the sample code: You can get that here.

Web page setup: Open up the sample code (file: sample_loop.html) and modify the corresponding html code (below in red). In this example the GIF's or JPG's are in a subdirectory (./data/goes_east) down from the main html code.

Change the title:

<HEAD><TITLE>4 km Visible</TITLE>

Change the location and name of your data:

//********* SET UP THESE VARIABLES - MUST BE CORRECT!!!*********************
image_name = "data/goes_east/"; //the base "path/name" of the image set without the numbers
image_type = "jpg"; //"gif" or "jpg" or whatever your browser can display
first_image = 41; //first image number
last_image = 56; //last image number
//!!! the size is very important - if incorrect, browser tries to
//!!! resize the images and slows down significantly
animation_height = 480; //height of the images in the animation
animation_width = 640; //width of the images in the animation
//**************************************************************************

Change the description of the loop: Scroll down in your code to the matching section below. Here you need to make three changes. This SRC tag is where your first image is loaded from. You’ll need to modify the ‘src=’ to what you have set in the above example for ‘image_name’. The ALT tag is the pop-up name given when the cursor is over the image. The 3rd line displays the description of the loop next to the imagery.

document.write(" <P><IMG NAME=\"animation\" SRC=\"data/goes_east/" ,first_image, ".jpg\" HEIGHT=",animation_height, " WIDTH=", animation_width, "\" ALT=\"[4 km visible]\">");

document.write(" <TR><TD ALIGN=center WIDTH=\"100\"> ");
document.write(" <HR WIDTH=\"80%\"><FONT SIZE=2><B>4 km<BR>Vis<HR WIDTH=\"80%\">");

Modify the "omit images" lines: Scroll down a little more and find the matching lines below. You’ll need to add a new line for each image in your loop. So if you have 12 images in your loop then you’ll need 12 of these lines below. For each line change this part from ‘(this.checked,0)’ line to ‘(this.checked,1)’ increasing this number by one each time. So for 12 images you’ll have lines numbering from 0 thru 11 (note: numbering starts from 0 and not 1).

document.write(" <TD ALIGN=center><FONT SIZE=-1><INPUT TYPE=\"checkbox\" onClick=\"checkImage(this.checked,0)\"><B><BR> ",count++," </B></TD> ");

document.write(" <TD ALIGN=center><FONT SIZE=-1><INPUT TYPE=\"checkbox\" onClick=\"checkImage(this.checked,1)\"><B><BR> ",count++," </B></TD> ");

document.write(" <TD ALIGN=center><FONT SIZE=-1><INPUT TYPE=\"checkbox\" onClick=\"checkImage(this.checked,2)\"><B><BR> ",count++," </B></TD> ");

...etc

That should be all you need to setup your loops. If you want to launch your loops in a separate window then continue on below.

Launch latest image only:

If you want to also launch the latest image only then you can use this sample code below. For our systems, each time a new image is sent to the web server, a small javascript source file (.js) is also sent. The only thing contained in this code is a variable that is set to point to the latest image. So if 45.gif is sent then this file will contain the single line "var latest_image = 45". The code below then references this file to know what image to display.

File: gevis01.js

var latest_image = 45

File: sample_single_image.html

<HTML><HEAD>
< TITLE>Latest Image - GOES-East 1 km Visible</TITLE>
< META HTTP-EQUIV="no-cache"></TITLE>
< META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 01:00:00 GMT">
< META HTTP-EQUIV="Pragma" CONTENT="no-cache">
< META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
< META HTTP-EQUIV="Refresh" CONTENT="300">
< SCRIPT LANGUAGE="JavaScript" SRC="data/goes_east/gevis01.js">
< /SCRIPT>
< SCRIPT LANGUAGE="javascript"><!--
function refreshImg(){
document.images["satimg"].src = "data/goes_east/" + latest_image + ".jpg"
}
//--></SCRIPT>
</HEAD>
< DIV Align=Left>
< FORM METHOD=POST><Font Size=3><LEFT>
< INPUT TYPE="button" VALUE="Close" onClick="window.close();"></DIV>
< DIV Align=Center><Font size=+2><U>Latest Image - GOES-East 1 km Visible</U></Font><BR>
< Font color=blue>Page reloads every 5 minutes</Font>
< /FORM>
< IMG NAME="satimg" SRC="data/goes_east/" + latest_image + ".jpg" BORDER=1 ALT="GOES-East 1 km Visible" Width=640 Height=480>
< /DIV>
< SCRIPT LANGUAGE="javascript">
if ( document.images ) // If browser support it...
refreshImg(); // ...start refresher
< /SCRIPT>
</BODY>
< /HTML>

Launching loops in a separate window:

Below is some sample code to allow you to launch the loops in a separate window. Change the code in red below to fit your setup. For each loop you will need to create a new function for each.

File: main.html

<html>
< head>
< title>RAMSDIS Online</title>
< /head>
< body>
< script language="javascript1.1">

function visible_4km_loop() {

window.open('http://hadar.cira.colostate.edu/ramsdis/online/vis_4km_loop.html','visible_4km_loop','toolbar=no,location=no,'
+ 'directories=no,status=yes,menubar=no,resizable=yes,copyhistory=no,scrollbars=yes,width=780,height=565');
}

function visible_4km_latest() {

window.open('http://hadar.cira.colostate.edu/ramsdis/online/vis_4km_latest.html','visible_4km_latest','toolbar=no,location=no,'
+ 'directories=no,status=yes,menubar=yes,resizable=yes,copyhistory=no,scrollbars=yes,width=680,height=610');
}

< /script>
< a href="javascript:visible_4km_loop()">4 km Visible loop< /a><BR>
< a href="javascript:visible_4km_latest()">4 km Visible latest image< /a>
< /body>
< /html>

For additional help contact Dave Watson.