feat: add option to take a photo or upload an image

felixindrawan · felixindrawan · commit 57e71b5c3284 · 2024-11-13T13:48:31.000-08:00
diff --git a/assets/arrow-down.svg b/assets/arrow-down.svg
diff --git a/assets/arrow-up.svg b/assets/arrow-up.svg
diff --git a/assets/external-link.svg b/assets/external-link.svg
@@ -0,0 +1,17 @@
+            <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>
diff --git a/assets/photo-camera.svg b/assets/photo-camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="1"> <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2"></path> <path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> </svg> 
diff --git a/assets/upload-menu.svg b/assets/upload-menu.svg
diff --git a/assets/upload.svg b/assets/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="1"> <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path> <path d="M7 9l5 -5l5 5"></path> <path d="M12 4l0 12"></path> </svg> 
diff --git a/assets/video-camera.svg b/assets/video-camera.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-v-10660718="" viewBox="0 0 29.308 17">
+            <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>
diff --git a/css/index.css b/css/index.css
@@ -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;
@@ -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%;
diff --git a/index.html b/index.html
@@ -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" />
@@ -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>
diff --git a/js/const.js b/js/const.js
@@ -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");
 
diff --git a/js/index.js b/js/index.js
@@ -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
@@ -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";
@@ -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";
+});
diff --git a/js/init.js b/js/init.js
