Blog

Creating a vCard QR Barcode generator with jQuery igQRCodeBarcode control

Marina Stoyanova / Thursday, February 27, 2014

header image for QR barcode

The igQRCodeBarcode control is an HTML5, canvas control for Data Visualization. It presents different kind of information like URLs, personal contacts and etc. by rendering a Quick Response (QR) Code. The control supports several options for optimizing the size, readability and the position of the generated code. In the current blog we are going to see how to create a vCard QRBarcode for electronic business cards. vCard is a file format standard for electronic business cards. Those cars can contain various information like name, address, phone numbers and emails as well as logos, photos and URLs. In order to create a vCard you should follow some specifications which we are going to look at further in the blog.

Initial steps

The minimum requirements needed to configure the igQRCodeBarcode are setting its dimensions – width and height and set a value for the data option. The value for the data should be a string containing the information we wand to encode in the QR code. We will discuss how to create a vCard data later in the blog. The main features of the control can be grouped in three main categories: 1. Look and feel – the functions from this category can be used to customize the barcode by changing the bars; color as well as its background. The second category is the QR-code specific – using the features in this category you can set the error correction level, the size version, encoding mode and other. The third category unites functions that are responsible for configuring the control’s size, stretch and fill. Let’s take a look at some of those functions.

We want to add a lot of information in the code that is why we are going to use the barsFillMode property and it is important to set it to ensureEqualSize value to ensure that it will be easily readable by the QR readers. The default value for the property is fillSpace,  meaning that the code image will fill the whole space available for the igQRCodeBarcode.

Another property that we are going to use is the errorCorrectionLevel . The error correction is a build-in functionality which restores encoded data which has been damaged or dirty. The data recovery level is at the 15% of damaged symbols by default meaning that the errorCorrectionLevel is set to medium. We will set it to low which is equal to 7% of damages symbols that can be restored. Pay attention that the higher the correction level is, the higher the storage capacity will be required from the user’s device for scanning the QR code.

The last property I want to mention is the sizeVersion. This feature specifies the the size version of the QR code barcode matrix. The size version refers to the number of the black and white modules that make up the matrix. The control supports size versions from version 1 to version 40. The first version corresponds to 21x21 size module matrix and the version 40 corresponds to 177x177 modules. If you don’t set any version, the control automatically will use the smallest version that fits the data.

You can fine detailed information about the igQRCodeBarcode control in the documentation or the API.

  1. $("#barcode").igQRCodeBarcode({
  2.     height: "200px",
  3.     width: "200px",
  4.     barsFillMode: "ensureEqualSize",
  5.     errorCorrectionLevel: "low",
  6.     data: "BEGIN:VCARD\r\nVERSION:2.1\r\nN:Somebody\r\nFN:Somebody\r\nORG:Organization's name\r\nTITLE:Job title\r\nTEL;TYPE=cell:555555555\r\nEMAIL;PREF;INTERNET:example@example.com\r\nEND:VCARD"
  7. });

igQRCodeBarcode image with sample data

To create an electronic business card we will need a form where the users will be able to fill in their information. We are going to use the igTextEditors for that purpose. The igTextEditor control provides a lot of features for styling the input and giving it a unique view.

