Creación de un generador de código de barras Vcard Qr con el control de código de barras jQuery igqrcodebarcode

El control igQRCodeBarcode es un control de lienzo HTML5 para la visualización de datos. Presenta diferentes tipos de información como URL, contactos personales, etc., mediante la representación de un código de respuesta rápida (QR).

Pasos iniciales

Los requisitos mínimos necesarios para configurar el código de barras igQRCodeBarcode son establecer sus dimensiones: ancho y alto y establecer un valor para la opción de datos. El valor de los datos debe ser una cadena que contenga la información que codificamos en el código QR. Discutiremos cómo crear datos de vCard más adelante en el blog. Las características principales del control se pueden agrupar en tres categorías principales: 1. Apariencia – las funciones de esta categoría se pueden utilizar para personalizar el código de barras cambiando las barras; el color, así como su fondo. La segunda categoría es el código QR específico: con las funciones de esta categoría, puede establecer el nivel de corrección de errores, el tamaño, la versión, el modo de codificación y otros. La tercera categoría reúne las funciones que se encargan de configurar el tamaño, la extensión y el relleno del control. Echemos un vistazo a algunas de esas funciones.

Queremos agregar mucha información en el código, por eso vamos a usar la propiedad barsFillMode y es importante establecerla en el valor ensureEqualSize para garantizar que sea fácilmente legible por los lectores QR. El valor predeterminado para la propiedad es fillSpace, lo que significa que la imagen de código llenará todo el espacio disponible para igQRCodeBarcode.

Otra propiedad que vamos a utilizar es el errorCorrectionLevel. La corrección de errores es una funcionalidad incorporada que restaura los datos codificados que se han dañado o sucio. El nivel de recuperación de datos está en el 15% de los símbolos dañados de forma predeterminada, lo que significa que errorCorrectionLevel se establece en medio. Lo estableceremos en un nivel bajo, que es igual al 7% de los símbolos de daños que se pueden restaurar. Tenga en cuenta que cuanto mayor sea el nivel de corrección, mayor será la capacidad de almacenamiento requerida del dispositivo del usuario para escanear el código QR.

La última propiedad que quiero mencionar es sizeVersion. Esta función especifica la versión del tamaño de la matriz de código de barras del código QR. La versión de tamaño se refiere al número de módulos en blanco y negro que componen la matriz. El control admite versiones de tamaño desde la versión 1 hasta la versión 40. La primera versión corresponde a una matriz de módulos de tamaño 21×21 y la versión 40 corresponde a módulos de 177×177. Si no establece ninguna versión, el control usará automáticamente la versión más pequeña que se ajuste a los datos.

Puede obtener información detallada sobre el control igQRCodeBarcode en la documentación o en la API.

$("#barcode").igQRCodeBarcode({
    height: "200px",
    width: "200px",
    barsFillMode: "ensureEqualSize",
    errorCorrectionLevel: "low",
    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"
});

HTML:

<form id="businessCardInfo">
    <fieldset id="field">
        <legend>Personal Information</legend>
        <div class="popoverTooltip">
            <label>Prefix:</label>
            <br>
            <input id="textEditor" type="text" name="prefix" title="Mrs, Miss, Dr ..."><br>

            <label><span class="req">*</span> First Name:</label>
            <br>
            <input id="textEditor1" type="text" name="firstName" title="first name" required><br>

            <label>Middle Name:</label>
            <br>
            <input id="textEditor2" type="text" name="middleName" title="middle name"><br>

            <label><span class="req">*</span> Last Name:</label>
            <br>
            <input id="textEditor3" type="text" name="secondName" title="last name" required><br>

            <label><span class="req">*</span> E-mail:</label>
            <br>
            <input class="output" id="textEditor4" type="text" name="email" title="example@example.com"><br>

            <label>Phone (Home):</label>
            <br>
            <input class="output" id="textEditor5" type="text" name="usrtel" title="555-555-555"><br>

            <label>Mobile:</label>
            <br>
            <input class="output" id="textEditor6" type="text" name="mobile" title="555-555-555"><br>

            <label>Twitter:</label>
            <br>
            <input class="output" id="textEditor18" type="text" name="twi" title="twitter"><br>
        </div>
    </fieldset>

    <fieldset id="field2">
        <legend>Office Information</legend>
        <div class="popoverTooltip">
            <label><span class="req">*</span> Organization:</label>
            <br>
            <input class="output" id="textEditor7" type="text" name="companyName" title="Company name"><br>

            <label><span class="req">*</span> Job Title:</label>
            <br>
            <input class="output" id="textEditor8" type="text" name="position" title="Job title like: CEO, Software Engineer,..."><br>

            <label>Business E-mail:</label>
            <br>
            <input class="output" id="textEditor9" type="text" name="businessEmail" title="example@example.com"><br>

            <label>Business Phone:</label>
            <br>
            <input class="output" id="textEditor10" type="text" name="businessPhone" title="555-555-555"><br>

            <label>Fax:</label>
            <br>
            <input class="output" id="textEditor17" type="text" name="fax" title="555-555-555"><br>

            <label>Website:</label>
            <br>
            <input class="output" id="textEditor11" type="text" name="homepage" title="www.example.com"><br>
        </div>
    </fieldset>

    <fieldset id="field3">
        <legend>Office Address</legend>
        <div class="popoverTooltip">
            <label>Street:</label>
            <br>
            <input id="textEditor13" type="text" name="street" title="bul. Simeonovsko Shose 110B"><br>

            <label>City:</label>
            <br>
            <input id="textEditor14" type="text" name="city" title="Sofia, New York, London,..."><br>

            <label>State/Province:</label>
            <br>
            <input id="textEditor15" type="text" name="state"><br>

            <label>Country:</label>
            <br>
            <input id="textEditor12" type="text" name="country" title="UK, USA, Bulgaria, ..."><br>

            <label>Zip/Postal Code:</label>
            <br>
            <input id="textEditor16" type="text" name="zipcode"><br>
        </div>
    </fieldset>

    <br>
    <button id="generateBC" type="button">Generate Barcode</button>
