The Most Face Rockingest Project Blog on the Entire Fucking Web
The mobile QR code
Published: October 14, 2011
My google AD, I know most hackers and DIY'ers hate ads but it brings in around 5 bucks on a good month and I use it to subsidize my hosting fee's so you can get access to my code :)
Close up of QR

If you look closely, you can tell this has been photoshopped; because of the pixels.

Smart phones are fast becoming the predominant tool for media consumption in the restroom. However, finding or getting the right story to your smartphone can sometimes be a pain. I’ve created one possible solution. I started with the premise that everyone in the world loves QR codes with a passion. I’m pretty sure the following link to a web comic clearly illustrates my point?

http://bradcolbow.com/archive/view/the_brads_qr_codes/

What I ended up with was a dynamic, branded QR code creator that uses the google chart API, php and GD; and can be inserted into the story tools widget of a news site or blog.

The setup is pretty easy, your server will need to have php and the GD library installed. A php file will accept four query arguments that will determine what your image will look like. When called with the arguments, the php file will return image data so you can directly include it in an image tag inside a “story tools” widget, if you like.

QR Code arguments:

  • URL – ‘url’ This field should be the URL that the phone will browse to once scanned, presumably the page that you’re on. If you’re in wordpress, you can use the function get_permalink(); which will return the full URL for the page that you’re on.
  • Text – ‘text’ This is an optional field and will place text below the QR Code. If you use this feature, you’ll need the file ARIAL.TTF in the same directory as the php file.
  • Logo image – ‘overlay’ This field is also optional and will overlay a logo on top of your QR code. It can be either a fully qualified URL or a relative path to an image, but it must be a png. The height and width of this image must be small enough to not cover more than 30% of the QR code. If the code won’t scan, make your image smaller.
  • Hash code – ‘hash’ This field can be used to append a ‘tracking code’ to your url using a hash tag. The hash tag will be automatically entered for you. If you use google analytics, follow this tutorial to enable hash tag tracking.

Example:

I hope this helps someone, enjoy! Alternatively, if I’ve inadvertently created a new, annoying, web fad that bugs the hell out of people, please accept my sincere apology! :)

Here’s the code for the php file, save it to a file called dynamic_qr_png.php for best results, or flibbertygibbit.php if you prefer to be obtuse.

References

--

Hey thanks for reading this far! Maybe you'll be interested in more of my projects? Check out my homepage :)
This entry was posted in Software and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

