Archive for the 'Technology' Category

Sweeter As The Years Go By

Published
by
Zz85
on January 4, 2010
in Church, Design, Family and Photos
. 0 Comments

Here’s something that has kept me a little occupied over the past weeks.

Howmean.com Main Page

To find out, head over to http://howmean.com. This site belongs to the couple to be, Caleb and How Mean. And no, rather than its perceived adjective “how mean!”, I hope one experience some sweetness visiting the site.

There are several talented people behind the making of this site. Graphics and concept were designed by Grace Wong, and the web design was done by Meng Lung of Gold Coast Web Design. My little contributions would be some subjective augmentations to the site and one might make intelligent guesses to what I did by spotting non-traditional elements on the site. For those who aren’t guessing, here’s a list

+ Mouse over the dandelions near the footer, and one may see little particles floating away. On most modern browsers except IE, these particles are drawn with html 5 canvas elements. In unsupported browsers, 1 pixel rendering with css are used instead.
+ Meant to be an easter egg, rolling the mouse wheel renders lighter dandelions particles around the screen.
+ Ajax calls are used for navigation when possible to prevent disruption of the background music
+ To support browsers not running flash (the iPhones and Androids mainly!), flash objects degrade gracefully
+ To degrade the photo gallery for non flash clients, the xml used by the flash slideshow player is parsed and rendered with jquery.
Howmean.com on the android
+ A small widget (which dates back to my legendary ORD count down wallpaper) is used to display the time till or from the wedding date in the credit page.

Of course all these would not be present if not for the weds-to-be.

So this’s my 1st post of the new year, and its a great reminder to reflect whether each passing day gets sweeter. A blessed new year for you readers!

[geeknotes] Panning Navigator with jQuery, Html 5 Canvas

Published
by
Zz85
on December 30, 2009
in Browsers, Ideas and Technology
. 2 Comments

Seems that I happen to like coding several stuff when it comes to the end of the year. As such, I’ll decide to delicate this piece of script/code/site to my all my fellow photo enthusiasts and geeky friends as a late Christmas but an early new year’s gift.


Panning Navigator - jQuery + Canvas by Zz85

I decided to implement a Panning Navigator in Canvas while experimenting with various UI navigation working on my notation project (like the navigator in Sibelius). This panning navigator is what one might usually see in Adobe Photoshop, Illustrator, etc, and it seems few have implemented this, perhaps a handful implementations with flash, but none I came across with javascript. As for its name, I was not even sure what’s the name but seem this site seem to suggest this ui pattern as a panning navigator for dealing with large canvases with a draggable viewport.

So without further to do, check out the demo here. http://jabtunes.com/notation/panning_navigator.html

Here are some of the features
+ Drag the viewport in the navigator to view around
+ Mouse wheel can control the zoooming
+ Fill, Fit to screen for quickly zooming out, 1:1 for actual size and 3:1 for zooming in.
+ Fullscreen photos and navigator response to browser resizes
+ Features some photos from my early photography
+ Canvas used for drawing the navigator and creating the “thumbnailed” image.
+ Css for aligning navigator, resizing and repositioning image
+ Seems useful with large photos and panoramas
+ Should run iphone and android browsers although experience may be improved
+ Oh also released as do what every you like to do with the source license, but remember to let me know your comments.
(Warning: Some images are huge, please be patient while waiting)

Comments are welcomed. Maybe, when its polished up, bug free and extensible, I might release this as a jquery plugin.

Goodbye 2009 and an early happy new year to all!

p.s. One might check out the jQuery supersized plugin for where the fullscreen photos were partly inspired by.

p.p.s. For source code: use your browser “View Source”.

[geeknotes] Scrollbars with Html 5 Canvas

Published
by
Zz85
on December 30, 2009
in Technology
. 0 Comments

I couldn’t remember when was the last time I even logged into my blog. Certainly I can’t even remember my password each time. Thankful I manage to retrieve my password each time.

At times when I’m doing something experimental I think, maybe someone would find such information useful if I place it on my blog- since I learn a great deal from many other’s developers’ blogs.

Just to touch quickly, I’m working on a personal project to build an online music notation software which works in a modern browser (think Noteworthy Composer in the cloud with Html 5). I soon find the canvas element really powerful (supported in all major browser - firefox, safari, chrome, opera except ie), but a really raw api. Yet possibilities are already very attractive, and closes the gap between flash and web design (as mentioned in my last geeknote on facebook).


Notation Project

Anyway, more the project next time, but what I would like to cover here is dealing using scrollbars to deal with an oversized canvas. If you ever did any Java AWT/Swing programming, you might know this can be done simply with placing your components into a JScrollPane. So here’s my current quick implementation of a scrollpane with CSS.

First the html elements.
<div id="omw_scrollpane">
<canvas id="omw_canvas" width="800" height="320"></canvas>
</div>

