source: Using Internal & External Scripts, [rit.edu]

<script type="text/ecmascript" xlink:href="scripts/changeCircle.js"/>

This ECMAScript extracts the filename from a URL. eg. the filename 'index4.svg' would be extracted from the document.URL with the value 'http://rorbuilder.info/r/whiteboardqueue/index4.svg'.

var regexp = /(\w|[-.])+$/
str = document.URL
a = regexp.exec(str)
alert(a[0])

Reference: Regular Expressions: Methods - Doc JavaScript [webreference.com]

This ECMAScript implements an undo feature for the SVG whiteboard. When the user presses CTRL+Z the last shape in the message_buffer variable is removed.

  function undoLast() {
    ipos = getLastMethodPos(message_buffer,-1)
    if (ipos > 0)
      message_buffer = message_buffer.substring(0, ipos)
    else
      message_buffer = ''    
  }
  
  function getLastMethodPos(message, pos) {
    i = message.indexOf('<method', pos+1)
    if (i >= 0) 
      result = getLastMethodPos(message, i)
    else
      result = pos 
    return result;
  }

Here's an example of the messages (containing shapes) stored in the message_buffer

"<method name='create'><params><param var='type'>shape</param><param var='body'>
polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D
%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20
513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474%
2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22
5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20
478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497%
2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24
3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20
560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558%
2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18
4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20
518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479%
2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13
1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A
</param><param var='sender'>34855</param></params></method><method name='create'><params><param 
var='type'>shape</param><param var='body'>polyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none
%27%20stroke%3D%27red%27%20id%3D
%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20
453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438%
2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19
6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20
431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432%
2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22
9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20
438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445%
2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25
2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20
469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481%
2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26
3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20
511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524%
2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25
7%20540%2C257%27%23%3A</param><param var='sender'>34855</param></params></method>"

In the above example there are 2 methods calls ready to be sent to the server, the 2nd method would be removed after the undoLast() function had executed.

The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results.

This code only removes the shape before it's sent to the server, I still need to write the code to delete a shape which is in the server whiteboardqueue, and remove the shape element from the web browser display (SVG DOM).

The following code used with the ProjectX API informs the client web browser that the whiteboard will be refreshed in 5 seconds. It then archives the current whiteboard information, formats it, and sends a message to each web browser to refresh their view.

<project name="whiteboardqueue">
  <methods>
    <method name="create">
      <params>
        <param var="type">ecmascript</param>
        <param var="body">startRefresh(5)</param>
        <param var="sender">system</param>
      </params>
    </method>
    <method name="timer">
      <params>
        <param var="timer">5</param>
      </params>
    </method>
    <method name="archive_and_format">
      <params/>
    </method>
    <method name="create">
      <params>
        <param var="type">ecmascript</param>
        <param var="body">reloadDocument()</param>
        <param var="sender">system</param>
      </params>
    </method>
  </methods>
</project>

*update 1:14am*
The whiteboard demo [rorbuilder.info] allows the user to draw using the mouse within the web browser which renders SVG. Tested on Flock and Firefox.

*update 4:42pm 28 Mar 08*
You can also view the whiteboard message queue [rorbuilder.info].

*update 6:29pm Mar 08*
I've created a short url (http://rubyurl.com/vxHD) (to demonstrate the cleaning of the whiteboard) which redirects to this http://rorbuilder.info/api/projectx.cgi?xml_project=<project name="whiteboardqueue"><methods><method name="create"><params><param var="type">ecmascript</param><param var="body">startRefresh(5)</param><param var="sender">system</param></params></method><method name="timer"><params><param var="timer">5</param></params></method><method name="archive_and_format"><params/></method><method name="create"><params><param var="type">ecmascript</param><param var="body">reloadDocument()</param><param var="sender">system</param></params></method></methods></project>

I've

This code is very similar to Draw a series of lines using SVG [dzone.com] but now we can draw a series of points at the same time the mouse button is pressed and is moving. Here's an example of the SVG squiggle output [twitxr.com].

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g id="sketch" class="sketch">

    <rect x="0"
y="0" width="100%" height="100%" fill="yellow" />
  </g>

  <script>
  <![CDATA[
  var	xmlns="http://www.w3.org/2000/svg"
  Root=document.documentElement
  on_start(Root)

  function mouseUp(evt) {
	  on_pen_up(Root);
  }

  function on_start(R){
	  var Attr={
	    "onmousemove":"mouseMove",
      "onmousedown":"add_line(evt)",	
      "onmouseup":"mouseUp"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_down(R){
	  var Attr={
	    "onmousemove":"addPoint(evt)",
	    "onmouseup":"on_pen_up(Root)"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_up(R){
	  var Attr={
	    "onmousemove":"null"
	  }
	  assignAttr(R,Attr)
  }

  function add_line(evt){
	  //if (evt.target.nodeName!="rect") return
	  var C=document.createElementNS(xmlns,"polyline") 
	
	  var Attr={
		  "x":30,
		  "y":180,
		  "fill":'none',
		  "stroke": '#44a',
		  "id":'pl1',
		  "stroke-width":2
	  }
    
	  assignAttr(C,Attr)
	  Root.appendChild(C)
    
	  on_pen_down(Root)
  }

  function addPoint (evt) {
    element = document.getElementById('pl1') 	
    var point = element.ownerDocument.documentElement.createSVGPoint(); 
    point.x = evt.clientX; 
    point.y = evt.clientY;
    
    element.points.appendItem(point);
  }

  function assignAttr(O,A){
	  for (i in A) O.setAttributeNS(null,i, A[i])
  }

  ]]>
  </script>

  <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
  <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 onclick="addPoint(evt, document.getElementById('pl1'));"> 
  <title>click to add point to polyline</title>
  <script type="text/ecmascript">
    <![CDATA[ 
      function addPoint (evt, element) {
        var point = element.ownerDocument.documentElement.createSVGPoint(); 
        point.x = evt.clientX; 
        point.y = evt.clientY; 
        element.points.appendItem(point);
      }
    ]]>
  </script> 
  <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" />
  <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" />
</svg> 

Demonstrates creating creating and dragging circles using SVG and ECMAScript.

Tested on Firefox 3 beta 4.

file: makeDragDrop.svg

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
<script><![CDATA[
var	xmlns="http://www.w3.org/2000/svg"
	xlink="http://www.w3.org/1999/xlink" 
	Root=document.documentElement
standardize(Root)

function standardize(R){
	var Attr={
		"onmouseup":"add(evt)",
		"onmousedown":"grab(evt)",
		"onmousemove":null,
		"onmouseover":"hilight(evt)",
		"onmouseout":"hilight(evt)"
	}
	assignAttr(R,Attr)
}
function hilight(evt){
	var T=evt.target
	if (T.nodeName=="rect") return
	if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
	else T.setAttributeNS(null,"stroke-opacity",.5)
}
function add(evt){
	if (evt.target.nodeName!="rect") return
	var C=document.createElementNS(xmlns,"circle") 
	var stroke=Color()
	var rad=10+Math.random()*50
	var Attr={
		r:rad,
		cx:evt.clientX,
		cy:evt.clientY,
		"fill": Color(),
		"fill-opacity":.75,
		"stroke": stroke,
		"stroke-opacity":.5,
		"id":stroke,
		"stroke-width":10+Math.random()*(55-rad)
	}
	assignAttr(C,Attr)
	Root.appendChild(C)
}
function grab(evt){
	var O=evt.target
	if (evt.target.nodeName=="rect") return
	var Attr={
		"onmousemove":"slide(evt,'"+O.id+"')",
		"onmouseup":"standardize(Root)"
	}
	assignAttr(Root,Attr)
}
function slide(evt,id){
	var o=document.getElementById(id)
	var c=""; if (o.nodeName=="circle") c="c"
	o.setAttributeNS(null, c+"x", evt.clientX)
	o.setAttributeNS(null, c+"y", evt.clientY)
}
function assignAttr(O,A){
	for (i in A) O.setAttributeNS(null,i, A[i])
}
function Color(){
	return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
}
]]>
</script>
<rect width="100%" height="100%" fill="white"/>
<text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
<text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

Source file copied from http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg