For exercise 5, we'll take a very simple drawing component that doesn't know anything about kwwika and extend it to allow collaborative drawing.  The drawing component consists of two js files, so you'll need to add the following script tags to your page:

<script src="../ex5_common/shapes.js"></script>
<script src="../ex5_common/DrawingSurface.js"></script>

If you're using internet explorer, you'll also need the excanvas script, because explorer doesn't natively support canvas.  Also, you'll need to make sure that most of your javascript doesn't happen until after the onload of the window (because the canvas tag won't be properly created until after load time).

<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>
     window.onload = function()
     {
          // ... your code here 
     }
</script>

Canvas

The drawing component uses a canvas tag, so you'll want to add a canvas tag to your html page, something like this:

<canvas width='800' height='600' onselectstart='return false' id='cnv'></canvas>

To use the drawing code, you create a javascript object with a reference to the canvas element:

drawingSurface = new DrawingSurface(document.getElementById('cnv'));

and then the canvas will allow the user to draw shapes interactively.  The shape that is being drawn can be set and the color that the user is drawing can be set with red green and blue components.

drawingSurface.setShape('Line');

drawingSurface.setColor(250, 10, 10);

The shapes that can be drawn are defined in shapes.js, and are Line, Rect, Triangle and Diamond.  You should create some html buttons near the canvas to allow you to change the shape or the color.  E.g.

     <button onclick="drawingSurface.setShape('Triangle');">Triangle</button>

<button onclick="drawingSurface.setColor(250, 10, 10);">Red</button>

In order to make this drawing component collaborative, we need a callback when a shape is drawn (so we can publish to a topic) and a way to programmatically draw a shape (when we receive a message about a shape).  You will want to publish and subscribe to /SPA2010/DRAW.  Whether you keep most of the current page and make a new connection listener, or repurpose your current connection listener is up to you.

Fortunately, the drawing component supports both:

drawingSurface.shapeAdded = function(shape, color, point1, point2)

{

      // your code to publish this goes here

}

Will notify you when the user has drawn a shape in the canvas, giving you the shape, the color and two points that define the position and size of the shape.  The point objects are simple and have x and y attributes that can be accessed in the normal way.

You can aslo programmatically add a shape when you receive a message:

drawingSurface.addShape(sShape, sColor, oPoint1, oPoint2); 

You can create new point objects to pass into the addShape function with code like:

     var oPoint1 = new Point(mUpdate.point1X, mUpdate.point1Y);