You can use Tulip's "Barcode Scanner" camera under the Camera widget to allow an operator to scan a barcode with the webcam on their phone, tablet or desktop computer.

Here's where to find it:

In order to successfully use this widget, you need to have three things on the step:

  1. The widget itself. It should be large enough that the operator can see what they are scanning
  2. A trigger that fires "When" "Barcode Scanner (Optical)" is used.
  3. A variable embedded on the step so that the operator can see when they successfully scan the barcode

Here's how to set up a step that accomplishes this.

Adding the Barcode Scanner Camera Widget

Click the Camera widget and choose "Barcode Scanner". Resize the widget to whatever size you prefer- this is the window where the operator will be able to see what they are scanning.

You can only have one Barcode Scanner widget per step.

After selecting the widget, you will see the following options in the Context Pane:

Here are the supported barcode formats:

  • EAN-8
  • EAN-13
  • Code 39
  • Code 128
  • ITF
  • RSS-14
  • QR Code
  • Data Matrix
  • PDF 417

By default, all of these are turned "on". You can turn "off" individual barcode formats, which will also make it possible for the widget to scan barcodes more quickly.

Storing The Output

Now, you need to create a trigger that fires when a barcode is successfully scanned.

Create a trigger on the "Step" tab of the Context Pane, and add the following "when" statement:

  • WHEN "device" "Barcode Scanner (Optical)" outputs at: "this station" with events "Barcode appeared"

Then, add a "Data Manipulation" "store" statement to store the barcode value in a variable.

  • "Data Manipulation" "Store" data: "Device Output" "barcode appeared: text" location: "Variable" (variable here)

Finally, if you want to instantly send the operator to another step when the barcode is stored, add a "Go To Step" transition.

Setting Up The Step

Here's a possible layout for an app that is meant to run on desktop:

The camera widget takes up the top half of the screen.

On the bottom half, there are navigation buttons as well as a text label and embedded variable text, so the operator can see the value of the barcode that was just scanned.

Learn more about variable text here

Further Reading

Did this answer your question?