The SVG Agent

This is a variation of the Text-To-Speech/SVG example. These characters - called agents - come with windows 2000 and ME (not sure about 98). You can download them here for free.

The Agent Control also comes with a text-to-speech engine. It is no problem to use that from a HTML-page, but it refuses to get inserted to an SVG-document via ActiveXObject.

Note: This windows only :( example works with IE5.x and later. Netscape's Navigator 4.xx failed .. obviously by dynamically loading the ActiveX control. (Fixing this is welcome!). I would also like to hear about platform independent solutions.

Here is the code:

<?xml version="1.0"?>
<svg width="400" height="300" onload="Init(evt)">
  <rect x="50" y="50" width="200" height="80" stroke="blue" fill="red" 
        onmouseover="DescribeElement(evt)" />
  <circle cx="100" cy="200" r="5" onmouseover="SpeakTitle(evt)" >
    <title>Here lives the mouse.</title>
  </circle>
  <text x="80" y="250" style="font-family:Verdana; fill:green" onmouseover="SpeakText(evt)">
    Enjoy this agent example!
  </text>

  <script><![CDATA[
    var ctl=null, merlin=null;  // the msagent control / character ..

    function Init(e)
    {
      ctl = new ActiveXObject("Agent.Control.2");
      if (ctl)
      {
         ctl.Connected = true;
         ctl.Characters.Load("Merlin", "merlin.acs");
         merlin = ctl.Characters.Character("Merlin");
         merlin.MoveTo(300,200);
         merlin.Show();
         merlin.Speak("Hello, I am " + merlin.Name + 
                      ". I would like to introduce you to SVG" + 
                      ". Simply point with your mouse onto the elements.");
         merlin.Think("I beg to make no mistake yet!");
      }
    }

    function DescribeElement(e)
    {
      if (merlin) 
      {
         merlin.Play("GestureUp");
         merlin.Speak("This is a '" + e.target.nodeName + "' element.");
      }
    }

    function SpeakTitle(e)
    {
      if (merlin) 
      {
         merlin.Play("GestureRight");
         merlin.Speak(TextOf(TitleElementOf(e.target)));
      }
    }

    function SpeakText(e)
    {
      if (merlin) 
      {
         merlin.Play("GestureDown");
         merlin.Speak(TextOf(e.target));
      }
    }

    // -- local helper functions ------
    function TitleElementOf(elem)
    {
      var childs = elem.childNodes;
      for (var i=0; i<childs.length; i++)
        if (childs.item(i).nodeType == 1 && childs.item(i).nodeName == "title") // title element ..
          return childs.item(i);
      return null;
    }

    function TextOf(elem)
    {
      var childs = elem ? elem.childNodes : null;
      for (var i=0; childs && i<childs.length; i++)
        if (childs.item(i).nodeType == 3) // text node ..
           return childs.item(i).nodeValue;
      return "";
    }
  ]]></script>
</svg>
  

Test it.

© 2001 MecXpert