Basically, this wraps the canvas element into a div container we call scrollpane, responsible for providing the scrollbars.

Then the css.

#omw_scrollpane
{
width:400px;
overflow:auto;
border: solid 1px white;
background-color:white;
}

This simply constrains the enclosing div to a view port, and the overflow properties automatically adds scrollbars when the canvas element is larger than the specified width. The canvas would continue to work without recalculating coordinates.

Real simple hack? Yes and no. This may works for simple application, but perhaps more complex situations may require custom scrollbars (which brings me back to the flash pre-mx days where scrollbars need custom coding). Its seems to me that having a canvas of over 80,000 pixels width seems to hang chrome and opera 9 browsers.

The only other example I could find on the net which require scrollbars with their canvas application is actually the amazing Mozilla Bespin project (collaborative “code in the cloud” with your browser). Right now their implementation uses a custom scrollbar which docks/hides itself when not being used. One might wish to investigate the ui framework mozilla built ontop of canvas call Mozilla Thunderhead used in the bespin project. Seen by some to be a competitor to flex or other RIAs, you may wish to learn more following one of their developer’s blog.

My 1st Vertorama

Published
by
Zz85
on March 31, 2009
in Photos and Technology
. 1 Comment

Vertorama of Sunset at Shoreline Park while Jogging

Not a HDR, neither shot with a dSLR, but a hand stitched/blended Vertorama. (rhythms!)

I first saw the term “vertorama” in one of Daniel Cheong’s flickr photos then read more about it from Panorama_Paul Vertorama tutorial , there’s also an interesting read here. Basically Vertorama are taken by taking at least 2 landscape shots, one above another, and combined to become a “vertical panorama”. The reason I like the vertoramas is that they are more pleasant looking than HDR done badly, requires less shots, replicate what the graduated filter does, works even with the simplest auto settings, and looks great like a medium format photo with amazing lighting contrast especially taking sunset photos.

During the evening run at Shoreline park towards Adobe creek, I thought the sunset shouldn’t be gone to again and took this sequence of photos which wouldn’t stich a panorama well with my Lumix FX500. The 3 rightmost photos were used for the vertorama.
Photos that didn't stitch well for a panorama

As the photos didn’t overlap well, I did the blending by hand. The images were added as separate layers, positioned them manually to align, applied masks, blending and contrast adjustments. Applied highlights and shadows and curve adjustments but the microcontrast is too strong.

Please comment if you think the post process could be done better or differently.

Backup your Backups (Subversion)

Published
by
Zz85
on March 6, 2009
in Technology and linux
. 0 Comments

Its interesting that while source code repository like Concurrent Versions System (CVS) and Subversion (SVN) are primary used as for source code sharing and revision management, one useful purpose for these repositories are actually useful for backups. Its like using using Google Docs not only for online collaboration, but to keep your documents in the cloud in case you lose them.

An interesting twist at work is that I have to backup the subversion database in case Subversion fails- here we are backing up the backups.

The power and freedom in linux usually means that often no one does a single job a single way. So, here’s my take on writing a script used for saving my svn databases.

# Backup SVN Script
DIR=/svn # Svn directory
DATE=$(date +%Y%m%d) # Date
BACKUPDIR = /backups

cd $BACKUPDIR
# Clear a temporary directory
rm -rf dumps/*
# Creating a list of SVN directories
for i in $(ls -l $DIR | awk '/^d/ { print $NF }') ; do
echo $i
# Export each SVN database
svnadmin dump $DIR/$i > dumps/$i.dump
done
cp $DIR/* dumps/ 2> /dev/null
# Taring them
tar zvcf archive/svn$DATE.tgz dumps/*
# Copying to another safe location
cp archive/svn$DATE.tgz /another/secret/location

Brief explaination of the script, if the script and comments doesn’t speak enough. All svn databases are dumpped in svn export/import friendly formats which are then zlib tarred.

Lets assume one day Murphy’s Law take places, your entired svn database vanish into thin air but your backups in the safe secret location is intact. Here’s how you could restore the subversion database easily, assuming your SVN servers are up and running.

# load_repo_after_the_sky_crashes.sh
tar zvxf $1.tgz # extract the backups
for i in $(ls -l dumps | awk ‘/^d/ { print $NF }’) ; do
echo $i
svnadmin create $i
svnadmin load $i < $1.dump
# chown / chmod file system permissions if needed,
done

The method for backups and restore is similar to migrating SVN repository and here’s a post if you wish to read up on them.

The backup script may be called by a cron job and run periodically like daily. To prevent taking too much disk space, you may decide to keep a number of the latest backup copies and delete older backup copies. Here’s a line in bash you could do for this.

ls -t * | tail -n +10 | xargs rm -rf # Delete everything except the 9 latest files

Who backup the backups like who guard the guards?