layout/svg/tests/example.xml

   1 <?xml version="1.0"?>
   2 <?xml-stylesheet href="svg.css" type="text/css"?>
   3 <!DOCTYPE svg SYSTEM "SVG-20000202.dtd" >
   4 <!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 10 January 2000//EN" -->
   5 <!--  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> -->
   6 <svg xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.svg"
   7      xmlns:html="http://www.w3.org/1999/xhtml">
   8
   9   <html:script>
  10 <![CDATA[
  11
  12 var gIsInit  = false;
  13 var barXPnts = new Array();
  14 var barYPnts = new Array();
  15
  16 var nodes = new Array();
  17 var gBarMax   = 200;
  18 var gHeight   = 80;
  19 var gBarCount = 10;
  20 var gBarDir   = 1;
  21 var gGo       = true;
  22
  23 function init()
  24 {
  25   dump("----------------\n");
  26   nodes[0] = findNode(document.documentElement, "bar21");
  27   nodes[1] = findNode(document.documentElement, "bar22");
  28   nodes[2] = findNode(document.documentElement, "bar23");
  29   nodes[3] = findNode(document.documentElement, "bargrid21");
  30   nodes[4] = findNode(document.documentElement, "bargrid22");
  31   nodes[5] = findNode(document.documentElement, "bargrid23");
  32   dump("----------------\n");
  33   gGo = true;
  34   setTimeout("moveit()", 100);
  35 }
  36 function stop()
  37 {
  38   gGo = false;
  39 }
  40 function ChangeBar(name, height)
  41 {
  42   today = new Date();
  43   stime = today.getMilliseconds();
  44   dump("----------------\n");
  45   str = name+"1";
  46   node = findNode(document.documentElement, str);
  47   //node = document.getElementById(str);
  48   today = new Date();
  49   etime = today.getMilliseconds();
  50   dump("1----------------"+(etime-stime)+"\n");
  51   attr = document.createAttribute("points");
  52   attr.value = "30 " + height + " 30 210 50 210 50 " + height;
  53   node.attributes.setNamedItem(attr);
  54   today = new Date();
  55   stime = today.getMilliseconds();
  56   dump("2----------------"+(stime-etime)+"\n");
  57
  58   str = name+"2";
  59   node = findNode(document.documentElement, str);
  60   dump("3----------------\n");
  61   attr.value = "30 " + height + " 50 " + height + " 60 " + (height-10) + " 40 " + (height-10);
  62   node.attributes.setNamedItem(attr);
  63   dump("4----------------\n");
  64
  65   str = name+"3";
  66   node = findNode(document.documentElement, str);
  67   dump("5----------------\n");
  68   attr.value = "50 " + height + " 60 " + (height-10) + " 60 200 50 210";
  69   node.attributes.setNamedItem(attr);
  70   dump("=================\n");
  71 }
  72
  73 function ChangeBarWithNodes(node1, node2, node3, height)
  74 {
  75   attr = document.createAttribute("points");
  76   attr.value = "30 " + height + " 30 210 50 210 50 " + height;
  77   node1.attributes.setNamedItem(attr);
  78
  79   attr.value = "30 " + height + " 50 " + height + " 60 " + (height-10) + " 40 " + (height-10);
  80   node2.attributes.setNamedItem(attr);
  81
  82   attr.value = "50 " + height + " 60 " + (height-10) + " 60 200 50 210";
  83   node3.attributes.setNamedItem(attr);
  84 }
  85
  86 function moveit()
  87 {
  88   //ChangeBar("bar2", 150);
  89   //ChangeBar("bargrid2", 150);
  90
  91   ChangeBarWithNodes(nodes[0], nodes[1], nodes[2], gHeight);
  92   ChangeBarWithNodes(nodes[3], nodes[4], nodes[5], gHeight);
  93
  94   gHeight += gBarDir;
  95   gBarCount--;
  96   //dump("gHeight: "+gHeight+"   gBarCount: "+gBarCount+"  gBarDir: "+gBarDir+"\n");
  97   if (gHeight > gBarMax || gHeight < 1) {
  98     gBarDir *= -1;
  99     gBarCount = (Math.random() * 15)+3;
 100     //dump("Changining directions: "+gBarDir+"\n");
 101     if (gHeight > gBarMax) {
 102       gHeight = gBarMax;
 103     } else {
 104       gHeight = 1;
 105     }
 106   } else {
 107     if (gBarCount < 1) {
 108       gBarDir *= -1;
 109       gBarCount = (Math.random() * 15)+3;
 110       //dump("----> "+gBarCount+"\n");
 111     }
 112   }
 113   if (gGo) {
 114     setTimeout("moveit()", 100);
 115   }
 116
 117 }
 118
 119 function findNode(node, nodename)
 120 {
 121   var type = node.nodeType;
 122   if (type == Node.ELEMENT_NODE) {
 123
 124       // open tag
 125       //dump("\<" + node.tagName);
 126
 127       // dump the attributes if any
 128       attributes = node.attributes;
 129       if (null != attributes) {
 130         var countAttrs = attributes.length;
 131         var index = 0;
 132         while(index < countAttrs) {
 133           att = attributes[index];
 134           if (null != att) {
 135             //dump(" " + att.name + "=" + att.value+" ["+nodename+"]\n");
 136             if (att.name == "id" && att.value == nodename) {
 137               //dump("Found it!\n");
 138               return node;
 139             }
 140           }
 141           index++;
 142         }
 143       }
 144
 145       // recursively dump the children
 146       if (node.hasChildNodes()) {
 147               // close tag
 148         //dump(">");
 149
 150         // get the children
 151         var children = node.childNodes;
 152         var length = children.length;
 153         var count = 0;
 154         while(count < length) {
 155           child = children[count];
 156           fndNode = findNode(child, nodename);
 157           if (fndNode != null) {
 158             return fndNode;
 159           }
 160           count++;
 161         }
 162         //dump("</" + node.tagName + ">");
 163       } else {
 164               // close tag
 165         //dump("/>");
 166       }
 167
 168
 169   }
 170   // if it's a piece of text just dump the text
 171   else if (type == Node.TEXT_NODE) {
 172       //dump(node.data);
 173   }
 174   return null;
 175 }
 176
 177 ]]>
 178   </html:script>
 179
 180   <g>
 181     <polyline x="55" y="10" id="bg" points="20 0 220 0 220 200 20 200"/>
 182     <polyline x="55" y="10" id="bg" points="20 0 20 200 0 220 0 20 0 20  20 0"/>
 183     <polyline x="55" y="10" id="bg" points="20 200 220 200 200 220 0 220"/>
 184
 185     <polyline x="55" y="10" id="grid" points="20 0 220 0 220 200 20 200"/>
 186     <polyline x="55" y="10" id="grid" points="20 0 20 200 0 220 0 20 0 20"/>
 187     <polyline x="55" y="10" id="grid" points="20 200 220 200 200 220 0 220"/>
 188
 189     <polyline x="55" y="10" id="grid" points="20  220 40  200  40   0"/>
 190     <polyline x="55" y="10" id="grid" points="40  220 60  200  60   0"/>
 191     <polyline x="55" y="10" id="grid" points="60  220 80  200  80   0"/>
 192     <polyline x="55" y="10" id="grid" points="80  220 100 200  100  0"/>
 193     <polyline x="55" y="10" id="grid" points="100 220 120 200  120  0"/>
 194     <polyline x="55" y="10" id="grid" points="120 220 140 200  140  0"/>
 195     <polyline x="55" y="10" id="grid" points="140 220 160 200  160  0"/>
 196     <polyline x="55" y="10" id="grid" points="160 220 180 200  180  0"/>
 197     <polyline x="55" y="10" id="grid" points="180 220 200 200  200  0"/>
 198
 199     <polygon x="55" y="10" id="bar1" points="30 60 30 210 50 210 50 60"/>
 200     <polygon x="55" y="10" id="bar1" points="30 60 50 60 60 50 40 50"/>
 201     <polygon x="55" y="10" id="bar1" points="50 60 60 50 60 200 50 210"/>
 202
 203     <polyline x="55" y="10" id="grid" points="30 60 30 210 50 210 50 60"/>
 204     <polyline x="55" y="10" id="grid" points="30 60 50 60 60 50 40 50"/>
 205     <polyline x="55" y="10" id="grid" points="50 60 60 50 60 200 50 210"/>
 206
 207
 208     <polygon x="95" y="10" id="bar21" points="30 80 30 210 50 210 50 80"/>
 209     <polygon x="95" y="10" id="bar22" points="30 80 50 80  60 70  40 70"/>
 210     <polygon x="95" y="10" id="bar23" points="50 80 60 70  60 200 50 210"/>
 211
 212     <polyline x="95" y="10" id="bargrid21" points="30 80 30 210 50 210 50 80"/>
 213     <polyline x="95" y="10" id="bargrid22" points="30 80 50 80  60 70  40 70"/>
 214     <polyline x="95" y="10" id="bargrid23" points="50 80 60 70  60 200 50 210"/>
 215
 216     <polygon x="400" y="20" id="rect" points="10 10 50 10 50 50"/>
 217     <polygon x="400" y="75" id="poly" points="10 10 50 10 50 50 45 70 32 32 80 20"/>
 218     <polyline x="400" y="150" id="poly" points="10 10 50 10 50 50 45 70 32 32 80 20"/>
 219
 220   </g>
 221   <foreignobject>
 222     <html:div style="position:absolute;top:5px;left:385px;">Simple Polygons</html:div>
 223     <html:div style="position:absolute;top:240px;left:115px;">A Simple Graph</html:div>
 224     <html:input type="button" style="position:absolute;top:260px;left:350px;" onclick="init();" value="Start"/>
 225     <html:input type="button" style="position:absolute;top:260px;left:390px;" onclick="stop();" value="Stop"/>
 226   </foreignobject>
 227 </svg>