Skip to content

Commit 5bb9c3e

Browse files
Felix-Dynamsoftfelixindrawan
Felix-Dynamsoft
and
felixindrawan
authored
refactor: format and standardize hello-word js (#174)
* refactor: format and rename classes for js sample * update resultContainer and input class name * fix: change resultContainer to resultsContainer * refactor: renamed results class * fix: merged #178 changes * fix formatter printWidth to 120 --------- Co-authored-by: felixindrawan <indrawan.felix123@gmail.com>
1 parent a628184 commit 5bb9c3e

File tree

4 files changed

+208
-210
lines changed

4 files changed

+208
-210
lines changed

‎hello-world/es6.html‎

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,98 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6+
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
7+
<meta name="keywords" content="barcode, camera, es6" />
8+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
9+
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
10+
</head>
311

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7-
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
8-
<meta name="keywords" content="barcode, camera, es6" />
9-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
10-
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
11-
</head>
12+
<body>
13+
<h1>Hello World for ES6 (Decode via Camera)</h1>
14+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
15+
Results:<br />
16+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
17+
<script type="module">
18+
import {
19+
CoreModule,
20+
LicenseManager,
21+
CaptureVisionRouter,
22+
CameraView,
23+
CameraEnhancer,
24+
MultiFrameResultCrossFilter,
25+
} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
1226

13-
<body>
14-
<h1>Hello World for ES6 (Decode via Camera)</h1>
15-
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
16-
Results:<br>
17-
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
18-
<script type="module">
19-
import { CoreModule, LicenseManager, CaptureVisionRouter, CameraView, CameraEnhancer, MultiFrameResultCrossFilter }
20-
from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.mjs";
27+
/** LICENSE ALERT - README
28+
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
29+
*/
2130

22-
/** LICENSE ALERT - README
23-
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
24-
*/
31+
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
2532

26-
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
33+
/**
34+
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
35+
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
36+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
37+
* LICENSE ALERT - THE END
38+
*/
2739

28-
/**
29-
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
30-
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
31-
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
32-
* LICENSE ALERT - THE END
33-
*/
40+
CoreModule.engineResourcePaths = {
41+
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
42+
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
43+
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
44+
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
45+
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
46+
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
47+
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
48+
};
3449

35-
CoreModule.engineResourcePaths = {
36-
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
37-
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
38-
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
39-
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
40-
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
41-
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
42-
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
43-
};
50+
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
51+
CoreModule.loadWasm(["DBR"]);
4452

45-
// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
46-
CoreModule.loadWasm(["DBR"]);
53+
(async function () {
54+
try {
55+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
56+
const cameraView = await CameraView.createInstance();
57+
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
58+
// Get default UI and append it to DOM.
59+
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
4760

48-
(async function () {
49-
try {
50-
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
51-
const cameraView = await CameraView.createInstance();
52-
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
53-
// Get default UI and append it to DOM.
54-
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
61+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
62+
const cvRouter = await CaptureVisionRouter.createInstance();
63+
cvRouter.setInput(cameraEnhancer);
5564

56-
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
57-
const cvRouter = await CaptureVisionRouter.createInstance();
58-
cvRouter.setInput(cameraEnhancer);
65+
// Define a callback for results.
66+
cvRouter.addResultReceiver({
67+
onDecodedBarcodesReceived: (result) => {
68+
if (!result.barcodeResultItems.length) return;
5969

60-
// Define a callback for results.
61-
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
62-
if (!result.barcodeResultItems.length) return;
70+
const resultsContainer = document.querySelector("#results");
71+
resultsContainer.textContent = "";
72+
console.log(result);
73+
for (let item of result.barcodeResultItems) {
74+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
75+
}
76+
},
77+
});
6378

64-
const resultsContainer = document.querySelector("#div-results-container");
65-
resultsContainer.textContent = '';
66-
console.log(result);
67-
for (let item of result.barcodeResultItems) {
68-
resultsContainer.append(
69-
`${item.formatString}: ${item.text}`,
70-
document.createElement('br'),
71-
document.createElement('hr'),
72-
);
73-
}
74-
}});
79+
// Filter out unchecked and duplicate results.
80+
const filter = new MultiFrameResultCrossFilter();
81+
// Filter out unchecked barcodes.
82+
filter.enableResultCrossVerification("barcode", true);
83+
// Filter out duplicate barcodes within 3 seconds.
84+
filter.enableResultDeduplication("barcode", true);
85+
await cvRouter.addResultFilter(filter);
7586

76-
// Filter out unchecked and duplicate results.
77-
const filter = new MultiFrameResultCrossFilter();
78-
// Filter out unchecked barcodes.
79-
filter.enableResultCrossVerification("barcode", true);
80-
// Filter out duplicate barcodes within 3 seconds.
81-
filter.enableResultDeduplication("barcode", true);
82-
await cvRouter.addResultFilter(filter);
83-
84-
// Open camera and start scanning single barcode.
85-
await cameraEnhancer.open();
86-
await cvRouter.startCapturing("ReadSingleBarcode");
87-
} catch (ex) {
88-
let errMsg = ex.message || ex;
89-
console.error(errMsg);
90-
alert(errMsg);
91-
}
92-
})();
93-
</script>
94-
</body>
95-
96-
</html>
87+
// Open camera and start scanning single barcode.
88+
await cameraEnhancer.open();
89+
await cvRouter.startCapturing("ReadSingleBarcode");
90+
} catch (ex) {
91+
let errMsg = ex.message || ex;
92+
console.error(errMsg);
93+
alert(errMsg);
94+
}
95+
})();
96+
</script>
97+
</body>
98+
</html>

