The colorful wolf

February 16, 2011

Fun with Square Codes

Filed under: Tech — randy @ 1:24
Tags: , , , , ,

This is a qr code:

It’s used to embed data inside of it, which can then be scanned by a large variety of devices. It’s widely used in Japan to advertise links to web pages, which are otherwise difficult to type on a small device like a mobile phone. But they can be used for all kinds of things. All in all it’s a very cool technology, so I wanted to experiment with it.

Python and Django are my server of choice, so I started looking for a library to generate square codes in Python. I soon wandered upon pyqrnative, which is a port from a javascript version, apparently. It’s very compact and easy to use. Generating images was a piece of cake. I had Django serve dynamically generated images in no-time.

But how to read these images client-side? Since I recently dabbled in OpenCV and JavaCV I learned of an easy way to access the webcam in Java, so I made a Java implementation. This step was not very difficult, so I decided to make things harder on myself by embedding the webcam part in a Java applet, so it could run from a website.

I had a bit of trouble here, as accessing native libraries (using Java Native Access) proved quite difficult. I had a lot of trouble figuring out where JavaCV was loading its dll files from, and it took me a good half hour to debug it. A list of paths to OpenCV are hardcoded in the JavaCV source code. I wanted to include the dll files dynamically, which seemed near impossible. What’s worse, removing or adding paths did not seem to make any difference as to whether JNA could find the dlls or not. I finally tracked it down to one folder: /usr/local/lib was the folder where my libraries were being loaded from. Which is damn peculiar, because that’s a Linux folder and I’m running Windows 7. I suspected cygwin at first, but the problem was not that: When specifying the /usr/local/lib folder, jna looks for all folders in the system variable called jna.library.path, which contains the system path by default. Very obscure…

Having figured that out I could continue building the applet. I had jump through a bunch of hoops to get it to work, namely signing the applet (which is a very good thing considering I’m running native code that accesses a webcam!) and figuring the right tags to put in the HTML. HTML tags for applets are a big bloody mess, there’s no standard at all. There’s a deprecated applet tag, an object tag for IE and an embed tag for Mozilla (which also works in Chrome). I chose the embed tag for now.

There’s a nice method in Java’s AppletContext class which lets you change the browser’s document’s URL. It also allows you to execute arbitrary Javascript, so you can call a javascript function that does an ajax call back to the server that can update the web page! It’s all very roundabout and takes three languages and a whole bunch of libraries to get going, but it’s quite cool once it works. Here’s a video of the result:

Advertisements

5 Comments »

  1. I wonder if people actually use those in real-life. Personally I’ve never…

    Comment by Mathieu — February 16, 2011 @ 16:37 | Reply

  2. Beat ya to it! http://xiyuonline.com/blog2/for-your-reference/

    Comment by Xi — February 16, 2011 @ 17:29 | Reply

  3. I have an extension in my browser that turns the url into a qr code, so i can grab it from my cell phone and continue the reading somewhere else.

    Comment by Alvaro — February 20, 2011 @ 0:46 | Reply

  4. Fun demo by the way! 🙂

    Comment by Alvaro — February 20, 2011 @ 0:47 | Reply

  5. Awesome stuff! I’ve mostly seen that implementation, from browser/real-life to mobile, but not vice-versa.

    Comment by randy — February 20, 2011 @ 0:48 | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: