Skip to content

Commit b7ace89

Browse files
Cube-JCube-J
authored
Merge pull request #20 from Dynamsoft/master
update
2 parents fcd97ab + 05750c3 commit b7ace89

File tree

8 files changed

+399
-387
lines changed

8 files changed

+399
-387
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
33

4+
45
# local env files
56
.env.local
67
.env.*.local

‎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
@@ -40,7 +40,7 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
4040
try {
4141
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
4242
await scanner.setUIElement(document.getElementById('div-ui-container'));
43-
scanner.onUniqueRead = (txt, result) => { alert(text); };
43+
scanner.onUniqueRead = (txt, result) => { alert(txt); };
4444
await scanner.open();
4545
} catch (ex) {
4646
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
@@ -65,21 +65,9 @@ <h1>Customized Default UI</h1>
6565

6666
// define html elements needed
6767
const camOptions = document.getElementById("options_camera");
68-
const camArrow = document.getElementById("arrow_camera");
69-
const camSelectorInput = document.getElementById("selector_input_camera");
70-
const cameraUL = document.getElementById("ul_options_camera");
7168
const resOptions = document.getElementById("options_resolution");
72-
const resArrow = document.getElementById("arrow_resolution");
73-
const resSelectorInput = document.getElementById("selector_input_resolution");
74-
const gotResolution = document.querySelector("#gotResolution span");
75-
// define some required variables
76-
let camOptionsViewable = false;
77-
let resOptionsViewable = false;
78-
let camAnimateTimer = null;
79-
let cresAnimateTimer = null;
80-
let cameras = {};
81-
let currentCamera = null;
82-
let currentResolution = null;
69+
// timer for animation
70+
let animateTimer = null;
8371
// scanner for decoding video
8472
let pScanner = null;
8573
(async () => {
@@ -92,141 +80,149 @@ <h1>Customized Default UI</h1>
9280
throw ex;
9381
}
9482
})();
83+
// add the click event to the selector
84+
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
85+
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
9586
// decode video from camera
9687
async function showScanner() {
9788
try {
9889
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
99-
if (currentCamera) {
100-
await scanner.setCurrentCamera(currentCamera);
101-
}
102-
if (currentResolution) {
103-
await scanner.setResolution(currentResolution);
104-
}
105-
// when the last two values are judged to be false, it means this is the first time into the function showScanner
106-
if (!currentResolution && !currentCamera) {
107-
document.getElementById('UIElement').appendChild(scanner.getUIElement());
108-
scanner.onUniqueRead = (txt, result) => { alert(txt); };
109-
await scanner.open();
110-
cameras = await scanner.getAllCameras();
111-
}
112-
currentCamera = await scanner.getCurrentCamera();
113-
currentResolution = await scanner.getResolution();
114-
toggleMaskView();
115-
renderSelector();
90+
document.getElementById('UIElement').appendChild(scanner.getUIElement());
91+
scanner.onUniqueRead = (txt, result) => { alert(txt); };
92+
await scanner.open();
93+
renderCamreaSelector();
94+
renderResolutionSelector();
11695
} catch (ex) {
11796
alert(ex.message);
11897
throw ex;
11998
}
12099
}
121100
// initial selector renderer
122-
function renderSelector() {
123-
// render the selector's options based on the fetched value
124-
cameraUL.innerHTML = "";
125-
cameras.forEach(item => {
101+
async function renderCamreaSelector() {
102+
let scanner = await pScanner;
103+
const cameras = await scanner.getAllCameras();
104+
document.getElementById("ul_options_camera").innerHTML = "";
105+
cameras.forEach(camera => {
126106
let li = document.createElement("li");
127107
let span = document.createElement("span");
128-
span.setAttribute("id", item.deviceId);
129-
span.innerText = item.label;
108+
span.setAttribute("id", camera.deviceId);
109+
span.innerText = camera.label;
130110
li.appendChild(span);
131-
cameraUL.appendChild(li);
111+
document.getElementById("ul_options_camera").appendChild(li);
132112
});
133-
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
134-
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
135113
// highlight and display the selected option and add click event to selector
136114
const camOption = document.querySelectorAll("#ul_options_camera span");
137-
camOption.forEach(item => {
138-
item.addEventListener("click", camOptionSelected);
139-
if (item.id === currentCamera.deviceId) {
140-
camSelectorInput.value = item.innerText;
141-
item.classList.add("selected");
115+
const currentCamera = await scanner.getCurrentCamera();
116+
camOption.forEach(sapn => {
117+
sapn.addEventListener("click", camOptionSelected);
118+
if (sapn.id === currentCamera.deviceId) {
119+
document.getElementById("selector_input_camera").value = sapn.innerText;
120+
sapn.classList.add("selected");
142121
}
143122
else {
144-
item.classList.remove("selected");
123+
sapn.classList.remove("selected");
145124
}
146-
})
147-
resSelectorInput.value = gotResolution.innerText;
125+
});
126+
}
127+
async function renderResolutionSelector() {
128+
let scanner = await pScanner;
129+
const currentResolution = await scanner.getResolution();
130+
const gotResolution = document.querySelector("#gotResolution span");
131+
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
132+
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
133+
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
148134
gotResolution.classList.add("selected");
149-
const resOption = document.querySelectorAll("#ul_options_resolution span");
135+
let resOption = document.querySelectorAll("#ul_options_resolution span");
150136
for (let i = 0; i < resOption.length; i++) {
151137
resOption[i].addEventListener("click", resOptionSelected);
152138
};
153-
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
154-
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
155-
139+
toggleMaskView();
156140
}
157141
// when the selector is clicked
158142
function toggleCamView(e) {
159143
// expanding and collapsing control options by changing the classList
160-
clearTimeout(camAnimateTimer);
144+
clearTimeout(animateTimer);
161145
camOptions.classList.toggle("noheight");
162-
camArrow.classList.toggle("trans");
163-
if (!camOptionsViewable) {
146+
document.getElementById("arrow_camera").classList.toggle("trans");
147+
const hidden = camOptions.classList.value.search("unshow");
148+
if (hidden !== -1) {
164149
camOptions.classList.replace("unshow", "show");
165150
document.addEventListener("click", clickToHidden);
166151
}
167152
else {
168153
// remove styles such as shadows after the transition ends
169-
camAnimateTimer = setTimeout(() => {
154+
animateTimer = setTimeout(() => {
170155
camOptions.classList.replace("show", "unshow");
171156
}, 200);
172157
}
173-
camOptionsViewable = !camOptionsViewable;
174158
}
175159
function toggleResView(e) {
176-
clearTimeout(cresAnimateTimer);
160+
clearTimeout(animateTimer);
177161
resOptions.classList.toggle("noheight");
178-
resArrow.classList.toggle("trans")
179-
if (!resOptionsViewable) {
162+
document.getElementById("arrow_resolution").classList.toggle("trans");
163+
const hidden = resOptions.classList.value.search("unshow");
164+
if (hidden !== -1) {
180165
resOptions.classList.replace("unshow", "show");
181166
document.addEventListener("click", clickToHidden);
182167
}
183168
else {
184-
cresAnimateTimer = setTimeout(() => {
169+
animateTimer = setTimeout(() => {
185170
resOptions.classList.replace("show", "unshow");
186171
}, 200);
187172
}
188-
resOptionsViewable = !resOptionsViewable;
189173
}
190174
// when option is selected
191-
function camOptionSelected(e) {
175+
async function camOptionSelected(e) {
176+
let scanner = await pScanner;
177+
const currentCamera = await scanner.getCurrentCamera();
192178
if (currentCamera.deviceId === e.target.id) {
193179
return;
194180
}
195181
toggleMaskView();
196-
camSelectorInput.value = e.target.innerText;
197-
cameras.forEach(item => {
198-
if (item.deviceId === e.target.id) {
199-
currentCamera = item;
200-
return showScanner();
182+
const cameras = await scanner.getAllCameras();
183+
cameras.forEach(async camera => {
184+
if (camera.deviceId === e.target.id) {
185+
try {
186+
await scanner.setCurrentCamera(camera);
187+
} catch (ex) {
188+
alert('Play video failed: ' + (ex.message || ex));
189+
}
190+
renderResolutionSelector();
201191
}
202192
})
203193
}
204-
function resOptionSelected(e) {
194+
async function resOptionSelected(e) {
205195
const data = e.target.id.split("x");
196+
let scanner = await pScanner;
197+
const currentResolution = await scanner.getResolution();
206198
if (currentResolution[0] == data[0] && currentResolution[1] == data[1]) {
207199
return;
208200
}
209201
toggleMaskView();
210-
resSelectorInput.value = e.target.innerText;
211-
currentResolution = [parseInt(data[0]), parseInt(data[1])];
212-
showScanner();
202+
const targetResolution = [parseInt(data[0]), parseInt(data[1])];
203+
await scanner.setResolution(targetResolution);
204+
renderResolutionSelector();
213205
}
214206
// camera's styles mask show or not
215207
function toggleMaskView() {
216208
let dceLoading = document.getElementById('dce-loading');
217209
let dceMask = document.getElementById('dce-mask');
210+
let dceScanlight = document.getElementById('dce-scanlight');
218211
dceLoading.style.display = dceLoading.style.display === "none" ? "inline-block" : "none"
219212
dceMask.hidden = !dceMask.hidden;
213+
dceScanlight.hidden = !dceScanlight.hidden;
220214
}
221215
// click anywhere outside the options to collapse the options
222216
function clickToHidden(e) {
223-
if (camOptionsViewable && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
217+
const camViewable = camOptions.classList.value.search("unshow");
218+
const resViewable = resOptions.classList.value.search("unshow");
219+
if (camViewable === -1 && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") {
224220
toggleCamView();
225221
}
226-
if (resOptionsViewable && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
222+
if (resViewable ===-1 && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") {
227223
toggleResView();
228224
}
229-
if (!camOptionsViewable && !resOptionsViewable) {
225+
if (camViewable !== -1 && resViewable !== -1) {
230226
// trigger only once
231227
document.removeEventListener("click", arguments.callee)
232228
}

‎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)