Skip to content

refactor: format and standardize hello-word js #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 20, 2024
Merged

refactor: format and standardize hello-word js #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fdbc69
refactor: format and rename classes for js sample
felixindrawan Jun 14, 2024
de9cbaf
update resultContainer and input class name
felixindrawan Jun 14, 2024
b934ab3
fix: change resultContainer to resultsContainer
felixindrawan Jun 14, 2024
86dd76a
refactor: renamed results class
felixindrawan Jun 14, 2024
5328e2e
fix: merged #178 changes
felixindrawan Jun 18, 2024
df2918c
fix formatter printWidth to 120
felixindrawan Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 84 additions & 82 deletions hello-world/es6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
<meta name="keywords" content="barcode, camera, es6" />
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/es6.html" />
<title>Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)</title>
</head>

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

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

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

LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
/**
* 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.
* 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.
* 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.
* LICENSE ALERT - THE END
*/

/**
* 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.
* 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.
* 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.
* LICENSE ALERT - THE END
*/
CoreModule.engineResourcePaths = {
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
};

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

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

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

// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
const cvRouter = await CaptureVisionRouter.createInstance();
cvRouter.setInput(cameraEnhancer);
// Define a callback for results.
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

// Define a callback for results.
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;
const resultsContainer = document.querySelector("#results");
resultsContainer.textContent = "";
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
},
});

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
}
}});
// Filter out unchecked and duplicate results.
const filter = new MultiFrameResultCrossFilter();
// Filter out unchecked barcodes.
filter.enableResultCrossVerification("barcode", true);
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);

// Filter out unchecked and duplicate results.
const filter = new MultiFrameResultCrossFilter();
// Filter out unchecked barcodes.
filter.enableResultCrossVerification("barcode", true);
// Filter out duplicate barcodes within 3 seconds.
filter.enableResultDeduplication("barcode", true);
await cvRouter.addResultFilter(filter);

// Open camera and start scanning single barcode.
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>

</html>
// Open camera and start scanning single barcode.
await cameraEnhancer.open();
await cvRouter.startCapturing("ReadSingleBarcode");
} catch (ex) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
})();
</script>
</body>
</html>
36 changes: 17 additions & 19 deletions hello-world/hello-world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream."/>
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
<meta name="keywords" content="barcode, camera" />
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html"/>
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
<title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
</head>

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

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

// Define a callback for results.
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;
cvRouter.addResultReceiver({
onDecodedBarcodesReceived: (result) => {
if (!result.barcodeResultItems.length) return;

const resultsContainer = document.querySelector("#div-results-container");
resultsContainer.textContent = '';
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.append(
`${item.formatString}: ${item.text}`,
document.createElement('br'),
document.createElement('hr'),
);
}
}});
const resultsContainer = document.querySelector("#results");
resultsContainer.textContent = "";
console.log(result);
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
},
});

// Filter out unchecked and duplicate results.
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
Expand Down
34 changes: 18 additions & 16 deletions hello-world/read-an-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Read barcodes from an image in no time with Dynamsoft Barcode Reader."/>
<meta name="description" content="Read barcodes from an image in no time with Dynamsoft Barcode Reader." />
<meta name="keywords" content="barcode, image" />
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-an-image.html"/>
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/read-an-image.html" />
<title>Dynamsoft Barcode Reader Sample - Hello World (Read an Image)</title>
</head>

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

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

let cvRouter; // an instance of CaptureVisionRouter
let pCvRouter; // promise of CaptureVisionRouter

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

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

if(files.length > 1){
divResultContainer.innerText += `\n${file.name}:\n`;
if (files.length > 1) {
resultsContainer.innerText += `\n${file.name}:\n`;
}
for (let item of result.items) {
if(item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
divResultContainer.innerText += item.text + "\n";
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
continue;
}
resultsContainer.innerText += item.text + "\n";
console.log(item.text);
}
if (!result.items.length) divResultContainer.innerText += 'No barcode found\n';
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
}
} catch (ex) {
let errMsg = ex.message || ex;
Expand Down
Loading