Archive for the 'web development' Category

Pico redux

Recently, I created an IM icon for a friend. It’s a fairly straight-forward appropriation of the classic Che Guevara icon, which normally I’d avoid but the Simon’s surname is pronounced ‘Che’, so my hands were tied.

an IM icon created for a friend
an IM icon created for a friend (whose name is a homonym for che’s)

In the process I decided to adorn my IM profiles with the mighty ‘Pico’ icon, something that had slipped my mind for years.

Pico icon 
My new IM icon (based on my Pico character)

The original artwork dates is from the flash-based pico game I made for a uni assignment at Hong Kong University in 2002. As I spent all my free (and a fair chunk of my uni) time exploring Hong Kong with my friends, the assignment was developed in a marathon 48 hour cram session in the HKU multimedia labs. 

jaysen writing pico game in HKU CS labs
The game wasn’t always called Pico 

The game itself is a pretty basic affair, but still makes me laugh when I see the artwork and animations. As a bonus, it’s fiendishly difficult (being alone in a CS lab at 4am does tend to warp a coder’s mind). Give it a go, it’s a great cure for apathy.

 
Hong Kong Island (including HKU) is an festival of stairs and elevators

The whole 2-day stint was surreal; the deadlines, the long walk along pok fu lam road, the long hours, the great music, the septuagenarian tai-chi club which trained (complete with weapons) right outside the labs at dawn (their existence was unknown to me previously and seems unreal still).

 
Pok Fu Lam road, connecting HKU campus to the halls

Hue City

A project that I’ve been working on forever has, among other features, a ‘search images by colour‘ feature. This is one that I’d been excited about for a long time and had tackled on several occasions but it had never quite come together. Until now.

My previous attempts had all involved reducing each image to a weighted list of ‘popular’ colours. The search UI let the user pick from the web (216) palette, with only images possessing a healthy portion of that colour being returned in the results. At one time I even allowed users to select a secondary colour along with RGB/HSV/CMYK (synchronised) sliders, but that was as complicated to use as it sounds, so I let it go. The problem was that this ‘popular colours’ approach ignored the fundamental truth that people just don’t search for drab browns, faded yellowy-greens or most of the other colours which make up these palettes. From a colour-space perspective, when people say ‘colour’, they mean ‘hue‘.

So earlier this week (on the train) I set about re-writing the whole colour search feature to actually be a hue-based search feature (the word colour remains because ‘hue search’ just doesn’t light up anyone’s eyes, not even mine). After a few train trips and most of Saturday I had the hue-parsing algorithm implemented and had written a console app which re-indexed all the existing images in the library. I also updated the relevant portions of the batch uploading tool and the admin web site to be hue-aware. Things were going well, but I had only a vague idea of how the actual search UI would work.

Initially I thought another slider would be the best approach, but decided it was overkill after looking around at existing html slider implementations (yahoo UI library as a nice slider, but I didn’t want the added dependency for what is essentially a minor feature). Eventually I set about rolling my own control for the job. I think the hue picker widget and the hue search feature as a whole turned out really well, and will continue to improve as the number of images in the library grows.

Now I’m thinking of packaging up the  Hue Picker for free distribution. You know, just for kicks.

QuintonMarais.com launched tonight

After several weeks’ work, quintonmarais.com launched this evening.

Hi-lights include

  1. .Net 1.1 to .Net 2.0 upgrade (long live the MasterPage)
  2. Amazon S3 for all image storage (dramatically reduced bandwidth and hosting costs)
  3. Google map-based location search.
  4. Creation of “Pusher”, a fire-and-forget image watermarking, batch uploading and data-entry smart client app (to create the 12+ thumbnail and preview versions of each image).
  5. Creation of “S3 Viewer”, a smart client app for viewing/maintaining the thousands of S3 items and buckets which support the site.
  6. ‘New Images’ atom feed (surprisingly easy to get going).
  7. SQL Server 2000 to SQL Server 2005 upgrade (Common Table Expressions are the goods).
  8. GeoRSS feed to (hopefully) ensure photographs appear in search results as geo-tagged objects.
  9. Tag-clouds for hierarchical image categories.
  10. Colour search (still beta, currently rewriting the search algorithm to favour colour coverage rather than colour fidelity).
  11. Cleaner UI design.
  12. Xhtml transitional doc type with vastly improved markup validity (flash still causing some issues here). Some tables remain, to be slowly phased out when I have time.
  13. Flash 9 homepage scroller (flash cs3 didn’t play nice with my old flash 6 swfs).
  14. Self installed and configured SSL.
  15. New hosting provider (discountasp.net, very impressed so far)

All told the upgrade took about 3 months’ worth of train trips, nights and weekends (around my day job). It’s meant an overall reduction in sleep, but ultimately worth it. Now I have just to force myself to stop tinkering with it.