Guidelines to writing trackermap Javascript interface

These guidelines describe how the interface in these three demos has been implemented:
- fakecabling trackermap
- reference image trackermap
- tif cabling trackermap
All the software used can be found in this directory:viewer.js,layer.js,crate.js,viewer.css
We are using firefox 2.0 and later because is the only browser that allows svg images completely integrated in xhtml documents:i.e. the Javascript code of svg files and xhtml files can communicate. This is not the case with IE browser where (until now) the SVG is rendered by a plugin (from Adobe) and the Javascript don't communicate. It would be possible to write the code in such a way that it allows a nice degradation when displayed by IE (or other browsers).In this case some of the interactivity of the demo run on firefox would be lost.
Each application has a main xhtml document. This contains also some Javascript that has to be defined differently for each trackermap: mostly global variables initialization.
The reason for choosing xhtml instead of plain html is to have better checks from browser on conformance of html code to xml rules. This is important since the html has to communicate with svg which is another xml "dialect".
The firefox rendering engine cannot render right now (January 2008) on "normal" linux or windows boxes svg images with more than 5000 polygons in a time compatible with an interactive application. For this reason we don't have in these applications SVG images with more than 2000 polygons. The representation of the whole trackermap (which contains more than 10,000 polygons) is for this reason , done, using a png image with a resolution 3000x1600 or more. The SVG trackermap is segmented in many svg files representing each one a "natural" segment of the whole trackermap like a layer or a crate.
The png image representing the whole trackermap can be manipulated with an interface similar to Google maps. It allows zooming, panning and superposition of trasparent images (used for example as a legend).
The overall structure of the interactive applications is organized in tabs each one representing a kind of trackermap: geometric, fed, slow control, etc.
The selection of a tab brings up the whole trackermap represented as a png image with a row of buttons on top. One of these buttons "single layer" switches from the "full trackermap" view to the single element view .These single elements are represented in SVG and one can quickly scan them one by one using the "< >" buttons in the top row.
These single element images in SVG are loaded each one with its Javascript interface. This interface reacts to mouseover changing the transparency of the single part and showing its name and content.
The result of clicking on a single part depends instead on a serie of selectors that can be activated. The first one allows the display of more complete written informations on the clicked part in the window on the right. Another selector allows to get the corrispondent part in a trackermap of another type, showing the corresponding element highlighted. This is shown in a detached window (always the same).
Global variables can be defined in the main xhtml document and accessed by using
```
top.variablename
```
in all the other Javascript code in the application.
All the elements defined with an id in the main document can be accessed from everywhere by using the method:
```
top.document.getElementById(elementid)
```
.
The tabs are created at the beginning by defining :
```
var tabs = new Tabs(activetabcolor,inactivetabcolor);
window.addEventListener("load",setUpTabs,false);
```
The method setUpTabs will automatically create the tabs defined in the div's with class name "name". The divs with class name "content" will become the content of the tab. This is all done automatically provided you have the following structure of div commands for each tab in the main document.
```
<div class="container"> //global container
<div class="tab"> //start of tabs structure and names definition 
<div class="name"> //definition of first tab name
first tab name
</div>
 ....  //other tabs here
</div>
<div class="elements"> //start of tabs content definition 
<div class="content" id="one"> //container of first tab content 
all tags contained in first tab
</div>
....//other tabs content
</div>
</div>
```
The global variable current indicates the active tab. The number of tabs is given by the global variable tab.length All variables that must be defined individually for each tab must be declared as Array in setUpTabs and initialiazed in the method addTab.
The content of each tab is :
1. A fieldset with all buttons in the top row
2. a div of id "divn" containing the big image as img id="imgn"
3. <iframe id="layern" will contain the current tracker part
4. <iframe id="printn" will contain the printout of the currently selected element.
n indicates the tab number.
The number of elements is 43 for geometric trackermap and ncrates for fedtrackermap with the global variables layer and crate indicating currently displayed svg image.
We use the new DOM Level 2 feature that allows the setting of more than one event handler with the syntax
```
object.addEventListener(eventtype,function,false)
```
. In this way ,for example, all Javascript libraries used can perform their initialization.
All SVG polygons have predefined event handlers for mouseover mouseout and click. This is the function
```
showData(evt)
```
. The connected Javascript file contains the definition of this function. This is different for each trackermap type.
Panning of big images is handled by methods mouseUp mouseMove and makeDraggable. The global variables dragObject and mouseOffset indicate the image that is currently draggable and its position. To compute the position the program uses the properties offsetTop and offsetLeft of the image. The panning is done by setting appropriately the style properties top and left.
Zooming of big images is done using the buttons "+" (zoom in) "-" (zoom out) "home" handled by the following global variables:
```
zoomFact
zoomAmount = new Array();
imageWidth
imageHeight
```
Note that only zoomAmount need to be defined for each tab.The image width and height is obtained by the following code:
```
imageWidth=document.getElementById(tmapObject).getAttribute('width');
 imageHeight=document.getElementById(tmapObject).getAttribute('height');
```
The zooming requires the modification of the attributes width and height of the img element. Apparently to change it you have to create a new image element replacing the old. This is done through the code:
```
var newimage=oldimage.cloneNode(false);
newimage.width=imageWidth;
newimage.height=imageHeight;
oldimage.parentNode.replaceChild(newimage,oldimage);
	 
```
The cursor shape is changed to show the possible actions. Note that for firefox the name of the "hand" cursor is "pointer". We use also crosshair . The setting is done directly in css with:
```
cursor: pointer;
```
or in Javascript with
```
object.style.cursor='pointer';
```
.
The implementation of the buttons "<" ">" "Full" "Single layer" used to switch between large image or single element and to scan different elements is done using the methods setSingle and setFull.

Each Javascript library must have its names protected by using the following syntax:

var LibraryName = {};
//definition of Library global variables.
LibraryName.variablename1 = value;
....
//definition of Library functions
LibraryName.functionname1 = function(){}
...

At the beginning through a method "makeRemote" a detached window is opened and loaded with the first crate in SVG. This window is accessible through the global variable "remotewin" and is used for example to show graphically the correlation between modules and fedchannels.