Back to home page

Project CMSSW displayed by LXR

 
 

    


Warning, /DQM/SiPixelMonitorClient/test/trackermap.txt is written in an unsupported language. File is not indexed.

0001 <?xml version="1.0"  standalone="no" ?>
0002 <html xmlns="http://www.w3.org/1999/xhtml"
0003       xmlns:svg="http://www.w3.org/2000/svg" 
0004       xmlns:xlink="http://www.w3.org/1999/xlink">
0005 <head>
0006 <script type="text/ecmascript"> <![CDATA[
0007 
0008   //section to contain script code
0009   var myMapApp = new mapApp();
0010   var myMainMap;
0011   var myRefMapDragger;
0012   
0013   //------------------------------------------------------------------------------------------
0014   function init() {
0015      myMapApp.resetFactors();
0016      myMainMap = new map("mainMap",3000,100,1000,0.6);
0017      //set constraints to draggable rect in reference map
0018      myRefMapDragger = new dragObj("dragRectForRefMap",0,200,510,610,"ul");
0019      
0020      //colorRegion();
0021   }
0022   
0023   //------------------------------------------------------------------------------------------
0024   function showData(evt) {
0025         var xlinkns = "http://www.w3.org/1999/xlink"; 
0026         var myPoly  = evt.currentTarget;
0027         var myDynamicTrackerText    = document.getElementById("TrackerText");
0028         var myDynamicTrackerText1   = document.getElementById("TrackerText1");
0029         var myDynamicTrackerMessage = document.getElementById("TrackerMessage");
0030         var myTrackerPlot = document.getElementById("plot");
0031         if (evt.type == "mouseover") {
0032                 var myTracker = myPoly.getAttribute("POS");
0033                 var myTracker1 = "  value="+myPoly.getAttribute("value");
0034                 var myMessage = myPoly.getAttribute("MESSAGE");
0035                 myTracker1 = myTracker1+" count="+myPoly.getAttribute("count");
0036 //              alert (myTracker+" "+myTracker1);
0037                 myDynamicTrackerText.firstChild.nodeValue=myTracker;
0038                 myDynamicTrackerText1.firstChild.nodeValue=myTracker1;
0039                 myDynamicTrackerMessage.firstChild.nodeValue=myMessage;
0040         }
0041 
0042         if (evt.type == "mouseout") {
0043                 myDynamicTrackerText.firstChild.nodeValue="-";                          
0044         }
0045 
0046         if (evt.type == "click") {
0047                 myDynamicTrackerText.firstChild.nodeValue="-";  
0048                 var moduleId = myPoly.getAttribute("detid");
0049 <<<<<<< trackermap.txt
0050                 var url_serv = "http://lxplus096.cern.ch:1972/urn:xdaq-application:lid=15/Request?";
0051 =======
0052                 var url_serv = "http://lxplus202.cern.ch:1972/urn:xdaq-application:lid=15/Request?";
0053 >>>>>>> 1.8
0054                 var queryString = "RequestID=PlotTkMapHistogram";
0055                 queryString+= "&ModId=" + moduleId;
0056                 var url1 = url_serv  + queryString;
0057 //                var filename=moduleId+".jpg";
0058 //                myTrackerPlot.setAttributeNS( xlinkns, "xlink:href", filename ) 
0059                 myTrackerPlot.setAttributeNS( xlinkns, "xlink:href", url1);
0060                 
0061                 pausecomp(5000);
0062                 queryString = "RequestID=UpdatePlot&t="+moduleId;
0063                 var url2 = url_serv  + queryString;
0064 
0065                 myTrackerPlot.setAttributeNS( xlinkns, "xlink:href", url2);  
0066               
0067                 var myTracker = myPoly.getAttribute("POS");
0068                 myTracker = myTracker+"  value="+myPoly.getAttribute("value");
0069                 myTracker = myTracker+"  count="+myPoly.getAttribute("count");
0070                 myDynamicTrackerText.firstChild.nodeValue=myTracker;
0071         }
0072 
0073   }
0074   
0075   //------------------------------------------------------------------------------------------
0076   function colorRegion() {
0077         var myGroup = document.getElementById("tracker");
0078         var children = myGroup.childNodes;
0079         var myModule;                                   
0080         //loop over all children
0081         //for (var i = 0; i < children.length;i++) {
0082         for (var i = 0; i < 10000;i++) {
0083         //check if it is a path-element
0084          if (children.item(i).nodeName == "polygon") {
0085            myModule = children.item(i).getAttribute("MODULE");
0086                 switch (myModule) {
0087                    case "stereo":
0088                         myColor = "blue";
0089                         break;
0090                    case "nostereo":
0091                         myColor = "rgb(255,255,0)";
0092                         break;
0093                    default:
0094                         myColor = "red";
0095                 }
0096            children.item(i).setAttribute("fill",myColor);
0097          }
0098         }                       
0099   }
0100   
0101   //------------------------------------------------------------------------------------------
0102   //holds data on map
0103   function map(mapName,origWidth,minZoom,maxZoom,zoomFact) {
0104         var mapSVG = document.getElementById(mapName);
0105         this.mapName    = mapName;
0106         this.origWidth  = origWidth;
0107         this.minZoom    = minZoom;
0108         this.maxZoom    = maxZoom;
0109         this.zoomFact   = zoomFact;
0110         this.pixXOffset = parseFloat(mapSVG.getAttributeNS(null,"x"));
0111         this.pixYOffset = parseFloat(mapSVG.getAttributeNS(null,"y"));
0112         viewBoxArray    = mapSVG.getAttributeNS(null,"viewBox").split(" ");
0113         this.curxOrig   = parseFloat(viewBoxArray[0]);
0114         this.curyOrig   = parseFloat(viewBoxArray[1]);
0115         this.curWidth   = parseFloat(viewBoxArray[2]);
0116         this.curHeight  = parseFloat(viewBoxArray[3]);
0117         this.pixWidth   = parseFloat(mapSVG.getAttributeNS(null,"width"));
0118         this.pixHeight  = parseFloat(mapSVG.getAttributeNS(null,"height"));
0119         this.pixXOrig   = parseFloat(mapSVG.getAttributeNS(null,"x"));
0120         this.pixYOrig   = parseFloat(mapSVG.getAttributeNS(null,"y"));
0121         this.pixSize    = this.curWidth  / this.pixWidth;
0122         this.zoomVal    = this.origWidth / this.curWidth * 100;
0123   }
0124   
0125   //------------------------------------------------------------------------------------------
0126   map.prototype.newViewBox = function(refRectId,refMapId) {
0127         var myRefRect = document.getElementById(refRectId);
0128         var myRefMapSVG = document.getElementById(refMapId);
0129         var viewBoxArray = myRefMapSVG.getAttributeNS(null,"viewBox").split(" ");
0130         var refPixSize = viewBoxArray[2] / myRefMapSVG.getAttributeNS(null,"width");
0131         this.curxOrig = parseFloat(viewBoxArray[0]) + (myRefRect.getAttributeNS(null,"x") - myRefMapSVG.getAttributeNS(null,"x")) * refPixSize;
0132         this.curyOrig = parseFloat(viewBoxArray[1]) + (myRefRect.getAttributeNS(null,"y") - myRefMapSVG.getAttributeNS(null,"y")) * refPixSize;
0133         this.curWidth = myRefRect.getAttributeNS(null,"width") * refPixSize;
0134         this.curHeight = myRefRect.getAttributeNS(null,"height") * refPixSize;
0135         var myViewBoxString = this.curxOrig + " " + this.curyOrig + " " + this.curWidth + " " + this.curHeight;
0136         this.pixSize = this.curWidth / this.pixWidth;
0137         this.zoomVal = this.origWidth / this.curWidth * 100;
0138         document.getElementById(this.mapName).setAttributeNS(null,"viewBox",myViewBoxString);
0139   }
0140   
0141   //------------------------------------------------------------------------------------------
0142   //holds data on window size
0143   function mapApp() {
0144   }
0145                 
0146   //------------------------------------------------------------------------------------------
0147   //calculate ratio and offset values of app window
0148   mapApp.prototype.resetFactors = function() {
0149         var svgroot = document.documentElement;
0150         if (!svgroot.getScreenCTM) {
0151                 //case for ASV3 and Corel
0152                 var viewBoxArray = svgroot.getAttributeNS(null,"viewBox").split(" ");
0153                 var myRatio = viewBoxArray[2]/viewBoxArray[3];
0154                 if ((window.innerWidth/window.innerHeight) > myRatio) { //case window is more wide than myRatio
0155                         this.scaleFactor = viewBoxArray[3] / window.innerHeight;
0156                 }
0157                 else { //case window is more tall than myRatio
0158                         this.scaleFactor = viewBoxArray[2] / window.innerWidth;         
0159                 }
0160                 this.offsetX = (window.innerWidth  - viewBoxArray[2] * 1 / this.scaleFactor) / 2;
0161                 this.offsetY = (window.innerHeight - viewBoxArray[3] * 1 / this.scaleFactor) / 2;
0162                 }
0163   }
0164   
0165   //------------------------------------------------------------------------------------------
0166   mapApp.prototype.calcCoord = function(coordx,coordy) {
0167         var svgroot = document.documentElement;
0168         var coords = new Array();
0169         if (!svgroot.getScreenCTM) {
0170           //case ASV3 a. Corel
0171           coords["x"] = (coordx  - this.offsetX) * this.scaleFactor;
0172           coords["y"] = (coordy - this.offsetY) * this.scaleFactor;
0173         }
0174         else {
0175           matrix=svgroot.getScreenCTM();
0176           coords["x"]= matrix.inverse().a*coordx+matrix.inverse().c*coordy+matrix.inverse().e;
0177           coords["y"]= matrix.inverse().b*coordx+matrix.inverse().d*coordy+matrix.inverse().f;
0178          }
0179         return coords;
0180   }             
0181   
0182   //------------------------------------------------------------------------------------------
0183   //make an element draggable with constraints
0184   function dragObj(dragId,constrXmin,constrXmax,constrYmin,constrYmax,refPoint) {
0185         this.dragId = dragId;
0186         this.constrXmin = constrXmin;
0187         this.constrXmax = constrXmax;
0188         this.constrYmin = constrYmin;
0189         this.constrYmax = constrYmax;
0190         this.refPoint = refPoint;
0191         this.status = "false";
0192   }
0193   
0194   //------------------------------------------------------------------------------------------
0195   dragObj.prototype.drag = function(evt) {
0196         //works only for rect and use-elements
0197         var myDragElement = evt.target;
0198         if (evt.type == "mousedown") {
0199                 var coords = myMapApp.calcCoord(evt.clientX,evt.clientY);
0200                 this.curX = coords["x"];
0201                 this.curY = coords["y"];
0202                 this.status = "true";
0203         }
0204         if (evt.type == "mousemove" && this.status == "true") {
0205                 var coords = myMapApp.calcCoord(evt.clientX,evt.clientY);
0206                 var newEvtX = coords["x"];
0207                 var newEvtY = coords["y"];
0208                 var bBox = myDragElement.getBBox();
0209                 if (this.refPoint == "ul") {
0210                   var toMoveX = bBox.x + newEvtX - this.curX;
0211                   var toMoveY = bBox.y + newEvtY - this.curY;
0212                 }
0213                 else {
0214                   //refPoint = center
0215                   var toMoveX = bBox.x + bBox.width / 2 + newEvtX - this.curX;
0216                   var toMoveY = bBox.y + bBox.height / 2 + newEvtY - this.curY;
0217                 }
0218                 if ((bBox.x + newEvtX - this.curX) < this.constrXmin) {
0219                   if(this.refPoint == "ul") {
0220                      toMoveX = this.constrXmin;
0221                   }
0222                   else {
0223                    toMoveX = this.constrXmin + bBox.width / 2;
0224                   }
0225                 }
0226                 if ((bBox.x + newEvtX - this.curX + bBox.width) > this.constrXmax) {
0227                         if(this.refPoint == "ul") {
0228                           toMoveX = this.constrXmax - bBox.width;
0229                         }
0230                         else {
0231                           toMoveX = this.constrXmax - bBox.width / 2;
0232                         }                                       
0233                 }
0234                 if ((bBox.y + newEvtY - this.curY) < this.constrYmin) {
0235                         if(this.refPoint == "ul") {
0236                          toMoveY = this.constrYmin;
0237                         }
0238                         else {
0239                          toMoveY = this.constrYmin + bBox.height / 2;
0240                         }
0241                 }
0242                 if ((bBox.y + bBox.height + newEvtY - this.curY) > this.constrYmax) {
0243                         if(this.refPoint == "ul") {
0244                          toMoveY = this.constrYmax - bBox.height;
0245                         }
0246                         else {
0247                          toMoveY = this.constrYmax - bBox.height / 2;
0248                         }                                       
0249                 }
0250                 myDragElement.setAttributeNS(null,"x",toMoveX);
0251                 myDragElement.setAttributeNS(null,"y",toMoveY);
0252                 this.curX = newEvtX;
0253                 this.curY = newEvtY;
0254         }
0255         if (evt.type == "mouseup" || evt.type == "mouseout") {
0256                 this.status = "false";
0257         }                       
0258   }
0259   
0260   //------------------------------------------------------------------------------------------
0261   dragObj.prototype.zoom = function(inOrOut) {
0262         var myDragElement = document.getElementById(this.dragId);
0263         var myOldX = myDragElement.getAttributeNS(null,"x");
0264         var myOldY = myDragElement.getAttributeNS(null,"y");
0265         var myOldWidth = myDragElement.getAttributeNS(null,"width");
0266         var myOldHeight = myDragElement.getAttributeNS(null,"height");
0267         switch (inOrOut) {
0268            case "in":
0269                 var myNewX = parseFloat(myOldX) + myOldWidth / 2 - (myOldWidth * myMainMap.zoomFact * 0.5);
0270                 var myNewY = parseFloat(myOldY) + myOldHeight / 2 - (myOldHeight * myMainMap.zoomFact * 0.5);
0271                 var myNewWidth = myOldWidth * myMainMap.zoomFact;
0272                 var myNewHeight = myOldHeight * myMainMap.zoomFact;
0273                 break;
0274            case "out":
0275                 var myNewX = parseFloat(myOldX) + myOldWidth / 2 - (myOldWidth * (1 + myMainMap.zoomFact) * 0.5);
0276                 var myNewY = parseFloat(myOldY) + myOldHeight / 2 - (myOldHeight * (1 + myMainMap.zoomFact) * 0.5);
0277                 var myNewWidth = myOldWidth * (1 + myMainMap.zoomFact);
0278                 var myNewHeight = myOldHeight * (1 + myMainMap.zoomFact);
0279                 break;
0280            case "down":
0281                 var myNewX = parseFloat(myOldX);
0282                 var myNewY = parseFloat(myOldY) +1.3* 6.*myMainMap.zoomFact;
0283                 var myNewWidth = myOldWidth ;
0284                 var myNewHeight = myOldHeight ;
0285                 break;
0286            case "up":
0287                 var myNewX = parseFloat(myOldX);
0288                 var myNewY = parseFloat(myOldY) -1.3*6.* myMainMap.zoomFact;
0289                 var myNewWidth = myOldWidth ;
0290                 var myNewHeight = myOldHeight ;
0291                 break;
0292            case "left":
0293                 var myNewX = parseFloat(myOldX) - 3.*6.* myMainMap.zoomFact;
0294                 var myNewY = parseFloat(myOldY);
0295                 var myNewWidth = myOldWidth ;
0296                 var myNewHeight = myOldHeight ;
0297                 break;
0298            case "right":
0299                 var myNewX = parseFloat(myOldX)+3.*6.* myMainMap.zoomFact;
0300                 var myNewY = parseFloat(myOldY);
0301                 var myNewWidth = myOldWidth ;
0302                 var myNewHeight = myOldHeight ;
0303                 break;
0304            case "PIXB":
0305                 var myNewX = 0.;
0306                 var myNewY = 540.;
0307                 var myNewWidth = 62. ;
0308                 var myNewHeight = 36. ;
0309                 break;
0310            case "FPIX-z":
0311                 var myNewX = 0.;
0312                 var myNewY = 581.;
0313                 var myNewWidth = 35.83 ;
0314                 var myNewHeight = 21.01 ;
0315                 break;
0316            case "FPIX+z":
0317                 var myNewX = 0.;
0318                 var myNewY = 516.;
0319                 var myNewWidth = 35.83 ;
0320                 var myNewHeight = 21.01 ;
0321                 break;
0322            case "TID-z":
0323                 var myNewX = 40.0;
0324                 var myNewY = 585.;
0325                 var myNewWidth = 34. ;
0326                 var myNewHeight = 15. ;
0327                 break;
0328            case "TID+z":
0329                 var myNewX = 40.0;
0330                 var myNewY = 520.;
0331                 var myNewWidth = 34. ;
0332                 var myNewHeight = 15. ;
0333                 break;
0334            case "TOB":
0335                 var myNewX = 97.;
0336                 var myNewY = 542.;
0337                 var myNewWidth = 72. ;
0338                 var myNewHeight = 36. ;
0339                 break;
0340            case "TIB":
0341                 var myNewX = 46.8;
0342                 var myNewY = 540.;
0343                 var myNewWidth = 64.8 ;
0344                 var myNewHeight = 38. ;
0345                 break;
0346            case "TEC-z":
0347                 var myNewX = 73.8;
0348                 var myNewY = 568.;
0349                 var myNewWidth = 115.2 ;
0350                 var myNewHeight = 57.6 ;
0351                 break;
0352            case "TEC+z":
0353                 var myNewX = 73.8;
0354                 var myNewY = 500.;
0355                 var myNewWidth = 115.2 ;
0356                 var myNewHeight = 57.6 ;
0357                 break;
0358 
0359            default:
0360                 var myNewX = this.constrXmin;
0361                 var myNewY = this.constrYmin;
0362                 var myNewWidth = this.constrXmax - this.constrXmin;
0363                 var myNewHeight = this.constrYmax - this.constrYmin;
0364                 break;
0365         }
0366         if(inOrOut=="in" || inOrOut=="out" || inOrOut=="full"){
0367           if (myNewWidth > (this.constrXmax - this.constrXmin)) {
0368                  myNewWidth = this.constrXmax - this.constrXmin;
0369           }
0370           if (myNewHeight > (this.constrYmax - this.constrYmin)) {
0371                  myNewHeight = this.constrYmax - this.constrYmin;
0372           }
0373           if (myNewX < this.constrXmin) {
0374                  myNewX = this.constrXmin;
0375           }
0376           if (myNewY < this.constrYmin) {
0377                  myNewY = this.constrYmin;
0378           }
0379           if ((myNewX + myNewWidth) > this.constrXmax) {
0380                  myNewX = this.constrXmax - myNewWidth;
0381           }
0382           if ((myNewY + myNewHeight) > this.constrYmax) {
0383                  myNewY = this.constrYmax - myNewHeight;
0384           }
0385         }
0386         myDragElement.setAttributeNS(null,"x",myNewX);
0387         myDragElement.setAttributeNS(null,"y",myNewY);
0388         myDragElement.setAttributeNS(null,"width",myNewWidth);
0389         myDragElement.setAttributeNS(null,"height",myNewHeight);
0390         myMainMap.newViewBox(this.dragId,"referenceMap");
0391   }
0392   
0393   //------------------------------------------------------------------------------------------
0394   //magnifier glass mouse-over effects
0395   function magnify(evt,scaleFact,inOrOut) {
0396         if (inOrOut == "in") {
0397            if (myMainMap.zoomVal < myMainMap.maxZoom) {
0398               scaleObject(evt,scaleFact);
0399            }
0400            else {
0401            }
0402         }
0403         if (inOrOut == "out") {
0404            if (myMainMap.zoomVal > myMainMap.minZoom) {
0405                scaleObject(evt,scaleFact);
0406            }
0407            else {
0408            }            
0409         }
0410         if (inOrOut == "full") {
0411            if (myMainMap.zoomVal > myMainMap.minZoom) {
0412               scaleObject(evt,scaleFact);
0413            }
0414            else {                       
0415            }            
0416         }
0417         if (scaleFact == 1) {   
0418            scaleObject(evt,scaleFact);
0419         }
0420   }
0421   
0422   //------------------------------------------------------------------------------------------
0423   //scale an object
0424   function scaleObject(evt,factor) {
0425   //reference to the currently selected object
0426         var element = evt.currentTarget;
0427         var myX = element.getAttributeNS(null,"x");
0428         var myY = element.getAttributeNS(null,"y");
0429         var newtransform = "scale(" + factor + ") translate(" + (myX * 1 / factor - myX) + " " + (myY * 1 / factor - myY) +")";
0430         element.setAttributeNS(null,'transform', newtransform);
0431   }
0432     
0433   //------------------------------------------------------------------------------------------
0434   function zoomIt(inOrOut) {
0435         if (inOrOut == "in") {
0436            if (myMainMap.zoomVal < myMainMap.maxZoom) {
0437               myRefMapDragger.zoom("in");
0438            }
0439            else {
0440            }
0441         }
0442         if (inOrOut == "out") {
0443            if (myMainMap.zoomVal > myMainMap.minZoom) {
0444                myRefMapDragger.zoom("out");
0445            }
0446            else {                       
0447            }            
0448         }
0449         if (inOrOut == "full") {
0450              if (myMainMap.zoomVal > myMainMap.minZoom) {
0451                 myRefMapDragger.zoom("full");                           
0452              }
0453              else {     
0454              }          
0455         }
0456         if(inOrOut!="in" && inOrOut!="out" && inOrOut!="full") myRefMapDragger.zoom(inOrOut);
0457   }
0458 
0459   //------------------------------------------------------------------------------------------
0460   function pausecomp(millis)
0461   {
0462     var inizio = new Date();
0463     var inizioint=inizio.getTime();
0464     var intervallo = 0;
0465     while(intervallo<millis){
0466       var fine = new Date();
0467       var fineint=fine.getTime();
0468       intervallo = fineint-inizioint;
0469   }
0470   return;
0471 }
0472 
0473 ]]> </script>
0474 <!-- section for CSS stylesheet definitions -->
0475 <style type="text/css"><![CDATA[  
0476       .normalText {font-size:20;fill:black;font-weight:bold;}
0477       .dragRect {fill:darkcyan;stroke:none;opacity:0.4;}
0478   ]]></style>
0479 </head>
0480 
0481 <body bgcolor="#f7e699" 
0482       onload="init()" 
0483       onresize="myMapApp.resetFactors();">
0484 
0485 <fieldset style="background:#fffd5ff;">
0486  <legend>Detector elements and controls</legend>
0487  <center> 
0488  <button onclick="zoomIt('TIB');">   TIB      </button>      
0489  <button onclick="zoomIt('TOB');">   TOB      </button>      
0490  <button onclick="zoomIt('TID+z');"> TID+z    </button>  
0491  <button onclick="zoomIt('TID-z');"> TID-z    </button>  
0492  <button onclick="zoomIt('TEC+z');"> TEC+z    </button>  
0493  <button onclick="zoomIt('TEC-z');"> TEC-z    </button>  
0494  <button onclick="zoomIt('PIXB');">  PIXB     </button>  
0495  <button onclick="zoomIt('FPIX+z');">FPIX+z   </button> 
0496  <button onclick="zoomIt('FPIX-z');">FPIX-z   </button> 
0497  <hr size="2" />
0498  <button onclick="zoomIt('in');">    Zoom in  </button>   
0499  <button onclick="zoomIt('out');">   Zoom out </button> 
0500  <button onclick="zoomIt('full');">  Home     </button>    
0501  <button onclick="zoomIt('up');">    Up       </button>     
0502  <button onclick="zoomIt('down');">  Down     </button>    
0503  <button onclick="zoomIt('left');">  Left     </button>
0504  <button onclick="zoomIt('right');"> Right    </button>  
0505  </center> 
0506 </fieldset>
0507 
0508 <svg:svg width="100%" 
0509          height="100%" 
0510            viewBox="0 0 1024 768"  >
0511 <svg:defs>
0512   <svg:symbol id="magnifyer" 
0513               overflow="visible" 
0514               style="fill:white;stroke:darkcyan;stroke-width:2;" >
0515     <svg:circle r="12" />
0516   </svg:symbol>
0517   <svg:symbol id="magnifyerZoomOut" 
0518               overflow="visible" 
0519               style="fill:white;stroke:darkcyan;stroke-width:2;" >
0520     <svg:use  xlink:href="#magnifyer"/>
0521     <svg:line x1="-6" 
0522               y1="0"  
0523               x2="6"  
0524               y2="0"  
0525               style="stroke:darkcyan;stroke-width:2;"/>
0526   </svg:symbol>
0527   <svg:symbol id="magnifyerZoomIn" 
0528               overflow="visible">
0529     <svg:use  xlink:href="#magnifyer"/>
0530     <svg:line x1="-6" 
0531               y1="0"  
0532               x2="6"  
0533               y2="0"  
0534               style="stroke:darkcyan;stroke-width:2;"/>
0535     <svg:line x1="0"  
0536               y1="-6" 
0537               x2="0"  
0538               y2="6"  
0539               style="stroke:darkcyan;stroke-width:2;"/>
0540   </svg:symbol>
0541   <svg:symbol id="magnifyerFull" 
0542               overflow="visible">
0543     <svg:use  xlink:href="#magnifyer"/>
0544     <svg:line x1="-2" 
0545               y1="0"  
0546               x2="4"  
0547               y2="0"  
0548               style="stroke:darkcyan;stroke-width:2;"/>
0549     <svg:line x1="-2" 
0550               y1="-6" 
0551               x2="-4" 
0552               y2="6"  
0553               style="stroke:darkcyan;stroke-width:2;"/>
0554     <svg:line x1="-2" 
0555               y1="-6" 
0556               x2="5"  
0557               y2="-6" 
0558               style="stroke:darkcyan;stroke-width:2;"/>
0559   </svg:symbol>
0560 </svg:defs>
0561 
0562 
0563 <svg:svg id="referenceMap" 
0564          x="0" 
0565          y="510" 
0566          viewBox="0 0 3000 1600" 
0567          width="180" 
0568          height="100" 
0569          pointer-events="none">
0570  <svg:use xlink:href="#tracker" />
0571 </svg:svg>
0572 
0573 <svg:rect id="dragRectForRefMap" 
0574           class="dragRect" 
0575           x="0" 
0576           y="510" 
0577           width="180"
0578           height="100" 
0579           onmousedown="myRefMapDragger.drag(evt)"
0580           onmousemove="myRefMapDragger.drag(evt)"
0581           onmouseup="myRefMapDragger.drag(evt);myMainMap.newViewBox('dragRectForRefMap','referenceMap')"/>
0582 
0583 <svg:g id="navigatorElements" class="normalText">                 
0584  <text                         x="220" y="530">Zoom</text>     
0585  <svg:use  id="zoomOut"        x="230" y="560" xlink:href="#magnifyerZoomOut" onclick="zoomIt('out');"   onmouseover="magnify(evt,1.2,'out');"  onmouseout="magnify(evt,1,'out');" />
0586  <svg:use  id="zoomIn"         x="270" y="560" xlink:href="#magnifyerZoomIn"  onclick="zoomIt('in');"    onmouseover="magnify(evt,1.2,'in');"   onmouseout="magnify(evt,1,'in');"  />
0587  <svg:use  id="zoomFull"       x="310" y="560" xlink:href="#magnifyerFull"    onclick="zoomIt('full');"  onmouseover="magnify(evt,1.2,'full');" onmouseout="magnify(evt,1,'full');"/>
0588 
0589  <svg:text id="TrackerMessage" x="10" y="635"> - </svg:text>
0590  <svg:text id="TrackerText"    x="10" y="655"> - </svg:text>
0591  <svg:text id="TrackerText1"   x="10" y="675"> - </svg:text>
0592  </svg:g>
0593  
0594 <svg:image id="plot" 
0595            xlink:href="plot.jpg" 
0596            x="524" 
0597            y="0" 
0598            width="500" 
0599            height="650" /> 
0600 <svg:svg   id="mainMap" 
0601            x="0" 
0602            y="0" 
0603            viewBox="0 0 3000 1600" 
0604            width="500" 
0605            height="300">
0606 <svg:rect  fill="lightblue" 
0607            stroke="none" 
0608            x="0" 
0609            y="0" 
0610            width="3000" 
0611            height="1600" /> 
0612 <svg:g     id="tracker" 
0613            transform="translate(10,1500) rotate(270)" 
0614            style="fill:none;stroke:black;stroke-width:0;"> 
0615