GAE + GWT 003 – Collaba-Doodle

So I’ve been tinkering around with the idea of collaborative works and social web pages. Such popular success stories can be seen by Google Documents and other ‘cloud’ solutions out there. Ok so maybe people have notices how ‘pro-Google’ these blog posts may be but, as of this post, I am in no way affiliated with them except for a solemn end-users which enjoys the things they put out.

Anyway digressing from the main point, I remember playing around with a flash-based web application a few years ago which acted like a fridge magnet board – it had numerous objects ‘stuck’ to it and could be manipulated by anyone who joined. It was really fun (despite the some what unusually high volume of people trying to write ‘male genitalia’ on it – you get the picture).

So I thought to myself, how about I try to push it one step further and have a collaborative white board where all the user has are the white board markers. Essentially, giving them an empty canvas to doodle random things on. And thus spawned ‘Collaba-doodle’ a (HTML5) canvas where anyone with access to the board can write something on it.

The currently prototyped version is on my showcase for all to play around with. However, it has the following features (for now):

Colours are always random because we like interesting things

Updates occur each time only when the user stops drawing

The server only keeps a cache of the 200 most recent ‘pixels’ when sending information around to other collaborators

You can get an image of the canvas by clicking the link

Clearing the canvas only affects you and does not push any changes to the server

Anyway, you get the picture.. there’s limitations with it now as its a simple proof of concept. And, despite being limited in functionality it is actually quite fun to play around with. I wonder what interesting images will come out of it – perhaps I should also add a gallery for this?…

As mentioned very briefly, I’m trying this new HTML5 canvas and luckily, GWT provides us with a canvas component to use =) This makes life much MUCH easier – Construct the canvas object, test to see if it exists (if it doesn’t, the browser doesn’t support HTML5 canvas yet). Then, we need to get a Context2D object (akin to the Java Graphics2D object). It is thought this Context2D object that we perform all out ‘fillRect’, ‘fillArc’ etc… methods to actually draw stuff on the canvas – all fairly trivial.

Behind the scenes we simply keep a log of the user’s current ‘pen stroke’ (what they are drawing with a single click). These get sent to the server and added to the main canvas object (preference given to the later strokes – obviously). Periodically, the server returns a list of strokes which have been written to the main canvas object since the last update and applies the changes to the user’s canvas. Simple enough? A crude and naive solution but one which tests proof of concept – Collaba-Doodle =)

Now… not sure what to tinker around with next or whether I should try to further optimise the Collaba-Doodle… Whatever it is, there are plenty of things to try and it is clear that GAE+GWT is a solution ftw.

Advertisement