chall3ng3r

"Flash is my bloody constant" ~ chall3ng3r

QR Coder for Mobile Devices

with 23 comments

Being a mobile app developer, I have to keep few devices around me all day for debugging and testing my apps. Nowadays, all smartphones come with Bluetooth, WiFi and now NFC technologies, but they all fail to talk to each other for even simple text data exchange.

I find myself in situations where I need to quickly get piece of text from one device to another. It could be a link, some text copied from browser, or SMS message I received on one device, and need to get on other device without messing around with apps or wires.

QRCoder-demo

Yesterday this idea came to my mind when I was reading a lengthy article on my HTC Titan and received system notification that I need to recharge or else phone will power off. I wanted to quickly open the same article on my Nokia E7 which I was also carrying with me.

As I described earlier, that we currently don’t have any standard way to get these devices talk to each other directly without going through the “cloud”, so I was stuck there.

I quickly jumped back to my seat, and started some experiments. After an hour I did my first test and and it was a success!

I wrote a tiny JavaScript which can be added into mobile browser’s favorites, and when you need to share current page’s link with another device, you can just go to that saved Favorite, which will execute my JavaScript, which will finally render a QR Code right on top of the page.

Now you just need to point your other smartphone or tablet camera to it with a QR Code reader app of course (built-in in WP and other OS’s), and voila! The link will now open up.

It works in PC browsers as well, so if you need to quickly open a link on your tablet or smartphone from PC, you can save this in bookmarks toolbar in IE/Chrome/FF/Safari, and click it to instantly make a QR code for current link.

I tested it on all major PC browsers, and on my Nokia E7 and HTC Titan. Works great! It should run on all mobile browsers which support editing of bookmark URL, so you can insert the code there.

BTW, I used old Google Charts APIs to make the QR codes.

And finally here’s the code which you can copy and save as favorite in your mobile browser.

javascript:(function(){function QRCoder(){var u=window,t=document,n=t.createElement("div"),r=t.createElement("img"),i;r.src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl="+window.location,n.id="QRCoder",n.style.padding="60px",n.style.border="1px solid #f00",n.style.textAlign="center",n.style.backgroundColor="#ccc",n.onclick=function(){t.body.removeChild(t.getElementById("QRCoder"))},i=t.createElement("div"),i.style.fontFamily="tahoma",i.innerHTML="tap to hide",n.appendChild(r),n.appendChild(i),n.style.zIndex=6999,n.style.position="fixed",n.style.top="10px",n.style.left=u.innerWidth/2-130+"px",t.body.appendChild(n)}QRCoder();})()

Remember, there are no line breaks in this code. It’s just one long line of JavaScript code :)

Step by step guide:

  • Select and copy the above JavaScript code. On PC, do triple-click on code to select all code
  • Open web browser on mobile or PC
  • Add / save this page as bookmark or favorite
  • Now select and edit the saved bookmark
  • In name field, type “! QRCoder”. The character in start makes sure the bookmark is always on top of the list in your bookmarks list. Easy to tap :)
  • In Location / Address field, just paste the JavaScript code you copied in first step.
  • Ok / Done to save. Now go to any website and from bookmarks / favorites, tap on “! QRCoder”

To quickly land on this page, scan this QR code from your smartphone or tablet:

qrcoder-chall3ng3r

Tested on following devices / OS:

  • PC / Mac / Linux – Check
  • iPhone, iPad – Check
  • Windows Phone 7.5 – Check
  • Symbian Anna / Belle – Check
  • ToDo: Android

I know when this gets published, many non-techy users are going ask how to save this code in mobile browser as favorite. So, here’s a little video demonstration on a Windows Phone:


[YouTube link for mobile viewing]

Kindly ignore audio/video quality and any narration mistakes, this is my first ever video, done really quick :D

It’s a quick and dirty hack to solve a problem. You can also hack it further as per your liking.

I would love to hear any feedback or a tweet :)

// chall3ng3r //

Written by chall3ng3r

May 9th, 2012 at 11:37 pm

Posted in Android,iOS,Microsoft,Mobile,Nokia

Tagged with , , , , , ,

«
»

23 Responses to 'QR Coder for Mobile Devices'

