It seems that sometime after the turn of the century, the art of making an image editor with good palette manipulation seems to have been lost. This is very unfortunate, as it makes it VERY hard to make graphics for scummc.

So i improved scummc in two ways…

The palcat tool is now more useful

Have tons of non-indexed graphics? Well now you can tell palcat to combine and quantise all the colours in your images, so you have a single common palette.

palcat -o out -col 32 costume1_*.bmp costume2_*.bmp

Quite commonly in scumm games, you’ll notice the room palettes will follow the same general schema:

To reproduce with palcat, simply do:

palcat -o out sys.bmp room.bmp costumes.bmp

(where costumes.bmp contains your combined costume palette(s))

The costume compiler helps you

In scumm, costumes have a palette which indexes into the current room palette. Before you had to specify this manually, like so:

palette([0-32]);

Now you can pass in your combined room palette instead, like so:

palette("out_blank_room.bmp");

Which will match up colors in out_blank_room.bmp with your costume bitmap.

If you have costumes which will be re-used across rooms, i suggest you make a blank room bitmap so it won’t accidentally match colors in your room when you don’t want it to.

palcat -o out sys.bmp blank_room.bmp actors.bmp

I’ve incorporated the costume palette trick in the examples on my scummc fork. Feel free to check it out on github!

A statistics generator!

For those who have used IRC in the past, you may recall the multitude of scripts available that analyse your logs and generate interesting,
albeit pointless statistics about them.

Borrowing from the general format of these generators, i wrote a simple ruby script which analyses recent activities in a teambox project. It will tell you such things as:

• Hours with the most activities in the project
• The most active user
• Who wrote the Longest and shortest lines, as well as the most words
• The most popular words in the project
• Most referenced users
• Most referenced URL’s
• Most popular conversation
• Person who created the most tasks / conversations

Really, everything you never wanted to know about your project!

It will also resolve conversation and task names, if you were ever wondering how to properly do that.

To use it run the script, supplying your username, password, and the project you want to examine. e.g.:

ruby teamboxstats.rb -u fred -p password teambox

Will login and dump the teambox project if you have access to it.

As always, feel free to check out the code on github!

Specifically, i’ve always wanted to track my time, but i never seem to find a solution that works. The solution is either too simple and doesn’t give me any feedback, or it’s extremely complicated and hard to use.

So i set about to make a time tracking solution that was both ridiculously simple to use, and could give me some useful reports back. Thus, Twackr was born!

I modelled the entry system after Twitter: at its simplest, all you need to do is type in what you are doing, and Twackr will start tracking your time instantly. When you are done, simply click on “Finish” and it will be done!

Already spent some time doing something but couldn’t get to Twackr? Then you can backdate entries by adding “-1H“. Still working on something? Then try “-1H+“. Blocking out some time? Then use “+1H“. Want to see if you’ll make the deadline? try typing “1H“.

Time can also be categorised into “Services” (#service) and “Projects” (@project).

You can check out a live demo of twackr on heroku. Just sign up, and check it out – it couldn’t be any simpler!

Like most of my other rails projects, Twackr is Open Source. So feel free to fork it on github.

As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!

Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.

The exporter even supports parenting, so you can build up complex hierarchies of elements which can easily be transformed in an animation, or even javascript.

Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).

For the curious, there are 3 examples:

• Walking Orange Guy
• Transform Test (not animated)
• Animated Image

As for the actual exporter script, it’s available on github.

Happy animating!

EDIT: For those of you who for whatever reason want a video demonstration, there’s a video of it in action on youtube.

The answer is of course to completely remove Webkit from the equation, which leaves us with CoreAnimation. The end result being that the animation can be directly compiled into an iPhone or Mac OS X application.

Not going into much detail, CoreAnimation is essentially the library used by Webkit to display and animate any elements which have been transformed by a CSS Transform.

