Generating QR Codes from the Google Chart API

Quick Reference (QR) Codes are a type of Matrix Barcode capable of storing much more information than your normal stripy barcode.

Many organisations have taken to using QR codes as part of an integrated marketing campaign to store web page URLs, allowing users to capture the 'barcode' on their mobile phone cameras in order to visit the site in a quick and easy fashion.

QR Codes from Google Chart API

The Google Chart API has, among other things, the facility to generate QR codes of all types, encoding within them text, binary data or Kanji strings that you define - up to the maximum data limit of a QR code.

The Google Chart API is very simple to understand and returns a PNG file in response to the parameters you set.

Below I have a JavaScript/HTML implementation of the Google Chart API, that returns a QR code based on the text you input.

Generate a QR Code - JavaScript Implementation of Google Chart API











QR Code Generator Source

The source code for my JavaScript implementation above:

<script type="text/javascript"> function changeSrc() { var qrCodeText = document.getElementById('qrText').value; document.getElementById("qrImage").src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText; document.getElementById("qrLink").value="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText; } </script><br /> <style> .DAtextbox { width:250px; font-size:12pt; padding:5px; } .DAsubmitbut { width:250px; font-size:12pt; padding:5px; text-align:center; } .DAimg { border:1px solid #CCCCCC; padding:0px 50px 0px 50px; } </style><br /> <p> <input name="qrText" type="text" class="DAtextbox" id="qrText" value="Enter Your Text"><br /> <p></p><p><input name="Submit" type="submit" class="DAsubmitbut" value="Generate QR Code" onclick="changeSrc()"><br /> <p></p><p><img class="DAimg" id="qrImage" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=http://dansinteractive.blogspot.com/2011/06/generating-qr-codes-from-google-chart.html" width="150" height="150" /><br /> <p></p><p> <textarea name="textfield" cols="18" rows="6" readonly class="DAtextbox" id="qrLink">

Happy QR Code Generating.

Controling Flash Navigation through the URL

Just came across this site http://www.fuelfugitives.co.uk/ which uses the URL in a really interesting way to allow you to access different parts of a Flash Movie depending on the URL. Even though it is the same Flash Movie, not different pages.

This is useful because it means you can bookmark or "add to favourites" a specific part of the Flash Movie. It also means you can use your browser back button to return to a previous part of the same movie (normally with Flash this would result in you leaving the page containing the embedded movie).

So how did they do it?

I'm still looking into that, but a quick view of the source code indicates that some cool javascript is the answer. Will investigate more later... meanwhile - gardening.

Having cleared nigh on 168 square feet of garden (and finding bricks, carpet, bags of clothes and all manner of rubbish buried there by previous owners) with the help of a brother, I have come back to find the answer, and after a bit of searching found if not the solution, a solution...

And the answer is...

http://www.asual.com/swfaddress/

To quote the website:

SWFAddress is a small, but powerful library that provides deep linking for
Flash and Ajax. It's a developer tool, allowing creation of unique virtual URLs
that can point to a website section or an application state. SWFAddress enables
a number of important capabilities which are missing in today's rich web
technologies including:

• Bookmarking in a browser or social website
• Sending links via email or instant messenger
• Finding specific content with the major search engines
• Utilizing browser history and reload buttons

There are some cool little demos too so you can see it in action, and sure enough, seems to be pretty much what I saw on http://www.fuelfugitives.co.uk/, the site that started me looking in the first place.

So that seems to be it. One more thing to add to my todo list, but I fully intend to put this to good use this holiday. I hope you find it useful as well.

Dealing with "Click to Activate" for browser based Flash content

One thing you may have noticed when browsing websites containing Flash content, is that you now need to "click to activate", before you can interact with it. This is not IE being more secure, but rather it is a result of legal action from a company called Eolas who apparently owns a patent that has something to do with how plugins and browsers work together. Without going into the legal rambling the real issue for interactive media creators is how you get around it.

So you have crafted some smooth graphics and smoother actionscript all designed to respond to the mouse at it's merest touch. You object and embed it into a web page, the user opens the page, the mouse moves over the flash movie and... nothing happens.

At least not what you intended. Instead a grey box appears around the flash content and a message appears telling the user to "click to activate". That's alright for you - you know there is a flash movie there to activate. But do your users even know what the message means? Besides that, who wants to introduce another 'click' before your page works properly.

If you don't know what I mean, take a look here (click) and mouseover the yellow box on the home page.

The solution

Well, in fact there are several suggestions. But rather than go into details here repeating what others have said, take a look for yourself:

http://blog.deconcept.com/swfobject/ >

and

http://www.howtocreate.co.uk/noclicktoactivate.html >

While Microsoft is not without its anti-fans wishing it ill luck, it is ironic that when in this case they are not having things their own way, the result is also very annoying for end users too.