http://pwdemo.rcode.net/svg_tester

I know I’m probably late to the game on this one, but I had not realized until recently how well SVG was supported in a lot of browsers. I actually didn’t realize it until I needed it for a visually rich application prototype I’m working on. I really didn’t want to use Flash, so I checked out SVG again. To my suprise, it is fully integrated into Firefox, Opera 9 and some (pre-release?) versions of Safari.

So I started with the SVG example from Mozilla.org. It draws three circles with primary colors that are semi-transparent:

   1:  <svg xmlns="http://www.w3.org/2000/svg"

   2:       version="1.1" width="500" height="500"

   3:       baseProfile="full">

   4:    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">

   5:      <circle cx="6cm" cy="2cm" r="100" fill="red"

   6:                      transform="translate(0,50)" />

   7:      <circle cx="6cm" cy="2cm" r="100" fill="blue"

   8:                      transform="translate(70,150)" />

   9:

  10:      <circle cx="6cm" cy="2cm" r="100" fill="green"

  11:                      transform="translate(-70,150)" />

  12:

  13:    </g>

  14:

  15:  </svg>

  16:

I thought a modest goal would be to adapt Protowidget so that it could attach widgets to some SVG elements. I could then use the property bindings to make the circles move around. It’s dumb and pretty simple but forms the basis for creating more advanced SVG widgets.

This turned out to be harder than I had expected. The main culprit was that Protowidget wasn’t fully compatible with real XHTML. There’s the normal stuff: no document.write (it was used to bootstrap the system by writing script elements to the header), createElement must use namespaces, etc. It took a little longer than necessary to fix because I still wanted to preserve compatibility with namespaced xml documents and IE when the advanced features were not in use.

So I fixed all of that and added real namespace support so that the Protowidget attributes are now part of their own namespace if using an XHTML document. If working in normal HTML, the pw.* syntax can still be used. There’s even a hack, so that if you use the “pw:” prefix for your namespace, the parser will be able to work around IE’s deficiencies. I then added an SvgWidget to mirror the HTML DOMWidget (which in hindsight should have been named HTMLWidget). It’s basically a light version of the DOMWidget base class which leaves off the CSS class and style processing that does not apply (at least in the same way) to SVG elements.

The end result was to change the example SVG to include some Protowidget attributes:

   1:  <svg xmlns="http://www.w3.org/2000/svg"

   2:       version="1.1" width="500" height="500"

   3:       baseProfile="full">

   4:    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">

   5:      <circle cx="6cm" cy="2cm" r="100" fill="red"

   6:                      transform="translate(0,50)"

   7:                      pw:type=’Svg.SvgWidget’

   8:                      pw:element.r=’#{`Jitter1`}’/>

   9:      <circle cx="6cm" cy="2cm" r="100" fill="blue"

  10:                      transform="translate(70,150)"

  11:                      pw:type=’Svg.SvgWidget’

  12:                      pw:element.r=’#{`Jitter2`}’/>

  13:      <circle cx="6cm" cy="2cm" r="100" fill="green"

  14:                      transform="translate(-70,150)"

  15:                      pw:type=’Svg.SvgWidget’

  16:                      pw:element.r=’#{`Jitter3`}’/>

  17:    </g>

  18:  </svg>

  19:

What this does is declare the three circle elements to be of Protowidget type “Svg.SvgWidget”. As I mentioned before, this is intended to be a base class for more advanced Svg widgets, but it provides some features that make it useful on its own. For one you can establish bindings between Protowidget models and attributes of the elements. This is what is done with the pw:element.r attributes. They are binding the circle’s radius to the values of “Jitter1″, “Jitter2″ and “Jitter3″ respectively.

What makes this go is a little chunk of code in the header that sets up a timer to set Jitter1, Jitter2 and Jitter3 to random values:

   1:    PwLoader.inlineExecute(function() {

   2:      Protowidget.beforeStartup(updateJitter);

   3:    });

   4:

   5:    function updateJitter() {

   6:      Protowidget.RootWidget.setAttribute(’Jitter1′, 100+Math.random() * 50);

   7:      Protowidget.RootWidget.setAttribute(’Jitter2′, 100+Math.random() * 50);

   8:      Protowidget.RootWidget.setAttribute(’Jitter3′, 100+Math.random() * 50);

   9:      setTimeout(updateJitter, 100);

  10:    }

  11:

(The couple of lines at the top are necessary for inline scripts that act outside of the module system. It ensures that the script is executed at the proper time in the startup sequence.)

Pretty neat, huh!
Here’s the URL again: http://pwdemo.rcode.net/svg_tester
I’ve tested it with Firefox 1.5 and Opera 9. It should work on Mozilla builds with SVG enabled.

For anyone whose interested, you can get all of this from anonymous svn: https://dev.rcode.net/svn/protowidget/trunk/protowidget

You can also visit the Protowidget Wiki.