Skip to main content

What kind of UI should I implement for my use case?

  • Updated

The below guide concerns the recent WebSDK 6.x release. If you're still using WebSDK 5.x, please go here. 

 

In this guide, you will learn how to integrate the scanner into your web app’s user interface to fit various use cases. You will first learn how to add the data capture view to your app and then how to further customize this view to provide the most intuitive and efficient user experience. This guide will cover two main ways of displaying the view in your app:

  • Display the scanner in (almost) fullscreen
  • Display the scanner in split-screen

and two ways to customize its look and feel:

  • Implement an Aim and Scan UI
  • Overlay product information on top of the camera preview

Display the scanner view

Display the scanner in (almost) full-screen

This scanning setup provides the end-user with a full or almost full-screen camera preview so that the user is focused entirely on scanning. It fits all use cases where additional information or actions are not required during scanning.

Display the scanner in split-screen

This setup provides the user with a split view where the scanner occupies a lesser share of the screen. It fits use cases where additional information is required while scanning, for instance, displaying the list of barcodes scanned.

Customize the scanner view

Implement an Aim and Scan UI

This setup provides the user with the ability to aim for a barcode and only read the barcode aimed for. This UI can be extremely helpful when numerous barcodes are densely packed. To implement the Aim and Scan UI, please follow these steps:

  1. Start the scanner in paused mode (camera preview on but capture mode disabled and not scanning).

  2. Use our laser viewfinder to give the user a precise indication of where he should scan.

  3. Restrict the scanning area to a thin line in the center of the screen.

  4. Add a button to enable scanning on user tap. When the scanner is active, the button can be greyed out and display “Scanning”.

  5. When a barcode is scanned, disable scanning.

Overlay product information on top of the camera preview

This setup provides the user with popup information relevant to the scanned barcodes. It is especially useful for any product lookup use cases, such as displaying reviews on the scanned product. 

To implement such a view, please follow these steps:

  1. When a barcode is scanned, freeze the camera preview. To do so, retrieve the last frame with the scanResult object and display it while pausing the scanner.
  2. Highlight the scanned barcode on the image by using its coordinates. This will make clear to the user which barcode was scanned.
  3. Display the information you want on the barcode on top of part of the preview (for example in the bottom 25% of it).
  4. If the user clicks anywhere, scanning is resumed.

 

 

 

 

 WebSDK 5.X(Legacy)

In this guide, you will learn how to integrate the scanner into your web app’s user interface to fit various use cases. You will first learn how to add the data capture view to your app and then how to further customize this view to provide the most intuitive and efficient user experience. This guide will cover two main ways of displaying the view in your app:

  • Display the scanner in (almost) fullscreen
  • Display the scanner in split-screen

and two ways to customize its look and feel:

  • Implement an Aim and Scan UI
  • Overlay product information on top of the camera preview

Display the scanner view

Display the scanner in (almost) full-screen

This scanning setup provides the end-user with a full or almost full-screen camera preview so that the user is focused entirely on scanning. It fits all use cases where additional information or actions are not required during scanning.

Display the scanner in split-screen

This setup provides the user with a split view where the scanner occupies a lesser share of the screen. It fits use cases where additional information is required while scanning, for instance, displaying the list of barcodes scanned.

Customize the scanner view

Implement an Aim and Scan UI

This setup provides the user with the ability to aim for a barcode and only read the barcode aimed for. This UI can be extremely helpful when numerous barcodes are densely packed. To implement the Aim and Scan UI, please follow these steps:

  1. Create a paused `BarcodePicker`, setting to `true` the `scanningPaused` parameter of the create() method (camera preview on but not scanning).
  2. Use our laser GUI style to give the user a precise indication of where he should scan.
  3. Set the search area to a thin line in the center of the screen.
  4. Add a “Scan” button to resume scanning on user tap. When the scanner is active, the button can be greyed out and display “Scanning”.
  5. When a barcode is scanned, pause or destroy the scanner.

Overlay product information on top of the camera preview

This setup provides the user with popup information relevant to the scanned barcodes. It is especially useful for any product lookup use cases, such as displaying reviews on the scanned product. 

To implement such a view, please follow these steps:

  1. When a barcode is scanned, freeze the camera preview. To do so, retrieve the last frame with the scanResult object and display it while pausing the scanner.
  2. Highlight the scanned barcode on the image by using its coordinates. This will make clear to the user which barcode was scanned.
  3. Display the information you want on the barcode on top of part of the preview (for example in the bottom 25% of it).
  4. If the user clicks anywhere, scanning is resumed.



Was this article helpful?

Related articles

Comments

0 comments

Article is closed for comments.