JSignage QRCode plugin

Introduction

jSignage QRCode library is an add-on to the JSignage API library for generating QR code layers.

It was first included in 3.1.0 release of HMP firmware and Elementi software. See History section below.

Dedicated QR code widgets have been added starting with Elementi 2017 to cover the basic needs. For anything else, you can manually generate a QR code layer using the QRCode() function exposed by this library add-on.

jSignage.QRCode.js must be included after the jSignage.js library in the document, like this:

 <script xlink:href="http://download.spinetix.com/spxjslibs/jSignage.js"/>
 <script xlink:href="http://download.spinetix.com/spxjslibs/jSignage.QRCode.js"/>

jSignage.QRCode()

$.QRCode( attributes );

Returns: jSignage Object

Description

Draws a QR code layer using Byte encoding module (8 bits per character, UTF-8).

Parameters

• attributes

  Type: Plain Object.

  Contains the QR Code layer attributes.

Attributes

• typeNumber

  Type: Number or String. Default: 2. Maximum: 10.

  Specifies the "version" or "model" number of the QR code which determines the overall number of dots of the code, hence the number of characters that can be encoded. The default value is 2 (corresponds to 25 x 25 dots) and the maximum is 10; "auto" can be used to get this calculated on the fly.

• errorCorrectLevel

  Type: Number. Default: $.QRCode.ErrorCorrectLevel.M.

  The error correction level, which can take one of the following values:

  • $.QRCode.ErrorCorrectLevel.L (1) - low level, where 7% of codewords can be restored.
  • $.QRCode.ErrorCorrectLevel.M (0) - medium level, where 15% of codewords can be restored.
  • $.QRCode.ErrorCorrectLevel.Q (3) - quartile level, where 25% of codewords can be restored.
  • $.QRCode.ErrorCorrectLevel.H (2) - high level, where 30% of codewords can be restored.

• color

  Type: Color. Default: '#000'.

  The color to be used for the QR code.

• data

  Type: String or Array.<String>

  The data to be encoded into the QR code, either as a string or an array of strings.

• transparent

  Type: Boolean. Default: false.

  Specifies whether the background is a transparent or white.

• quick

  Type: Boolean. Default: false.

  Specifies whether the search for optimal mask is skipped. When set to false, generating the QR code is much faster.

Examples

QR code for a website address

// draw a QR code for a website address
$.QRCode( {
    typeNumber: 2,
    errorCorrectLevel: $.QRCode.ErrorCorrectLevel.L,
    data: 'https://www.spinetix.com/'
} ).addTo('svg');

Green QR code for a phone number

// draw a green QR code for a phone number.
$.QRCode( {
    typeNumber: 2,
    errorCorrectLevel: $.QRCode.ErrorCorrectLevel.L,
    data: [ 'SMS:', '0216475515' ],
    color: '#800'
} ).addTo('svg');

QR code for a vcard

// draw a QR code for a vcard
$.QRCode( {
    typeNumber: 7,
    errorCorrectLevel: $.QRCode.ErrorCorrectLevel.M,
    data: 'BEGIN:VCARD\nN:Doe;Bob\nTITLE:CMO\nEMAIL:bob@bob.org\nEND:VCARD'
} ).addTo('svg');

Troubleshooting

• Error: code length overflow.

  This error means that the number of characters is not sufficient and thus, the typeNumber attribute should be increased.

History

• 2011-07-04: Started the development of the jSignage.QRCode library.
• 2014-10-13: Version 1.0.0 is included in the 3.1.0 release of HMP firmware and Elementi software.
• 2015-08-07: Version 1.0.1 is included within the 3.2.0 release. Added support for UTF-8 chars.
• 2015-11-03: Version 1.0.1 is included within the 4.0.0 release.
• 2017-04-06: Version 1.1.1 is included within the 4.2.0 and 3.4.0 releases. Added support for "typeNumber": "auto".
• 2018-06-01: Version 1.1.2 is included within the 4.3.0 and 3.4.3 releases. Fixed issue with browser throwing exception.