Curly Logo: Wii Edition

I also announced this on the Curly Logo news feed, but it’s sufficiently amusing that I’ll also mention it here. And also inject some discussion.

So, Curly Logo now works on the Wii. I think this is quite cool, and quite impractical. Of course there isn’t really a Wii edition, there’s one “edition” that all browsers and all platforms see.

So the Wii is a bit of a frivolous platform, and I don’t think I’m going to get very many Curly Logo users on the Wii. That’s not why I made Curly Logo work on the Wii. In fact it was only few weeks ago that it even occurred to me that Curly Logo might work on the Wii (I only used the Wii’s browser briefly after I first got it, mostly for the novelty of reading the BBC news website on my TV). At first I dismissed the Wii, silly platform, awkward UI, not worth it. But then I came round to thinking that the Wii represents a cornerstone of the Curly Logo philosophy. One that could be briefly described as minimal installation, maximal accessibility.

The reason Curly Logo is implemented in JavaScript and not .net or flash or C is so that it can be deployed to anyone using a browser, with zero installation. As few barriers as possible between you and using it. In a way I see this philosophy of being a descendent of 1980’s language implementations in ROM. So this philosophy is all very well and good, but to be of any use, I actually have to get Curly Logo working on random browsers. Which is why I decided to get Curly Logo working on the Wii. As a sort of proof of concept that it was reasonable to get JavaScript only applications running on more or less any suitable browser.

It turns out that the tricky part of getting Curly Logo running on the Wii was getting it running on Opera. And happily, the desktop version of Opera is sufficiently like the Wii version that once it was working on desktop Opera it just worked on the Wii. The Wii even implements SVG; who would’ve guessed?

Opera seems like a bit of a funny browser. It’s like they’re trying to be a full fledged standards compliant A-list browser, but they just don’t make the grade like Firefox and Safari. But perhaps that’s just because I spend more time with those two.

So the two speedbumps on the road to Opera glory were: btoa; and, CSS box-model. So it turns out that whilst Firefox and Safari implement the non-standard btoa function, Opera does not. Curly Logo uses btoa when it generates a 1×1 PNG file to use as the background for the text area. Happily I already had a JavaScript implementation of btoa that I used for testing. Parts of Curly Logo are tested using a command line JavaScript interpreter (SpiderMonkey) which doesn’t include btoa, so I had to write a version for that. It was a simple matter to move it from test code, which is not delivered, to product code.

The CSS box-model is probably the part of Curly Logo that I understand the least. I don’t think I’m trying to do anything heroic (after all there are only two boxes: the SVG drawing area, and the text area), it’s just the CSS spec is very complex, and I don’t understand it. The problem was that the drawing area containing the SVG was only tall enough to show the top half of the turtle. And I think this turned out to be because Opera had decided that the best height for the SVG element was just big enough to show half the turtle. I guess conceptually it’s a bit of a tricky problem, how big should the box be that contains a random load of SVG? Anyway, explicitly fixing the height of the SVG element to be the same as its containing block sorts it out (the CSS is: «svg { height: 100%; }»).

There are two more Opera quirks that I’ve noticed that I’ve left unfixed for now: settbg, to SET Text BackGround colour, doesn’t work unless you specify alpha, so settbg "#5c5c works just fine, but settbg "#5c5 borks and dumps a JavaScript exception backtrace all over the text area. Quality. The other quirk is that the arrow character used to represent evaluation, as in «2 * π ⇒ 6.283185307179586», displays as a box in Opera (on my Mac, on the Wii it works just fine). The settbg problem is caused by lack of atob (the inverse function of btoa), and I happen to not have a JavaScript version of that lying around. Yet. The arrow/box problem is inexcusable and not my fault. I suppose I could work around it by choosing a different character (or drawing the arrow in SVG!) but I’m not inclined to do that. The arrow convention is nicked from CLTL2, by the way.

For Curly Logo the Wii is not a great platform. The TV is pretty fuzzy, the text is small, the colours are wrong. Typing commands in the text box is awkward, the Wii screen keyboard completely replaces the web page so you can’t use any context. But it works. I think it vindicates the JavaScript “write once, run anywhere” philosophy. I wonder if the Wii implements the TV CSS media type, that would be the best way to fix the font size problem.

Speedwise Opera seems to be pretty nippy, it comes in somewhere between Safari and Firefox. For example the dragon takes about 15 seconds in Opera (Safari: 5, Firefox: 25). Even on the weedy little Wii (729 MHz PowerPC), dragon takes just over 2 minutes, which isn’t too much of a wait. The best bit is that there’s no “Click here to continue running this slow script” button to press, and that you can see the turtle in motion. The downside is that it didn’t take me very long before I crashed the Wii, requiring it to be reset with the power button.