Update

yushulx · Oct 11, 2024 · fac02d4 · fac02d4
1 parent 10e86a5
commit fac02d4
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 149 deletions.
diff --git a/src/app/mrz-reader/mrz-reader.component.css b/src/app/mrz-reader/mrz-reader.component.css
@@ -43,36 +43,4 @@ textarea {
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
-
-.loading-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.spinner {
-    width: 50px;
-    height: 50px;
-    border: 5px solid #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%);
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
 }
diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html
@@ -1,3 +1,7 @@
+<div *ngIf="isLoading" id="loading-indicator" class="loading-indicator">
+  <div class="spinner"></div>
+</div>
+
 <div>
   <div>
     Get a License key from <a

diff --git a/src/app/product-list/product-list.component.ts b/src/app/product-list/product-list.component.ts
@@ -19,6 +19,7 @@ import Dynamsoft from 'dwt';
   styleUrls: ['./product-list.component.css'],
 })
 export class ProductListComponent {
+  isLoading = false;
   products = products;
   inputText: string = '';
   processedText: string = '';
@@ -28,7 +29,7 @@ export class ProductListComponent {
   }
 
   async activate(): Promise<void> {
-
+    this.isLoading = true;
     this.processedText = this.inputText.toUpperCase();
     // Configure the paths where the .wasm files and other necessary resources for modules are located.
     CoreModule.engineResourcePaths = {
@@ -65,9 +66,10 @@ export class ProductListComponent {
       Dynamsoft.DWT.ResourcesPath = "assets/dynamic-web-twain";
       Dynamsoft.DWT.UseLocalService = true;
     } catch (error) {
-      alert(error);
+      console.log(error);
     }
 
+    this.isLoading = false;
   }
 
   toggleDivVisibility(): void {

diff --git a/src/app/products.ts b/src/app/products.ts
@@ -8,12 +8,12 @@ export interface Product {
 export const products = [
   {
     id: 'reader',
-    name: 'Barcode and QR Code Reader',
+    name: 'Barcode and QR Code Reader (File)',
     description: 'Scan barcode and QR code from image files',
   },
   {
     id: 'scanner',
-    name: 'Barcode and QR Code Scanner',
+    name: 'Barcode and QR Code Scanner (Camera)',
     description: 'Scan barcode and QR code from camera stream',
   },
   {
@@ -28,28 +28,28 @@ export const products = [
   },
   {
     id: 'mrz-reader',
-    name: 'MRZ Reader',
+    name: 'MRZ Reader (File)',
     description: 'Scan MRZ from image files',
   },
   {
     id: 'mrz-scanner',
-    name: 'MRZ Scanner',
+    name: 'MRZ Scanner (Camera)',
     description: 'Scan MRZ from camera stream',
   },
   {
     id: 'document-viewer',
-    name: 'Document Viewer',
+    name: 'Document Viewer (File)',
     description: 'View, edit and save documents',
   },
 
   {
     id: 'acquire-image',
-    name: 'Acquire Image',
+    name: 'Acquire Image (TWAIN/SANE/ICA Scanner)',
     description: 'The basic document scanning functionality',
   },
   {
     id: 'image-editor',
-    name: 'Image Editor',
+    name: 'Image Editor (TWAIN/SANE/ICA Scanner)',
     description: 'Image editing: rotate, mirror, flip and more',
   },
 ];

diff --git a/src/styles.css b/src/styles.css
@@ -1,111 +1,147 @@
 /* Global Styles */
 
 * {
-    font-family: 'Roboto', Arial, sans-serif;
-    color: #616161;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  body {
-    margin: 0;
-  }
-
-  .container {
-    display: flex;
-    flex-direction: row;
-  }
-
-  router-outlet + *  {
-    padding: 0 16px;
-  }
-
-  /* Text */
-
-  h1 {
-    font-size: 32px;
-  }
-
-  h2 {
-    font-size: 20px;
-  }
-
-  h1, h2 {
-    font-weight: lighter;
-  }
-
-  p {
-    font-size: 14px;
-  }
-
-  /* Hyperlink */
-
-  a {
-    cursor: pointer;
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    opacity: 0.8;
-  }
-
-  /* Input */
-
-  input {
-    font-size: 14px;
-    border-radius: 2px;
-    padding: 8px;
-    margin-bottom: 16px;
-    border: 1px solid #BDBDBD;
-  }
-
-  label {
-    font-size: 12px;
-    font-weight: bold;
-    margin-bottom: 4px;
-    display: block;
-    text-transform: uppercase;
-  }
-
-  /* Button */
-  .button, button {
-    display: inline-flex;
-    align-items: center;
-    padding: 8px 16px;
-    border-radius: 2px;
-    font-size: 14px;
-    cursor: pointer;
-    background-color: #1976d2;
-    color: white;
-    border: none;
-  }
-
-  .button:hover, button:hover {
-    opacity: 0.8;
-    font-weight: normal;
-  }
-
-  .button:disabled, button:disabled {
-    opacity: 0.5;
-    cursor: auto;
-  }
-
-  /* Top Bar */
-
-  app-top-bar {
-    width: 100%;
-    height: 68px;
-    background-color: #1976d2;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  app-top-bar h1 {
-    color: white;
-    margin: 0;
-  }
+  font-family: 'Roboto', Arial, sans-serif;
+  color: #616161;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+router-outlet+* {
+  padding: 0 16px;
+}
+
+/* Text */
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h1,
+h2 {
+  font-weight: lighter;
+}
+
+p {
+  font-size: 14px;
+}
+
+/* Hyperlink */
+
+a {
+  cursor: pointer;
+  color: #1976d2;
+  text-decoration: none;
+}
+
+a:hover {
+  opacity: 0.8;
+}
+
+/* Input */
+
+input {
+  font-size: 14px;
+  border-radius: 2px;
+  padding: 8px;
+  margin-bottom: 16px;
+  border: 1px solid #BDBDBD;
+}
+
+label {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  display: block;
+  text-transform: uppercase;
+}
+
+/* Button */
+.button,
+button {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 2px;
+  font-size: 14px;
+  cursor: pointer;
+  background-color: #1976d2;
+  color: white;
+  border: none;
+}
+
+.button:hover,
+button:hover {
+  opacity: 0.8;
+  font-weight: normal;
+}
+
+.button:disabled,
+button:disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
+
+/* Top Bar */
+
+app-top-bar {
+  width: 100%;
+  height: 68px;
+  background-color: #1976d2;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+app-top-bar h1 {
+  color: white;
+  margin: 0;
+}
+
+.loading-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%);
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}