Skip to content

update #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cube-J merged 10 commits into from
Mar 31, 2022
Merged

update #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6983e99
rebuild customd selector and add result alert
lim-kim930 Mar 25, 2022
409618d
Create .gitignore
Cube-J Mar 25, 2022
0017da1
Update .gitignore
Cube-J Mar 25, 2022
0abe494
Update index.html
Cube-J Mar 25, 2022
6fca958
update
lim-kim930 Mar 25, 2022
6125609
correct the use of await
lim-kim930 Mar 25, 2022
be0d028
Update 3.read-video-with-external-control.html
lim-kim930 Mar 25, 2022
735006a
Update index.html
Tom-Dynamsoft Mar 31, 2022
477e0f5
Merge pull request #19 from Dynamsoft/_dev
Cube-J Mar 31, 2022
49641bd
Merge branch 'demo' into master
Cube-J Mar 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.DS_Store
node_modules


# local env files
.env.local
.env.*.local
Expand Down
1 change: 0 additions & 1 deletion 1.hello-world/9.read-video-electron/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ <h1 style="font-size: 1.5em;">Hello World for Electron</h1>
<div class="container">
<div id="barcodeScannerUI"></div>
</div>
<!-- <script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script> -->
<script src="./node_modules/dynamsoft-javascript-barcode/dist/dbr.js"></script>
<script src="action.js"></script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion 2.ui-tweaking/2.read-video-no-extra-control.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h1 style="font-size: 1.5em;">Hide UI Controllers</h1>
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);
Expand Down
281 changes: 132 additions & 149 deletions 2.ui-tweaking/3.read-video-with-external-control.html
View file
Open in desktop

Large diffs are not rendered by default.

146 changes: 71 additions & 75 deletions 2.ui-tweaking/5.read-video-with-custom-default-ui.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,21 +65,9 @@ <h1>Customized Default UI</h1>

// 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");
// 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;
(async () => {
Expand All @@ -92,141 +80,149 @@ <h1>Customized Default UI</h1>
throw ex;
}
})();
// add the click event to the selector
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);
// decode video from camera
async function showScanner() {
try {
let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
if (currentCamera) {
await scanner.setCurrentCamera(currentCamera);
}
if (currentResolution) {
await scanner.setResolution(currentResolution);
}
// when the last two values are judged to be false, it means this is the first time into the function showScanner
if (!currentResolution && !currentCamera) {
document.getElementById('UIElement').appendChild(scanner.getUIElement());
scanner.onUniqueRead = (txt, result) => { alert(txt); };
await scanner.open();
cameras = await scanner.getAllCameras();
}
currentCamera = await scanner.getCurrentCamera();
currentResolution = await scanner.getResolution();
toggleMaskView();
renderSelector();
document.getElementById('UIElement').appendChild(scanner.getUIElement());
scanner.onUniqueRead = (txt, result) => { alert(txt); };
await scanner.open();
renderCamreaSelector();
renderResolutionSelector();
} catch (ex) {
alert(ex.message);
throw ex;
}
}
// initial selector renderer
function renderSelector() {
// render the selector's options based on the fetched value
cameraUL.innerHTML = "";
cameras.forEach(item => {
async function renderCamreaSelector() {
let scanner = await pScanner;
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);
});
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
// highlight and display the selected option and add click event to selector
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();
camOption.forEach(sapn => {
sapn.addEventListener("click", camOptionSelected);
if (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");
}
})
resSelectorInput.value = gotResolution.innerText;
});
}
async function renderResolutionSelector() {
let scanner = await pScanner;
const currentResolution = await scanner.getResolution();
const gotResolution = document.querySelector("#gotResolution span");
gotResolution.innerText = 'got ' + currentResolution[0] + ' x ' + currentResolution[1];
gotResolution.id = currentResolution[0] + 'x' + currentResolution[1];
document.getElementById("selector_input_resolution").value = gotResolution.innerText;
gotResolution.classList.add("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);
};
document.getElementById("cam_selector_switch").addEventListener("click", toggleCamView);
document.getElementById("res_selector_switch").addEventListener("click", toggleResView);

toggleMaskView();
}
// 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
function camOptionSelected(e) {
async function camOptionSelected(e) {
let scanner = await pScanner;
const currentCamera = await scanner.getCurrentCamera();
if (currentCamera.deviceId === e.target.id) {
return;
}
toggleMaskView();
camSelectorInput.value = e.target.innerText;
cameras.forEach(item => {
if (item.deviceId === e.target.id) {
currentCamera = item;
return showScanner();
const cameras = await scanner.getAllCameras();
cameras.forEach(async camera => {
if (camera.deviceId === e.target.id) {
try {
await scanner.setCurrentCamera(camera);
} catch (ex) {
alert('Play video failed: ' + (ex.message || ex));
}
renderResolutionSelector();
}
})
}
function resOptionSelected(e) {
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;
}
toggleMaskView();
resSelectorInput.value = e.target.innerText;
currentResolution = [parseInt(data[0]), parseInt(data[1])];
showScanner();
const targetResolution = [parseInt(data[0]), parseInt(data[1])];
await scanner.setResolution(targetResolution);
renderResolutionSelector();
}
// camera's styles mask show or not
function toggleMaskView() {
let dceLoading = document.getElementById('dce-loading');
let dceMask = document.getElementById('dce-mask');
let dceScanlight = document.getElementById('dce-scanlight');
dceLoading.style.display = dceLoading.style.display === "none" ? "inline-block" : "none"
dceMask.hidden = !dceMask.hidden;
dceScanlight.hidden = !dceScanlight.hidden;
}
// click anywhere outside the options to collapse the options
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)
}
Expand Down
4 changes: 2 additions & 2 deletions 2.ui-tweaking/my.dbr.scanner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<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>
<div class="dce-video-container" style="position:absolute;width:100%;height:100%;"></div>
<div class="dce-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden;">
<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>
<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>
</div>
<div id="dce-mask" hidden style="width:100%;height:100%;position:absolute;top:-10px;left:-10px;padding:10px;">
<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>
Expand All @@ -22,7 +22,7 @@
}
@keyframes dce-scanlight {
from { top: 0px; }
to { top: calc(100% - 87px) }
to { top: calc(100% - 72px) }
}
</style>
<script>
Expand Down
Loading