Still Playing with Drawing in Javascript

Following the initial construction of a simple webapp function to allow users of a professional webapp sign onto the screen using their fingers (see previous post about “cleaning ladies”), I thought it would be cool to have some sort of collaborative setup where two users would share some sort of “space” in which what one draws is seen by the other in “real time”.

So I got to work this weekend and built a very simple webapp that works like this:

• the app starts with a blank canvas
• when a stroke ends (“touchend” event), the stroke (= array of points) is sent to a server and recorded in a database, with a username and a “sessionId”
• the app checks with the database every ½ second to see if there are strokes for the same session by another user
• if yes, those strokes are drawn on the canvas (using a different color)

This is all very basic but even in this extremely simple setup it’s extremely fun to use; my five-year-old can’t stop playing with it, with me ;–) (I have two iPod Touch)

I can see many uses for such an app; for example:

• boring meetings! you can play tic-tac-toe at a distance or even draw funny things while some schmuck is lecturing about something…
• remote drawing on a screen: it works the same if one of the users is on a desktop (well, I have not implemented mouse events, but the display already works)
• kids at school: much like boring meetings, but for boring classes instead.

Session Id

There are many technical problems to overcome (listed below) but for now my main problem is how to setup a “private” session? Since I only tested this app between two machines, there is only one session; but of course it would be unacceptable for many users to share the same session. Actually “setting up” the session is trivial: just use a shared unique sessionId; but how do users communicate this sessionId between themselves?

You could of course send a link via email; that would work while the app is just a webapp, but probably wouldn’t work if the app became a “native” iPhone app?

Or one could share sessionIds as numbers, much like we share phone numbers; maybe that’s acceptable…? I need to dig deeper for this.

Technical problems

The drawing is a little lame for now; using just touches[0] works reasonably well when drawing with one finger, but it does not work at all if one uses two fingers or more (as children try to do); it then draws straight lines between touches, which is ugly and disturbing. Must be a simple way around this though. Also, the fact that a “stroke” is between two points means that one point produces nothing; this makes it impossible to dot the “i"s when trying to write freehand (could draw a small circle for lonely points?)

The data exchange between the app and the server is simply done using Ajax and JSON, and stored centrally in a MySQL database; this is great in that if a user is offline, he can get the data back from the database when he comes back online (if the two machines communicated directly in realtime (which may not be possible anyway), any miscommunication would result in information loss). But it also produces enormous amounts of data: important traffic between the client and the server (HTTP headers!), enormous HTTP logs and MySQL entries. This is not really a problem now but would have to be addressed if this gained any number of users.

Finally — this is not very nice of me, but I’m starting to dislike JQTouch; I’m very grateful that it exists, and it certainly got me started in this whole mobile web dev business, but it feels bloated and buggy (for example, the “tap” event is uncertain, does not work on every element, etc.) I love jQuery for web development, but there is no need for much of it on a webapp (which is only going to be run in webkit anyway). There is apparently an alternative that looks terrific but it’s not released yet; browsing {ExpatLiving mobile](http://m.expatliving.sg/) on an iPhone is simply fantastic. Or I could try to implement a simple library; the only features I need are:

• a functioning universal “tap” event
• fixed screen with non-movable header and footer
• fast scrolling

and that’s it; I don’t care for fancy “transitions” or animations, etc.

tl;dr

I implemented a simple drawing sharing mobile webapp that my kids love; it still needs a LOT of work to be used by anybody else but it’s promising — and very exciting.