Skip to content

Commit 0970dc8

Browse files
author
coheedandcambria
committed
Created new performance sample
1 parent 558ebd5 commit 0970dc8

File tree

1 file changed

+107
-0
lines changed

1 file changed

+107
-0
lines changed

‎3.settings/using-different-modes.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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>Dynamsoft Barcode Reader Sample - Using Runtime Settings</title>
8+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.2.5/dist/dbr.js"></script>
9+
<link rel="stylesheet" href="settings-css.css">
10+
<link rel="stylesheet" href="../balloon.min.css"> <!-- Used for tooltip styling -->
11+
</head>
12+
13+
<body>
14+
<h2>Using Different RuntimeSettings Templates</h2>
15+
<button id='openSimpleSettingsMenu'>Open Runtime Settings Menu</button>
16+
17+
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result"
18+
placeholder="The Last Read Barcode">
19+
<!-- Manually defining the div that will contain the video so that the UI doesn't take up the full screen-->
20+
<div id="div-video-container">
21+
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
22+
<video class="dbrScanner-video" playsinline="true"></video>
23+
<canvas class="dbrScanner-cvs-drawarea"
24+
style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-fit: contain;"
25+
width="1280" height="720"></canvas>
26+
</div>
27+
28+
<!-- Settings Menu displayed in a modal -->
29+
<div id="settingsModal" class="modal">
30+
<div id="settingsContent" class="modal-content">
31+
<span id="closeModalBtn" class="closeModal">&times;</span>
32+
<div class="tooltip"
33+
aria-label="The library comes with four pre-built templates that you can choose for the RuntimeSettings without needing to change the runtime settings individually, which could be tasking. Cycle through each mode to find out the differences between them."
34+
data-balloon-pos="down" data-balloon-length="fit">Choose Which Mode to Use
35+
</div>
36+
<form id="chooseSettingsMode">
37+
<input type="radio" id="single" name="settingsMode" value="single">
38+
<label for="single"> single </label><br />
39+
<input type="radio" id="speed" name="barcodeFormat" value="speed">
40+
<label for="QR"> speed </label><br />
41+
<input type="radio" id="coverage" name="barcodeFormat" value="coverage">
42+
<label for="coverage"> coverage </label><br />
43+
<input type="radio" id="balance" name="barcodeFormat" value="balance">
44+
<label for="balance"> balance </label> <br />
45+
</form>
46+
</div>
47+
</div>
48+
49+
<!-- JS Code -->
50+
<script src="initScanner.js"></script> <!-- To initialize the barcode scanner -->
51+
52+
<script>
53+
/** Beginning of barcode formats assignment
54+
* Should the user select one of the barcode format options,
55+
* update the runtime settings accordingly and in the correct selection order
56+
*/
57+
chooseBarcodeFormats.onchange = async function () {
58+
try {
59+
const checkboxes = document.querySelectorAll('input[name="barcodeFormat"]:checked');
60+
let settings = await scanner.getRuntimeSettings();
61+
settings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_NULL; // Set it to NULL first since the default is BF_ALL
62+
checkboxes.forEach((checkbox) => {
63+
// go through each of the checked options and perform a compound bitwise OR
64+
// to include each of the selected formats
65+
switch (checkbox.value) {
66+
case "BF_ONED":
67+
settings.barcodeFormatIds |= Dynamsoft.DBR.EnumBarcodeFormat.BF_ONED;
68+
break;
69+
case "BF_QR_CODE":
70+
settings.barcodeFormatIds |= Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
71+
break;
72+
case "BF_PDF417":
73+
settings.barcodeFormatIds |= Dynamsoft.DBR.EnumBarcodeFormat.BF_PDF417;
74+
break;
75+
case "BF_DATAMATRIX":
76+
settings.barcodeFormatIds |= Dynamsoft.DBR.EnumBarcodeFormat.BF_DATAMATRIX;
77+
break;
78+
}
79+
});
80+
await scanner.updateRuntimeSettings(settings);
81+
}
82+
catch (ex) {
83+
alert(ex.message);
84+
}
85+
}
86+
87+
/* End of barcode formats assignment */
88+
89+
/* Now for the expected barcodes */
90+
// Should the user enter the expected number of barcodes to be found per scan,
91+
// the runtime settings are updated as follows
92+
expectedNumberBarcodes.onchange = async function () {
93+
try {
94+
let expectedVal = document.getElementById('expectedNumberBarcodes').value;
95+
document.getElementById('expectedNumberBarcodesLable').innerText = expectedVal;
96+
let settings = await scanner.getRuntimeSettings();
97+
settings.expectedBarcodesCount = expectedVal;
98+
await scanner.updateRuntimeSettings(settings);
99+
}
100+
catch (ex) {
101+
alert(ex.message);
102+
}
103+
}
104+
</script>
105+
</body>
106+
107+
</html>

0 commit comments

Comments
 (0)