Skip to content

Commit 8bd3721

Browse files
Shen-wbShen-wb
committed
add new samples
1 parent 4d2fdec commit 8bd3721

File tree

16 files changed

+1871
-3
lines changed

16 files changed

+1871
-3
lines changed

‎barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body {
9+
width: 100%;
10+
height: 100%;
11+
min-width: 300px;
12+
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
13+
}
14+
15+
.barcode-reader-view {
16+
width: 100%;
17+
height: 100%;
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
}
22+
23+
.summary-view {
24+
width: 100%;
25+
height: 100%;
26+
font-size: 21px;
27+
color: #ffffff;
28+
display: flex;
29+
flex-direction: column;
30+
position: absolute;
31+
display: none;
32+
}
33+
34+
.summary-view header {
35+
width: 100%;
36+
height: 50px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
position: relative;
41+
background-color: #202020;
42+
}
43+
44+
.summary-view header .icon-back {
45+
position: absolute;
46+
top: 50%;
47+
left: 20px;
48+
transform: translateY(-50%);
49+
cursor: pointer;
50+
}
51+
52+
.summary-view .summary-container {
53+
width: 100%;
54+
height: calc(100% - 50px);
55+
flex: 1;
56+
display: flex;
57+
flex-direction: column;
58+
overflow: hidden;
59+
}
60+
61+
.summary-view .total-unique-barcodes-count {
62+
width: 100%;
63+
height: 10%;
64+
max-height: 80px;
65+
min-height: 30px;
66+
border-bottom: 1px solid #CCCCCC;
67+
padding: 0 25px;
68+
font-size: 16px;
69+
color: #323234;
70+
font-weight: 600;
71+
white-space: nowrap;
72+
display: flex;
73+
justify-content: space-between;
74+
align-items: center;
75+
}
76+
77+
.summary-view .session {
78+
width: 100%;
79+
flex: 1;
80+
padding-left: 25px;
81+
display: flex;
82+
flex-direction: column;
83+
overflow: hidden;
84+
}
85+
86+
.summary-view .session .total-count-in-this-session {
87+
width: 100%;
88+
height: 10%;
89+
max-height: 70px;
90+
min-height: 30px;
91+
font-size: 16px;
92+
color: #323234;
93+
font-weight: 600;
94+
border-bottom: 1px solid #CCCCCC;
95+
padding-right: 25px;
96+
display: flex;
97+
justify-content: space-between;
98+
align-items: center;
99+
}
100+
101+
.summary-view .session .code-type-distribution {
102+
width: 100%;
103+
border-bottom: 1px solid #CCCCCC;
104+
display: flex;
105+
flex-direction: column;
106+
flex: 1;
107+
overflow: hidden;
108+
}
109+
110+
.summary-view .session .code-type-distribution .title {
111+
width: 100%;
112+
height: 8%;
113+
max-height: 70px;
114+
min-height: 30px;
115+
font-size: 16px;
116+
font-weight: 600;
117+
color: #323234;
118+
display: flex;
119+
align-items: center;
120+
}
121+
122+
.summary-view .session .code-type-distribution .result-list {
123+
color: #323234;
124+
font-size: 16px;
125+
margin-bottom: 10px;
126+
flex: 1;
127+
overflow-y: auto;
128+
}
129+
130+
.summary-view .session .code-type-distribution .result-list li {
131+
list-style: none;
132+
line-height: 40px;
133+
padding-right: 25px;
134+
}
135+
136+
.summary-view .session .code-type-distribution .result-list li .decode-count {
137+
float: right;
138+
}
139+
140+
.summary-view .duration {
141+
width: 100%;
142+
height: 8%;
143+
max-height: 70px;
144+
min-height: 30px;
145+
font-size: 16px;
146+
font-weight: 600;
147+
color: #323234;
148+
padding: 0 25px;
149+
display: flex;
150+
justify-content: space-between;
151+
align-items: center;
152+
}
153+
154+
.summary-view .duration .time {
155+
float: right;
156+
font-weight: 400;
157+
font-size: 18px;
158+
}

