Category Archive for ‘Design’ at kepo-ing Zz85

Archive for the 'Design' Category

Online Virtual Keyboard With Canvas and Javascript

Published

on February 6, 2010

in Browsers, Design, Hobbies and Technology

. 8 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!)

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

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

Sweeter As The Years Go By

Published

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.

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.

+ 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!

Work today

Published

Zz85

on July 9, 2005

in Business, Design, WP-Plugins and linux

. 0 Comments

Its funny I always work at the wrong time, its a weekend but I’m “working”.

But so I completed a trial overhaul for the webpage of Everfeed, an engineering company in Singapore. Current site, Redesigned site. Nothing fanciful, just trying to make it plain simple but usable.

Today 2 batch of people I know left Singapore, one in the morning, one at night. This is the 3rd time I failed to see them off at Changi, and suprisingly this makes me feel “sadder” than when I usually see people off at the airport.

An interesting post on how I could work on my ajax spell checker plugin, PhotoMatt mentions how google spell checking webservice could be used.

The issue to this is that, using ajax (in fact javascript), browser security won’t allow you to call a webservice for a remote site. This means, ajax scripts still have to contact its parent server, which in turns “relays” and contacts google’s webservice.

This means, most likely this would be much slower than (aspell thru) pspell, but, given google has mutiple language support or other more advance features, this could be played around with.

Chris Meller implement a cool php script for it already, and I could be modifing pspell (again) to use google spelling webservice.

Another thing I did today, was writing a mix scripts (bash, javascript). Then i realised, 1 powerful feature of unix/linux is in its tools, piping them and writing batch shell scripts could do almost what you need. In a way this is simpler than programming “apis” and get done what you need sooner.