The actual scene is simply constructed using transformed CALayers. As for the animation, a CAKeyframeAnimation is created and attached to each CALayer. In the case of multiple properties being animated at the same time, a CAAnimationGroup is used to group these animations together.

The end result is a handy animation class which creates both the scene and the related animation tracks. i.e.:

    CALayer *root = [self.view layer];

    // Make anim
    MyAnim *anim = [[MyAnim alloc] init];
    CALayer *animRoot = anim.root;
    [root addSublayer:animRoot];

    [anim play]; // easy!

As an example, the MyAnim class for the previously featured walking orange figure is as follows.

Which leads onto a repeat of the question, is there a real-world demand for such a tool yet?

This methodology pretty much kills any creative aspirations anyone might have in making these animations. So while there are quite a few cool looking examples out there they lack the glamour of say, flash animations.

It seems to me there is a need for a tool which allows anyone to create these css animations in a visual way. As far as i know, no such tool currently exists. So naturally, i set about making something myself.

Rather than make an entire tool from scratch though, i decided to simply write an exporter script for another tool – in this case, Blender.

Why Blender? Well, it exposes pretty much all of the information i require to construct both a scene and animation tracks. Also, since Blender handles 3D scenes, there is a potential to work with 3D CSS Transforms in the future.

As an example, here’s a simple animation of an orange stick man walking across the screen. The stick man was both constructed and animated entirely within Blender, and exported using my export script.

And the scene as seen in blender:

Which is simply a set of planes linked together and animated. Really, it couldn’t be any simpler.

Currently the only browsers which seem to support both CSS transforms and animations are based off Webkit. i.e. Safari and Chrome (including the iPhone and Android browsers).

Which leads onto the question, is there a real-world demand for such a tool yet?

There has been a lot of talk recently about how the web is essentially replacing desktop applications, which to me sounds great.

But there is something missing from this new age of web applications. In order to run web apps you need a web browser, which is still a desktop app. It seems to me odd that a platform which replaces another still requires that platform to operate.

Which is where htmlcanvas comes in. It’s a HTML renderer implemented in JavaScript, which runs nicely in any capable web browser which supports the Canvas element.

In essence, it’s a web browser implemented within a web browser. The above example was rendered from this HTML:

<html>
<head>
  <title></title>
</head>
<body><!-- Begin test -->
  <p class="woo" id="render">
Rendering <b>HTML</b>...</p>
  <p><span>In <b>Canvas</b></span>!</p>
  <p>0_0</p>
</body>
</html>

This sort of recursive abstraction is not uncommon in the computing world. For example, C compilers are written in C, Pascal compilers are written in Pascal. There’s even a version of Python implemented within Python. So a web platform implemented within a web platform is quite natural.

Still, it will be a long while before htmlcanvas is remotely capable of running within itself, so a truly recursive web browsing experience is still a long way off.

As with most of my silly projects, the code to htmlcanvas is hosted on github. Fork it here!

Note: Currently only known to work in Safari 4, FireFox 3.5, or Google Chrome.

(Plus to be honest i wasn’t really using it myself)

Still, since its open source other people were free to use and modify it for their own needs. I was pleased to see that there has been a healthy level of forking according to github’s network graph.

Feature-wise, one fork made by scambra has even implemented a fully fledged wiki.

I’ve also seen partial localisation’s implemented for German and Simplified Chinese. So safe to say, i’m very impressed that despite my lack of updates, RailsCollab is still going strong – all thanks to its growing community!

Now for my input…

Projects like RailsCollab are hardly one-way streets. One has to give back as well as receive contributions.

So i’m pleased to announce that as well as merging the wiki and language updates into the main RailsCollab tree, i’ve also merged in my own updates which convert the Message, Comment, and File controllers into RESTful resource controllers.

Simply put, this means that you can now manipulate messages, comments, and files as XML. e.g.:

/project/1/messages/1.xml

