Class

QrCode

kiss.ux.QrCode(config)

The QrCode derives from Component.

Encapsulates original QRCode.js inside a KissJS UI component: https://github.com/davidshimjs/qrcodejs

The generator includes correct levels:

Level L This is the lowest level of error correction rate that a QR code can have. QR code software uses this level if the user intends to generate a less dense QR code image. Level L has the highest error correction rate of approximately seven percent (7%).

Level M Level M is the middle tier of the error correction level that QR code experts recommend for marketing use. Because of this, marketers can correct their QR codes at a medium level. Level M has the highest error correction rate of approximately fifteen percent (15%).

Level Q This level is the second to the highest error correction level. This error correction level has the highest error correction rate of approximately twenty-five percent (25%).

Level H Level H is the highest error correction level that can withstand an extreme level of damage in their QR code. The level Q and H error correction levels are most recommended for industrial and manufacturing companies.

Constructor

# new QrCode(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myQrCode = document.createElement("a-qrcode").init(config)

Or use the shorthand for it:

const myQrCode = createQrCode({
 text: "I'm a QRCode"
})

myQrCode.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
         type: "qrcode",
         text: "I'm a QRCode",
         colorDark: "#00aaee",
         correctionLevel: "H"
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
text string <optional>
width integer <optional>

Width in pixels

height integer <optional>

Height in pixels

colorDark string <optional>

Hexa color code. Default #000000

colorLight string <optional>

Hexa color code. Default #ffffff

correctLevel string <optional>

"L", "M", "Q", or "H". Default "M"

View Source client/ux/qrcode/qrcode.js, line 39

this

Generated markup

<a-qrcode class="a-qrcode">
 <div class="qrcode-image"></div>
</a-qrcode>