‎barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Batch Inventory with BarcodeScanner</title>
8+
<link rel="stylesheet" href="./index.css">
9+
<!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
10+
<!-- <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.5000/dist/dbr.bundle.js"></script> -->
11+
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
12+
<!-- <script src="../../../dist/dbr.bundle.js"></script> -->
13+
<script src="https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-barcode-reader-bundle@11.0.5000-dev-20250801112823/dist/dbr.bundle.js"></script>
14+
</head>
15+
16+
<body>
17+
<div class="barcode-reader-view"></div>
18+
<div class="summary-view">
19+
<header>
20+
<svg t="1754028476225" class="icon-back" viewBox="0 0 1445 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1408" id="mx_n_1754028476225" width="25" height="25">
21+
<path d="M1350.649885 471.551065H183.240025l340.356908-340.294583A54.160438 54.160438 0 0 0 447.061814 54.721363L14.526209 487.630919a56.092514 56.092514 0 0 0-11.779428 17.637979 54.659038 54.659038 0 0 0 0 41.321485 56.092514 56.092514 0 0 0 11.779428 17.63798l432.535605 432.660255a54.160438 54.160438 0 1 0 76.597444-76.597443L183.240025 579.684967h1167.40986a54.098113 54.098113 0 1 0 0-108.133902" p-id="1409" fill="#ffffff"></path>
22+
</svg>
23+
<span>Summary</span>
24+
</header>
25+
<div class="summary-container">
26+
<div class="total-unique-barcodes-count">
27+
<span>Total Unique Barcodes Count</span>
28+
<span class="count">0</span>
29+
</div>
30+
<div class="session">
31+
<div class="total-count-in-this-session">
32+
<span>Total Count in This Session</span>
33+
<span class="count">0</span>
34+
</div>
35+
<div class="code-type-distribution">
36+
<div class="title">Code Type Distribution</div>
37+
<ul class="result-list"></ul>
38+
</div>
39+
</div>
40+
<div class="duration">
41+
<span>Duration</span>
42+
<span class="time"></span>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<script>
48+
const barcodeScannerView = document.querySelector(".barcode-reader-view");
49+
const summaryView = document.querySelector(".summary-view");
50+
const backBtn = document.querySelector(".icon-back");
51+
let totalUniqueBarcodesCount = 0;
52+
53+
const launchBarcodeScanenr = () => {
54+
summaryView.style.display = "none";
55+
let config = {
56+
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
57+
container: barcodeScannerView, // Specify where to render the scanner UI
58+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE
59+
}
60+
61+
// Create a new instance of the Dynamsoft Barcode Scanner
62+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
63+
64+
const startTime = Date.now();
65+
barcodeScanner.launch().then((result) => {
66+
summaryView.style.display = "flex";
67+
totalUniqueBarcodesCount += result.barcodeResults.length;
68+
document.querySelector(".total-unique-barcodes-count .count").innerText = totalUniqueBarcodesCount;
69+
document.querySelector(".total-count-in-this-session .count").innerText = result.barcodeResults.length;
70+
document.querySelector(".time").innerText = getDurationTime(startTime);
71+
readerResultList(result);
72+
console.log(result);
73+
})
74+
}
75+
76+
launchBarcodeScanenr();
77+
78+
const readerResultList = (result) => {
79+
const resultListNode = document.querySelector(".result-list");
80+
resultListNode.innerText = "";
81+
for (let i = 0; i < result.barcodeResults.length; i++) {
82+
const item = result.barcodeResults[i];
83+
const itemLi = document.createElement("li");
84+
const itemFormatSpan = document.createElement("span");
85+
const itemCountSpan = document.createElement("span");
86+
itemFormatSpan.className = "format";
87+
itemCountSpan.className = "decode-count";
88+
itemFormatSpan.innerText = item.formatString;
89+
itemCountSpan.innerText = item.count;
90+
itemLi.append(itemFormatSpan, itemCountSpan);
91+
resultListNode.append(itemLi);
92+
}
93+
}
94+
95+
const getDurationTime = (time) => {
96+
const now = new Date();
97+
const startDate = new Date(time);
98+
const endDate = now;
99+
100+
const durationMs = endDate - startDate;
101+
102+
const totalSeconds = Math.floor(durationMs / 1000);
103+
const hours = Math.floor(totalSeconds / 3600);
104+
const minutes = Math.floor((totalSeconds % 3600) / 60);
105+
const seconds = totalSeconds % 60;
106+
107+
const formatUnit = (unit) => unit.toString().padStart(2, '0');
108+
const formattedHours = formatUnit(hours);
109+
const formattedMinutes = formatUnit(minutes);
110+
const formattedSeconds = formatUnit(seconds);
111+
112+
const formatTime = (date) => {
113+
return [
114+
date.getHours(),
115+
date.getMinutes(),
116+
date.getSeconds()
117+
].map(unit => formatUnit(unit)).join(':');
118+
};
119+
120+
const startTime = formatTime(startDate);
121+
const endTime = formatTime(endDate);
122+
123+
return `${formattedHours}:${formattedMinutes}:${formattedSeconds} (${startTime} ~ ${endTime})`;
124+
}
125+
126+
backBtn.addEventListener("click", launchBarcodeScanenr);
127+
</script>
128+
</body>
129+
130+
</html>

0 commit comments

Comments
 (0)