A Tale Of Two Bugs

Noticed two weird quirks yesterday, one in Chrome and one in Safari on iOS.

Reset Canvas on Chrome

Usually to reset the content of the canvas tag one writes:

canvas.width = canvas width;

But that doesn’t really work in Chrome: the canvas stays the same and is not cleared.

It sort of works, though, in that afterwards, if one tries to paint something on the same canvas, the new information “clears” a zone around itself.

This reminded me of the strange Chrome behavior where if you have many tabs opened, and leave them opened for a long time, when you activate them again they “repaint” the page on the screen, quite slowly (AFAIK, no other tabbed browser does this).

I suspect that Chrome has a universal “lazy” approach (in the noble sense of the term found in “lazy evaluation”): don’t do anything until you absolutely have to. There is no point in maintaining the appearance of an invisible tab in memory (of a tab that hasn’t been visible for a while); there is no point in repainting a canvas until it’s used, esp. when set to new dimensions that are the same as the old ones.

Except, there is, since resetting canvas width is the accepted method of clearing it.

The workaround:

canvas.width = canvas.width + 1;

Then Chrome feels compelled to actually repaint the canvas.

Of course if you do this often, you’ll end up needlessly enlarging the canvas; what you want to do is storing the original size and playing with it: +1 or -1 every other time.

Console in Safari

Having the console on in Safari on iOS breaks the offline capability of the app. But not always! and that’s what’s really weird: only apps launched from an icon in the dock, not apps launched from within Safari.

Here’s how to reproduce the problem:

  1. Have / make an offline app with a manifest file
  2. Verify that it works offline by launching it and reloading it from within Safari when the device is offline
  3. Add the app to the homepage
  4. Launch the app from the icon on the homepage: it works fine
  5. Set the console on from the Safari options (last line)
  6. Reload the app when offline from Safari: it works (if it worked in step 2)
  7. Launch the app from the icon on the homepage: it doesn’t work! (“Invalid argument”)
  8. Disable console and reload the app from the icon on the homepage (while still offline): it works

The workaround: I don’t know of any; just make sure the console is disabled when trying to launch an app from an icon while offline.

Thu, 15 Jul 2010 • permalink

Best Day In The Life Of A Project

Today was the best day in the life of a project I have been working on for about a year.

The project is about putting a huge book online: 75,000+ pages of text, 900+ maps in 105 volumes, narrating World War One from the point of view of the French military.

It’s a fantastic ressource that has been a little underused until now, mainly because of its sheer physical size.

I supervised the scanning and the conversion of text (only index and tables have been converted), and developped an application (Ajax) to search the index and read the pages.

The whole thing took a long time because there were many validation steps and tasks to coordinate, etc.

But today’s the best day!

Why? Because it went live!

Well, not really live as in “accessible on the Internet”, but “almost live”, as in “accessible on the military archives intranet — but without actually telling anyone” (the telling should happen in a few months).

This sounds bad but it isn’t, because live is live; even if almost no-one knows about it, some people do. Hey, even if just one person did, it would be enough.

Indeed, the answer to the question “how many users do you need to be happy” is: one.

Something that didn’t really exist is starting to take a life of its own; slowly, it’s crawling in the general direction of light.

I’m smiling.

Wed, 14 Jul 2010 • permalink

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.

Mon, 12 Jul 2010 • permalink