Loading ...
Sorry, an error occurred while loading the content.
 

Trying to create a wind direction indicator but struggling a bit.

Expand Messages
  • grhughes
    I want to create a wind direction indicator pointer and animate it so it flows smoothly between directions. I have put toget a bit of code that when loaded
    Message 1 of 1 , Aug 30, 2003
      I want to create a wind direction indicator pointer and animate it so
      it flows smoothly between directions. I have put toget a bit of code
      that when loaded smoothly flows the pointer from south to west. I
      put in a onclick event to change the rotate values and the pointer
      moves but I loose my smooth transition and the pointer just appears
      at the new location. Can someone have a look and offer me some
      suggestions. The onclick only works for 4 clicks. Thanks in
      advance.

      <svg onload="Initialize(evt);">


      <defs>
      <script>
      <![CDATA[

      var svgDocument = null

      function Initialize(LoadEvent)
      {
      svgDocument = LoadEvent.target.ownerDocument;
      }

      function testit(dir)
      {

      objS = svgDocument.getElementById("pointer");

      objS = svgDocument.getElementById("tran");

      if (dir=='1')//w
      {

      objS.setAttribute('from','180');
      objS.setAttribute('to','90');

      }

      if (dir=='2')//n
      {
      objS.setAttribute('from','180');
      objS.setAttribute('to','180');

      }

      if (dir=='3')//s
      {
      objS.setAttribute('from','180');
      objS.setAttribute('to','0');
      }

      if (dir=='4')//e
      {
      objS.setAttribute('from','0');
      objS.setAttribute('to','270');
      }

      }

      var i = 0
      function dirs()
      {
      i = i+1
      testit(i)
      }


      function informe(evt)
      {
      objet=evt.target;att=objet.attributes;chaine='Attributes:\nNumber:
      '+att.length;
      for (i=0;i<att.length;i++)
      {
      chaine=chaine+'\n'+att.item(i).name+' : '+att.item(i).value
      };
      alert(chaine)
      }


      ]]>
      </script>

      <desc>This is a spinning star ...</desc>
      <polygon id="star" style="fill:red;fill-rule:nonzero;"
      points="0,-14 8.229,11.326 -13.315,-4.326 13.315,-4.326
      -8.229,11.326">
      <animateTransform attributeName="transform" type="rotate"
      values="0;360" dur="3s" repeatDur="indefinite" />
      </polygon>
      <desc>This is a spinning pointer ...</desc>
      <polygon id="pointer" style="fill:red;fill-rule:nonzero;"
      points="-3, 0 0, 50 3, 0">
      <animateTransform id="tran" attributeName="transform" type="rotate"
      from="0" to="90" dur="2" begin="0" fill="freeze"/>
      </polygon>
      <symbol id="Pointer2">
      <circle cx="50" cy="50" r="3" />
      <path d="M 47 50 L 50 10 L 53 50" />
      <animateTransform attributeName="transform" type="rotate"
      values="0;360" dur="2s" repeatDur="indefinite" />
      </symbol>
      </defs>
      <g transform="translate(100 100)" onclick="dirs();">
      <use xlink:href="#pointer" x="0"/>
      <circle cx="0" cy="0" r="3" />
      </g>
      </svg>
    Your message has been successfully submitted and would be delivered to recipients shortly.