Even though the site is done, today I hacked a bit on reworking the way I did user combined flags.  During haxpact (which abruptly ended, oops), I wrote about a mini Sinatra project I had in my staging area to allow users to combine two nations’ flags in a few ways.  The goal was always to use this for the WC site, and I hacked the feature in a few days before people signed up.  Many people used it and liked it, but the approach I took could’ve been improved.

The problem was twofold: first, the flag getter was a Rails controller, meaning it had to be routed and requested, and on a leaderboard page with 40+ different flags on it, it resulted in 41+ requests to the server. Despite caching, it still takes a while to get through routing as opposed to just a normal image resource (which can be cached by the user’s browser).

Second, the technique used to combine the flags was based on running the convert tool from ImageMagick from the command line. The end result was obviously cached, but ended up producing 152 separate cached images as users tweaked flags, taking up 604kb in computed images. Not to mention the taxing on the server during the production of these cached images!  Clearly this wasn’t optimal, there had to be some way for the client to do the work.

A while ago, while doing some infovis stuff with Raphael on the site, I had thought of using that & canvas to have the client render the flags themselves, but dismissed it when I noticed the flags had some blurring issues when used as the fill to an SVG rectangle. However, today a friend mentioned that SVG is not the only thing that can be used on a canvas – he suggested I try just using Javascript to draw on the canvas directly.  After some quick tests, this proved to be a viable option.

The technique I ended up going with involved using an image tag set to one of the two flags making up the combination, two HTML5 “data” attributes on that tag, then using some jQuery to replace the images with canvas tags and do the composition right there. This allows the flags to be retrieved just like any other image, and cached by the browser.

I didn’t push it yet, because I didn’t round out support for IE (aka, don’t do anything, it can’t handle canvas well), and well, the World Cup is over, so not much reason to do it.  But still neat to see what could’ve been.  I reduced the avg query time for the leaderboard from 10.5s down to 4.8s – rather significant.  All lessons I’ll take with me for the future, and certainly will be considering how to use with my FM Crests project that I’ll be picking back up.

For the upcoming World Cup pick’em site, I wanted to have a way for the users to show their allegiances (often times more than one country), and it reminded me of the Enemy Territory days and Clanbase’s method of identifying player nationalities.  Next to every name was a stylized small flag icon, and some people got to make their own.  I thought it would be pretty neat to be able to have a service that automatically combines two flags in various ways, so after some experimenting with imagemagick, I created a few masks that can be used to combine two flags.

This was my first real project with Sinatra, and is what turned me onto the project in the first place.  This is not a world class service (and I hope it doesn’t get linked around, it likely won’t), but if you have a need to make a small flag icon, knock yourself out.  Here’s some samples:

set t_Co=256

Nice!  Here’s a shot of my terminal with the desert256 color scheme:

I typically use gvim when writing code, but lately as I’ve done more Rails stuff, I’ve been using vim inside of GNU screen, with a few related screens next to each other, switching between them with F11 and F12.  This became a pretty handy setup for working with Rails apps, especially as I can do it from Windows machines using Putty.

This introduces a few more variables into the equation, Putty and screen.  Imagine my surprise when Putty Just Worked ™ as well as gnome-terminal did!

As for screen, a recompile with the –enable-colors256 configure flag specified was all it took.  I installed to my home dir on l3ib so as not to disturb the system screen, although if it works ok renamed to a different binary name like “screen256″ i may install it to /usr/local.  Much props to this blag entry.  His instructions make debian actually seem rather easy to use (I’m not familiar with it), and the screenrc is necessary to pull things together.  I still need to put my keybinds back in, but it looks like I have a sweet setup for Rails hacking now!

While this was nice, it had a few deficiencies I was looking to fix.

• No indication of where you were on the file system – if you had a few repos named the same way, such as a development and deployment website repo, you could not tell them apart
• The red * only appeared when a repo had unstaged modifications – staged modifications were not indicated
• The commands used in precmd had trouble when entering a git repo on a filesystem attached via sshfs – it would just freeze

Luckily, zsh has a module called vcs_info, which I’ve known about for a while but finally decided to check out today.  Thanks to official documentation, and this blag post, I was able to update my .zshrc to fix at least the first two issues (have not tried the third yet).  I won’t get into explanations, the two links above do that more than enough, but it’s reduced my zsh file massively. Here are some relevant portions:

DEFPROMPT='${BLUE}%~ ${PROMPTCOLOR}${PROMPTCHAR}${NC} '   # promptcolor/promptchar match hostname coloring and show a different char if ssh'd somewhere
DEFRPROMPT=$SSHPROMPT     # shows @ when ssh'd somewhere else

zstyle ':vcs_info:*' enable git                                 # only enable git/git-svn
zstyle ':vcs_info:*:prompt:*' check-for-changes true            # slower, but lets us show changes to working/index
zstyle ':vcs_info:*:prompt:*' unstagedstr "${RED}*"             # unstaged changes string: red *
zstyle ':vcs_info:*:prompt:*' stagedstr "${yellow}+"            # staged changes string: yellow +
zstyle ':vcs_info:*:prompt:*' actionformats "$VCSPROMPT" "${NC}[${BLUE}%b%c%u${NC}:${purple}%a${NC}]${SSHPROMPT}" # left and right prompt when an action is occuring (rebase, etc)
zstyle ':vcs_info:*:prompt:*' formats "$VCSPROMPT" "${NC}[${BLUE}%b%c%u${NC}]${SSHPROMPT}" # left and right prompt when normal (no action)
zstyle ':vcs_info:*:prompt:*' nvcsformats "no" "no"             # sets $_vcs_info_msg_[0|1]_ to "no" when no vcs, testable

function precmd() {
   print -Pn  "\033]0;%m: %~\007"

    vcs_info 'prompt'
    if [[ $vcs_info_msg_0_ != "no" ]];
    then
        PROMPT="${vcs_info_msg_0_}"
        RPROMPT="${vcs_info_msg_1_}"
    else
        PROMPT=$DEFPROMPT
        RPROMPT=$DEFRPROMPT
    fi
}

And it looks like this (hey wait, this looks pretty similar..):

var je = $('input#color_base');    // this is a jQuery object
var de = je[0];                         // this is a DOM object

Hopefully I’m not lying in my example above.  This clears up about 90% of my confusion when using jQuery for anything.  Anyway, now colors work.

That’s right, a web page to help you build a crest!  This is the overall goal of the project, to provide a web interface for users to build a crest then be able to download and use them.  It still has a lot of work to do, but here’s some working features:

• Enumerate and display (live!) thumbnails for all shapes and patterns
• Generate a large preview image whenever the user selects something new
• Caching any and all preview images, which invalidate when the source SVG changes

It still needs a few features, such as:

• Working color selector: it works for only one field at the moment
• Generate a tar/gz or zip and previews of all smaller sizes (standard icon sizes 16×16, 22×22, 24×24, 32×32, 48×48, 64×64, 128×128)
• Squash any requests with referers
• Work queue system for requests maybe?  To help with any load
• Refactor ruby command line script to be an includable class instead of calling said script from backtick operators in this web interface

I was also able to improve the command line script in a few ways today:

• Get live list of shapes and patterns by –shapes or –patterns on command line
• Remove the need for a predefined clip path: now is copied from base shape path, this makes it much easier to maintain

Rather pleased with the output today.  Hopefully I can keep up momentum!

My next idea was to follow those same log files by using a “tail -f” mechanism (or just inotify) and keep the activity monitor always running, so it would keep a running count of messages/min or whatever other measurement I came up with.  I realized I needed a way to tail multiple files, and not really knowing that the standard tail -f command could take more than one file as an argument, I wrote one in Ruby which is called MFTail (multi-follow-tail).

Its design is similar to fsniper, another project I am part of, in that it forks and dups output from a parent process.  Essentially I was forking for every file I wanted to monitor, running tail -f on those files, and piping the output back into the parent process so it could be output with a prefix of the file in front of it.

Of course, someone pointed out later than tail -f works on multiple files, but I still prefer the output of mftail in that it prefixes every line with the file it came from, whereas tail will print a header every time the most recent outputted file switches, which is annoying to parse.

MFTail is available in git: http://code.l3ib.org/?p=.users/daf/mftail.git;a=summary

It’s a little less roundy than the original shield.

Going to see about a “fat” shield type like Arsenal or Portsmouth.  Also, looking at Arsenal gives me an idea for a second “pattern” layer, like those blue stripes on the outside of the shield.  It would likely be shape specific instead of general patterns like the ones currently, but could add a lot more to the crest.

The one on the left is imagemagick, the right is librsvg.  Rsvg does not suffer from the hideous aliasing on the outside of the white bordered images, but it does not improve much on the vertical stripes in the last crest.  I’m thinking I will just end up removing the “thin” stripes option and make people use the medium size one that currently exists.

I also added more patterns and a circle shape too: