Skip to content

Commit e737844

Browse files
lim-kim930lim-kim930
committed
fix selector bug
1 parent b1ea894 commit e737844

File tree

1 file changed

+88
-83
lines changed

1 file changed

+88
-83
lines changed

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

Lines changed: 88 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111

1212
<body>
1313
<script>
14-
if(location.protocol === "file:") {
14+
if (location.protocol === "file:") {
1515
const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
1616
console.warn(message);
1717
alert(message);
1818
}
1919
</script>
20-
20+
2121
<h1>Customized Default UI</h1>
2222
<div class="controler">
2323
<div class="selector">
@@ -79,7 +79,7 @@ <h1>Customized Default UI</h1>
7979
let animateTimer = null;
8080
// scanner for decoding video
8181
let pScanner = null;
82-
(async() => {
82+
(async () => {
8383
try {
8484
// use the API defaultUIElementURL to set specified html as the default UIelement
8585
await (Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL = "./my.dbr.scanner.html");
@@ -90,8 +90,12 @@ <h1>Customized Default UI</h1>
9090
}
9191
})();
9292
// add the click event to the selector
93-
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
94-
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
93+
document.getElementById("cam_selector_switch").addEventListener("click", () => {
94+
toggleOptionsView("camera");
95+
});
96+
document.getElementById("res_selector_switch").addEventListener("click", () => {
97+
toggleOptionsView("resolution");
98+
});
9599
// decode video from camera
96100
async function showScanner() {
97101
try {
@@ -106,88 +110,72 @@ <h1>Customized Default UI</h1>
106110
}, 2000);
107111
};
108112
await scanner.open();
109-
renderCamreaSelector();
113+
renderCameraSelector();
110114
renderResolutionSelector();
111115
} catch (ex) {
112116
let errMsg;
113117
if (ex.message.includes("network connection error")) {
114118
errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support ([email protected]) to acquire an offline license.";
115119
} else {
116-
errMsg = ex.message||ex;
120+
errMsg = ex.message || ex;
117121
}
118122
console.error(errMsg);
119123
alert(errMsg);
120124
}
121125
}
122-
// initial selector renderer
123-
async function renderCamreaSelector() {
126+
// camera selector renderer
127+
async function renderCameraSelector() {
124128
let scanner = await pScanner;
125129
const cameras = await scanner.getAllCameras();
126-
document.getElementById("ul_options_camera").innerHTML = "";
130+
const currentCamera = await scanner.getCurrentCamera();
131+
const optionsUl = document.getElementById("ul_options_camera");
132+
optionsUl.innerHTML = "";
127133
cameras.forEach(camera => {
128134
let li = document.createElement("li");
129135
let span = document.createElement("span");
136+
span.addEventListener("click", camOptionSelected);
130137
span.setAttribute("id", camera.deviceId);
131138
span.innerText = camera.label;
132-
li.appendChild(span);
133-
document.getElementById("ul_options_camera").appendChild(li);
134-
});
135-
// highlight and display the selected option and add click event to selector
136-
const camOption = document.querySelectorAll("#ul_options_camera span");
137-
const currentCamera = await scanner.getCurrentCamera();
138-
camOption.forEach(sapn => {
139-
sapn.addEventListener("click", camOptionSelected);
140-
if (sapn.id === currentCamera.deviceId) {
141-
document.getElementById("selector_input_camera").value = sapn.innerText;
142-
sapn.classList.add("selected");
143-
} else {
144-
sapn.classList.remove("selected");
139+
if (camera.deviceId === currentCamera.deviceId) {
140+
document.getElementById("selector_input_camera").value = camera.label;
141+
span.classList.add("selected");
145142
}
143+
li.appendChild(span);
144+
optionsUl.appendChild(li);
146145
});
146+
const camOptions = document.querySelectorAll("#ul_options_camera span");
147147
}
148+
// resolution selector renderer
148149
async function renderResolutionSelector() {
149150
let scanner = await pScanner;
150151
const currentResolution = await scanner.getResolution();
151152
const gotResolution = document.querySelector("#gotResolution span");
153+
const resOptions = document.querySelectorAll("#ul_options_resolution span");
152154
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
153155
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
154-
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
155156
gotResolution.classList.add("selected");
156-
let resOption = document.querySelectorAll("#ul_options_resolution span");
157-
for (let i = 0; i < resOption.length; i++) {
158-
resOption[i].addEventListener("click", resOptionSelected);
157+
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
158+
for (let i = 0; i < resOptions.length; i++) {
159+
resOptions[i].addEventListener("click", resOptionSelected);
159160
};
160161
toggleMaskView();
161162
}
162163
// when the selector is clicked
163-
function toggleCamView(e) {
164+
function toggleOptionsView(selectorType) {
165+
const arrowId = selectorType === "camera" ? "arrow_camera" : "arrow_resolution";
166+
const options = selectorType === "camera" ? camOptions : resOptions;
164167
// expanding and collapsing control options by changing the classList
165168
clearTimeout(animateTimer);
166-
camOptions.classList.toggle("noheight");
167-
document.getElementById("arrow_camera").classList.toggle("trans");
168-
const hidden = camOptions.classList.value.search("unshow");
169+
options.classList.toggle("noheight");
170+
document.getElementById(arrowId).classList.toggle("trans");
171+
const hidden = options.classList.value.search("unshow");
169172
if (hidden !== -1) {
170-
camOptions.classList.replace("unshow", "show");
171-
document.addEventListener("click", clickToHidden);
173+
options.classList.replace("unshow", "show");
174+
document.addEventListener("click", clickToHiddenOptions);
172175
} else {
173176
// remove styles such as shadows after the transition ends
174177
animateTimer = setTimeout(() => {
175-
camOptions.classList.replace("show", "unshow");
176-
}, 200);
177-
}
178-
}
179-
180-
function toggleResView(e) {
181-
clearTimeout(animateTimer);
182-
resOptions.classList.toggle("noheight");
183-
document.getElementById("arrow_resolution").classList.toggle("trans");
184-
const hidden = resOptions.classList.value.search("unshow");
185-
if (hidden !== -1) {
186-
resOptions.classList.replace("unshow", "show");
187-
document.addEventListener("click", clickToHidden);
188-
} else {
189-
animateTimer = setTimeout(() => {
190-
resOptions.classList.replace("show", "unshow");
178+
options.classList.replace("show", "unshow");
191179
}, 200);
192180
}
193181
}
@@ -200,16 +188,26 @@ <h1>Customized Default UI</h1>
200188
}
201189
toggleMaskView();
202190
const cameras = await scanner.getAllCameras();
203-
cameras.forEach(async camera => {
204-
if (camera.deviceId === e.target.id) {
191+
const camOptions = document.querySelectorAll("#ul_options_camera span");
192+
for (let i = 0; i < cameras.length; i++) {
193+
if (cameras[i].deviceId === e.target.id) {
205194
try {
206-
await scanner.setCurrentCamera(camera);
195+
await scanner.setCurrentCamera(cameras[i].deviceId);
207196
} catch (ex) {
208197
alert('Play video failed: ' + (ex.message || ex));
209198
}
210-
renderResolutionSelector();
199+
const _currentCamera = await scanner.getCurrentCamera();
200+
camOptions.forEach(span => {
201+
if (span.id === _currentCamera.deviceId) {
202+
document.getElementById("selector_input_camera").value = span.innerText;
203+
span.classList.add("selected");
204+
} else {
205+
span.classList.remove("selected");
206+
}
207+
});
208+
return renderResolutionSelector();
211209
}
212-
})
210+
}
213211
}
214212
async function resOptionSelected(e) {
215213
const data = e.target.id.split("x");
@@ -221,7 +219,13 @@ <h1>Customized Default UI</h1>
221219
toggleMaskView();
222220
const targetResolution = [parseInt(data[0]), parseInt(data[1])];
223221
await scanner.setResolution(targetResolution);
224-
renderResolutionSelector();
222+
const _currentResolution = await scanner.getResolution();
223+
const gotResolution = document.querySelector("#gotResolution span");
224+
const resOptions = document.querySelectorAll("#ul_options_resolution span");
225+
gotResolution.innerText = 'got ' + _currentResolution[0] + ' x ' + _currentResolution[1];
226+
gotResolution.id = _currentResolution[0] + 'x' + _currentResolution[1];
227+
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
228+
toggleMaskView();
225229
}
226230
// camera's styles mask show or not
227231
function toggleMaskView() {
@@ -233,14 +237,14 @@ <h1>Customized Default UI</h1>
233237
dceScanlight.hidden = !dceScanlight.hidden;
234238
}
235239
// click anywhere outside the options to collapse the options
236-
function clickToHidden(e) {
240+
function clickToHiddenOptions(e) {
237241
const camViewable = camOptions.classList.value.search("unshow");
238242
const resViewable = resOptions.classList.value.search("unshow");
239243
if (camViewable === -1 && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
240-
toggleCamView();
244+
toggleOptionsView("camera");
241245
}
242246
if (resViewable === -1 && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
243-
toggleResView();
247+
toggleOptionsView("resolution");
244248
}
245249
if (camViewable !== -1 && resViewable !== -1) {
246250
// trigger only once
@@ -254,7 +258,7 @@ <h1>Customized Default UI</h1>
254258
margin: 0;
255259
padding: 0;
256260
}
257-
261+
258262
body {
259263
display: flex;
260264
flex-direction: column;
@@ -265,29 +269,30 @@ <h1>Customized Default UI</h1>
265269
height: 90vh;
266270
color: #455A64;
267271
}
268-
272+
269273
h1 {
270274
font-size: 1.5em;
271275
}
272-
276+
273277
.controler {
274278
display: flex;
275279
flex-direction: row;
276280
align-items: center;
277281
justify-content: center;
278282
}
279-
283+
280284
.selector {
281285
margin: 10px;
282286
}
287+
283288
/* Small devices */
284-
289+
285290
@media only screen and (max-width: 545px) {
286291
.controler {
287292
flex-direction: column;
288293
}
289294
}
290-
295+
291296
.selector_switch {
292297
position: relative;
293298
width: 250px;
@@ -298,11 +303,11 @@ <h1>Customized Default UI</h1>
298303
cursor: pointer;
299304
transition: all 200ms;
300305
}
301-
306+
302307
.selector_switch:hover {
303308
border: 1px solid #b4b4b4;
304309
}
305-
310+
306311
.selector_input {
307312
position: absolute;
308313
left: 0;
@@ -317,22 +322,22 @@ <h1>Customized Default UI</h1>
317322
border-radius: 5px;
318323
color: #606266;
319324
}
320-
325+
321326
.selector_switch svg {
322327
height: 30px;
323328
position: absolute;
324329
right: 5px;
325330
}
326-
331+
327332
.arrow {
328333
transform: rotate(0deg);
329334
transition: all 200ms;
330335
}
331-
336+
332337
.trans {
333338
transform: rotate(-180deg);
334339
}
335-
340+
336341
.options {
337342
position: absolute;
338343
width: 250px;
@@ -345,28 +350,28 @@ <h1>Customized Default UI</h1>
345350
z-index: 2000;
346351
background-color: #fff;
347352
}
348-
353+
349354
.show {
350355
border: 1px solid #e4e7ed;
351356
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
352357
max-height: 200px;
353358
}
354-
359+
355360
.unshow {
356361
border: none;
357362
box-shadow: none;
358363
}
359-
364+
360365
.noheight {
361366
max-height: 0;
362367
}
363-
368+
364369
ul {
365370
list-style: none;
366371
margin: 5px auto;
367372
padding: 0;
368373
}
369-
374+
370375
ul li {
371376
height: 30px;
372377
line-height: 30px;
@@ -376,24 +381,24 @@ <h1>Customized Default UI</h1>
376381
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
377382
font-size: 14px;
378383
}
379-
384+
380385
ul li:hover {
381386
background-color: #f5f7fa;
382387
}
383-
388+
384389
.selected {
385390
color: #fe8e14;
386391
font-weight: bold;
387392
}
388-
393+
389394
ul li span {
390395
display: inline-block;
391396
width: 100%;
392397
height: 30px;
393398
box-sizing: border-box;
394399
padding: 0 20px;
395400
}
396-
401+
397402
.UIElement {
398403
width: 80vw;
399404
height: 60vh;
@@ -402,12 +407,12 @@ <h1>Customized Default UI</h1>
402407
text-align: center;
403408
font-size: medium;
404409
}
405-
410+
406411
.UIElement>div {
407412
width: 100%;
408413
height: 100%;
409414
}
410-
415+
411416
.latest-result {
412417
display: block;
413418
margin: 0;
@@ -420,11 +425,11 @@ <h1>Customized Default UI</h1>
420425
border-radius: 0.2rem;
421426
text-align: center;
422427
}
423-
428+
424429
.latest-result::placeholder {
425430
color: #B0BEC5;
426431
}
427-
432+
428433
.latest-result:focus {
429434
outline: none;
430435
box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;

0 commit comments

Comments
 (0)