Tag Archive for 'geeknotes'

[geeknotes] Now, Have you met.. Instant QR Codes?

Published
by
Zz85
on August 9, 2010
in Browsers and Technology
. 0 Comments

(Imported from my facebook note dated Monday, 28 June 2010 at 01:37)

This is a follow up to my previous geek note “Say Hi to Instant Barcodes”. The quick story here: nothing too fanciful, just a simple html 5 mashup for instant qrcodes using javascript, jquery, and Kazuhiko Arase qrcode jscode. See http://jabtunes.com/labs/qrcode.html

QRCode

The advantage for using QRCode over my previous barcode generator is that this 2d barcode packs more information in it, specifically for this mashup implementation, 119 binary characters with 30% recovery rate (using up to QR Code version 10, can be much more if we can implement till version 40). Think of it as maybe, twitter on a picture!


A picture can tell a hundred words, and this tiny qrcode does store a hundred characters.


Yes, the barcode scanner on android works with 2d barcodes.


And I think this is also a good way to send urls, telephone numbers and other contact to each other. With a lack of a standard vcard or bluetooth protocol, I think qrcodes should work much better!

Feedbacks would be great! and yes, you can download some codes and send me messages in QR Codes! Goodnight! :)

p.s. Tested on all modern browsers (& ie9 beta) except mobile browsers (pls let me know if it works!).

[geeknotes] Say Hi to Instant Barcodes

Published
by
Zz85
on August 9, 2010
in Browsers and Technology
. 0 Comments

(This is repost of my facebook note dated 25 June 2010. Apparently there’s more notes to be imported, but maybe I’ll leave that for another time)

It seems to be ages since I last touched javascript but here’s a latest addition to my html 5 canvas experiments, a really simple (1d) barcode generator.

Type some words or numbers, and a barcode appears immediately (using the simple code 39 implementation without checksum- drawbacks, the not suitable for long data due to low density). Admire the barcodes, save it, otherwise artistically modify it (or have fun writing coded messages to each other).

To skip the talk and get to the action, see http://jabtunes.com/labs/bars.html

Barcode scanner on the android is a nifty cool feature.

Scanning my name. You could use it for telephone numbers too.

Yes it works.

Lastly here’s a barcode if you’d like some practice.

Goodnight :)

p.s. tested in Chrome, Firefox, Opera (barcodes without text for IE). Javascript lovers, the html file is self contained (except for jquery). Use/hack as you like

[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.