Skip to content

Commit 175a4a8

Browse files
Felix-Dynamsoftfelixindrawan
Felix-Dynamsoft
and
felixindrawan
authored
feat: updated fill form with barcode reading sample (#190)
* feat: updated fill form with barcode reading sample * fix: canonical link to update to the latest dir --------- Co-authored-by: felixindrawan <[email protected]>
1 parent ee3c169 commit 175a4a8

File tree

1 file changed

+84
-42
lines changed

1 file changed

+84
-42
lines changed

‎use-case/fill-a-form-with-barcode-reading.html‎

Lines changed: 84 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,67 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6-
<meta name="description" content="Read barcodes and fill form fields using barcode with Barcode Reader. Get quick and accurate results in no time."/>
6+
<meta
7+
name="description"
8+
content="Read barcodes and fill form fields using barcode with Dynamsoft Barcode Reader. Get quick and accurate results in no time."
9+
/>
710
<meta name="keywords" content="fill form fields using barcodes" />
8-
<link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/use-case/fill-a-form-with-barcode-reading.html"/>
9-
<title>Dynamsoft Barcode Reader Simple Sample - Read Video - Fill Form</title>
11+
<link
12+
rel="canonical"
13+
href="https://demo.dynamsoft.com/samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html"
14+
/>
15+
<title>Dynamsoft Barcode Reader Sample - Fill Forms with Dynamsoft Barcode Reader</title>
1016
<style>
11-
body { width: 100vw; height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #455a64; margin: 0; }
12-
#div-ui-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; font-size: medium; }
13-
.latest-result { width: 85%; display: block; margin: 2vh auto; padding: 0.4rem 0.8rem; color: inherit; border: 1px solid #fe8e14; font-size: 1.5rem; border-radius: 0.2rem; text-align: center; }
14-
.latest-result::placeholder { color: #b0bec5; }
15-
.latest-result:focus { outline: none; box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14; }
17+
body {
18+
width: 100vw;
19+
height: 80vh;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
overflow: hidden;
25+
color: #455a64;
26+
margin: 0;
27+
}
28+
#camera-view-container {
29+
width: 100%;
30+
height: 100%;
31+
position: absolute;
32+
left: 0;
33+
top: 0;
34+
text-align: center;
35+
font-size: medium;
36+
}
37+
.latest-result {
38+
width: 85%;
39+
display: block;
40+
margin: 2vh auto;
41+
padding: 0.4rem 0.8rem;
42+
color: inherit;
43+
border: 1px solid #fe8e14;
44+
font-size: 1.5rem;
45+
border-radius: 0.2rem;
46+
text-align: center;
47+
}
48+
.latest-result::placeholder {
49+
color: #b0bec5;
50+
}
51+
.latest-result:focus {
52+
outline: none;
53+
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
54+
}
1655
</style>
1756
</head>
1857
<body>
19-
<h1 style="font-size: 1.5em">Read Barcodes as Input</h1>
20-
<div id="inputs" style="text-align: center">
58+
<h1 style="font-size: 1.5em">Fill Forms with Dynamsoft Barcode Reader</h1>
59+
<div id="inputs-container" style="text-align: center">
2160
<h3>Click each input box to fill in!</h3>
22-
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 1"/>
23-
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 2"/>
24-
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 3"/>
61+
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 1" />
62+
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 2" />
63+
<input type="text" class="latest-result" readonly="true" placeholder="Barcode Result 3" />
2564
</div>
26-
<span id="lib-load" style="font-size: x-large; display: none;">Loading Library...</span>
27-
<div id="div-ui-container" style="width: 100%; height: 100%; background: #eee; display: none;"></div>
65+
<span id="lib-load" style="font-size: x-large; display: none">Loading Library...</span>
66+
<div id="camera-view-container" style="width: 100%; height: 100%; background: #eee; display: none"></div>
2867
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
2968
<script>
3069
/** LICENSE ALERT - README
@@ -43,18 +82,18 @@ <h3>Click each input box to fill in!</h3>
4382
// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
4483
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
4584

46-
const divIpts = document.getElementById("inputs");
47-
const uiLibLoad = document.getElementById("lib-load");
48-
const divUIContainer = document.getElementById("div-ui-container");
85+
const inputsContainer = document.getElementById("inputs-container");
86+
const loadingIndicator = document.getElementById("lib-load");
87+
const cameraViewContainer = document.getElementById("camera-view-container");
4988

5089
const init = async () => {
51-
divIpts.style.display = 'none';
52-
uiLibLoad.style.display = '';
90+
inputsContainer.style.display = "none";
91+
loadingIndicator.style.display = "";
5392

5493
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
5594
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
5695
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
57-
document.querySelector("#div-ui-container").append(cameraView.getUIElement()); // Get default UI and append it to DOM.
96+
document.querySelector("#camera-view-container").append(cameraView.getUIElement()); // Get default UI and append it to DOM.
5897

5998
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
6099
const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
@@ -69,15 +108,16 @@ <h3>Click each input box to fill in!</h3>
69108
await cvRouter.addResultFilter(filter);
70109

71110
// Define a callback for results.
72-
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: async (result) => {
73-
const resultItems = result.barcodeResultItems;
74-
if (!resultItems.length) return;
75-
76-
Dynamsoft.DCE.Feedback.beep(); // Trigger a beep.
77-
}});
111+
cvRouter.addResultReceiver({
112+
onDecodedBarcodesReceived: async (result) => {
113+
const resultItems = result.barcodeResultItems;
114+
if (!resultItems.length) return;
115+
Dynamsoft.DCE.Feedback.beep(); // Trigger a beep.
116+
},
117+
});
78118

79-
divIpts.style.display = '';
80-
uiLibLoad.style.display = 'none';
119+
inputsContainer.style.display = "";
120+
loadingIndicator.style.display = "none";
81121

82122
return { cameraEnhancer, cvRouter };
83123
};
@@ -87,24 +127,26 @@ <h3>Click each input box to fill in!</h3>
87127
const allInputs = document.getElementsByClassName("latest-result");
88128
for (let input of allInputs) {
89129
input.addEventListener("click", async function () {
90-
try{
130+
try {
91131
const { cameraEnhancer, cvRouter } = await (pInit = pInit || init());
92132

93133
// Define a callback for results.
94-
const resultReceiver = { onDecodedBarcodesReceived: async (result) => {
95-
const resultItems = result.barcodeResultItems;
96-
if (!resultItems.length) return;
97-
98-
this.value = resultItems[0].text;
99-
cvRouter.stopCapturing();
100-
cameraEnhancer.close();
101-
divUIContainer.style.display = 'none';
102-
103-
cvRouter.removeResultReceiver(resultReceiver);
104-
}};
134+
const resultReceiver = {
135+
onDecodedBarcodesReceived: async (result) => {
136+
const resultItems = result.barcodeResultItems;
137+
if (!resultItems.length) return;
138+
139+
this.value = resultItems[0].text;
140+
cvRouter.stopCapturing();
141+
cameraEnhancer.close();
142+
cameraViewContainer.style.display = "none";
143+
144+
cvRouter.removeResultReceiver(resultReceiver);
145+
},
146+
};
105147
cvRouter.addResultReceiver(resultReceiver);
106148

107-
divUIContainer.style.display = '';
149+
cameraViewContainer.style.display = "";
108150

109151
// Open camera and start scanning single barcode.
110152
await cameraEnhancer.open();

0 commit comments

Comments
 (0)