Skip to content

Commit 1707b7e

Browse files
Cube-JCube-J
authored
Merge pull request #19 from Dynamsoft/_dev
Dev
2 parents 678797a + b744de7 commit 1707b7e

File tree

8 files changed

+442
-387
lines changed

8 files changed

+442
-387
lines changed

‎.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.DS_Store
2+
node_modules
3+
dist
4+
build
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?
23+
24+
__pycache__
25+
~~*
26+
--*
27+
==*
28+
package-lock.json
29+
yarn.lock
30+
.git
31+
/*.zip
32+
/*.py
33+
/*.exe
34+
/*.jar
35+
/*.md
36+
/*.json
37+
/*.js
38+
/*.txt
39+
/.gitattributes
40+
/.*ignore
41+
42+
!bower.json
43+
!composer.json
44+
!package.js

‎1.hello-world/9.read-video-electron/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ <h1 style="font-size: 1.5em;">Hello World for Electron</h1>
1515
<div class="container">
1616
<div id="barcodeScannerUI"></div>
1717
</div>
18-
<!-- <script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script> -->
1918
<script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
2019
<script src="action.js"></script>
2120
</body>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
3939
try {
4040
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
4141
await scanner.setUIElement(document.getElementById('div-ui-container'));
42-
scanner.onUniqueRead = (txt, result) => { alert(text); };
42+
scanner.onUniqueRead = (txt, result) => { alert(txt); };
4343
await scanner.open();
4444
} catch (ex) {
4545
alert(ex.message);

‎2.ui-tweaking/3.read-video-with-external-control.html‎

Lines changed: 132 additions & 149 deletions
Large diffs are not rendered by default.

‎2.ui-tweaking/5.read-video-with-custom-default-ui.html‎

Lines changed: 71 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,9 @@ <h1>Customized Default UI</h1>
6464

6565
// define html elements needed
6666
const camOptions = document.getElementById("options_camera");
67-
const camArrow = document.getElementById("arrow_camera");
68-
const camSelectorInput = document.getElementById("selector_input_camera");
69-
const cameraUL = document.getElementById("ul_options_camera");
7067
const resOptions = document.getElementById("options_resolution");
71-
const resArrow = document.getElementById("arrow_resolution");
72-
const resSelectorInput = document.getElementById("selector_input_resolution");
73-
const gotResolution = document.querySelector("#gotResolution span");
74-
// define some required variables
75-
let camOptionsViewable = false;
76-
let resOptionsViewable = false;
77-
let camAnimateTimer = null;
78-
let cresAnimateTimer = null;
79-
let cameras = {};
80-
let currentCamera = null;
81-
let currentResolution = null;
68+
// timer for animation
69+
let animateTimer = null;
8270
// scanner for decoding video
8371
let pScanner = null;
8472
(async () => {
@@ -91,141 +79,149 @@ <h1>Customized Default UI</h1>
9179
throw ex;
9280
}
9381
})();
82+
// add the click event to the selector
83+
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
84+
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
9485
// decode video from camera
9586
async function showScanner() {
9687
try {
9788
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
98-
if (currentCamera) {
99-
await scanner.setCurrentCamera(currentCamera);
100-
}
101-
if (currentResolution) {
102-
await scanner.setResolution(currentResolution);
103-
}
104-
// when the last two values are judged to be false, it means this is the first time into the function showScanner
105-
if (!currentResolution && !currentCamera) {
106-
document.getElementById('UIElement').appendChild(scanner.getUIElement());
107-
scanner.onUniqueRead = (txt, result) => { alert(txt); };
108-
await scanner.open();
109-
cameras = await scanner.getAllCameras();
110-
}
111-
currentCamera = await scanner.getCurrentCamera();
112-
currentResolution = await scanner.getResolution();
113-
toggleMaskView();
114-
renderSelector();
89+
document.getElementById('UIElement').appendChild(scanner.getUIElement());
90+
scanner.onUniqueRead = (txt, result) => { alert(txt); };
91+
await scanner.open();
92+
renderCamreaSelector();
93+
renderResolutionSelector();
11594
} catch (ex) {
11695
alert(ex.message);
11796
throw ex;
11897
}
11998
}
12099
// initial selector renderer
121-
function renderSelector() {
122-
// render the selector's options based on the fetched value
123-
cameraUL.innerHTML = "";
124-
cameras.forEach(item => {
100+
async function renderCamreaSelector() {
101+
let scanner = await pScanner;
102+
const cameras = await scanner.getAllCameras();
103+
document.getElementById("ul_options_camera").innerHTML = "";
104+
cameras.forEach(camera => {
125105
let li = document.createElement("li");
126106
let span = document.createElement("span");
127-
span.setAttribute("id", item.deviceId);
128-
span.innerText = item.label;
107+
span.setAttribute("id", camera.deviceId);
108+
span.innerText = camera.label;
129109
li.appendChild(span);
130-
cameraUL.appendChild(li);
110+
document.getElementById("ul_options_camera").appendChild(li);
131111
});
132-
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
133-
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
134112
// highlight and display the selected option and add click event to selector
135113
const camOption = document.querySelectorAll("#ul_options_camera span");
136-
camOption.forEach(item => {
137-
item.addEventListener("click", camOptionSelected);
138-
if (item.id === currentCamera.deviceId) {
139-
camSelectorInput.value = item.innerText;
140-
item.classList.add("selected");
114+
const currentCamera = await scanner.getCurrentCamera();
115+
camOption.forEach(sapn => {
116+
sapn.addEventListener("click", camOptionSelected);
117+
if (sapn.id === currentCamera.deviceId) {
118+
document.getElementById("selector_input_camera").value = sapn.innerText;
119+
sapn.classList.add("selected");
141120
}
142121
else {
143-
item.classList.remove("selected");
122+
sapn.classList.remove("selected");
144123
}
145-
})
146-
resSelectorInput.value = gotResolution.innerText;
124+
});
125+
}
126+
async function renderResolutionSelector() {
127+
let scanner = await pScanner;
128+
const currentResolution = await scanner.getResolution();
129+
const gotResolution = document.querySelector("#gotResolution span");
130+
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
131+
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
132+
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
147133
gotResolution.classList.add("selected");
148-
const resOption = document.querySelectorAll("#ul_options_resolution span");
134+
let resOption = document.querySelectorAll("#ul_options_resolution span");
149135
for (let i = 0; i < resOption.length; i++) {
150136
resOption[i].addEventListener("click", resOptionSelected);
151137
};
152-
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
153-
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
154-
138+
toggleMaskView();
155139
}
156140
// when the selector is clicked
157141
function toggleCamView(e) {
158142
// expanding and collapsing control options by changing the classList
159-
clearTimeout(camAnimateTimer);
143+
clearTimeout(animateTimer);
160144
camOptions.classList.toggle("noheight");
161-
camArrow.classList.toggle("trans");
162-
if (!camOptionsViewable) {
145+
document.getElementById("arrow_camera").classList.toggle("trans");
146+
const hidden = camOptions.classList.value.search("unshow");
147+
if (hidden !== -1) {
163148
camOptions.classList.replace("unshow", "show");
164149
document.addEventListener("click", clickToHidden);
165150
}
166151
else {
167152
// remove styles such as shadows after the transition ends
168-
camAnimateTimer = setTimeout(() => {
153+
animateTimer = setTimeout(() => {
169154
camOptions.classList.replace("show", "unshow");
170155
}, 200);
171156
}
172-
camOptionsViewable = !camOptionsViewable;
173157
}
174158
function toggleResView(e) {
175-
clearTimeout(cresAnimateTimer);
159+
clearTimeout(animateTimer);
176160
resOptions.classList.toggle("noheight");
177-
resArrow.classList.toggle("trans")
178-
if (!resOptionsViewable) {
161+
document.getElementById("arrow_resolution").classList.toggle("trans");
162+
const hidden = resOptions.classList.value.search("unshow");
163+
if (hidden !== -1) {
179164
resOptions.classList.replace("unshow", "show");
180165
document.addEventListener("click", clickToHidden);
181166
}
182167
else {
183-
cresAnimateTimer = setTimeout(() => {
168+
animateTimer = setTimeout(() => {
184169
resOptions.classList.replace("show", "unshow");
185170
}, 200);
186171
}
187-
resOptionsViewable = !resOptionsViewable;
188172
}
189173
// when option is selected
190-
function camOptionSelected(e) {
174+
async function camOptionSelected(e) {
175+
let scanner = await pScanner;
176+
const currentCamera = await scanner.getCurrentCamera();
191177
if (currentCamera.deviceId === e.target.id) {
192178
return;
193179
}
194180
toggleMaskView();
195-
camSelectorInput.value = e.target.innerText;
196-
cameras.forEach(item => {
197-
if (item.deviceId === e.target.id) {
198-
currentCamera = item;
199-
return showScanner();
181+
const cameras = await scanner.getAllCameras();
182+
cameras.forEach(async camera => {
183+
if (camera.deviceId === e.target.id) {
184+
try {
185+
await scanner.setCurrentCamera(camera);
186+
} catch (ex) {
187+
alert('Play video failed: ' + (ex.message || ex));
188+
}
189+
renderResolutionSelector();
200190
}
201191
})
202192
}
203-
function resOptionSelected(e) {
193+
async function resOptionSelected(e) {
204194
const data = e.target.id.split("x");
195+
let scanner = await pScanner;
196+
const currentResolution = await scanner.getResolution();
205197
if (currentResolution[0] == data[0] && currentResolution[1] == data[1]) {
206198
return;
207199
}
208200
toggleMaskView();
209-
resSelectorInput.value = e.target.innerText;
210-
currentResolution = [parseInt(data[0]), parseInt(data[1])];
211-
showScanner();
201+
const targetResolution = [parseInt(data[0]), parseInt(data[1])];
202+
await scanner.setResolution(targetResolution);
203+
renderResolutionSelector();
212204
}
213205
// camera's styles mask show or not
214206
function toggleMaskView() {
215207
let dceLoading = document.getElementById('dce-loading');
216208
let dceMask = document.getElementById('dce-mask');
209+
let dceScanlight = document.getElementById('dce-scanlight');
217210
dceLoading.style.display = dceLoading.style.display === "none" ? "inline-block" : "none"
218211
dceMask.hidden = !dceMask.hidden;
212+
dceScanlight.hidden = !dceScanlight.hidden;
219213
}
220214
// click anywhere outside the options to collapse the options
221215
function clickToHidden(e) {
222-
if (camOptionsViewable && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
216+
const camViewable = camOptions.classList.value.search("unshow");
217+
const resViewable = resOptions.classList.value.search("unshow");
218+
if (camViewable === -1 && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
223219
toggleCamView();
224220
}
225-
if (resOptionsViewable && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
221+
if (resViewable ===-1 && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
226222
toggleResView();
227223
}
228-
if (!camOptionsViewable && !resOptionsViewable) {
224+
if (camViewable !== -1 && resViewable !== -1) {
229225
// trigger only once
230226
document.removeEventListener("click", arguments.callee)
231227
}

‎2.ui-tweaking/my.dbr.scanner.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<svg id="dce-loading" style="animation:turn 1.5s linear infinite;" viewBox="0 0 1024 1024" p-id="11986" width="200" height="200"><path d="M512.1 64.2c-35.4 0-64 28.7-64 64v128c0 35.4 28.7 64 64 64 35.4 0 64-28.7 64-64v-128c0-35.3-28.6-64-64-64zM320.4 328.3l-110.8-64c-30.6-17.7-69.8-7.2-87.4 23.4-17.7 30.6-7.2 69.8 23.4 87.4l110.8 64c30.6 17.7 69.8 7.2 87.4-23.4 17.7-30.6 7.2-69.8-23.4-87.4zM342.4 609.2c-17.7-30.6-56.8-41.1-87.4-23.4l-110.8 64c-30.6 17.7-41.1 56.8-23.4 87.4 17.7 30.6 56.8 41.1 87.4 23.4l110.8-64c30.6-17.7 41.1-56.8 23.4-87.4zM509.2 707.1c-35.4 0-64 28.7-64 64v128c0 35.4 28.7 64 64 64 35.4 0 64-28.7 64-64v-128c0-35.3-28.6-64-64-64zM875.8 652.2l-110.8-64c-30.6-17.7-69.8-7.2-87.4 23.4-17.7 30.6-7.2 69.8 23.4 87.4l110.8 64c30.6 17.7 69.8 7.2 87.4-23.4 17.7-30.6 7.2-69.7-23.4-87.4zM678.9 418.2c17.7 30.6 56.8 41.1 87.4 23.4l110.8-64c30.6-17.7 41.1-56.8 23.4-87.4-17.7-30.6-56.8-41.1-87.4-23.4l-110.8 64c-30.6 17.6-41.1 56.8-23.4 87.4z" p-id="11987"></path></svg>
33
<div class="dce-video-container" style="position:absolute;width:100%;height:100%;"></div>
44
<div class="dce-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden;">
5-
<div class="dce-scanlight" style="width:100%;display:none;height:70px;position:absolute;animation:3s infinite dce-scanlight;background-image:linear-gradient(#ffffff00, #ffb668);border-bottom:2px solid #ff8400;user-select:none;"></div>
5+
<div id="dce-scanlight" class="dce-scanlight" hidden style="width:100%;display:none;height:70px;position:absolute;animation:3s infinite dce-scanlight;background-image:linear-gradient(#ffffff00, #ffb668);border-bottom:2px solid #ff8400;user-select:none;"></div>
66
</div>
77
<div id="dce-mask" hidden style="width:100%;height:100%;position:absolute;top:-10px;left:-10px;padding:10px;">
88
<div class="dce-corner" style="position:absolute;width:50px;height:50px;top:0;left:0;border-left:3px solid #fe8e14;border-top:3px solid #fe8e14;"></div>
@@ -22,7 +22,7 @@
2222
}
2323
@keyframes dce-scanlight {
2424
from { top: 0px; }
25-
to { top: calc(100% - 87px) }
25+
to { top: calc(100% - 72px) }
2626
}
2727
</style>
2828
<script>

0 commit comments

Comments
 (0)