‎hello-world/hello-world.html‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6-
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."/>
6+
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
77
<meta name="keywords" content="barcode, camera" />
8-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html"/>
8+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
99
<title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
1010
</head>
1111

1212
<body>
1313
<h1>Hello World (Decode via Camera)</h1>
14-
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
15-
Results:<br>
16-
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
14+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
15+
Results:<br />
16+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
1717
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
1818
<script>
1919
/** LICENSE ALERT - README
@@ -40,27 +40,25 @@ <h1>Hello World (Decode via Camera)</h1>
4040
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
4141
cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
4242
// Get default UI and append it to DOM.
43-
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
43+
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
4444

4545
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
4646
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
4747
cvRouter.setInput(cameraEnhancer);
4848

4949
// Define a callback for results.
50-
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
51-
if (!result.barcodeResultItems.length) return;
50+
cvRouter.addResultReceiver({
51+
onDecodedBarcodesReceived: (result) => {
52+
if (!result.barcodeResultItems.length) return;
5253

53-
const resultsContainer = document.querySelector("#div-results-container");
54-
resultsContainer.textContent = '';
55-
console.log(result);
56-
for (let item of result.barcodeResultItems) {
57-
resultsContainer.append(
58-
`${item.formatString}: ${item.text}`,
59-
document.createElement('br'),
60-
document.createElement('hr'),
61-
);
62-
}
63-
}});
54+
const resultsContainer = document.querySelector("#results");
55+
resultsContainer.textContent = "";
56+
console.log(result);
57+
for (let item of result.barcodeResultItems) {
58+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
59+
}
60+
},
61+
});
6462

6563
// Filter out unchecked and duplicate results.
6664
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();

‎hello-world/read-an-image.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
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 from an image in no time with Dynamsoft Barcode Reader."/>
6+
<meta name="description" content="Read barcodes from an image in no time with Dynamsoft Barcode Reader." />
77
<meta name="keywords" content="barcode, image" />
8-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-an-image.html"/>
8+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-an-image.html" />
99
<title>Dynamsoft Barcode Reader Sample - Hello World (Read an Image)</title>
1010
</head>
1111

1212
<body>
1313
<h1>Hello World (Read an Image)</h1>
14-
<input id="ipt-file" type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"/><br>
15-
Results:<br>
16-
<div id="div-result-container"></div>
14+
<input id="input-file" type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" /><br />
15+
Results:<br />
16+
<div id="results"></div>
1717
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.2.1000/dist/dbr.bundle.js"></script>
1818
<script>
1919
/** LICENSE ALERT - README
@@ -32,31 +32,33 @@ <h1>Hello World (Read an Image)</h1>
3232
// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
3333
Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
3434

35-
const divResultContainer = document.querySelector("#div-result-container");
35+
const resultsContainer = document.querySelector("#results");
3636

3737
let cvRouter; // an instance of CaptureVisionRouter
3838
let pCvRouter; // promise of CaptureVisionRouter
3939

40-
document.querySelector("#ipt-file").addEventListener('change', async function(){
40+
document.querySelector("#input-file").addEventListener("change", async function () {
4141
let files = [...this.files];
42-
this.value = '';
43-
divResultContainer.innerText = '';
42+
this.value = "";
43+
resultsContainer.innerText = "";
4444
try {
45-
cvRouter = cvRouter || await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
45+
cvRouter = cvRouter || (await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance()));
4646

47-
for(let file of files){
47+
for (let file of files) {
4848
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
4949
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
5050

51-
if(files.length > 1){
52-
divResultContainer.innerText += `\n${file.name}:\n`;
51+
if (files.length > 1) {
52+
resultsContainer.innerText += `\n${file.name}:\n`;
5353
}
5454
for (let item of result.items) {
55-
if(item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
56-
divResultContainer.innerText += item.text + "\n";
55+
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
56+
continue;
57+
}
58+
resultsContainer.innerText += item.text + "\n";
5759
console.log(item.text);
5860
}
59-
if (!result.items.length) divResultContainer.innerText += 'No barcode found\n';
61+
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
6062
}
6163
} catch (ex) {
6264
let errMsg = ex.message || ex;

0 commit comments

Comments
 (0)