The JourneyApps Blog

The information in this post has been updated with the launch of our Auto Voice Engine. Read more here.

Use cases

Barcode scanning can be an efficient way to identify assets, parts or stock items. QR codes allow even more data to be encoded in a single barcode, expanding the use cases for barcode scanning.

Typical use cases for barcode scanning include:

• Hands-free asset identification: users conducting operator rounds who need to identify an asset in order to log a new work order or lookup asset maintenance history by scanning barcodes. This typically falls under the asset management umbrella.

• Parts picking: users managing inventory at manufacturing centers or customer sites who need to track the movement of inventory or pick inventory against a customer order.

• Defect logging: users investigating defects as part of quality assurance processes who need to register the components under review.

• Equipment grading: users grading used equipment in order to recommend necessary repairs before equipment is re-used.

What you’ll need

To use barcode scanning in your JourneyApps app for RealWear® you’ll need:

• A RealWear® HMT device (for testing)
• RealWear Explorer (for installing the JourneyApps APK if you haven’t already done so)
• A JourneyApps OXIDE account – sign up here if you don’t already have one

Instructions:

Open OXIDE and navigate to the relevant app view

In OXIDE, click the Views tab and select the view where you’d like to implement the barcode scanning component from the list, or create a new view.

Views tab selected.

Example of views displayed in the left panel when the Views tab is selected.

Add barcode scanning functionality

If your app will be used on non-wearable platforms, such as mobile devices and laptops, as well as RealWear® devices, you should implement the scan-barcode component in addition to registering a voice command that triggers the barcode scanner in your view’s JavaScript or TypeScript.

Add Scan-Barcode UI component

If you’re editing your view using the Canvas designer, click on the + button, search for the scan-barcode component and select it to add it to the view. When prompted to enter a label, enter the text that you would like to be your voice command.

The scan-barcode component presents as a button that launches the camera as a barcode scanner when selected. You can customize the button and add alternative voice commands later.

If your RealWear® device is enrolled into the testing environment of your app, this update will be applied to your app over-the-air once you click deploy (or immediately, if auto-deploy is enabled). The video below demonstrates this:

Configure Scan-Barcode UI component

Switch from the Canvas designer to the view’s XML. Here you can configure the scan-barcode component’s label, color, which view variable it should bind to, the types of barcodes it should be scanning and any show-if and validation logic. Refer to our documentation for a full list of attributes related to this component.

The XML of the component could look something like this:

<scan-barcode label="SCAN BARCODE" color="FF6F00" bind="barcode_value" types="QR_CODE" required="false" on-scan="getAsset"/>

In the XML, the on-scan attribute allows you to call a function defined in the Javascript or TypeScript file of the view and pass the scanned value to that function.

Script logic to be triggered when a scan takes place

In this example, we’d like to:

1. Check if the barcode value corresponds to an asset in our database.
   • If the barcode does not correspond to any asset in the app’s database, we want to inform the user that no asset has been found.
2. Fetch details of the asset corresponding to the barcode that has been scanned.

Here’s how we would do this using TypeScript in the view’s .ts file:

async function getAsset(barcodeValue: string) {
  let barcode = await DB.barcode.first('barcode = ?', barcodeValue);
  // Check if the barcode exists
  if (!barcode) {
    // Return a notification saying that an asset could not be found
    notification.error(`Could not find asset with value: ${barcode}`);
  }
  // Fetch the related asset through its belongs-to relationship
  const asset = await barcode.asset();
  return asset;
}

Add Barcode Scanning Voice Command

The first step here is to add a TypeScript function that opens and runs the barcode scanning component. This will allow a voice command to achieve the same functionality as the scan-barcode UI component.

After the barcode is scanned, we can call the same getAsset() function described above and pass the scanned value to it.

Here’s how we would do this using TypeScript in the view’s .ts file:

async function scanBarcode() {
  // Open and run barcode scanning component
  const barcodeValue = await journey.hardware.scanBarcode({
    types: ['QR_CODE'],
  });
  // Call the getAsset() function and pass barcode value to it
  await getAsset(barcodeValue);
}

The second step is to register the voice command in the view’s init() function. The init() function is called whenever a view is navigated to by an app user.

It is recommended to reset the voice service in order to ensure that any old commands are no longer registered. This will be our first function defined under the init() function. For more best practices, refer to our documentation on RealWear® voice commands.

The second function we’ll define under the init() function is where we’ll register commands that the RealWear® HMT device will listen for when the app user is at this view. Use the journey.voice.registerCommands([]) function to register commands. Commands are registered by simply typing out the words that should be spoken and then linking the function that should be triggered when those words are recognized by the RealWear® HMT device. The function triggered by the voice command is referred to as the callback.

Note: Multiple different commands can be registered that have the same callback.

Here’s how we would do this using TypeScript in the view’s .ts file:

async function init() {
  // Reset voice service
  await journey.voice.reset();
  // Register voice commands
  await journey.voice.registerCommands([
    {
      command: 'Scan Barcode',
      callback: scanBarcode,
    },
  ]);
}

Test on a RealWear HMT device

Deploy your changes to the testing environment and ensure your app on the RealWear® HMT device is enrolled into the same environment. Navigate to the view where you implemented the barcode scanning functionality.

You should see behavior similar to the below:

1. “Scan barcode” button visible on view.

1. RealWear® HMT device recognizing “scan barcode” voice command and triggering barcode scanning functionality.

1. Barcode scanner using the camera of the RealWear® HMT device and recognizing a barcode.

1. Barcode scanner using the camera of the RealWear® HMT device and recognizing a barcode.

Need support?

Documentation:

• Scan barcode component
• RealWear® Voice Control

Questions?

• Email: support@journeyapps.com
• Ask our developer community

Access OXIDE, our online dev environment.

Last updated: 2021/10/26

JourneyApps provides a rapid way to build custom apps for RealWear® HMT, mobile and desktop. Auto voice commands are simple to set up and manage, we provide offline support out of the box, and deploying apps happens with a single click. Comes with prebuilt ERP integrations. If you are interested, please contact us to schedule a demo. You can also visit our RealWear page to learn more and subscribe for notifications about new blog posts.