web/slider.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8"/>
   3 <html xmlns="http://www.w3.org/1999/xhtml"
   4       xml:lang="en">
   5   <head>
   6     <title>Light control</title>
   7     <link rel='stylesheet' type='text/css' href='webif.css'/>
   8
   9   <script type="text/ecmascript" src="lightcontrol.js">
  10   </script>
  11
  12   </head>
  13
  14   <body onLoad="_init()">
  15     <h1>Light control</h1>
  16
  17 <form>
  18    Red  <input type='text' id='red' onChange='change_light("red", this.value)'/><br/>
  19    Green  <input type='text' id='green' onChange='change_light("green", this.value)'/><br/>
  20    Blue  <input type='text' id='blue' onChange='change_light("blue", this.value)'/><br/>
  21    White  <input type='text' id='white' onChange='change_light("white", this.value)'/><br/>
  22 </form>
  23
  24     <p>
  25
  26 <svg width="1024" height="768" version="1.1"
  27      xmlns="http://www.w3.org/2000/svg"
  28      xmlns:xlink="http://www.w3.org/1999/xlink" >
  29
  30   <script type="text/ecmascript"><![CDATA[
  31     var slide_white;
  32
  33     var timevalue = 0;
  34     var timer_increment = 200;
  35     var max_time = 5000;
  36     var m31;
  37     var welcome;
  38     var andromeda;
  39
  40     function StartAnimation(evt)
  41     {
  42       welcome = evt.target.ownerDocument.getElementById("welcome");
  43       andromeda = evt.target.ownerDocument.getElementById("andromeda");
  44       slide_white = evt.target.ownerDocument.getElementById("slide_white");
  45       MoveWelcome();
  46     }
  47
  48     function MoveAndromeda()
  49     {
  50       timevalue = timevalue + timer_increment;
  51       if (timevalue > max_time)
  52       {
  53         return;
  54       }
  55       andromeda.setAttribute("x", -550 + timevalue / max_time * 800);
  56       setTimeout("MoveAndromeda()", timer_increment);
  57     }
  58
  59     function MoveWelcome()
  60     {
  61       timevalue = timevalue + timer_increment;
  62       if (timevalue > max_time)
  63       {
  64         //andromeda.setAttribute("x", 0);
  65         timevalue = 0;
  66         timer_increment = 50;
  67         //setTimeout("MoveAndromeda()", timer_increment);
  68         return;
  69       }
  70       welcome.setAttribute("y", timevalue / max_time * 100);
  71       setTimeout("MoveWelcome()", timer_increment);
  72     }
  73
  74     function ShowAndGrowElement()
  75     {
  76       timevalue = timevalue + timer_increment;
  77       if (timevalue > max_time)
  78       {
  79         //welcome.setAttribute("y", 0);
  80         timevalue = 0;
  81         setTimeout("MoveWelcome()", timer_increment);
  82         return;
  83       }
  84
  85       //scalefactor = (timevalue * 20.) / max_time;
  86       //text_element.setAttribute("transform", "scale(" + scalefactor + ")");
  87
  88       // Make the image more opaque
  89       opacityfactor = timevalue / max_time;
  90       m31.setAttribute("opacity", opacityfactor);
  91       // Call ShowAndGrowElement again <timer_increment> milliseconds later.
  92       setTimeout("ShowAndGrowElement()", timer_increment)
  93     }
  94     window.ShowAndGrowElement = ShowAndGrowElement
  95   ]]></script>
  96
  97   <rect x="40" y="240" width="10" height="200" fill='white'/>
  98   <rect id='slide_white' x="30" y="280" width="30" height="10" stroke='white' fill='yellow' draggable='true' ondrag='alert("drag")' ondragstart='alert("dragstart")'/>
  99   <text id="welcome" x="10" y="0" stroke="white" font-color="white" font-size="80">Welcome to</text>
 100   <text id="andromeda" x="-550" y="550" stroke="white" font-color="white" font-size="80">Andromeda</text>
 101 </svg>
 102
 103     </p>
 104
 105 <svg width="200" height="40" version="1.1"
 106      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 107   <a xlink:href='example11.xhtml'>
 108   <rect x="35" y="15" width="60" height="10"/>
 109   <polygon points="35,5 10,20 35,35" fill="yellow" stroke="black" stroke-width="3"/>
 110   </a>
 111 <!--
 112   <a xlink:href='example11.xhtml'>
 113   <rect x="110" y="15" width="60" height="10"/>
 114   <polygon points="170,5 195,20 170,35" fill="yellow" stroke="black" stroke-width="3"/>
 115   </a>
 116 -->
 117 </svg>
 118
 119   </body>
 120 </html>