The mobile QR code

Published: October 14, 2011

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:

<img src="http://falldeaf.com/extra/fall_qr.php?overlay=falldeaf_qrcode_overlay.png&text=Scan%20this%20code%20to%20read%20on%20your%20mobile%20device&url=<?=get_permalink();?>" />

1	<img src="http://falldeaf.com/extra/fall_qr.php?overlay=falldeaf_qrcode_overlay.png&text=Scan%20this%20code%20to%20read%20on%20your%20mobile%20device&url=<?=get_permalink();?>" />

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.

$url = $_REQUEST['url']; // URL for code to 
$text = $_REQUEST['text']; // message to display below barcode
$overlay = $_REQUEST['overlay'];
$hash_track = $_REQUEST['hash'];
  
//Add the Hash symbol to the beginning of the hash code
if(isset($hash_track)) $hash_track = "#" . $hash_track;
  
//google chart API URL
$image = "http://chart.apis.google.com/chart?cht=qr&chs=190x190&chl=" . $url . $hash_track . "&chld=h";
$font = 'ARIAL.TTF';

//Get the QR code image from google
$background = imagecreatefrompng($image); 
$swidth = imagesx($background); 
$sheight = imagesy($background); 

//if a logo is defined, overlay it on top of the QR code
//Important: overlay image needs to be a png
if(isset($overlay))
{
	$overlay = imagecreatefrompng($overlay); //get image
	imagealphablending($background, true); //needed if logo has transparent layer
	$owidth = imagesx($overlay); //get the heigh and width of the overlay image
	$oheight = imagesy($overlay); 
	imagecopy($background, $overlay, ($swidth/2) - ($owidth/2), ($sheight/2) - ($oheight/2), 0, 0, $owidth, $oheight); //paste it on top
}

//If text field isn't blank, draw it in below the code
if(isset($text))
{
	$font_color = imagecolorallocate($background, 0, 0, 0); // set font color
	if(strlen($text) >= 15)
	{
		//split string in two, down the middle
		$half = (int) ( (strlen($text) / 2) ); // cast to int incase str length is odd
		$left = trim(substr($text, 0, $half));
		$right = trim(substr($text, $half));
	
		// Write Text
		imagettftext($background, 9, 0, 35, 176, $font_color, $font, $left);
		imagettftext($background, 9, 0, 35, 186, $font_color, $font, $right);
	} else {
		// Write Text
		imagettftext($background, 9, 0, 35, 172, $font_color, $font, $text);
	}
}


// Output header and final image 
header("Content-type: image/png"); 
header("Content-Disposition: filename=" . $image); 
imagepng($background); 
  
// Destroy the images 
imagedestroy($background); 
imagedestroy($overlay);

$url = $_REQUEST['url']; // URL for code to

$text = $_REQUEST['text']; // message to display below barcode

$overlay = $_REQUEST['overlay'];

$hash_track = $_REQUEST['hash'];

//Add the Hash symbol to the beginning of the hash code

if(isset($hash_track)) $hash_track = "#" . $hash_track;

//google chart API URL

$image = "http://chart.apis.google.com/chart?cht=qr&chs=190x190&chl=" . $url . $hash_track . "&chld=h";

$font = 'ARIAL.TTF';

//Get the QR code image from google

$background = imagecreatefrompng($image);

$swidth = imagesx($background);

$sheight = imagesy($background);

//if a logo is defined, overlay it on top of the QR code

//Important: overlay image needs to be a png

if(isset($overlay))

{

$overlay = imagecreatefrompng($overlay); //get image

imagealphablending($background, true); //needed if logo has transparent layer

$owidth = imagesx($overlay); //get the heigh and width of the overlay image

$oheight = imagesy($overlay);

imagecopy($background, $overlay, ($swidth/2) - ($owidth/2), ($sheight/2) - ($oheight/2), 0, 0, $owidth, $oheight); //paste it on top

}

//If text field isn't blank, draw it in below the code

if(isset($text))

{

$font_color = imagecolorallocate($background, 0, 0, 0); // set font color

if(strlen($text) >= 15)

{

//split string in two, down the middle

$half = (int) ( (strlen($text) / 2) ); // cast to int incase str length is odd

$left = trim(substr($text, 0, $half));

$right = trim(substr($text, $half));

// Write Text

imagettftext($background, 9, 0, 35, 176, $font_color, $font, $left);

imagettftext($background, 9, 0, 35, 186, $font_color, $font, $right);

} else {

// Write Text

imagettftext($background, 9, 0, 35, 172, $font_color, $font, $text);

}

// Output header and final image

header("Content-type: image/png");

header("Content-Disposition: filename=" . $image);

imagepng($background);

// Destroy the images

imagedestroy($background);

imagedestroy($overlay);

References

HackaDay tutorial for creating logo’d QR codes : http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/
Google Chart API : http://code.google.com/apis/chart/
Campaign Tracking using _setAllowAnchor tags : http://www.lunametrics.com/blog/2009/02/04/setallowanchor/
Making a watermark in GD : http://www.codingforums.com/showthread.php?t=72317

9 Comments

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 > <

Reply
- falldeaf
  
  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.
  
  Reply
Henrik

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!

Reply
- falldeaf
  
  Posted Oct 20 at 1:43 pm | Permalink
  
  Hey that’s a nice find! Thanks for posting :)
  
  Reply
Wedding Ring Blog

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/.

Reply
- falldeaf
  
  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.
  
  Reply
  - Wedding Ring Blog
    
    Posted Oct 31 at 12:54 pm | Permalink
    
    Hey – thanks.
    
    Reply
Fredrik

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…{RZ3w€€Ä 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æ:ÂÄ³Ë—<¸Á=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úû³«WJ®Ïü¦üä“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å?Ïî¡É¥»’ïÒZÇ±UUÝ”ÿ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,î#GJ]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ç?ó÷ÚÚÚ‹/¸ Ù&Ã2gA‹½çž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ðÔ/Ù¶ã¡µü[

Reply
- falldeaf
  
  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.
  
  Reply

7 Trackbacks

By Easy to use automatic QR code generator - Hack a Day on Oct 16 at 7:00 pm

[...] 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 [...]
By Easy to use automatic QR code generator | ro-Stire on Oct 16 at 7:20 pm

[...] 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 [...]
By Easy to use automatic QR code generator | The Depot of Talk on Oct 17 at 3:01 am

[...] 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 [...]
By Easy to use automatic QR code generator | CisforComputers on Oct 17 at 4:03 am

[...] 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 [...]
By Easy to use automatic QR code generator | Oddment on Oct 18 at 8:09 am

[...] 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 [...]
By Easy to use automatic QR code generator « Tamil Affection on Nov 12 at 11:29 pm

[...] 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 [...]
By QR Code Reader For Smartphones | HACKOLOG - Amazing Hacks and Mods on Jun 11 at 2:15 pm

[...] 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. [...]

References

9 Comments

7 Trackbacks

Post a Comment

About me

Advertisement

Twitter feed