Skip to content

Commit cf96abf

Browse files
Tom-DynamsoftTom-Dynamsoft
committed
adds one sample for shopping cart simulation
1 parent 221a85c commit cf96abf

File tree

3 files changed

+270
-5
lines changed

3 files changed

+270
-5
lines changed

‎barcode-scanner-api-samples/scan-multiple-barcodes/README.md‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11

2-
# 📦 Scan Multiple Barcodes Sample
2+
# 📦 Scan Multiple Barcodes Samples
3+
4+
## 🚀 Hello World
35

46
This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan **multiple barcodes continuously** from a video stream in a web application.
57

6-
## ✨ Features
8+
### ✨ Features
79

810
- Scan multiple 1D/2D barcodes
911
- Live video decoding using `BarcodeScanner` component
1012
- Easy integration into your web application
1113
- UI rendered into a customizable container
1214

13-
## 🔧 How It Works
15+
### 🔧 How It Works
1416

1517
The sample uses the `BarcodeScanner` class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:
1618

@@ -42,11 +44,30 @@ const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
4244
barcodeScanner.launch();
4345
```
4446

45-
## 📌 Notes
47+
### 📌 Notes
4648

4749
- This sample scans **multiple unique barcodes**, you can configure `scanMode` to change the behavior to scan one single barcode.
4850
- To avoid network-related loading issues, consider hosting all required resources locally.
4951

52+
## 🛒 List Builder
53+
54+
This sample simulates a shopping experience where users scan barcodes to add items to a dynamic cart.
55+
56+
### ✨ Features
57+
58+
- Scan multiple 1D/2D barcodes
59+
- Live video decoding using `BarcodeScanner` component
60+
- Floating and draggable scanner window.
61+
- Dynamic cart updates on each scan.
62+
63+
### 🔧 How It Works
64+
65+
The scanning logic mirrors the Hello World sample.
66+
67+
The UI features a "Scan Barcode" button, a styled cart, and basic interactivity with vanilla JavaScript and CSS.
68+
69+
A list of 20 dummy products is used, with each scan randomly adding a product to the cart showing its name, shortened barcode, and price.
70+
5071
## 📄 See other BarcodeScanner samples
5172

5273
Multiple samples are provided for single barcode scanning. These samples can be easily adapted to scan multiple unique barcodes by simply updating the `config` object.

‎barcode-scanner-api-samples/scan-multiple-barcodes/list-builder.html‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>List-Builder - Scan to Cart Simulation</title>
7+
8+
<!-- Dynamsoft Barcode Reader Bundle -->
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
10+
11+
<style>
12+
body {
13+
font-family: Arial, sans-serif;
14+
margin: 0;
15+
padding: 20px;
16+
background: #f0f0f0;
17+
}
18+
header {
19+
text-align: center;
20+
margin-bottom: 30px;
21+
}
22+
.scan-button {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
padding: 8px 16px;
27+
margin: 0 auto 20px;
28+
font-size: 14px;
29+
background: #4caf50;
30+
color: #fff;
31+
border: none;
32+
border-radius: 4px;
33+
cursor: pointer;
34+
}
35+
.scan-button:hover {
36+
background: #45a049;
37+
}
38+
.barcode-icon {
39+
height: 12px;
40+
margin-left: 8px;
41+
}
42+
.cart {
43+
max-width: 600px;
44+
margin: 0 auto;
45+
background: #fff;
46+
padding: 20px;
47+
border-radius: 5px;
48+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
49+
}
50+
.cart-item {
51+
display: flex;
52+
justify-content: space-between;
53+
padding: 10px 0;
54+
border-bottom: 1px solid #ddd;
55+
}
56+
.cart-item:last-child {
57+
border-bottom: none;
58+
}
59+
#floatingDiv {
60+
position: fixed;
61+
top: 400px;
62+
left: 100px;
63+
width: 400px;
64+
height: 200px;
65+
background: #f9f9f9;
66+
border: 2px solid #ccc;
67+
border-radius: 8px;
68+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
69+
cursor: move;
70+
z-index: 9999;
71+
padding: 3px;
72+
box-sizing: border-box;
73+
}
74+
</style>
75+
</head>
76+
77+
<body>
78+
<header>
79+
<h1>🛒 Scan Barcode to Add Items to Cart</h1>
80+
</header>
81+
82+
<!-- Scan Button -->
83+
<button class="scan-button" id="barcodeBtn">
84+
Scan Barcode
85+
<svg
86+
class="barcode-icon"
87+
viewBox="0 0 24 24"
88+
fill="none"
89+
xmlns="http://www.w3.org/2000/svg"
90+
>
91+
<rect x="2" y="4" width="2" height="16" fill="black" />
92+
<rect x="6" y="4" width="1" height="16" fill="black" />
93+
<rect x="9" y="4" width="2" height="16" fill="black" />
94+
<rect x="13" y="4" width="1" height="16" fill="black" />
95+
<rect x="16" y="4" width="2" height="16" fill="black" />
96+
<rect x="20" y="4" width="1" height="16" fill="black" />
97+
</svg>
98+
</button>
99+
100+
<!-- Floating Scanner Container -->
101+
<div id="floatingDiv" hidden></div>
102+
103+
<!-- Shopping Cart -->
104+
<div class="cart">
105+
<h2>Simulated Shopping Cart</h2>
106+
<div id="cart-items">
107+
<p>No items in cart. Start scanning!</p>
108+
</div>
109+
</div>
110+
111+
<script>
112+
// Function to initialize and launch the barcode scanner
113+
async function startScanner() {
114+
// Create a new instance of Dynamsoft BarcodeScanner with configuration options
115+
const scanner = new Dynamsoft.BarcodeScanner({
116+
// License key for Dynamsoft Barcode Reader (replace with a valid key)
117+
license: "YOUR-LICENSE-KEY",
118+
119+
// Specify the path to the engine resources (loaded from CDN in this case)
120+
engineResourcePaths: {
121+
rootDirectory:
122+
"https://cdn.jsdelivr.net/npm/[email protected]/dist/",
123+
},
124+
125+
// Set scanning mode to detect multiple unique barcodes in one session
126+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
127+
128+
// Time in milliseconds to forget duplicate barcodes (prevents rapid duplicate scans)
129+
duplicateForgetTime: 5000,
130+
131+
// Configure the scanner view (UI settings)
132+
scannerViewConfig: {
133+
container: document.querySelector("#floatingDiv"), // Attach scanner UI to floating div
134+
showCloseButton: true, // Display a close button in the scanner UI
135+
},
136+
137+
// Callback triggered when a unique barcode is detected
138+
onUniqueBarcodeScanned: (result) => {
139+
// Simulate adding the scanned barcode to the shopping cart
140+
simulateAddingToCart(result.text);
141+
},
142+
});
143+
144+
// Show the floating scanner container
145+
document.querySelector("#floatingDiv").hidden = false;
146+
147+
// Launch the scanner (opens camera and starts scanning)
148+
await scanner.launch();
149+
150+
// Hide the scanner container after scanning is complete or closed
151+
document.querySelector("#floatingDiv").hidden = true;
152+
}
153+
154+
// Product List
155+
const products = [
156+
{ name: "Wireless Mouse", price: 19.99 },
157+
{ name: "Bluetooth Speaker", price: 29.99 },
158+
{ name: "USB-C Cable", price: 9.99 },
159+
{ name: "Notebook", price: 4.99 },
160+
{ name: "Water Bottle", price: 14.99 },
161+
{ name: "Laptop Stand", price: 34.99 },
162+
{ name: "Wireless Keyboard", price: 24.99 },
163+
{ name: "Portable Charger", price: 39.99 },
164+
{ name: "LED Desk Lamp", price: 22.5 },
165+
{ name: "Backpack", price: 49.99 },
166+
{ name: "Earbuds", price: 17.99 },
167+
{ name: "Smartphone Holder", price: 12.99 },
168+
{ name: "Desk Organizer", price: 15.49 },
169+
{ name: "Fitness Tracker", price: 59.99 },
170+
{ name: "Coffee Mug", price: 8.99 },
171+
{ name: "HDMI Cable", price: 6.99 },
172+
{ name: "Flash Drive 64GB", price: 14.49 },
173+
{ name: "Gaming Headset", price: 45.0 },
174+
{ name: "Desk Chair Cushion", price: 27.99 },
175+
{ name: "Sticky Notes Pack", price: 3.99 },
176+
];
177+
178+
let cart = [];
179+
180+
// Initialize Scan Button
181+
window.onload = () => {
182+
document
183+
.getElementById("barcodeBtn")
184+
.addEventListener("click", startScanner);
185+
};
186+
187+
// Simulate adding product to cart
188+
function simulateAddingToCart(barcodeText) {
189+
const product = {
190+
...products[Math.floor(Math.random() * products.length)],
191+
};
192+
product.name += ` (${shortenString(barcodeText)})`;
193+
cart.push(product);
194+
updateCartDisplay();
195+
}
196+
197+
// Shorten barcode text
198+
const shortenString = (str, max = 15) =>
199+
str.length <= max ? str : str.slice(0, max) + "...";
200+
201+
// Update Cart UI
202+
function updateCartDisplay() {
203+
const cartDiv = document.getElementById("cart-items");
204+
cartDiv.innerHTML = "";
205+
206+
const header = document.createElement("div");
207+
header.className = "cart-item";
208+
header.innerHTML = `<strong>Item</strong><strong>Price</strong>`;
209+
cartDiv.appendChild(header);
210+
211+
cart.forEach((item) => {
212+
const div = document.createElement("div");
213+
div.className = "cart-item";
214+
div.innerHTML = `<span>${item.name}</span><span>$${item.price.toFixed(
215+
2
216+
)}</span>`;
217+
cartDiv.appendChild(div);
218+
});
219+
}
220+
221+
// Draggable Floating Div
222+
const dragDiv = document.getElementById("floatingDiv");
223+
let offsetX = 0,
224+
offsetY = 0,
225+
isDragging = false;
226+
227+
dragDiv.addEventListener("mousedown", (e) => {
228+
isDragging = true;
229+
offsetX = e.clientX - dragDiv.offsetLeft;
230+
offsetY = e.clientY - dragDiv.offsetTop;
231+
});
232+
233+
document.addEventListener("mousemove", (e) => {
234+
if (isDragging) {
235+
dragDiv.style.left = `${e.clientX - offsetX}px`;
236+
dragDiv.style.top = `${e.clientY - offsetY}px`;
237+
}
238+
});
239+
240+
document.addEventListener("mouseup", () => (isDragging = false));
241+
</script>
242+
</body>
243+
</html>

‎barcode-scanner-api-samples/scan-single-barcode/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,5 @@ barcodeScanner.launch();
4747

4848
Scan multiple barcodes:
4949

50-
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Scan multiple barcodes from video stream with minimum code in JavaScript.
50+
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Scan multiple barcodes from video stream with minimum code in JavaScript.
51+
* [**List Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart.

0 commit comments

Comments
 (0)