Skip to content

Commit cc82bf3

Browse files
lim-kim930lim-kim930
committed
improve samples
1 parent e33c1ac commit cc82bf3

File tree

7 files changed

+851
-477
lines changed

7 files changed

+851
-477
lines changed

‎1.hello-world/4.read-video-react/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
3131

3232
### `yarn eject`
3333

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
34+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
3535

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
36+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3737

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
3939

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
40+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
4141

4242
## Learn More
4343

‎2.ui-tweaking/1.read-video-show-result.html‎

Lines changed: 20 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,18 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<meta name="description" content="Read barcode from a video input. This sample demonstrates the default built-in UI.">
7+
<meta name="description"
8+
content="Read barcode from a video input. This sample demonstrates the default built-in UI.">
89
<meta name="keywords" content="read barcode from video, built-in ui">
910
<title>Dynamsoft Barcode Reader Sample - Video Decoding with Default UI</title>
10-
<!--
11-
This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
12-
library offline. Please see the guide on how to host the library:
13-
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
14-
-->
15-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
1611
</head>
1712

1813
<body>
1914
<h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
20-
<input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2115
<div id="UIElement">
22-
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span><br />
23-
<button id="showScanner" hidden>Show The Scanner</button>
24-
</div>
25-
<div>
26-
<span style="float:left;margin-top:20px;">All Results:</span><br />
27-
<div id="results"></div>
16+
<button id="showScanner">Show The Scanner</button>
2817
</div>
18+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
2919
<script>
3020
/** LICENSE ALERT - README
3121
*
@@ -43,144 +33,62 @@ <h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
4333

4434
// scanner for decoding video
4535
let pScanner = null;
46-
window.onload = async function() {
36+
(async () => {
4737
//Load the library on page load to speed things up.
4838
try {
49-
document.getElementById('lib-load').hidden = false;
5039
await Dynamsoft.DBR.BarcodeReader.loadWasm();
51-
startBarcodeScanner();
5240
} catch (ex) {
5341
alert(ex.message);
5442
throw ex;
5543
}
56-
document.getElementById('result').addEventListener('dblclick', async() => {
57-
document.getElementById('result').value = "";
58-
});
59-
document.getElementById('showScanner').addEventListener('click', async() => {
60-
if (pScanner)(await pScanner).show();
61-
});
62-
};
63-
// decode video from camera
64-
async function startBarcodeScanner() {
44+
})();
45+
document.getElementById('showScanner').addEventListener('click', async () => {
6546
try {
6647
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
67-
document.getElementById('lib-load').hidden = true;
68-
document.getElementById('showScanner').hidden = false;
69-
scanner.onFrameRead = (_results) => {
70-
for (let result of _results) {
71-
let newElements = [];
72-
document.getElementById('result').value = result.barcodeFormatString + ": " + result.barcodeText;
73-
newElements.push(createASpan(result.barcodeFormatString + ": "));
74-
newElements.push(createASpan(result.barcodeText, "resultText"));
75-
newElements.push(document.createElement('br'));
76-
if (result.barcodeText.indexOf("Attention(exceptionCode") != -1) {
77-
newElements.push(createASpan(" Error: " + result.exception.message));
78-
newElements.push(document.createElement('br'));
79-
}
80-
for (let span of newElements) {
81-
document.getElementById('results').appendChild(span);
82-
}
83-
document.getElementById('results').scrollTop = document.getElementById('results').scrollHeight;
84-
}
85-
};
48+
scanner.onUnduplicatedRead = (txt, result) => { alert(txt); };
8649
document.getElementById('UIElement').appendChild(scanner.getUIElement());
8750
await scanner.show();
88-
document.getElementById('results').style.visibility = "visible";
8951
} catch (ex) {
9052
alert(ex.message);
9153
throw ex;
9254
}
93-
}
94-
95-
function createASpan(txt, className) {
96-
let newSPAN = document.createElement("span");
97-
newSPAN.textContent = txt;
98-
if (className)
99-
newSPAN.className = className;
100-
return newSPAN;
101-
}
55+
});
10256
</script>
10357
</body>
10458
<style>
59+
* {
60+
margin: 0;
61+
padding: 0;
62+
}
63+
10564
button#showScanner {
10665
position: absolute;
10766
width: 50%;
10867
left: 25%;
109-
top: 30%;
11068
}
111-
69+
11270
body {
11371
display: flex;
11472
flex-direction: column;
11573
align-items: center;
11674
justify-content: center;
11775
overflow: hidden;
11876
width: 100vw;
119-
height: 90vh;
77+
height: 100vh;
12078
color: #455A64;
121-
margin: 0;
12279
}
123-
80+
12481
button {
12582
font-size: 1.5rem;
12683
margin-bottom: 2vh;
12784
}
128-
129-
span {
130-
font-size: 0.8rem;
131-
}
132-
133-
.latest-result {
134-
display: block;
135-
margin: 0;
136-
padding: 0.4rem 0.8rem;
137-
color: inherit;
138-
width: 80vw;
139-
border: none;
140-
font-size: 1rem;
141-
border-radius: 0.2rem;
142-
text-align: center;
143-
}
144-
145-
.latest-result::placeholder {
146-
color: #B0BEC5;
147-
}
148-
149-
.latest-result:focus {
150-
outline: none;
151-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
152-
}
153-
154-
#results {
155-
border: 1px dashed grey;
156-
overflow: auto;
157-
width: 80vw;
158-
padding: 2vmin;
159-
margin-bottom: 3vh;
160-
height: 15vh;
161-
}
162-
163-
.resultText {
164-
color: #cE5E04
165-
}
166-
167-
.bigger {
168-
font-size: large;
169-
margin-bottom: 2%;
170-
}
171-
85+
17286
#UIElement {
17387
margin: 2vmin auto;
17488
text-align: center;
17589
font-size: medium;
176-
height: 40vh;
177-
width: 80vw;
178-
}
179-
180-
#UIElement img {
181-
max-width: 100%;
182-
max-height: 90%;
183-
border: solid 1px gray;
90+
height: 60vh;
91+
width: 60vw;
18492
}
18593
</style>
18694

‎2.ui-tweaking/2.read-video-no-extra-control.html‎

Lines changed: 23 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@
77
<meta name="description" content="Read Barcodes from camera. Hide built-in controllers for a simplified ui">
88
<meta name="keywords" content="read barcodes from camera, simple ui">
99
<title>Dynamsoft Barcode Reader Simple Sample - Read Video - No Extra Control</title>
10-
<!--
11-
This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
12-
library offline. Please see the guide on how to host the library:
13-
https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
14-
-->
15-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
1610
</head>
1711

1812
<body>
1913
<h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
20-
<input type="text" id="result" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
2114
<div id="UIElement">
22-
<span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span>
15+
<div id="div-video-container" style="width:100%;height:100%;">
16+
<video class="dce-video" playsinline="true" muted style="width:100%;height:100%;"></video>
17+
</div>
2318
</div>
19+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.8.7/dist/dbr.js"></script>
2420
<script>
2521
/** LICENSE ALERT - README
2622
*
@@ -38,41 +34,28 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
3834

3935
// scanner for decoding video
4036
let pScanner = null;
41-
window.onload = async function() {
42-
//Load the library on page load to speed things up.
43-
try {
44-
document.getElementById('lib-load').hidden = false;
45-
await Dynamsoft.DBR.BarcodeScanner.loadWasm();
46-
showScanner();
47-
} catch (ex) {
48-
alert(ex.message);
49-
throw ex;
50-
}
51-
};
37+
5238
// decode video from camera
53-
async function showScanner() {
39+
(async () => {
5440
try {
5541
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
56-
document.getElementById('lib-load').hidden = true;
57-
scanner.onFrameRead = (results) => {
58-
for (let result of results) {
59-
document.getElementById('result').value = result.barcodeFormatString + ": " + result.barcodeText;
60-
}
61-
};
62-
document.getElementById('UIElement').appendChild(scanner.getUIElement());
63-
document.querySelector('#UIElement div').style.background = '';
64-
document.getElementsByClassName('dce-sel-camera')[0].hidden = true;
65-
document.getElementsByClassName('dce-sel-resolution')[0].hidden = true;
66-
document.getElementsByClassName('dce-btn-close')[0].hidden = true;
67-
await scanner.show();
42+
await scanner.setUIElement(document.getElementById('div-video-container'));
43+
scanner.onUnduplicatedRead = (txt, result) => { alert(text); };
44+
await scanner.open();
6845
} catch (ex) {
6946
alert(ex.message);
7047
throw ex;
7148
}
72-
}
49+
})();
50+
7351
</script>
7452
</body>
7553
<style>
54+
* {
55+
margin: 0;
56+
padding: 0;
57+
}
58+
7659
body {
7760
display: flex;
7861
flex-direction: column;
@@ -83,67 +66,23 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
8366
height: 90vh;
8467
color: #455A64;
8568
}
86-
69+
8770
button {
8871
font-size: 1.5rem;
8972
margin-bottom: 2vh;
9073
}
91-
92-
span {
93-
font-size: 0.8rem;
94-
}
95-
96-
.latest-result {
97-
display: block;
98-
margin: 0;
99-
padding: 0.4rem 0.8rem;
100-
color: inherit;
101-
width: 80vw;
102-
border: none;
103-
font-size: 1rem;
104-
border-radius: 0.2rem;
105-
text-align: center;
106-
}
107-
108-
.latest-result::placeholder {
109-
color: #B0BEC5;
110-
}
111-
112-
.latest-result:focus {
113-
outline: none;
114-
box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
115-
}
116-
117-
#results {
118-
border: 1px dashed grey;
119-
overflow: auto;
120-
width: 80vw;
121-
padding: 2vmin;
122-
margin-bottom: 3vh;
123-
height: 15vh;
124-
}
125-
126-
.resultText {
127-
color: #cE5E04
128-
}
129-
130-
.bigger {
131-
font-size: large;
132-
margin-bottom: 2%;
133-
}
134-
74+
13575
#UIElement {
13676
margin: 2vmin auto;
13777
text-align: center;
13878
font-size: medium;
13979
height: 40vh;
140-
width: 80vw;
80+
width: 100vw;
14181
}
142-
143-
#UIElement img {
144-
max-width: 100%;
145-
max-height: 90%;
146-
border: solid 1px gray;
82+
83+
.div-video-container {
84+
width: 100%;
85+
height: 100%;
14786
}
14887
</style>
14988

0 commit comments

Comments
 (0)