QR Code New in 1.0.8
Draws a QR code from a fixed or bound value — an asset id, a work order, a batch number, or a link to an SOP or a LiveView screen — so a phone or a handheld scanner can pick up what the screen is showing.
Reach for it when you need:
- A code beside each machine on an overview, linking to its maintenance record
- The current batch number as a code, bound to a tag, for a handheld to scan at the line
- A printable label: download the code as SVG for a label printer
Component name: QRCode · Category: Display
In the palette: Generates a QR code from a fixed or bound value (asset IDs, work orders, batch numbers, links to SOPs or a LiveView page). Styled modules and finder patterns, colour gradient, a centred logo and a call-to-action frame; SVG/PNG download. Rendered off the UI thread and cached, so a view full of codes stays responsive. Fires encodeError when the value cannot be encoded.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
value | string | "" | Text to encode. Bindable — e.g. {{tag.Line1/CurrentBatch}} or a URL built from view params. |
encoding | object | {"level":"M","margin":4} | Error correction level and quiet-zone margin. |
↳ encoding.level | enum | M | Error correction: L 7 %, M 15 %, Q 25 %, H 30 % of the code can be damaged and still scan. Forced to H while a logo is set. Options: L · M · Q · H. |
↳ encoding.margin | number | 4 | Quiet zone in modules around the code. The QR standard asks for 4; less may not scan on some readers. |
colors | object | {"foreground":"#000000","background":"#FFFFFF"} | Module and background colours. |
↳ colors.foreground | color | #000000 | Module colour. Keep it dark on a light background for reliable scanning. |
↳ colors.background | color | #FFFFFF | Background colour. |
gradient | object | {"type":"none","color":"#2563EB"} | Optional colour gradient over the modules. |
↳ gradient.type | enum | none | Colour gradient from colors.foreground to the gradient colour, or none. Options: none · linear · radial. |
↳ gradient.color | color | #2563EB | Second gradient colour. |
shape | object | {"modules":"square","finderOuter":"square","finderInner":"sq… (truncated) | Shapes of the data modules and the three finder patterns. |
↳ shape.modules | enum | square | Shape of the data modules. Options: square · square-sm · pinched-square · rounded · leaf · vertical-line · horizontal-line · circuit-board · circle · diamond · star · heart · hashtag. |
↳ shape.finderOuter | enum | square | Shape of the three corner finder rings. Options: square · pinched-square · rounded-sm · rounded · rounded-lg · circle · inpoint-sm · inpoint · inpoint-lg · outpoint-sm · outpoint · outpoint-lg · leaf-sm · leaf · leaf-lg. |
↳ shape.finderInner | enum | square | Shape of the finder centres. Options: square · pinched-square · rounded-sm · rounded · rounded-lg · circle · inpoint-sm · inpoint · inpoint-lg · outpoint-sm · outpoint · outpoint-lg · leaf-sm · leaf · leaf-lg · diamond · star · heart · hashtag · microchip. |
logo | object | {"src":"","size":22} | Optional logo in the centre of the code: the image and its size. Error correction is raised to H automatically while a logo is set. |
↳ logo.src | asset | "" | Logo image from the asset Library or the Uploads folder (max 512 KB). |
↳ logo.size | number | 22 | Logo width as % of the code (10–30). Bigger logos hide more modules. |
frame | object | {"style":"none","text":"Scan me!","color":"","textColor":""} | Optional call-to-action frame around the code: its style, label and colours. |
↳ frame.style | enum | none | Frame shape, or none. Options: none · banner-bottom · banner-top · ticket · bubble · border. |
↳ frame.text | string | Scan me! | Label, e.g. "Scan for SOP" (max 60 characters). |
↳ frame.color | color | "" | Frame colour. Blank = the code colour (colors.foreground). |
↳ frame.textColor | color | "" | Label colour. Blank = automatic: white on a filled frame, the frame colour on the border style. |
allowDownload | boolean | false | Show SVG / PNG download buttons on the code in LiveView (SVG is best for label printers). |
minRefreshMs | number | 250 | At most one re-render per this many ms when the bound value changes fast (the latest value wins). A tag updating 100×/s re-encodes ~4×/s at the default 250. 0 = render every change. |
output | object | {"valid":false,"error":""} | Read-only runtime outputs — bind a leaf by the widget's node id, e.g. {{nodes.<QRCode id>.props.output.valid}}. |
↳ output.valid | boolean | false | True when the current value encoded successfully. |
↳ output.error | string | "" | Why the value could not be encoded, or empty. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
encodeError | Encode error | Barcode | context.barcode — { value, format, message }. In action fields: barcode.message. |
encodeRecovered | Encode recovered | Barcode | context.barcode — { value, format } now encoding correctly again. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Bind the value
value is the text encoded. Bind it — {{tag.Line1/CurrentBatch}}, or a URL built from view params — and the code follows. When the value changes fast, minRefreshMs (default 250) caps the redraws: a tag updating 100 times a second re-encodes about 4 times a second, the latest value winning. 0 redraws on every change.
Codes are encoded and drawn away from the screen's main thread and cached, and each is re-drawn at the device's real pixel size when the widget is resized or zoomed, so it stays sharp. A screen of forty codes bound to one tag updates all forty in well under a quarter of a second.
Styling without breaking the scan
The settings are grouped by what they control: encoding (error-correction level and the quiet-zone margin), colors, gradient, shape (the data modules and the three corner finder patterns), logo and frame. Fields that only apply once something is chosen — the gradient colour, the logo size, the frame text — appear when it is.
- Keep it dark on light. Many readers cannot read a light code on a dark ground, or a low-contrast gradient.
- Keep the quiet zone. The standard asks for a
marginof 4 modules; less may not scan on some readers. - A logo costs data. It covers modules in the middle of the code, so error correction is forced to
H(30% of the code can be lost and still read) while a logo is set. Keeplogo.sizemodest — 10 to 30% of the code, 22 by default — and the image under 512 KB. - The frame adds a call to action around the code — a banner, a ticket, a speech bubble or a plain border — with its own label (
Scan me!by default, up to 60 characters).
When the value cannot be encoded
The image clears at once rather than showing a stale code, output.valid goes false and output.error says why in plain words. encodeError fires once when the code goes bad — not on every tick of a tag that stays bad — and encodeRecovered once when it is good again. Both hand an action the details as barcode ({{barcode.message}}), and a script as context.barcode.
allowDownload puts SVG and PNG download buttons on the code in LiveView.