Skip to content

Commit

Permalink
Deploy preview for PR 14 🛫
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixindynamsoft
felixindynamsoft committed Nov 13, 2024
1 parent cae676d commit 680440b
Show file tree
Hide file tree
Showing 12 changed files with 209 additions and 128 deletions.
0 pr-preview/pr-14/assets/arrow-down 1.svg → pr-preview/pr-14/assets/arrow-down.svg
View file
File renamed without changes
0 pr-preview/pr-14/assets/arrow-up 1.svg → pr-preview/pr-14/assets/arrow-up.svg
View file
File renamed without changes
17 changes: 17 additions & 0 deletions pr-preview/pr-14/assets/external-link.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions pr-preview/pr-14/assets/photo-camera.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 pr-preview/pr-14/assets/upload-image.svg → pr-preview/pr-14/assets/upload-menu.svg
View file
File renamed without changes
1 change: 1 addition & 0 deletions pr-preview/pr-14/assets/upload.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions pr-preview/pr-14/assets/video-camera.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 47 additions & 3 deletions pr-preview/pr-14/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ img {
display: none;
}

.scanner-container .header .upload-image-btn {
.scanner-container .header .upload-menu-btn {
width: 30px;
height: 30px;
cursor: pointer;
Expand All @@ -247,15 +247,59 @@ img {
cursor: pointer;
}

.scanner-container .header .upload-image-icon {
.scanner-container .header .upload-menu-icon {
width: 24px;
height: 24px;
}

.scanner-container .header .upload-image-icon:hover {
.scanner-container .header .upload-menu-list {
position: absolute;
top: 54px; /* Header height 46px + triangle 8px*/
left: 70px;
background-color: #000000;
z-index: 3;
display: none;
border-right: #aaaaaa;
}

/* Tooltip Triangle */
.scanner-container .header .upload-menu-list::after {
content: "";
position: absolute;
top: -16px; /* At the top of the information list */
left: 1rem; /* 1rem margin */
/* margin-left: -5px; */
border-width: 8px;
border-style: solid;
border-color: transparent transparent #2b2b2b transparent; /* triangle */
}

.scanner-container .header .upload-menu-list .menu-item {
width: 100%;
border-bottom: 1px solid rgb(55, 55, 55);
padding: 10px;
cursor: pointer;
background-color: #2b2b2b;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
overflow: hidden;
user-select: none;
color: #aaaaaa;
font-size: 12px;
font-family: OpenSans-Regular;
text-decoration: none;
}

.scanner-container .header .upload-menu-list .menu-item:hover {
opacity: 0.8;
}

.scanner-container .header .upload-menu-list .menu-item:last-child {
border: unset;
}

.result-container {
position: absolute;
width: 100%;
Expand Down
107 changes: 19 additions & 88 deletions pr-preview/pr-14/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,45 +47,24 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
<div class="scanner-container">
<div class="header">
<div class="camera-selector" title="Select Camera">
<svg data-v-10660718="" viewBox="0 0 29.308 17" class="camera-svg">
<g data-v-10660718="" transform="translate(-346.925 -627.702)">
<g data-v-10660718="" transform="translate(347.425 628.202)">
<g data-v-10660718="">
<path
data-v-10660718=""
d="M365.791,644.2H348.656a1.231,1.231,0,0,1-1.231-1.231V629.433a1.231,1.231,0,0,1,1.231-1.231h16a1.231,1.231,0,0,1,1.231,1.231v14.733"
transform="translate(-347.425 -628.202)"
fill="none"
stroke="#aaa"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
></path>
<path
data-v-10660718=""
d="M371.81,640.606a1.23,1.23,0,0,1-1.781,1.1l-4.923-2.462a1.229,1.229,0,0,1-.681-1.1v-4.633a1.232,1.232,0,0,1,.681-1.1l4.923-2.462a1.231,1.231,0,0,1,1.781,1.1Z"
transform="translate(-343.502 -627.828)"
fill="none"
stroke="#aaa"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
></path>
</g>
</g>
</g>
</svg>
<img class="down" src="./assets/arrow-down 1.svg" alt="down" />
<img class="up" src="./assets/arrow-up 1.svg" alt="up" />
<img class="camera-svg" src="./assets/video-camera.svg" alt="camera" />
<img class="down" src="./assets/arrow-down.svg" alt="down" />
<img class="up" src="./assets/arrow-up.svg" alt="up" />
</div>
<div class="camera-list"></div>
<input type="file" class="upload-image-input" style="display: none" />
<div
class="upload-image-btn"
onclick="document.querySelector('.upload-image-input').click()"
title="Upload Image"
>
<img class="upload-image-icon" src="./assets/upload-image.svg" alt="upload-image" />
<div class="upload-menu-btn">
<img class="upload-menu-icon" src="./assets/upload-menu.svg" alt="upload-menu" />
</div>
<div class="upload-menu-list">
<div class="menu-item take-photo-btn">
Take a photo
<img src="./assets/photo-camera.svg" alt="take-photo-icon" />
</div>
<div class="menu-item upload-image-btn" onclick="document.querySelector('.upload-image-input').click()">
Upload an image
<img src="./assets/upload.svg" alt="upload-icon" />
</div>
<input type="file" class="upload-image-input" style="display: none" />
</div>
<div class="music-container">
<img class="music" src="./assets/music-selected.svg" alt="music" title="Turn sound off" />
Expand Down Expand Up @@ -117,67 +96,19 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
target="_blank"
>
About
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-external-link"
width="18"
height="18"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#aaaaaa"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
<path d="M11 13l9 -9" />
<path d="M15 4h5v5" />
</svg>
<img src="./assets/external-link.svg" alt="link-icon" />
</a>
<a class="information-item" href="https://github.com/Dynamsoft/mrz-scanner-javascript/" target="_blank">
Github Projects
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-external-link"
width="18"
height="18"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#aaaaaa"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
<path d="M11 13l9 -9" />
<path d="M15 4h5v5" />
</svg>
<img src="./assets/external-link.svg" alt="link-icon" />
</a>
<a
class="information-item"
href="https://www.dynamsoft.com/contact/?utm_source=mrzdemo&package=js"
target="_blank"
>
Contact Us
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-external-link"
width="18"
height="18"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#aaaaaa"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
<path d="M11 13l9 -9" />
<path d="M15 4h5v5" />
</svg>
<img src="./assets/external-link.svg" alt="link-icon" />
</a>
</div>
<span id="notification"></span>
Expand Down
8 changes: 6 additions & 2 deletions pr-preview/pr-14/js/const.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,15 @@ const homePage = document.querySelector(".home-page");

const cameraViewContainer = document.querySelector(".camera-view-container");

const uploadImageInput = document.querySelector(".upload-image-input");

const cameraListContainer = document.querySelector(".camera-list");
const cameraSelector = document.querySelector(".camera-selector");

const uploadMenuBtn = document.querySelector(".upload-menu-btn");
const uploadMenuList = document.querySelector(".upload-menu-list");
const uploadImageBtn = document.querySelector(".upload-image-btn");
const uploadImageInput = document.querySelector(".upload-image-input");
const takePhotoBtn = document.querySelector(".take-photo-btn");

const informationBtn = document.querySelectorAll(".information-btn");
const informationListContainer = document.querySelector(".information-list");

Expand Down
39 changes: 37 additions & 2 deletions pr-preview/pr-14/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,11 @@ const region = () => {
// -----------Logic for calculating scan region ↑------------

window.addEventListener("click", () => {
cameraListContainer.style.display = "none";
cameraListContainer.style.display = "none"; // hide camera list and reset arrow indicator
up.style.display = "none";
down.style.display = "inline-block";
informationListContainer.style.display = "none";
informationListContainer.style.display = "none"; // hide information menu
uploadMenuList.style.display = "none"; // hide upload image menu
});

// Recalculate the scan region when the window size changes
Expand Down Expand Up @@ -162,8 +163,30 @@ uploadImageInput.addEventListener("change", async (event) => {
console.error(errMsg);
}
});
takePhotoBtn.addEventListener("click", async (event) => {
try {
const image = cameraEnhancer.fetchImage();
const imageCvs = image.toCanvas();

// Open the camera after the model and .wasm files have loaded
pInit = pInit || (await init);
await pDataLoad.promise;

// Decode selected image with 'both' template.
const result = await cvRouter.capture(imageCvs, SCAN_TEMPLATES.both);
console.log(result);
handleCapturedResult(result, image);
} catch (ex) {
let errMsg = ex.message || ex;
alert(errMsg);
console.error(errMsg);
}
});

cameraSelector.addEventListener("click", (e) => {
informationListContainer.style.display = "none"; // hide information menu
uploadMenuList.style.display = "none"; // hide upload image menu

e.stopPropagation();
const isShow = cameraListContainer.style.display === "block";
cameraListContainer.style.display = isShow ? "none" : "block";
Expand All @@ -187,8 +210,20 @@ closeSoundBtn.addEventListener("click", () => {

informationBtn.forEach((infoBtn) =>
infoBtn.addEventListener("click", (e) => {
uploadMenuList.style.display = "none"; // hide upload image menu
cameraListContainer.style.display = "none"; // hide camera list

e.stopPropagation();
const isShow = informationListContainer.style.display === "block";
informationListContainer.style.display = isShow ? "none" : "block";
})
);

uploadMenuBtn.addEventListener("click", (e) => {
informationListContainer.style.display = "none"; // hide information menu
cameraListContainer.style.display = "none"; // hide camera list

e.stopPropagation();
const isShow = uploadMenuList.style.display === "block";
uploadMenuList.style.display = isShow ? "none" : "block";
});
Loading

0 comments on commit 680440b

Please sign in to comment.