</form>

JS:

$('#textEditor').igTextEditor({
    width: 220
});
 
$('#textEditor1').igTextEditor({
    width: 220
});
$('#textEditor2').igTextEditor({
    width: 220
});
. . .

Image:

Especificaciones de vCard

Lo más importante del igQRCodeBarcode son los datos. Para crear una vCard debemos seguir algunas especificaciones. Una vCard es una colección de una o más propiedades y una propiedad es un valor con nombre único. Debemos adjuntar nuestros valores a esas propiedades si queremos que nuestra información se codifique correctamente. Vamos a ver algunas de las propiedades y cómo adjuntar nuestros datos a ellas.  Cada vCard comienza con "BEGIN:VCARD" y es seguida por la versión "VERSION:2.1" y termina con "END:VCARD". Otras propiedades se pueden definir en el orden que desee. La lista completa de propiedades se puede encontrar en Wikipedia.

Vamos a ver algunas de las propiedades solo para darle una pista de cómo usarlas. El valor "N" corresponde a la propiedad name que especifica la persona, lugar o cosa asociada con la vCard. La propiedad Nombre con formato especifica la forma en que se va a mostrar el nombre. El nombre único de esta propiedad es "FN". Esas dos propiedades tienen campos para los nombres de la persona, cosa o lugar asociado con la tarjeta, así como campos para el sufijo y el prefijo si es necesario. Tomamos los valores de la entrada mediante los métodos igTextEditor y, a continuación, concatenamos esos valores para crear una cadena válida.

var prefix = $("#textEditor").igTextEditor("text");
var firstName = $("#textEditor1").igTextEditor("text");
var middleName = $("#textEditor2").igTextEditor("text");
var secondName = $("#textEditor3").igTextEditor("text");
 
if (prefix != "" || prefix != null) {
    if (middleName != "" || middleName != null) {
        barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + ";" + prefix + "\r\n";
        barcodeFN = "FN" + prefix + firstName + " " + middleName + " " + secondName + "\r\n";
    }
    else {
        barcodeN = "N:" + secondName + ";" + firstName + ";" + prefix + "\r\n";
        barcodeFN = "FN" + prefix + firstName + " " + secondName + "\r\n";
    }
}
else {
    if (middleName != "" || middleName != null) {
        barcodeN = "N:" + secondName + ";" + middleName + ";" + firstName + "\r\n";
        barcodeFN = "FN" + firstName + " " + middleName + " " + secondName + "\r\n";
    }
    else {
        barcodeN = "N:" + secondName + ";" + firstName + "\r\n";
        barcodeFN = "FN" + firstName + " " + secondName + "\r\n";
    }
}

Para las entradas que contienen valores separados correspondientes a propiedades vCard separadas, sobrescribimos el método de valor. En esos editores de texto añadimos una plantilla adecuada. Por ejemplo, para la entrada del teléfono móvil necesitaremos una plantilla del siguiente tipo: "TEL; CELDA; VOICE:{0}\r\n" allí el símbolo de {0} será reemplazado por el texto de entrada.

var originalValue = $.ui.igTextEditor.prototype.value;
$.widget("ui.igTextEditor", $.extend({}, $.ui.igTextEditor.prototype, {
    value: function () {
        if ((val = originalValue.apply(this, arguments))) {
            return this.options.outputTemplate.replace("{0}", val);
        }
        return val;
    }
}));

$('#textEditor4').igTextEditor({
        width: 220,
        outputTemplate: "EMAIL;INTERNET:{0}\r\n"
    });
    $('#textEditor5').igTextEditor({
        width: 220,
        outputTemplate: "TEL;HOME;VOICE:{0}\r\n"
    });
    $('#textEditor6').igTextEditor({
        width: 220,
        outputTemplate: "TEL;CELL;VOICE:{0}\r\n"
    });
    $('#textEditor7').igTextEditor({
        width: 220,
        outputTemplate: "ORG:{0}\r\n"
    });
    $('#textEditor8').igTextEditor({
        width: 220,
        outputTemplate: "TITLE:{0}\r\n"
    });
    $('#textEditor9').igTextEditor({
        width: 220,
        outputTemplate: "EMAIL;PREF;INTERNET:{0}\r\n"
    });
    $('#textEditor10').igTextEditor({
        width: 220,
        outputTemplate: "TEL;WORK;VOICE:{0}\r\n"
    });
    $('#textEditor11').igTextEditor({
        width: 220,
        outputTemplate: "URL:{0}\r\n"
    });

Resumen

Crear una tarjeta de visita electrónica como código de barras es una forma moderna y práctica de agregar nuevos contactos a su teléfono o simplemente recibir información sobre alguien. Las vCards contienen información diversa, empezando por datos personales como el nombre, el teléfono y el correo electrónico, y continuando con información sobre la empresa, como la dirección de la oficina, el cargo, el nombre de la oficina y el teléfono y los correos electrónicos de la empresa. Agregar toda esa información en un código QR dificulta su legibilidad, pero el igQRCodeBarcode admite varias opciones para optimizar el tamaño, la legibilidad y la posición del código generado.

Vea una demostración en vivo del generador QRCodeBarcode en jsFiddle o descargue la muestra.

¡Puedes seguirnos en Twitter@ Infragisticsy mantenerte en contacto enFacebook,Google+yLinkedIn!