diff --git a/.gitignore b/.gitignore index de6b2050..1e0df221 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules + # local env files .env.local .env.*.local diff --git a/1.hello-world/9.read-video-electron/index.html b/1.hello-world/9.read-video-electron/index.html index 27bc4dd2..9316e0c1 100644 --- a/1.hello-world/9.read-video-electron/index.html +++ b/1.hello-world/9.read-video-electron/index.html @@ -15,7 +15,6 @@

Hello World for Electron

- diff --git a/2.ui-tweaking/2.read-video-no-extra-control.html b/2.ui-tweaking/2.read-video-no-extra-control.html index 099919bf..427beb89 100644 --- a/2.ui-tweaking/2.read-video-no-extra-control.html +++ b/2.ui-tweaking/2.read-video-no-extra-control.html @@ -40,7 +40,7 @@

Hide UI Controllers

try { let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); await scanner.setUIElement(document.getElementById('div-ui-container')); - scanner.onUniqueRead = (txt, result) => { alert(text); }; + scanner.onUniqueRead = (txt, result) => { alert(txt); }; await scanner.open(); } catch (ex) { alert(ex.message); diff --git a/2.ui-tweaking/3.read-video-with-external-control.html b/2.ui-tweaking/3.read-video-with-external-control.html index 018f2724..79cb7ac0 100644 --- a/2.ui-tweaking/3.read-video-with-external-control.html +++ b/2.ui-tweaking/3.read-video-with-external-control.html @@ -13,39 +13,37 @@

Customized UI

-
-
-
-
- - - - -
-
-
    -
-
+
+
+
+ + + +
-
-
- - - - -
-
-
    -
    • -
  • ask 1920 x 1080
    • -
  • ask 1280 x 720
    • -
  • ask 720 x 576
    • -
  • ask 640 x 480
    • -
  • ask 480 x 360
    • -
  • ask 320 x 240
    • -
  • ask 176 x 144
    • -
-
+
+
    +
+
+
+
+
+ + + + +
+
+
    +
    • +
  • ask 1920 x 1080
    • +
  • ask 1280 x 720
    • +
  • ask 720 x 576
    • +
  • ask 640 x 480
    • +
  • ask 480 x 360
    • +
  • ask 320 x 240
    • +
  • ask 176 x 144
    • +
@@ -60,7 +58,6 @@

Customized UI

Toggle Sound
-
@@ -87,22 +84,9 @@

Customized UI

// define html elements needed const camOptions = document.getElementById("options_camera"); - const camArrow = document.getElementById("arrow_camera"); - const camSelectorInput = document.getElementById("selector_input_camera"); - const cameraUL = document.getElementById("ul_options_camera"); const resOptions = document.getElementById("options_resolution"); - const resArrow = document.getElementById("arrow_resolution"); - const resSelectorInput = document.getElementById("selector_input_resolution"); - const gotResolution = document.querySelector("#gotResolution span"); - const scanlight = document.querySelector('.dce-scanlight'); - // define some required variables - let camOptionsViewable = false; - let resOptionsViewable = false; - let camAnimateTimer = null; - let cresAnimateTimer = null; - let cameras = {}; - let currentCamera = null; - let currentResolution = null; + // timer for animation + let animateTimer = null; // scanner for decoding video let pScanner = null; let scanRegions = [[5, 5, 95, 95], [25, 25, 75, 75], [10, 33, 90, 66], [33, 10, 66, 90], [0, 0, 100, 100]], regionIndex = 0; @@ -115,181 +99,184 @@

Customized UI

throw ex; } })(); + // add the corresponding event to the controllers + document.getElementById('btn-show-scanner').addEventListener('click', async () => { + toggleBtnView(false); + // decode video from camera + try { + let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); + await scanner.setUIElement(document.getElementById('div-ui-container')); + scanner.onUniqueRead = (txt, result) => { alert(txt); }; + await scanner.show(); + updateOptions(); + updateCurrentResolution(); + } catch (ex) { + alert(ex.message); + throw ex; + } + }); + document.getElementById('btn-hide-scanner').addEventListener('click', async () => { + toggleBtnView(true); + let scanner = await pScanner; + scanner && scanner.hide(); + }); + document.getElementById('toggleSound').addEventListener("click", async () => { + if (pScanner) { + (await pScanner).bPlaySoundOnSuccessfulRead = this.checked; + } + }); + document.getElementById('toggleScanLight').addEventListener("click", () => { + let checked = document.getElementById("toggleScanLight").checked; + setScanLightView(checked); + }); + document.getElementById('toggleScanRect').addEventListener("click", async () => { + if (pScanner) { + let scanner = await pScanner; + let region = scanRegions[regionIndex]; + regionIndex++; + if (regionIndex === scanRegions.length) regionIndex = 0; + let settings = await scanner.getRuntimeSettings() + settings.region = { + regionLeft: region[0], + regionTop: region[1], + regionRight: region[2], + regionBottom: region[3], + regionMeasuredByPercentage: 1 + }; + await scanner.updateRuntimeSettings(settings); + } + }); + document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView); + document.getElementById("res_selector_switch").addEventListener("click", toggleResView); + function toggleBtnView(boolean) { document.getElementById('btn-hide-scanner').hidden = boolean; document.getElementById('btn-show-scanner').hidden = !boolean; } function setScanLightView(boolean) { - if (scanlight) { - scanlight.hidden = !boolean; - } + document.querySelector('.dce-scanlight').hidden = !boolean; } // when the selector is clicked function toggleCamView(e) { // expanding and collapsing control options by changing the classList - clearTimeout(camAnimateTimer); + clearTimeout(animateTimer); camOptions.classList.toggle("noheight"); - camArrow.classList.toggle("trans"); - if (!camOptionsViewable) { + document.getElementById("arrow_camera").classList.toggle("trans"); + const hidden = camOptions.classList.value.search("unshow"); + if (hidden !== -1) { camOptions.classList.replace("unshow", "show"); document.addEventListener("click", clickToHidden); } else { // remove styles such as shadows after the transition ends - camAnimateTimer = setTimeout(() => { + animateTimer = setTimeout(() => { camOptions.classList.replace("show", "unshow"); }, 200); } - camOptionsViewable = !camOptionsViewable } function toggleResView(e) { - clearTimeout(cresAnimateTimer); + clearTimeout(animateTimer); resOptions.classList.toggle("noheight"); - resArrow.classList.toggle("trans") - if (!resOptionsViewable) { + document.getElementById("arrow_resolution").classList.toggle("trans"); + const hidden = resOptions.classList.value.search("unshow"); + if (hidden !== -1) { resOptions.classList.replace("unshow", "show"); document.addEventListener("click", clickToHidden); } else { - cresAnimateTimer = setTimeout(() => { + animateTimer = setTimeout(() => { resOptions.classList.replace("show", "unshow"); }, 200); } - resOptionsViewable = !resOptionsViewable } // when option is selected async function camOptionSelected(e) { - if (currentCamera.deviceId === e.target.id) { + let scanner = await pScanner; + const currentCamera = await scanner.getCurrentCamera(); + if (!currentCamera || currentCamera.deviceId === e.target.id) { return; } setScanLightView(false); - camSelectorInput.value = e.target.innerText; - let scanner = await pScanner; - cameras.forEach(async item => { - if (item.deviceId === e.target.id) { + const cameras = await scanner.getAllCameras(); + cameras.forEach(async camera => { + if (camera.deviceId === e.target.id) { try { - let resolution = await scanner.setCurrentCamera(item); - currentResolution = [resolution.width, resolution.height]; + await scanner.setCurrentCamera(camera); } catch (ex) { alert('Play video failed: ' + (ex.message || ex)); } updateOptions(); + updateCurrentResolution(); } }); } async function resOptionSelected(e) { const data = e.target.id.split("x"); + let scanner = await pScanner; + const currentResolution = await scanner.getResolution(); if (currentResolution[0] == data[0] && currentResolution[1] == data[1]) { return; } setScanLightView(false); - resSelectorInput.value = e.target.innerText; - let targetResolution = [parseInt(data[0]), parseInt(data[1])]; - let scanner = await pScanner - currentResolution = await scanner.setResolution(targetResolution); - currentResolution = [currentResolution.width, currentResolution.height]; + const targetResolution = [parseInt(data[0]), parseInt(data[1])]; + await scanner.setResolution(targetResolution); updateCurrentResolution(); } - // update and re-render options + // update or re-render options async function updateOptions() { let scanner = await pScanner; - cameras = await scanner.getAllCameras(); - cameraUL.innerHTML = ""; - cameras.forEach(item => { + const cameras = await scanner.getAllCameras(); + document.getElementById("ul_options_camera").innerHTML = ""; + cameras.forEach(camera => { let li = document.createElement("li"); let span = document.createElement("span"); - span.setAttribute("id", item.deviceId); - span.innerText = item.label; + span.setAttribute("id", camera.deviceId); + span.innerText = camera.label; li.appendChild(span); - cameraUL.appendChild(li); + document.getElementById("ul_options_camera").appendChild(li); }); - currentCamera = await scanner.getCurrentCamera(); - const camOption = document.querySelectorAll("#ul_options_camera span"); - camOption.forEach(item => { - item.addEventListener("click", camOptionSelected); - if (item.id === currentCamera.deviceId) { - camSelectorInput.value = item.innerText; - item.classList.add("selected"); + const currentCamera = await scanner.getCurrentCamera(); + let camOption = document.querySelectorAll("#ul_options_camera span"); + camOption.forEach(sapn => { + sapn.addEventListener("click", camOptionSelected); + if (!currentCamera || sapn.id === currentCamera.deviceId) { + document.getElementById("selector_input_camera").value = sapn.innerText; + sapn.classList.add("selected"); } else { - item.classList.remove("selected"); + sapn.classList.remove("selected"); } }) - const resOption = document.querySelectorAll("#ul_options_resolution span"); + let resOption = document.querySelectorAll("#ul_options_resolution span"); for (let i = 0; i < resOption.length; i++) { resOption[i].addEventListener("click", resOptionSelected); }; - currentResolution = await scanner.getResolution(); - updateCurrentResolution(); } - function updateCurrentResolution(res) { + async function updateCurrentResolution() { + let scanner = await pScanner; + const currentResolution = await scanner.getResolution(); + let gotResolution = document.querySelector("#gotResolution span"); gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1]; gotResolution.id = currentResolution[0] + 'x' + currentResolution[1]; gotResolution.classList.add("selected"); - resSelectorInput.value = gotResolution.innerText; - let checked = document.getElementById("toggleScanLight").checked; + document.getElementById("selector_input_resolution").value = gotResolution.innerText; + const checked = document.getElementById("toggleScanLight").checked; setScanLightView(checked); } function clickToHidden(e) { - if (camOptionsViewable && e.target.id != "selector_input_camera" && e.target.id != "arrow_camera" && e.target.parentNode.id != "arrow_camera") { + const camViewable = camOptions.classList.value.search("unshow"); + const resViewable = resOptions.classList.value.search("unshow"); + if (camViewable === -1 && e.target.id !== "selector_input_camera" && e.target.id !== "arrow_camera" && e.target.parentNode.id !== "arrow_camera") { toggleCamView(); } - if (resOptionsViewable && e.target.id != "selector_input_resolution" && e.target.id != "arrow_resolution" && e.target.parentNode.id != "arrow_resolution") { + if (resViewable ===-1 && e.target.id !== "selector_input_resolution" && e.target.id !== "arrow_resolution" && e.target.parentNode.id !== "arrow_resolution") { toggleResView(); } - if (!camOptionsViewable && !resOptionsViewable) { + if (camViewable !== -1 && resViewable !== -1) { // trigger only once document.removeEventListener("click", arguments.callee) } } - // add the corresponding event to the controllers - document.getElementById('toggleSound').addEventListener("click", async () => { - if (pScanner) { - (await pScanner).bPlaySoundOnSuccessfulRead = this.checked; - } - }); - document.getElementById('toggleScanLight').addEventListener("click", () => { - let checked = document.getElementById("toggleScanLight").checked; - setScanLightView(checked); - }); - document.getElementById('toggleScanRect').addEventListener("click", async () => { - if (pScanner) { - let scanner = await pScanner; - let region = scanRegions[regionIndex]; - regionIndex++; - if (regionIndex === scanRegions.length) regionIndex = 0; - let settings = await scanner.getRuntimeSettings() - settings.region = { - regionLeft: region[0], - regionTop: region[1], - regionRight: region[2], - regionBottom: region[3], - regionMeasuredByPercentage: 1 - }; - await scanner.updateRuntimeSettings(settings); - } - }); - document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView); - document.getElementById("res_selector_switch").addEventListener("click", toggleResView); - document.getElementById('btn-show-scanner').addEventListener('click', async () => { - toggleBtnView(false); - // decode video from camera - try { - let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance()); - await scanner.setUIElement(document.getElementById('div-ui-container')); - scanner.onUniqueRead = (txt, result) => { alert(txt); }; - await scanner.show(); - updateOptions(); - } catch (ex) { - alert(ex.message); - throw ex; - } - }); - document.getElementById('btn-hide-scanner').addEventListener('click', async () => { - toggleBtnView(true); - let scanner = await pScanner; - scanner && scanner.hide(); - }); - \ No newline at end of file +