From 013330f2c3945cb7b9adfc0a7dac022a49066250 Mon Sep 17 00:00:00 2001 From: felixindrawan Date: Thu, 27 Jun 2024 09:31:53 -0700 Subject: [PATCH] feat: add locate an item via barcode sample --- use-case/README.md | 20 +- .../icons/checkmark-icon.svg | 7 + .../icons/cross-icon.svg | 7 + .../icons/dynamsoft-logo.png | Bin 0 -> 5449 bytes .../icons/scan-barcode-icon.svg | 32 + .../locate-an-item-with-barcode/index.html | 696 ++++++++++++++++++ 6 files changed, 758 insertions(+), 4 deletions(-) create mode 100644 use-case/locate-an-item-with-barcode/icons/checkmark-icon.svg create mode 100644 use-case/locate-an-item-with-barcode/icons/cross-icon.svg create mode 100644 use-case/locate-an-item-with-barcode/icons/dynamsoft-logo.png create mode 100644 use-case/locate-an-item-with-barcode/icons/scan-barcode-icon.svg create mode 100644 use-case/locate-an-item-with-barcode/index.html diff --git a/use-case/README.md b/use-case/README.md index ce62b905..32138e98 100644 --- a/use-case/README.md +++ b/use-case/README.md @@ -1,4 +1,4 @@ -# Read Barcodes and Fill Form Fields +## Read Barcodes and Fill Form Fields It's difficult to type long text on mobile devices, but if that text is encoded in a barcode, we can use the sdk to read the barcode and automatically enter the text. @@ -7,7 +7,7 @@ The following sample demonstrates how to utilize the SDK to fill out form fields * Read Barcodes and Fill Form Fields - Demo * Read Barcodes and Fill Form Fields - Source Code -# Read the PDF417 Barcode on the Driver's License +## Read the PDF417 Barcode on the Driver's License The PDF417 barcode on an AAMVA compatible driver's license contains a lot of information which is encoded following the DL/ID Card Design Standard. Together with a simple parse function, we can use the SDK to read and extract the information. @@ -18,15 +18,27 @@ The following official sample shows how to use the sdk to read and extract drive Also see [Driver's License Scanner SDK for Mobile and Web](https://www.dynamsoft.com/use-cases/driver-license/). -# Read barcodes via camera and show result texts on the video +## Read barcodes via camera and show result texts on the video -When the SDK picks up a barcode in video stream, it will highlight them with built-in style automatically. But it is also possible to show the text of the barcode on the video with the help of the function 'convertToPageCoordinates()' or 'convertToClientCoordinates()'. +When the SDK picks up a barcode in video stream, it will highlight them with built-in style automatically. But it is also possible to show the text of the barcode on the video with the help of the function `convertToPageCoordinates()` or `convertToClientCoordinates()`. The following official sample shows how to show result texts on the video. * Read barcodes via camera and show result texts on the video - Demo * Read barcodes via camera and show result texts on the video - Source Code +## Locate an Item via Barcode + +Searcing for a specific item among numerous identical boxes can be challenging. However, with the Dynamsoft Barcode Reader (DBR) SDK, we'll be able to locate the item quickly by scanning through the barcodes. + +The following sample demonstrates how to utilize the SDK to find an item using a barcode among many barcodes. + +Additionally, this sample demonstrates how to utilize the SDK to fill out form fields, creating a custom UI with [Dynamsoft Camera Enhancer (DCE)](https://www.dynamsoft.com/camera-enhancer/docs/core/introduction/index.html), and using DCE to draw shapes/images on the CameraView to create indicators for each barcode that has been detected! + +* Locate an item via Barcode - Demo (TO BE UPDATED) +* RLocate an item via Barcode - Source Code (TO BE UPDATED) + + ## Support If you have any questions, feel free to [contact Dynamsoft](https://www.dynamsoft.com/company/contact/). diff --git a/use-case/locate-an-item-with-barcode/icons/checkmark-icon.svg b/use-case/locate-an-item-with-barcode/icons/checkmark-icon.svg new file mode 100644 index 00000000..5dc93e11 --- /dev/null +++ b/use-case/locate-an-item-with-barcode/icons/checkmark-icon.svg @@ -0,0 +1,7 @@ + + + + + + checkmark-circle Created with Sketch Beta. + \ No newline at end of file diff --git a/use-case/locate-an-item-with-barcode/icons/cross-icon.svg b/use-case/locate-an-item-with-barcode/icons/cross-icon.svg new file mode 100644 index 00000000..b0f8078f --- /dev/null +++ b/use-case/locate-an-item-with-barcode/icons/cross-icon.svg @@ -0,0 +1,7 @@ + + + + + + cross-circle Created with Sketch Beta. + \ No newline at end of file diff --git a/use-case/locate-an-item-with-barcode/icons/dynamsoft-logo.png b/use-case/locate-an-item-with-barcode/icons/dynamsoft-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7967e8edbde77fcdf84333b58ac1046f821c9e0b GIT binary patch literal 5449 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 LnIX#&&Jq6u=Qz1) literal 0 HcmV?d00001 diff --git a/use-case/locate-an-item-with-barcode/icons/scan-barcode-icon.svg b/use-case/locate-an-item-with-barcode/icons/scan-barcode-icon.svg new file mode 100644 index 00000000..6b744cdf --- /dev/null +++ b/use-case/locate-an-item-with-barcode/icons/scan-barcode-icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/use-case/locate-an-item-with-barcode/index.html b/use-case/locate-an-item-with-barcode/index.html new file mode 100644 index 00000000..a1f66000 --- /dev/null +++ b/use-case/locate-an-item-with-barcode/index.html @@ -0,0 +1,696 @@ + + + + + + + + Dynamsoft Barcode Reader Sample - Locate an Item with Barcode + + + + +
+
+

Locate an Item via Barcode

+
+
+

1. Enter or Scan the Item ID that you're seaching for:

+
+ + + + +
+ +

2. Start searching for the item

+ + +
+
+ + Dynamsoft + + + + + + + +
+ + + + + + +