feat: add locate an item via barcode sample (#192)

Felix-Dynamsoft · felixindrawan · web-flow · commit 4f24fcb23469 · 2024-07-01T17:03:57.000+08:00
Co-authored-by: felixindrawan &lt;indrawan.felix123@gmail.com&gt;
diff --git 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
 * <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Demo</a>
 * <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/fill-a-form-with-barcode-reading.html">Read Barcodes and Fill Form Fields - Source Code</a>
 
-# 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.
 
 * <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Demo</a>
 * <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/show-result-texts-on-the-video.html">Read barcodes via camera and show result texts on the video - Source Code</a>
 
+## 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!
+
+* <a target = "_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html">Locate an item via Barcode - Demo (TO BE UPDATED)</a>
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/use-case/read-a-drivers-license/index.html">RLocate an item via Barcode - Source Code (TO BE UPDATED)</a>
+
+
 ## 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
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <title>checkmark-circle</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-102.000000, -1141.000000)" fill="#00ff00"> <path d="M124.393,1151.43 C124.393,1151.43 117.335,1163.73 117.213,1163.84 C116.81,1164.22 116.177,1164.2 115.8,1163.8 L111.228,1159.58 C110.85,1159.18 110.871,1158.54 111.274,1158.17 C111.677,1157.79 112.31,1157.81 112.688,1158.21 L116.266,1161.51 L122.661,1150.43 C122.937,1149.96 123.548,1149.79 124.027,1150.07 C124.505,1150.34 124.669,1150.96 124.393,1151.43 L124.393,1151.43 Z M118,1141 C109.164,1141 102,1148.16 102,1157 C102,1165.84 109.164,1173 118,1173 C126.836,1173 134,1165.84 134,1157 C134,1148.16 126.836,1141 118,1141 L118,1141 Z" id="checkmark-circle" sketch:type="MSShapeGroup"> </path> </g> </g> </g>
+</svg>
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
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="SVGRepo_iconCarrier"> <title>cross-circle</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-570.000000, -1089.000000)" fill="#ff0000"> <path d="M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z" id="cross-circle" sketch:type="MSShapeGroup"> </path> </g> </g> </g>
+</svg>
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
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
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 28 28.1" style="enable-background:new 0 0 28 28.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#fe8e14;}
+</style>
+<g>
+	<rect x="2.1" y="2" class="st0" width="3.9" height="3.5"/>
+	<rect x="21.7" y="2" class="st0" width="3.9" height="3.5"/>
+	<path class="st1" d="M0.1,1v5.5c0,0.6,0.4,1,1,1H7c0.6,0,1-0.4,1-1V1c0-0.6-0.4-1-1-1H1.1C0.5,0,0.1,0.4,0.1,1z M6,5.5H2.1V2H6V5.5
+		z"/>
+	<path class="st1" d="M19.7,1v5.5c0,0.6,0.4,1,1,1h5.9c0.6,0,1-0.4,1-1V1c0-0.6-0.4-1-1-1h-5.9C20.2,0,19.7,0.4,19.7,1z M25.6,5.5
+		h-3.9V2h3.9V5.5z"/>
+	<path class="st1" d="M9.9,1v4.6c0,0.6,0.4,1,1,1s1-0.4,1-1V2h4.9c0.6,0,1-0.4,1-1s-0.4-1-1-1h-5.9C10.3,0,9.9,0.4,9.9,1z"/>
+	<path class="st1" d="M15.1,12.2c0.6,0,1-0.4,1-1V4.7c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v6.5C14.1,11.7,14.6,12.2,15.1,12.2z"/>
+	<path class="st1" d="M8.2,11.2c0-0.6-0.4-1-1-1H1.1c-0.6,0-1,0.4-1,1s0.4,1,1,1h6.2C7.8,12.2,8.2,11.7,8.2,11.2z"/>
+	<path class="st1" d="M26.6,10.2h-6.2c-0.6,0-1,0.4-1,1s0.4,1,1,1h6.2c0.6,0,1-0.4,1-1S27.2,10.2,26.6,10.2z"/>
+	<path class="st1" d="M6.4,15.5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6.5c0,0.6,0.4,1,1,1s1-0.4,1-1V15.5z"/>
+	<path class="st1" d="M1.1,27.6c0.6,0,1-0.4,1-1V15.5c0-0.6-0.4-1-1-1s-1,0.4-1,1v11.1C0.1,27.1,0.5,27.6,1.1,27.6z"/>
+	<path class="st1" d="M10.3,15.5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6.5c0,0.6,0.4,1,1,1s1-0.4,1-1V15.5z"/>
+	<path class="st1" d="M13.3,14.5c-0.6,0-1,0.4-1,1v11.1c0,0.6,0.4,1,1,1s1-0.4,1-1V15.5C14.3,14.9,13.8,14.5,13.3,14.5z"/>
+	<path class="st1" d="M16.3,15.5v6.5c0,0.6,0.4,1,1,1s1-0.4,1-1v-6.5c0-0.6-0.4-1-1-1S16.3,14.9,16.3,15.5z"/>
+	<path class="st1" d="M22.2,15.5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6.5c0,0.6,0.4,1,1,1s1-0.4,1-1V15.5z"/>
+	<path class="st1" d="M5.4,24.6c-0.6,0-1,0.4-1,1v0.9c0,0.6,0.4,1,1,1s1-0.4,1-1v-0.9C6.4,25.1,5.9,24.6,5.4,24.6z"/>
+	<path class="st1" d="M9.3,24.6c-0.6,0-1,0.4-1,1v0.9c0,0.6,0.4,1,1,1s1-0.4,1-1v-0.9C10.3,25.1,9.9,24.6,9.3,24.6z"/>
+	<path class="st1" d="M16.3,26.6c0,0.6,0.4,1,1,1s1-0.4,1-1v-0.9c0-0.6-0.4-1-1-1s-1,0.4-1,1V26.6z"/>
+	<path class="st1" d="M21.2,24.6c-0.6,0-1,0.4-1,1v0.9c0,0.6,0.4,1,1,1s1-0.4,1-1v-0.9C22.2,25.1,21.8,24.6,21.2,24.6z"/>
+	<path class="st1" d="M25.6,15.5v11.1c0,0.6,0.4,1,1,1s1-0.4,1-1V15.5c0-0.6-0.4-1-1-1S25.6,14.9,25.6,15.5z"/>
+</g>
+</svg>
diff --git a/use-case/locate-an-item-with-barcode/index.html b/use-case/locate-an-item-with-barcode/index.html
