I've been brushing up on javascript and jQuery. I'm not really a web developer. These days I mostly work in the Java/Linux space deep inside the server, but sometimes a little web development is in the mix. I was working on a future post about backing up Flickr images and data to a static HTML slideshow. While setting up the slideshow, it occurred to me that I could use jQuery to create a Virtual Card Punch that would run entirely in the browser. So back to punch cards one final time.
A minimal version of the page is available here for anyone who wishes to crawl around the source and find out exactly how it was coded.
Programming using a card-punch was a noisy affair, you can hear what it was like at http://ibm-1401.info, listen to http://ibm-1401.info/IBM026KeyPunch.mp3. The card-punch could also be programmed to do things like duplicate a deck. This was achieved by punching instructions onto a card and installing the card on the card-punch's program-cylinder. The cylinder was installed in the card-punch and as it turned little cogs engaged with the holes and bumped little leavers signalling instructions to the card-punch.
Duplicating a deck took the noise to a whole new level.
The jQuery library grabs and edits the input text as it is typed. The Raphael library dynamically adds SVG elements to the page. The Fancybox library creates a popup window large enough to produce a scannable image of a card. I've run the code in chrome, firefox and IE8. IE8 seems a little buggy, but it's OK once you start typing.
I used Raphael and SVG to learn a bit about something new. For true portability it would probably be better off using a table of precomputed images, one per character - that would also be very easy to code - jQuery could be used to dynamically update the visible images. Yet another approach can be seen at www.kloth.net - that site uses an http server to generate jpg's or png's for a wide variety of card encodings.
No comments:
Post a Comment
These days we're only getting spam, so comments are now disabled.
Note: Only a member of this blog may post a comment.