Skip to content

Commit 702cf05

Browse files
Tom-DynamsoftTom-Dynamsoft
authored
Merge pull request #21 from Dynamsoft/_dev
Dev
2 parents 5359d9a + 66e87da commit 702cf05

26 files changed

Lines changed: 691 additions & 463 deletions

1.hello-world/1.minimum-code.html renamed to 1.hello-world/1.hello-world.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
</head>
1111

1212
<body>
13-
<h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
14-
<button id="btn-show-scanner">Show Barcode Scanner</button>
13+
Loading...
1514
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
1615
<script>
1716
/** LICENSE ALERT - README
@@ -27,21 +26,20 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
2726
* LICENSE ALERT - THE END
2827
*/
2928

30-
let pScanner = null;
31-
document.getElementById('btn-show-scanner').onclick = async function() {
29+
window.onload = async function() {
3230
try {
33-
const scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
34-
/*
35-
* onFrameRead is triggered after the library finishes reading a frame.
36-
* There can be multiple barcodes on one frame.
31+
const scanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
32+
/**
33+
* onFrameRead is triggered after the library finishes reading a frame image.
34+
* There can be multiple barcodes on one image.
3735
*/
3836
scanner.onFrameRead = results => {
3937
console.log("Barcodes on one frame:");
4038
for (let result of results) {
4139
console.log(result.barcodeFormatString + ": " + result.barcodeText);
4240
}
4341
};
44-
/*
42+
/**
4543
* onUniqueRead is triggered only when a 'new' barcode is found.
4644
* The amount of time that the library 'remembers' a barcode is defined by
4745
* "duplicateForgetTime" in "ScanSettings". By default it is set to 3000 ms.
@@ -50,9 +48,12 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
5048
alert(txt);
5149
console.log("Unique Code Found: ", result);
5250
}
51+
/**
52+
* show() opens the camera and shows the video stream on the page.
53+
* After that, the library starts to scan the frame images continuously.
54+
*/
5355
await scanner.show();
5456
} catch (ex) {
55-
alert(ex.message);
5657
throw ex;
5758
}
5859
};

‎1.hello-world/10.read-video-pwa/helloworld-pwa.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<body>
1414
<h1 style="font-size: 1.5em;">Hello World for PWA</h1>
15-
<button id='readBarcode'>Read Barcode via Camera</button>
15+
Loading...
1616
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
1717
<script>
1818
/** LICENSE ALERT - README
@@ -30,7 +30,7 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
3030

3131
let pScanner = null;
3232
let latestResult = null;
33-
document.getElementById('readBarcode').onclick = async function() {
33+
window.onload = async function() {
3434
Notification.requestPermission().then((result) => {
3535
if (result === 'granted') {
3636
startNotificationLoop();
@@ -46,7 +46,6 @@ <h1 style="font-size: 1.5em;">Hello World for PWA</h1>
4646
};
4747
scanner.onUniqueRead = (txt, result) => {
4848
latestResult = txt;
49-
alert(txt, result);
5049
}
5150
await scanner.show();
5251
} catch (ex) {

‎1.hello-world/11.read-video-requirejs.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<body>
1212
<h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
13-
<button id="readBarcode">show scanner</button>
13+
Loading...
1414
<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.js"></script>
1515
<script>
1616
requirejs(['https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js'], function({
@@ -32,7 +32,7 @@ <h1 style="font-size: 1.5em;">Hello World for RequireJS</h1>
3232

3333
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/";
3434
let pScanner = null;
35-
document.getElementById('readBarcode').onclick = async function() {
35+
window.onload = async function() {
3636
try {
3737
const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
3838
scanner.onFrameRead = results => {

1.hello-world/12.minimum-code-es6.html renamed to 1.hello-world/12.read-video-es6.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
</head>
1111

1212
<body>
13-
<h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
14-
<button id="btn-show-scanner">Show Barcode Scanner</button>
13+
<h1 style="font-size: 1.5em;">Hello World for ES6</h1>
14+
Loading...
1515
<script type="module">
1616
import { BarcodeReader, BarcodeScanner } from 'https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.mjs';
1717
/** LICENSE ALERT - README
@@ -30,7 +30,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
3030
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/";
3131

3232
let pScanner = null;
33-
document.getElementById('btn-show-scanner').addEventListener('click', async () => {
33+
window.onload = async () => {
3434
try {
3535
const scanner = await (pScanner = pScanner || BarcodeScanner.createInstance());
3636
/*
@@ -57,7 +57,7 @@ <h1 style="font-size: 1.5em;">Read Barcodes from a Camera</h1>
5757
alert(ex.message);
5858
throw ex;
5959
}
60-
});
60+
};
6161
</script>
6262
</body>
6363

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

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,22 @@
1212
<body>
1313
<div style="width:80vw;margin:0 auto;">
1414
<h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
15-
<input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif">
15+
<input id="ipt-file" type="file" accept="image/png,image/jpeg,image/bmp,image/gif" disabled="disabled">
1616
<input id="ipt-readonly-last-result" title="Double click to clear!" readonly placeholder="The Last Read Barcode" style="width:80vw;margin-top:20px;">
17-
<p id='p-loading' style='font-size:1.5em'>Loading Library...</p>
17+
<p id='p-loading' style='font-size:1.5em'>Loading...</p>
1818
<p id='p-reading' style='font-size:1.5em;display:none;'>Reading Barcodes...</p>
1919
<div id="div-cvs-container" style="width:80vw;height:40vh;margin-top:20px;display:flex;justify-content:center;"></div>
2020
<p>All Results:</p>
2121
<div id="div-results" style="width:80vw;height:15vh;padding:16px;overflow-y:auto;border: 1px dashed grey;"></div>
2222
</div>
2323
<style>
24-
.sp-resultText { color: #cE5E04 }
25-
#div-cvs-container canvas { border: solid 1px gray; }
24+
.sp-resultText {
25+
color: #cE5E04
26+
}
27+
28+
#div-cvs-container canvas {
29+
border: solid 1px gray;
30+
}
2631
</style>
2732
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
2833
<script>
@@ -43,24 +48,25 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
4348
(async() => {
4449
try {
4550
await Dynamsoft.DBR.BarcodeReader.loadWasm();
46-
document.getElementById('p-loading').style.display = 'none';
51+
document.getElementById('p-loading').innerText = "Library loaded and ready!"
52+
document.getElementById('ipt-file').disabled = false;
53+
setTimeout(function() {
54+
document.getElementById('p-loading').style.display = 'none';
55+
}, 1000);
4756
} catch (ex) {
48-
alert(ex.message);
57+
document.getElementById('p-loading').innerText = ex;
58+
document.getElementById('ipt-file').disabled = true;
4959
throw ex;
5060
}
5161
})();
5262

53-
54-
55-
5663
// html elements
5764
const iptFile = document.getElementById('ipt-file');
5865
const iptReadonlyLastResult = document.getElementById('ipt-readonly-last-result');
5966
const pReading = document.getElementById('p-reading');
6067
const divResults = document.getElementById('div-results');
6168
const divCvsContainer = document.getElementById('div-cvs-container');
6269

63-
6470
// reader for decoding pictures
6571
let pReader = null;
6672
iptFile.addEventListener('change', async function() {
@@ -74,7 +80,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
7480
// show image
7581
divCvsContainer.innerHTML = '';
7682
divCvsContainer.appendChild(reader.getOriginalImageInACanvas());
77-
83+
7884
// show results
7985
divResults.appendChild(createEl('h3', file.name + ": "));
8086
if (0 === results.length) {
@@ -94,7 +100,6 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
94100
divResults.appendChild(document.createElement('hr'));
95101
divResults.scrollTop = divResults.scrollHeight;
96102
} catch (ex) {
97-
alert(ex.message);
98103
throw ex;
99104
} finally {
100105
pReading.style.display = 'none';
@@ -109,7 +114,7 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
109114
function createEl(type, txt, className) {
110115
const el = document.createElement(type);
111116
el.textContent = txt;
112-
if (className){
117+
if (className) {
113118
el.className = className;
114119
}
115120
return el;

‎1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ span {
4343

4444
.latest-result:focus {
4545
outline: none;
46-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
46+
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
4747
}
4848

4949
#results {

‎1.hello-world/5.read-video-vue/src/components/HelloWorld.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ span {
109109
110110
.latest-result:focus {
111111
outline: none;
112-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
112+
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
113113
}
114114
115115
#results {

0 commit comments

Comments
 (0)