Subscribe to comments with RSS or TrackBack to 'QR Coder for Mobile Devices'.

  1. This is cool! I wish it was a WP exclusive! That way O can brag about the functionality, oh well I will anyways. Thanks for the..app? What kind of utility is this called anyways?

    rodneyej

    10 May 12 at 4:53 am

  2. Thanks for your appreciation.

    Well, I’d call it a JavaScript Hack :)

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 5:01 am

  3. [...] [source] If you liked this post, please leave your comments below to share your experience. Have questions? like us on facebook or join us on twitter and raise your questions to be answerd quickly. Follow @techprolonged Tweet orison [...]

    QR Codes can do a lot – Share website URLs between phones

    10 May 12 at 5:04 am

  4. Wow.. Brilliant work!!
    Unique idea as usual ;) Keep this up..

    Sania

    10 May 12 at 6:32 am

  5. Thanks Sania :)

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 6:36 am

  6. Nice hack!
    I am curious, do you know how many characters are allowed to be pasted for the URL in the favorite?

    Andrei

    10 May 12 at 7:08 am

  7. [...] vollen Artikel findet ihr Hier Comments [...]

    Websiten über QR-Code weitergeben | Tutopials

    10 May 12 at 7:10 am

  8. @Andrei, QR code can store up to 7089 characters. I guess you wanted to know how long URLs one can embed in a QR code.

    Well, 7089 characters are good enough for most links ;)

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 8:27 am

  9. @Andrei, ahh… Now I get it what you asked. That depends on browser. Each browser have its own limit. I haven’t tested this yet, so not sure exactly.

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 8:30 am

  10. [...] because of drained battery. Below is a video demo :Installing the code on Mobile and PC :Visit this post of Faisal where you can find the Javascript CodeCopy The code and add it to your favorites.To create a new [...]

    JavaScript based QR Code Generator lets you send website links between Mobile Phones

    10 May 12 at 9:35 am

  11. Simply beautiful. Great Work!

    Haymo

    10 May 12 at 9:38 am

  12. I saw your work featured on wpcentral.com’s front page, and I have to say – This is awesome! Great work, Faisal!

    KoreyTM

    10 May 12 at 1:18 pm

  13. [...] – Visitare la pagina dove troviamo il bookmarklet per generare il codice QR  [...]

    Condividi Pagine Web Facilmente tra Dispositivi Mobili e PC: QR Coder

    10 May 12 at 1:47 pm

  14. This is very cool. I was using a web form before to get my Axure prototype links via QR code in my device.
    But this is even more convenient.
    Thanks!

    Lennart

    10 May 12 at 2:37 pm

  15. @Haymo, @KoreyTM, @Lennart,

    Thanks guys. Glad you liked it and its helping you in daily tasks.

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 2:45 pm

  16. How do you do it on a pc. Video please

    HAYSTACK510

    10 May 12 at 3:37 pm

  17. @HAYSTACK510, on PC, just add same page you are visiting in bookmarks. Then righ-click the bookmark, select properties/edit. Now you can change the bookmark’s name, and paster the code in Location/Address field. Will post a screen cast for it as well.

    // chall3ng3r //

    chall3ng3r

    10 May 12 at 5:12 pm

  18. [...] [...]

    CODE QR, crea códigos QR en tu móvil para compartir enlaces facilmente

    11 May 12 at 12:27 am

  19. Thanks for share it. I have tested in
    * WP7 Tango OK
    * PC Google Chrome OK
    * PC Firefox OK
    * PC Opera 11.62 OK
    * PC IE 9 Fail.

    jb

    11 May 12 at 8:28 am

  20. Hi, it’s a nice tool. I noticed that it doesn’t work with links from the Guardian newspaper’s mobile site so I think I found a bug. Any idea why they get mangled? (URLs like http://m.guardian.co.uk/ms/p/gnm/op/spOrW6krfRE-CN7UW24NA7A/view.m?id=15&gid=business/2012/may/11/jp-morgan-trader-london-whale&cat=top-stories)

    Patters

    12 May 12 at 11:13 am

  21. @jb, thanks for your tests.

    @Patters, thanks for reporting. Yes it looks like the url is not getting correctly processed for QR Coder. I will try with url-encode and update it here if it fixes the issue.

    // chall3ng3r //

    chall3ng3r

    12 May 12 at 8:56 pm

  22. [...] Coder for Mobile Devices at F·L·A·S·H·I·S·M http://www.orison.biz/blogs/chall3ng3r/?p=2951 "Flash is my bloody constant" ~ [...]

    QR Coder for Mobile Devices at F·L·A·S·H·I·S·M « John Spilker: Microsoft in Government website manager

    15 May 12 at 3:31 pm

  23. [...] 1 Time in 1 Post I use this QR Code by Faisal Iqbal bookmarklet to copy the URL from a page to my device: [...]

    Getting your mobile URL from the desktop to device using Site to Phone

    22 Jun 12 at 7:27 pm


Leave a Reply