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();?>" />

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

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

--

Read More!

« The learning sketches

The scarecrow of death »

Speak up!

© falldeaf 2010 - contact me