HTML:

  1. <form id="businessCardInfo">
  2.     <fieldset id="field">
  3.         <legend>Personal Informationlegend>
  4.         <div class="popoverTooltip">
  5.             <label>Prefix: label>
  6.             <br>
  7.             <input id="textEditor" type="text" name="prefix" title="Mrs, Miss, Dr ..."><br>
  8.  
  9.             <label><span class="req">* span>First Name: label>
  10.             <br>
  11.             <input id="textEditor1" type="text" name="firstName" title="first name" required><br>
  12.  
  13.             <label>Middle Name: label>
  14.             <br>
  15.             <input id="textEditor2" type="text" name="middleName" title="middle name"><br>
  16.  
  17.             <label><span class="req">* span>Last Name: label>
  18.             <br>
  19.             <input id="textEditor3" type="text" name="secondName" title="last name" required><br>
  20.  
  21.             <label><span class="req">* span>E-mail: label>
  22.             <br>
  23.             <input class="output" id="textEditor4" type="text" name="email" title="example@example.com"><br>
  24.  
  25.             <label>Phone(Home): label>
  26.             <br>
  27.             <input class="output" id="textEditor5" type="text" name="usrtel" title="555-555-555"><br>
  28.  
  29.             <label>Mobile: label>
  30.             <br>
  31.             <input class="output" id="textEditor6" type="text" name="mobile" title="555-555-555"><br>
  32.             
  33.             <label>Twetter: label>
  34.             <br>
  35.             <input class="output" id="textEditor18" type="text" name="twi" title="twitter"><br>
  36.         div>
  37.     fieldset>
  38.     <fieldset id="field2">
  39.         <legend>Office Informationlegend>
  40.         <div class="popoverTooltip">
  41.             <label><span class="req">* span>Organization:label><br>
  42.             <input class="output" id="textEditor7" type="text" name="companyName" title="Company name"><br>
  43.  
  44.             <label><span class="req">* span>Job Title :label><br>
  45.             <input class="output" id="textEditor8" type="text" name="position" title="Job title like: CEO, Software Engineer,..."><br>
  46.  
  47.             <label>Business E-mail: label>
  48.             <br>
  49.             <input class="output" id="textEditor9" type="text" name="email" title="example@example.com"><br>
  50.  
  51.             <label>Business Phone: label>
  52.             <br>
  53.             <input class="output" id="textEditor10" type="text" name="usrtel" title="555-555-555"><br>
  54.  
  55.             <label>Fax: label>
  56.             <br>
  57.             <input class="output" id="textEditor17" type="text" name="usrtel" title="555-555-555"><br>
  58.  
  59.             <label>Website: label>
  60.             <br>
  61.                 <input class="output" id="textEditor11" type="text" name="homepage" title="www.example.com"><br>
  62.         div>
  63.     fieldset>
  64.         <fieldset id="field3">
  65.         <legend>Office Addresslegend>
  66.         <div class="popoverTooltip">
  67.             <label>Street: label>
  68.             <br>
  69.             <input id="textEditor13" type="text" name="street" title="bul. Simeonovsko Shose 110B"><br>
  70.  
  71.             <label>City: label>
  72.             <br>
  73.             <input id="textEditor14" type="text" name="city" title="Sofia, New York, London,... "><br>
  74.             
  75.             <label>State/Province: label>
  76.             <br>
  77.             <input id="textEditor15" type="text" name="state"><br>
  78.             
  79.             <label>Country: label>
  80.             <br>
  81.             <input id="textEditor12" type="text" name="country" title="UK, USA, Bulgaria, ..."><br>
  82.  
  83.             <label>Zip/Postal Code: label>
  84.             <br>
  85.             <input id="textEditor16" type="text" name="zipcode">
  86.         div>
  87.     fieldset>
  88.     <br>
  89.       <button id="generateBC" value="GenerateBarcode">Generate Barcodebutton>
  90. form>

JS:

  1. $('#textEditor').igTextEditor({
  2.     width: 220
  3. });
  4.  
  5. $('#textEditor1').igTextEditor({
  6.     width: 220
  7. });
  8. $('#textEditor2').igTextEditor({
  9.     width: 220
  10. });
  11. . . .

Image:

igTextEditor inputs for the QR barcode generator

vCard Specifications

The most important thing about the igQRCodeBarcode is the data. To create a vCard we should follow some specifications. A vCard is a collection of one or more properties and a property is a uniquely named value. We should attach our values to those properties if we want our information to be encoded correctly. We are going to look at some of the properties and how to attach our data to them.  Every vCard begin with “BEGIN:VCARD” and is followed by the version “VERSION:2.1”  and ends with “END:VCARD”. Other properties can be defined in any order you like. The whole list of properties can be found in Wikipedia.