12 Comments

  1. 0x13
    Posted Oct 17 at 12:22 pm | Permalink

    Thanks, but I can use this how? I dont see an example on your site. I’m not versed in php at all…so I have no clue what to do with the code and dont see it used on this page either > <

    • Posted Oct 17 at 1:33 pm | Permalink

      Step 1: Save the code section into a file called dynamic_qr_png.php on your webserver.

      Step 2: Put an html image tag on your webpage that looks like < img src=”[LOCATION OF PHP FILE HERE]?overlay=[LOCATION OF OVERLAY IMAGE HERE]&text=[CAPTION TEXT HERE]&url= [URL TO POINT IT TO HERE] ” />

      Step 3: It’s a fast paced world, these days. Don’t forget to take some time out of your day for you. Take a nice bubble bath and get a massage; pamper yourself.

  2. Posted Oct 20 at 8:45 am | Permalink

    Here is a QR Code generator, which works directly in your browser (JavaScript):

    http://qrlogo.kaarposoft.dk

    It allows you to embed a picture, and it will verify the quality of the QR code afterwards!

  3. Posted Oct 26 at 3:09 pm | Permalink

    I am a big fan and user of QR codes. Glad to see another story about them. I like the leaf idea. Will there be a snowflake one for winter?

    Here’s my article about QR codes being used in jewelry – http://www.theweddingringblog.com/qr-codes/.

    • Posted Oct 26 at 5:01 pm | Permalink

      Holy shit. I’ve never seen a site with more ads than yours, sir!

      Regarding your question, it’s an API of sorts that will allow you to put any image you choose.

  4. Posted Jun 14 at 3:17 pm | Permalink

    I am getting this error:

    Warning: imagecreatefrompng() [function.imagecreatefrompng]: ‘http://upload.wikimedia.org/wikipedia/commons/1/15/Jpegvergroessert.jpg’ is not a valid PNG file in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 19

    Warning: imagesx() expects parameter 1 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 21

    Warning: imagesy() expects parameter 1 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 22

    Warning: imagecopy() expects parameter 2 to be resource, boolean given in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 23

    Warning: Cannot modify header information – headers already sent by (output started at /home/jbekcom/public_html/testing/qrkodegenerator.php:19) in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 44

    Warning: Cannot modify header information – headers already sent by (output started at /home/jbekcom/public_html/testing/qrkodegenerator.php:19) in /home/jbekcom/public_html/testing/qrkodegenerator.php on line 45
    ‰PNG  IHDRôôD´HÝNIDATxœíÝk”Tåèá¹4Í­ADä& °ˆ¶xƒ£DsŒ™%#£.Ž1„q:#1Æd£Æ¨“!.“™ƒ Çx¼4x‰C‘ƒÄ¥€-6…ØçC-öÔô¥ºª««»êÏó,>U»v½û­®»««_ÚÕÖÖ–Kû¶-OÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨C[ ùÚµk×ÖC(UµµµÙo\¸y.Ü0rÚsNŠd6râ•Òl…{RZ3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä ^ò7’%½tg6Šd)Úœ†Q¸1Él”¢ðxè,€ìÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qèPYò7’E²(h‘,¾ZŠËçæ4æðÃ(¯”bæÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿4¡×S-ÅU|ïL+s搸$î‰;@@␸$î‰;@@␸$î‰;@@␸dÉ_šÓR´9)ÜŠ¸…F‘ŒšäÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿ ÈiY×ð 7E²Š/Ífž‹™3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä CeÉß­.^NSW¸5sÚsáÆ\${.œ"ùs搸$î‰;@@␸$î‰;@@␸$î‰;@@␸Ԯpk´C‘,ù[ŠÃȉW"-Ë™;@@␸$î‰;@@␸$î‰;@@␸$î‰;@@âP‡¶*’ÕesÚ¸HÆLºÂ­–lÏÅÌ™;@@␸$î‰;@@␸$î‰;@@␸$î‰;@@âP»Ò]ÓÒê²ÍVŠë©îé.¥øUWŠOJ)Îsó8sHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜ*á%s~mÒ"Y¹ç9¼R|‹dÌ%Ggî‰;@@␸$î‰;@@␸$î‰;@@␸$î‰;@@ÚzŨpˍnэ¹×S-Å1—¢R\˜·HÖ4nÎÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€•%‹dQЭ~=Õ"YZ¹É"·ž”VæÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨„—ü-’En‹D)Ž¹p,r›®Hm.ËA7È™;@@␸$î‰;@@␸$î‰;@@␸$î‰;@@âP /ù›“­óY¸åFKqñÕR\OµpOJ‘<ƒ9‘|‰–â ¶Ø8sHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qHÜ:T–ü-œÂ-‘ZÒˍf£g#üR´E²Š¯•´óçÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä qÈ’¿ (Ür£¥¸RkNÂÏF‘¬.[$Ow)*’µ£[3w€€Ä qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä v‡Î˜4O)®.[Š_Õ…[hºp 7æRœbãÌ qHÜw€€Ä qHÜw€€Ä qHÜw€€Ä q¨„—ü-Å¥h‹D‘ÿ¶Û^\±âsçŽ=öØ?¾òJëØ»÷’‹.ºuþüÿóå/§®¹ò²Ëf]|ñ ¿ÿ}Û¬„|üÑGçsÎÓO=•~åöšší55=zôh«QÁ¡À{îz§ºzïž=_Ÿ«ßÅ÷ßΙgŽ4(õ ¼©§öøÃ=ï¿ßä®ö}øჿøÅeÿ÷ÆŽ>@ï.]útí:|À€SO›ëØêûø£îùÉOþæ쳇uTeçÎCŽ<òôSOýñ¿ýÛ¾?Ì~'ÍžçÄË'Ïr¿ž=OûÑæó•|ÍUW%w?~ĈÍo½•ë ¬ö Š²²ÔŸÙ3g®_·îä1c’kêü™3kÖ‡|PÛˆí553¦Ooì¾ee§rÊk¯¾ÚØÝÓ‡ÑØ6ÙÜwçŽ_˜:µÁ í×?ža?wÞ~ûÑ}ûf8„Š²²É'ŸüÖ›oæ:Âij˗<¸Á=9rÍêÕ³gÎL®ipyÎsmmí«64ö,÷ìÔé{×__Ûܧ#óÔÕ9¢äÊg—/ÿ튽ÊËël¼aýú¤-›7g9퐮¸O?þ¨ÊÊä¯GUVÓ¿×öíÓ¿‚gLŸÞàîÞØ´éØaÃÒ·<}ãd›'}tԐ!u&9}ãü:ÿ™Ï~´Í‹û×]—Ü:fÔ¨··nÍ~Ú!]qOýéU^þÏ×^›œ5ìܱãÆë®Ka<¹ti}½¿{÷è‘#“»ûê«7¾öZrëúuëæÌš•ö¨ÊÊM7ÖP‹Ä½g§N© ÿûŒ3Ö­]›ºõ­7ß¼üÒKÓ·I?%LyàÞ{“ N7îÉ¥K?Ú·/¹uËæÍÿzË-éM¼õ¦›rä«6$§{Ý;tøÖ¼yÉ øµW_½ä¢‹ê<õ“ÿ×A~ñ¬³’,ºï¾ú|ïúë3'&ÿy¾böìdçÿtÍ5õïþƦMuNK[!î©?ÓÎ9gÝÚµ=pËæÍwÞ~{r€ùuþ3Ÿýh3{ƒ7¥¿¸N=úÝmÛ›1ÈFÃqÿÑw4¸õþ?N¾‡_U•~Ó;ÕÕÉë걇Îðé§'õ_¥-÷ñUUû?þ¸ÁͦsN²Yúû³«W­J®Ïü¦üä“O®8x†˜Ó7mܘ7eJcw_ùâ‹éodµNÜëÿs›’ÿQç?óُ¶Î–ÙÄýGwÜ‘\yʸqÛkj2ì²ÑÀ§eºvëö¥™3üék‡ŽǍŸº¼eóæô›?ðÀþ?.++2lØç¿ð… ?5{öa?·øšñCàl|ó;ßiìcéW^}ur9ùʲ²²¡Ã†-~üñ[æÏ¿lîÜ3¦NÍ°óaǧ.|pðsÜYJ¸Ù—_ÞØfsçÍkì¦üçù‘%KR{(++»úÚk»ûg&L˜zÖYö_ßüÎw¼>ÿ£Îæ³m®~úã_ypHãƏbùòÞ‡Þ”{æPÖ@ÜGÓ©sçÆîpd¿~© {öìI¿þ×ÏuaùSO?bDæGM~+}ÓƍY4’Ǐáߧ²²²ªÑ£S½Èf!°­[¶¼ùƯoÜøÇ Ö¬^½zÕª½ÿaK½&³÷Ç ’dجýa‡WUµjåÊú7å?Ïî¡É¥»’ïÒZDZUUÝ”ÿQç?óُ6{Ï=óÌ=wߝ|½½uëÇ¿©‚øþ{†âÞ¾}s–ŠÜ׬î/ÌyJ“ßY'ÿ€Õ?Qºç'?ùöÕWo¯©iðŽ=++'O™²eóæÕ«V5cÉ,•——gÞ²{#˝ç?ÏÉÏ šC·ìÞ h)Î*ò?êüg¾Žæ5hüI’uìÔé·+V”••=´hÑ’ü›iÓZjç²ZlÉßdñé]´·¶6û?-5€tM~o›¼¯Rç%zÝ·¾5{æ̤ì‡uèplUÕÏ;ïªk®¹{áÂÕë×oݹóÞÅ‹3kŸAR–&ÛXÎòŸç䐛C«´¡ü:ÿ™/ ’>±|ù¿ß}wçƒ#œ;gÎŽíÛ[s „Ôbqï{ð{üÆÎy[S“c¨>øMzú7×Ï?ûì­7Ý”\÷Â…Õ»výþå—>øàu7Þxþ…~ê¸ãR·æú!™Dò-ƒo¥{o×®¯Ïž“wc’w*Óä [MþGÿ̸ñã]¶¬[÷îÇŒ‘|réÝmÛ¾6gN«¨Z,î#GJ]X»fM“W¿ýöýû[ê¡ëK~fؘõëÖ¥.¤Ÿƒß1~êB—ŠŠ_=ÿüù^Xѵkƒw¯ó1Ðì}êØcSÖ­]›åëÈžO3&óC$þ³©A¶šü:ÿ™/„ÑcÆ$_csçÍK¾Ýwߣ=Ôjà ¤‹ûÄI“RÞݶmůaËÝï½7zäÈÊòò‘ƒè?~{ëÖW^~¹±[Ÿ{úéä‡r“§LI®O>#qúgdXã÷ƒ½{ÓóÉ_ÿšýÀþçÁ‡{o×® ³ôÊË/’?B¬#ÿy>uòäd /¾ðB†=<öðÃnmMùuþ3_h:v¼ó®»Úü‰×³gïÚ¹³MFB -÷ôÏD_Ÿñ—;n¹é¦½{öÔ~òÉ–Í›‡ÖR¨cþm·5vÓm7ßœºÐ¹¼ñįüm¦wª«¯lü—­ iÉïªfù‹æD½èoÿ6¹éòK/mðî=üpúêN;w쨳AK-?PQVÖຏ߿á†dƒ¯_~yúMcFª8¸´Ncë¬þð¶Ûê,ùÞ®]9 2}ÕÉïßpCý .XPç@êlÿùä_-[–,ðòæo|óë_O_Wògwß]ÿ-÷®íÛÏ»âŠ$Ó_{-}å¿‘ƒ×yñ×YGûWË–ýõÀÔM{÷ìYtß}É2Âé}ÏuU÷í55#Lî~ñ$«nÙ¼yÞWÔùÇ£óüÞ®]ÇôïŸl0cúôdÌöí[tß}õ³mó¸çÔùÏ|ö£Í¼eæÉ”·‰÷víªµ^å壆 I_ﻢ¬ì³“&=²dIòו/¾˜ë8×®YSguøA}ú¤¯8?jȐóÏ=· ó¼fõê×sOÖçª(+û_’&—¯˜=;×ìmѸ·ÈQç?ó­÷ÚÚÚ‹/¸ Ù&Ã2gA‹½çžrÂر/®YsfÚ‚SíÛ·ùÍ7Ó?Ö«wïÿX°àúï}¯e:]yyù²gž=fLYYYí’Ÿ¼S]þºÿ1iÒ «V uîÕ£gϥ˗§~æ£}ûÞ|㍝ѱgeåwo¾yÙ3ÏLž2%ùÁ× Ï=—ëðN;ö…U«ÆŸtRrÍöššwª«S¿†>rÔ¨G—-Ëü‹”ùÏóØOúÉçžK?Ø÷víÚ²ysêºTTÌ¿óÎHû@^²ìDÊÿ¨óŸùÖqëüùÉ0.XðÔ/ٶ㡵ü[

    • Posted Jun 14 at 3:22 pm | Permalink

      From the code:

      //Important: overlay image needs to be a png

      The overlay image you’re specifying is a jpeg. You need to either make it a png or modify my code, which would be super easy.

  5. Chad Hults
    Posted Jul 27 at 5:20 pm | Permalink

    I know nothing about code and would like to have a software that I could send a picture to a folder where it would automatically take that picture and attach a QR code. Then it would save it to another folder which would allow it to be viewed on a monitor in a grid formation that could be configured for business branding and layout so people could walk up use their QR reader and post to social media sites. Is this possible?

    • Posted Jul 27 at 11:02 pm | Permalink

      It’s definitely possible, but you’d need to do some coding to get it done (As far as I know, there could certainly be some software out there that already does this). Python could accomplish this pretty easily. Urllib2 and the google chart API could make the QR Codes, the imagemagick library to manipulate the images, and Tk to make the GUI interface.

  6. Posted Nov 25 at 1:33 am | Permalink

    Hello, yup this post is in fact good and I have learned lot of
    things from it regarding blogging. thanks.

7 Trackbacks

  1. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  2. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  3. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  4. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  5. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  6. […] thinks they’re pretty great, Hackaday reader [falldeaf] thought it would be cool to put together an automatic QR code generator to be used on web […]

  7. […] Smart Phones now are the need of everyone. They are fast, accurate and easy to use. But sometimes it is hard to a find a right review or information for smartphones that fulfills one’s need. This article shows an easy way to get the QR codes for your smartphone. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">