Online Virtual Keyboard With Canvas and Javascript

Published
by
Zz85
on February 6, 2010
in Browsers, Design, Hobbies and Technology
. 0 Comments

I’m releasing a HTML Canvas and Javascript based virtual, online, onscreen keyboard for testing and whatever fun you can make out of it. This release is actually dedicated for my friend’s 25th birthday, but its kind of way overdued. (CH, if you are reading this, happy belated!)

Virtual Keyboard

Basically what’s a virtual keyboard is that its simply an input without a physcial keyboard.
If you add this as a Keyboard Bookmarklet (Firefox recommended - drag this to your toolbar), you may use this keyboard on various websites buy clicking on your bookmark which launch as translucent, mac like, on screen keyboard.

If you are thinking of projection keyboards, sorry, it isn’t as cool as that, yet.

However, you can use this keyboard to enter text into textareas and input field by using your mouse, stylus or touchscreen. If you decide to use your physical keyboard, the virtual keyboard gets “lighted up”.

Some have asked me the purpose of this project anyway. Some sites like this would say there’s enhanced security particular from keyloggers. Of course, this isn’t really true since virtual keyboards may be backdoors themselves so please do not use this or any other bookmarklet, greasemonkey, addons etc you do not trust for sensitive information.

Yes, one reason is that I’m having playing around with html canvas again. Another is that I have always been interested to with multiple inputs/users. Creating custom interfaces with canvas could create the possibility of interfacing 2 users in a browser - imagine 2 users surfing the net together by sharing a wide browser screen on a pc. Fifa 95 (thats over a decade ago!) allowed 2 users to play with or against each other - one with the keyboard, another with the mouse, and this would be possible with a virtual keyboard (for the 2nd user). Whether this is another lame project, or whether there are possible great ideas, I’ll leave it up to your imagination.

Before ending with the tons of technical details, try out the demo and let me know of your comments, if any :)

Virtual Keyboard works with Google.com

More details of this release
+ Uses jQuery 1.4.1 (Loads dynamically in bookmarklet)
+ Virtual Keyboard - Drawned with Javascript and HTML Canvas Element
+ The Mac lookalike Design of the keyboard inspired from this NetTuts tutorial which used html, jquery and css instead.
+ Autofire keys & work around for text selection when autofiring in Chrome.
+ Onscreen Keypresses Feedback as you typed - Keybindings aided with plugin jHotKeys
+ Onscreen Key Highlighting Disabled for Password fields
+ Keyboard is draggable around the screen
+ Works with Textarea and Input fields.
+ Demonstrates a simple drawing framework with JSON
+ Uses TextCanvas for canvas rendering of text
+ Bookmarklet - see this interesting jQuery Bookmarklet boot code

See here for source code, and here for YUI compressed version.

Future improvements I would love to see.
+ 100% Bugs Free
+ IE compatibility
+ Docking
+ API
+ Stay tuned ;)

[geeknotes] ShortStrawJS - Fast and Simple Corner Detection

Published
by
Zz85
on January 21, 2010
in Browsers
. 0 Comments

One of the challenges dealing with stroke/pen based input systems is finding corners in free form lines created by pen based drawing.

ShortStraw presents a simple yet accurate algorithm described in a recent (2008) paper for detecting corners.

To summarize this paper briefly from my understanding, ShortStraw takes in points of a stroke, resamples them, uses distances of points to determinate whether the points are from straight lines or corners.

I learnt about this a method when after stumbling on Felix Raab’s blog post, who created flex example of the ShortStraw algorithm implemented in actionscript.

This makes implementing a javascript version much easier, since most of the code can be derived heavily from the AS3 implementation. So here’s an example and the source code to my shortstraw.js implementation.

ShortStrawJS

As usual, the demo uses html 5 canvas for drawing (sorry IE users, but any other modern browser like firefox, chrome or safari would work), jquery for simple event handling, and of course the shortstraw javascript file for corner detection.

For the daring, you may want to look at the paper Revisiting ShortStraw which describes iStraw, a technique which attempts to address the shortcomings of shortstraw, mainly in the area of curved lines.

p.s. The screenshot is in contrast with Steve Hanov’s html 5 canvas Web draw, which creates “wavy lines” while Shortstraw helps to “straighten” hand drawn lines.

[geeknotes] JSON DB

Published
by
Zz85
on January 12, 2010
in Uncategorized
. 0 Comments

When I first learn’t about the json format, I thought: “what a great idea!”.

All the great things about it- simplicity, leanness, exactly what xml wasn’t but ought to be.

Soon I reasoned that the json format can be persisted in storage in its own form. One can build a simple, portable database using json records with minimal code.

“Why hasn’t anyone else built it?” I thought.

CouchDb
(sketch from couchdb’s site)

Well, now we have CouchDB, a document based storage project by apache and Cloudant, for your couchdb cloud needs.

[geeknotes] Repairing a Broken MJPEG AVI

Published
by
Zz85
on January 6, 2010
in Uncategorized
. 0 Comments

out_21.avi
file created: 2009-05-24 14:09
file size: 514 MB (538,972,160 bytes)

Fixing Broken AVI Header

Its kinda sad. We drove over 4 states (5 if we count montana) for over a day (another half to get to old faithful), setup my equipment, and when the recording of the eruption was almost over, I tripped over my own cables which caused this laptop to crash to the floor while recording the video to crash , with the battery pack disengaged.

Maybe its one of those times my heart dropped together with my items, but since the rugged laptop still manage to boot, and some hope lied within me that I would be able to recover the video one day. While I thought streaming broken video files were no big deal, it wasn’t so easy. My usual tools- media player classic, virtualdub, videolan etc were unable to play this file at all. It wasn’t until yesterday I attempted to rescue this file again.

1st I tried this open source “DivFix++ is #1 AVI Video Repair & Preview Utility” called DivFix++. While it managed to detect FourCC frames, the resulting video file was still unplayable. Okay let’s take a step back. Then because the Canon 40D I was using have officially has no video features, I used the open source EOS Video Record which allowed some form of video recording if the camera was tethered to a pc.

EOS Movie Record saves the resulting video in a MJPG format, so I tried figuring if JPGs could be extracted from the motion video file. I tried looking for MJPG2JPEG converters but none existing other than 2 examples of source codes here and here. I also started to examine and studying the file structures of AVIs, RIFF, JPEG etc, and with the help of a hex editor (the freeware HxD works great ), started digging around the file.

So when I’m peeking around the file at HEX Offset 04F0000 or human friendly number 75431936, the viewer showed full of zeros. Not a good news, because it meant there was not data beyond that point (buffer were not flush). From my estimation, based on file sizes, what was an approximately 2minute video is probably a sub 20s video. Which makes me feel like rewriting the subject as: “repairing a broken heart”, but read on…

I noticed DivFix++ almost generated a 75MB file which i meant it must have found the same errors I suspected and strip them off. So using the software did not entirely gone to waste. On examining the headers of the file, I found it empty which is a pretty good reason that nothing could play this file. I then remembered that EOS Movie Record writes the video headers only after recording. So following the avi riff structure, I copied in header values like frame rate, resolution etc, and eureka, the video became playable.

So, its not too sad and not all’s lost. The badly abused laptop (actually my mom’s and the 1st laptop I used much) still survived, I managed to recover 16s, and learn a couple of things about video file formats. And my photography apprentice of that day Ben Chua did took some photos with my spare camera.
Old Faithful, Yellowstone

p.s. You might be able to see the short segment of the recovered video below.

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!