Working with Widgets > 2D > Scan (2D)
  
Scan (2D)
What Does This Widget Do?
Allows you to use a barcode or QR code within an experience.
When Should I Use This Widget?
Use a Scan widget when:
• You want to use a barcode in an experience
• You want to use a QR in an experience
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
JavaScript
Type
Description
Scanned Value
scannedValue
string
When bound to a widget that includes text, this property displays the value of the barcode or QR code. For example, if a barcode on a computer is scanned, the serial number is displayed.
Service
JavaScript
Description
Start Scan
startScan
Invoking this service will start the camera to scan for a code.
Event
JavaScript
Description
Value Acquired
valueacquired
Triggered when the scan value is acquired.
User Canceled
usercanceled
Triggered when a user cancels the scan.
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
1. From the 2D canvas of a mobile or 2D eyewear project, drag and drop a Scan widget onto the canvas.
2. Enter the text you want displayed when in scan view. For example, Scan the barcode on the bottom of the computer.
3. Drag and drop a Button widget onto the canvas.
4. Enter the text you want displayed on the button. For example, Scan Code.
5. Drag and drop the icon next to Click event of the Button onto the Scan widget.
6. Select Start Scan on the Select Binding Target window.
7. Drag and drop a Value Display widget onto the canvas.
8. Enter the text you want displayed for the label of the value display in the Label field. For example, Serial Number.
9. Next, click on the Scan widget to display the property details.
10. Drag and drop the icon next to Scanned Value onto the Value Display widget.
11. Select Value on the Select Binding Target window.
Initial view:
After tapping Scan Code button: