QrCode Generator App

Introduction

QrCode Generator App is an interactive user interface to create QrCodes. The application is based on HTML, CSS and JavaScript. The design can be customized with CSS, and the functionalities can be tweaked with JavaScript.

The Application generates QrCode images using the Google Chart API. This is important, because it doesn’t encode and create images, but only load the image using the generated URL. The application uses the JavaScript QrCode generator to generate QrCode URLs.

The application allows creating QrCodes with ease (graphical interface) and also sending an AJAX request to the server (optional) which is useful if you want to know what the user has entered.

The application has a PHP coloring engine that can change the QrCode foreground and background color. This functionality requires PHP and also doesn't change the colors in the generated URL, but only in the output image.

The application structure

The first thing is to understand the application structure. This is important to setup, customize and get the application do the required job.
The application is composed of 3 parts:

The HTML part: This represents the application skeleton. The application is wrapped inside a DIV (#qrcode_app) and has multiple elements inside it. The HTML part code can be found inside the app.html file in the /src or /script folders.
The CSS part: CSS provides the application design. You’ll probably need or want to change the CSS code in order to match the application style with your page or site owns'.
The JavaScript part: This is the functional part. It’s composed of 3 files: core.js, qrcode.js, json2.js and Google Maps JS. They are all required and provide functionality for the application. You’ll need advanced JavaScript skills to edit the core.js file.

Basically, you’ll want to place the application inside a web page. The application widget takes up 641px in width and 530px in height. The size cannot be reduced since the widget needs a place to input the data and to show the QrCode image (230x230).

The QrCode image placeholder is limited to 230px X 230px. Although you can generate larger images, they will be stretched on display. Smaller images will display in smaller sizes.

Setting up the QrCode application

Now we are going to setup the QrCode app. The application can integrate into any page; however, it’s preferred that this page doesn’t have many elements inside it to avoid possible interferences. If you found that the application is not functioning correctly, you might want to check that you haven’t used some of the application IDs or classes.

Files to include

This is the first step. There are few files that must be added to your page header or before the closing body tag. The application requires jQuery 1.4 and also json2. jQuery is not delivered with the application, so you’ll need to download it and include it yourself. Json2 is delivered within the application folder, but you might want to change its’ location.

It’s important that jQuery, json2 and qrcode.js are loaded before core.js. core.js is the main file and requires the 3 previous file to function correctly, so make sure you put your JavaScript files in the right order. The application requires also one CSS file to be included. You can make changes to this file to customize the widget appearance; this will be covered in more detail later.

	
	
	
	
	
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false">

After loading the files, it’s time to add the HTML code.

HTML code

The HTML code to include can be found in the file app.html (check out the /src or /script folders). The application is wrapped inside a div (# qrcode_app) and its structure is a little bit complicated. You don’t need to change or edit anything in the structure to make it work. Just copy and paste it anywhere on your web page.

However, be careful that you give it enough room to be sized correctly and also you put it inside the body tag. The application requires 641px in width and 530px in height, make sure you give it enough space otherwise it might not function correctly.

That’s all

Yes, that’s all. You don’t need any JavaScript to get the application running. The application will automatically detect the HTML code and runs. The application has Ajax support, so it has some parameters to setup. This will be covered in the next chapters. You are going to learn how to edit the CSS style, the HTML code and setup parameters for the application.

Customize the appearance

To customize the appearance you need intermediate knowledge of CSS. The application comes with a minimalistic CSS style. The style takes account of elements positioning and also a simple style for input boxes, buttons and text. All of the CSS is located in the style.css file which is located in the css folder of the application.

To edit CSS you’ll need first of all a tool. Stylizer is great, but a little bit expensive. A free and good solution is the CSS tool in the firebug add-on in Firefox. This will allow you to select elements inside the widget and get their corresponding CSS styles.

Some CSS knowledge is required depending on how much you want to customize the application. For example, you might want to change the error notification class. When a user enters a non-valid input, the element border color is changed. This is useful to give the user some feedback about the wrong input.

/*
* Error Style
 */
.validate_error
{
	border: 1px solid #FF0000;
}

You can customize this by changing the validate_error class. For example, you might make the border thicker (2pixels). The CSS code has few comments which should point you to what the CSS code actually do.

Customize the HTML

It’s possible to customize the HTML. You might want, for example, to remove some QrCode types, the configure settings or the QrCode URL output box. You might want also to change the text to fit for your native language. This is possible and also easy if you don’t mess the HTML Code. The widget is divided into two parts: The display which is the left part and the input which is the right part.

In the left part, you might want to remove the output URL. In the right part, you can remove specific qrcode types, the size or the encoding settings. To change text, you can simply lookup the words and replace them.

Removing a specific type

To remove a type, you need to remove two parts: The option in the select box which can be found in the #types DIV

And also the corresponding DIV in the #tabs DIV.

Removing another element

To remove another element, locate its code using the FireBug inspector. For example, removing this code will remove the QrCode output URL

What will happen?

If you remove a specific type, it’ll no longer appear in the widget. The user will not be able to generate QrCodes using this type. If you remove a specific part like the size part, the user will not be able to set a custom size. The default size will be assigned.

Setting parameters

You don’t need to touch the JavaScript code to run your application. However, there are times when you need to do that. The application code is mainly localized in the core.js file. This is the part that you need to look up, it can be found in the end of the document (use the version in /src since the /script version is compressed).

  /*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		window.qrcodeapp = new QrcodeApp();
	});

It’s important to note that only one QrCode Application can be created per page. When you want to add parameters, you should do that in this place, the code should be put in the $(document).ready function.

Geolocation coordinates

You can set default coordinates for the geolocation map.

	/*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		var param = {
			lat: 1.456,
      lng: -3.456
		};
		window.qrcodeapp = new QrcodeApp(param);
	});

Enabling QrCode coloring

By default, QrCode coloring is disabled. To enable it, you need to put the application in a PHP enabled server.

	/*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		var param = {
			coloring: true
		};
		window.qrcodeapp = new QrcodeApp(param);
	});

Enabling QrCode Download

QrCodeApp 1.1 has a new feature which let users download the generated QrCode image. If coloring is enabled, the user will download the colored image. The image can be converted to PNG, GIF or JPG.

Just like coloring, the download feature is disabled by default. It requires PHP and the GD+ library to function. To enable download, change this part in your core.js file:

	/*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		var param = {
			download: true
		};
		window.qrcodeapp = new QrcodeApp(param);
	});

AJAX

To enable AJAX, you need to provide the URL that will be queried once the Qrcode is created.

	/*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		window.qrcodeapp = new QrcodeApp();
		qrcodeapp.request_url='request.php';
	});

Editing the JavaScript code

You’ll need advanced JavaScript skills to edit the core.js file. Core.js is the only file you’ll need to edit. The JavaScript code is well documented. You can even generate a documentation using the code comments. The comments follow the jsdoc guidelines.

You don’t need to change the other files. Json2.js is used to convert a JavaScript JSON object to a string, and qrcode.js is used to generate QrCode URLs. You’ll need to edit qrcode.js only if you want to add or edit a qrcode type.

The core.js file does lot of things: It validates the user input, bind events, and send an AJAX request if an URL is set and display the QrCode image.

There is only one main function which is QrcodeApp. The other functions are prototypes for the main function so they share common variables and methods.

You can change the select list functionality to tabs’. You’ll need, however, a deep understanding of how the application works. The application code comments are very throughout and enough to get you started.

AJAX and ServerSide

You can catch the user generated QrCode with the application. You’ll require a server side script, however, to analyze the request. The application can send a POST or GET request to an URL that you specific. The response is a stringified JSON object. This means that the JSON object is turned into a string before being sent to the server.

Setting the parameters

First, you need a server side script that processes the request. Let’s assume that you created a file called process.php and that we are using PHP as the server side language. process.php is in the same folder as the application.

Next, we need to setup the script url.

	/*
	 * Document Loaded. Creates a new QrCode App.
	 */
	$(document).ready( function() {
		window.qrcodeapp = new QrcodeApp();
		qrcodeapp.request_url='process.php';
	});

How the request is sent?

The application sends the request in the following format. In this sample, the qrcode type is “text” and the content is “Hello!”. The application sends a POST request with a qr_code parameter. The parameter has the following string.

	{"link":"http://chart.apis.google.com/chart?cht=qr&chs=230x230&choe=UTF-8&chl=Hello!","data":{"type":"text","value":"Hello!","size":{"height":230,"width":230},"encoding":"UTF-8"}}

As you see the string is hard to read, unless you nicely format it to get the following

	{
	    "link": "http://chart.apis.google.com/chart?cht=qr&chs=230x230&choe=UTF-8&chl=Hello!",
	    "data": {
	        "type": "text",
	        "value": "Hello!",
	        "size": {
	            "height": 230,
	            "width": 230
	        },
	        "encoding": "UTF-8"
	    }
	}

This formatted text can be read easily. As you see, the request has the generated URL, as well as, the qr code data (such as the type, content, size and encoding). In the server side, you’ll need a JSON decoder. This string is actually a JSON object that is turned into a script. Put the following inside your process.php file.

<?php
var_dump(json_decode($_POST['qr_code']));
?>

Let’s explain what this single line of code does. First, it grabs the POST request with a parameter of “qr_code”. The returned value is the string we showed lately. To decode this string, we use the json_decode function which converts it into an object. The var_dump function displays the object (formatted).
The result is the following:

object(stdClass)#1 (2) {
  ["link"]=>
  string(75) "http://chart.apis.google.com/chart?cht=qr&chs=230x230&choe=UTF-8&chl=Hello!"
  ["data"]=>
  object(stdClass)#2 (4) {
    ["type"]=>
    string(4) "text"
    ["value"]=>
    string(6) "Hello!"
    ["size"]=>
    object(stdClass)#3 (2) {
      ["height"]=>
      int(230)
      ["width"]=>
      int(230)
    }
    ["encoding"]=>
    string(5) "UTF-8"
  }
}

Debugging the response

As JSON is popular, most of the server side languages have a JSON parser. But there is an important question: How do I visualize the result (since this is an AJAX request). This is quite important because it’ll help you a lot in debugging. The AJAX request can be easily visualized with the FireBug plug-in in the console window.

You don’t need any statement to visualize the AJAX request. Any AJAX request will be recorded in the console window. The console request displays the Headers, POST, Response, HTML (response) and cookies.

Further assistance

If you require further assistance don’t hesitate to post a comment on the product page. If you think you found a bug or require custom development, contact me via codecanyon@csomar.com.

Create/Decode Qrcode easily