<message>
  <additional-text/>
  <attached-files-count type="integer">0</attached-files-count>
  <category-id type="integer">1</category-id>
  <comments-count type="integer">2</comments-count>
  <comments-enabled type="boolean">true</comments-enabled>
  <created-by-id type="integer">1</created-by-id>
  <created-on type="datetime">2009-07-16T19:35:00Z</created-on>
  <id type="integer">1</id>
  <is-important type="boolean">false</is-important>
  <is-private type="boolean">false</is-private>
  <milestone-id type="integer">0</milestone-id>
  <project-id type="integer">1</project-id>
  <text>It's a *test*!</text>
  <title>Test message!</title>
  <updated-by-id type="integer">1</updated-by-id>
  <updated-on type="datetime">2009-07-16T19:35:16Z</updated-on>
</message>

/project/1/messages/1/comments.xml

<comments type="array">
  <comment>
    <attached-files-count type="integer">0</attached-files-count>
    <author-name nil="true"/>
    <created-by-id type="integer">1</created-by-id>
    <created-on type="datetime">2009-07-17T20:34:12Z</created-on>
    <id type="integer">5</id>
    <is-anonymous type="boolean">false</is-anonymous>
    <is-private type="boolean">true</is-private>
    <text>Test REST comment - edited</text>
  </comment>
</comments>

/project/1/files.xml

<files type="array">
  <file>
    <comments-count type="integer">0</comments-count>
    <comments-enabled type="boolean">true</comments-enabled>
    <created-by-id type="integer">1</created-by-id>
    <created-on type="datetime">2009-07-18T13:22:20Z</created-on>
    <filename>kitten-logo.png</filename>
    <id type="integer">9</id>
    <is-important type="boolean">false</is-important>
    <is-locked type="boolean">false</is-locked>
    <is-private type="boolean">false</is-private>
    <updated-on type="datetime">2009-07-18T13:34:50Z</updated-on>
  </file>
</files>

So what are you waiting for? fork it, use it, enjoy!

To re-cap, i pretty much summarised the available options for playing back simple animations on the iphone in this nice table:

To take things further, OpenGLES needs to be used. Specifically, you need to upload and draw a texture for every frame of your animation.

Now while this sounds like a great idea, there is a slight problem: uploading textures on the iPhone is hideously slow. Excluding the requirements of a video decoder, you only have enough time per frame to be able to playback a small stop motion video in RGB format.

All is not lost though. The iPhone supports two rather interesting texture formats: GL_COMPRESSED_RGB_PVRTC_* which is the native format, and GL_PALETTE* which is, as the name implies is a texture with a palette.

The fastest format to upload is PVR, but unfortunately there aren’t many native video codecs or animation formats about that decode to PVR format. Which leaves us with the palette format, which is just about fast enough to playback something more substantial…

Now which animation format uses a palette and is widely supported? Animated gif!

So to cut a long story short, i ended up writing a fairly elaborate library to decode and playback animated gifs on the iPhone, all in realtime.

Provided the gif is not gigantic (since the bigger the gif, the slower the decode + upload), it’s actually quite useable.

In fact, as a proof of concept i ended up writing an app using this library to playback animated gifs from any website in fullscreen (similar to the youtube app). Feel free to check it out – anim8gif.

The code

The code for this gif animation library, glgif, is located on github. As always, feel free to fork!

Now, it still isn’t really “production ready”, but it has drastically improved these past few months. In August, it started out looking like:

And now it looks like this:

Which to say the least, is a big improvement.

But “What’s new?“, you may ask. Well apart from the new grey spaced out look…

• You can now see a general overview of recent activity
• You can now upload files
• You can send emails to to pages
• Basic reminders have been implemented with email functionality
• Journals and Status (think Twitter) have been implemented
• Fed-up of the default page width? You can now resize Pages!
• Pages can now be shared to the public
• Client-side interface re-written in jQuery
• Bug fixes and stability improvements

So safe to say, a lot of improvements. But still, a long way to go before it is truly useful for every day organisation.

As always, Rucksack is open source and can be checked out on github.