We are going to look at some of the properties just to give you a hint how to use them.The “N” value corresponds to the name property which specifies the person, place or thing associated with the vCard. The Formatted name property specifies the way the name is going to be displayed. The unique name for this property is “FN”. Those two properties has fields for the names of the person, thing or place associated with the card as well as fields for suffix and prefix if needed. We take the values from the input using the igTextEditor methods and then concatenate those values to create a valid string.

  1. var prefix = $("#textEditor").igTextEditor("text");
  2. var firstName = $("#textEditor1").igTextEditor("text");
  3. var middleName = $("#textEditor2").igTextEditor("text");
  4. var secondName = $("#textEditor3").igTextEditor("text");
  5.  
  6. if (prefix != "" || prefix != null) {
  7.     if (middleName != "" || middleName != null) {
  8.         barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + ";" + prefix + "\r\n";
  9.         barcodeFN = "FN" + prefix + firstName + " " + middleName + " " + secondName + "\r\n";
  10.     }
  11.     else {
  12.         barcodeN = "N:" + secondName + ";" + firstName + ";" + prefix + "\r\n";
  13.         barcodeFN = "FN" + prefix + firstName + " " + secondName + "\r\n";
  14.     }
  15. }
  16. else {
  17.     if (middleName != "" || middleName != null) {
  18.         barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + "\r\n";
  19.         barcodeFN = "FN" + firstName + " " + middleName + " " + secondName + "\r\n";
  20.     }
  21.     else {
  22.         barcodeN = "N:" + secondName + ";" + firstName + "\r\n";
  23.         barcodeFN = "FN" + firstName + " " + secondName + "\r\n";
  24.     }
  25. }

For the inputs which contain separate values corresponding to separate vCard properties we overwrite the value method. In those text editors we add an appropriate template. For example for the mobile phone input we will need a template of the  following kind:"TEL;CELL;VOICE:{0}\r\n" there the {0} symbol will be replaced by the input text.

  1. var originalValue = $.ui.igTextEditor.prototype.value;
  2. $.widget("ui.igTextEditor", $.extend({}, $.ui.igTextEditor.prototype, {
  3.     value: function () {
  4.         if ((val = originalValue.apply(this, arguments))) {
  5.             return this.options.outputTemplate.replace("{0}", val);
  6.         }
  7.         return val;
  8.     }
  9. }));

 

  1. $('#textEditor4').igTextEditor({
  2.         width: 220,
  3.         outputTemplate: "EMAIL;INTERNET:{0}\r\n"
  4.     });
  5.     $('#textEditor5').igTextEditor({
  6.         width: 220,
  7.         outputTemplate: "TEL;HOME;VOICE:{0}\r\n"
  8.     });
  9.     $('#textEditor6').igTextEditor({
  10.         width: 220,
  11.         outputTemplate: "TEL;CELL;VOICE:{0}\r\n"
  12.     });
  13.     $('#textEditor7').igTextEditor({
  14.         width: 220,
  15.         outputTemplate: "ORG:{0}\r\n"
  16.     });
  17.     $('#textEditor8').igTextEditor({
  18.         width: 220,
  19.         outputTemplate: "TITLE:{0}\r\n"
  20.     });
  21.     $('#textEditor9').igTextEditor({
  22.         width: 220,
  23.         outputTemplate: "EMAIL;PREF;INTERNET:{0}\r\n"
  24.     });
  25.     $('#textEditor10').igTextEditor({
  26.         width: 220,
  27.         outputTemplate: "TEL;WORK;VOICE:{0}\r\n"
  28.     });
  29.     $('#textEditor11').igTextEditor({
  30.         width: 220,
  31.         outputTemplate: "URL:{0}\r\n"
  32.     });

 

vCard QR barcode generator

Summary

Creating an electronic business card as a barcode is a modern and handy way to add new contacts to your phone or just receive information about somebody. The vCards contain various information starting from personal data as name, phone and email and continuing with information about business such as office address, job title, office name and business phone and emails. Adding all that information in a QR code makes its readability harder, but the igQRCodeBarcode supports several options for optimizing the size, readability and the position of the generated code.

See a live demo of the QRCodeBarcode generator on jsFiddle or download the sample.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!