[EPIC-5444] Document RTU UI example

* First version new document rtu ui * Moved barcode rtu ui example from rtu-ui/ -> rtu-ui-barcode/ * Add review screen config * Add cropping screen config * Add "Single-Page Scanning without review" config * Add "Multi-Page Scanning with review" config * Add "Single-Page Scanning with Finder Overlay" config * Add automatic filtering config * Adjust import to changed exports * Bugfix * Better title * Add example config for barcode formats * rtu document: storage usage example * rtu-ui-barcode: find & pick usecase * Update angular-js example to scanbot-web-sdk v7.0 * Update plain-js example to scanbot-web-sdk v7.0 * Update react-js example to scanbot-web-sdk v7.0 * Update svelte-js example to scanbot-web-sdk v7.0 * Update vue-js example to scanbot-web-sdk v7.0 * Update next-js example to scanbot-web-sdk v7.0 * Finish rtu-ui-document example * Update rtu ui barcode example to scanbot-web-sdk v7.0 * angular: v7.0.0-rc.1 * next: v7.0.0-rc.2; binary copy fix * classic examples: v7.0.0-rc.2 * rtu-ui: v7.0.0-rc.2 * update Libraries.txt * rm license --------- Co-authored-by: Aare Undo <aare.undo@gmail.com>
doo · Dec 18, 2024 · 7c10a3f · 7c10a3f
1 parent fb60a6e
commit 7c10a3f
Show file tree

Hide file tree

Showing 122 changed files with 7,038 additions and 539 deletions.
diff --git a/Libraries.txt b/Libraries.txt
diff --git a/angular-js/.eslint.json b/angular-js/.eslint.json
@@ -5,7 +5,10 @@
         "project": ["tsconfig.json", "e2e/tsconfig.json"],
         "createDefaultProgram": true
       },
-      "extends": ["../.eslint.json"]
+      "extends": ["../.eslint.json"],
+      "rules": {
+        "quotemark": [false]
+      }
     }
   ]
 }
diff --git a/angular-js/package-lock.json b/angular-js/package-lock.json
diff --git a/angular-js/package.json b/angular-js/package.json
@@ -8,7 +8,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "postinstall": "cp -R node_modules/scanbot-web-sdk/bundle/bin/complete src/assets/wasm"
+    "postinstall": "cp -R node_modules/scanbot-web-sdk/bundle/bin/complete/* src/assets/wasm"
   },
   "private": true,
   "dependencies": {
@@ -28,7 +28,7 @@
     "tslib": "1.14.1",
     "zone.js": "0.13.1",
     "@types/node": "^12.19.15",
-    "scanbot-web-sdk": "5.1.3"
+    "scanbot-web-sdk": "7.0.0-rc.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "16.1.3",

diff --git a/angular-js/src/app/barcode-scanner/barcode-scanner.component.ts b/angular-js/src/app/barcode-scanner/barcode-scanner.component.ts
@@ -4,20 +4,19 @@ import { Router } from "@angular/router";
 import { ToastrService } from "ngx-toastr";
 
 import {
-  Barcode,
-  BarcodeResult,
-  BarcodeScannerConfiguration,
+  BarcodeFormat, BarcodeItem,
+  BarcodeScannerConfiguration, BarcodeScannerResult, BarcodeScannerViewConfiguration,
 } from "scanbot-web-sdk/@types";
 import {
   IBarcodePolygonHandle,
-  IBarcodePolygonLabelHandle
+  IBarcodePolygonLabelHandle,
 } from "scanbot-web-sdk/@types/model/configuration/selection-overlay-configuration";
-import { BarcodeFormat } from "scanbot-web-sdk/@types/model/barcode/barcode-format";
 
 import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { DocumentRepository } from "../service/document-repository";
 import { NavigationUtils } from "../service/navigation-utils";
 import { Utils } from "../service/utils";
+import ScanbotSDK from "scanbot-web-sdk/webpack";
 
 @Component({
   selector: "app-barcode-scanner",
@@ -58,7 +57,6 @@ export class BarcodeScannerComponent implements OnInit {
 
   async startScanner() {
     const barcodeFormats: BarcodeFormat[] = [
-      "ONE_D",
       "AZTEC",
       "CODABAR",
       "CODE_39",
@@ -68,12 +66,13 @@ export class BarcodeScannerComponent implements OnInit {
       "EAN_8",
       "EAN_13",
       "ITF",
-      "MAXICODE",
+      "MAXI_CODE",
       "PDF_417",
       "QR_CODE",
+      "DATABAR",
+      "DATABAR_EXPANDED",
       "UPC_A",
       "UPC_E",
-      "UPC_EAN_EXTENSION",
       "MSI_PLESSEY",
       "IATA_2_OF_5",
       "INDUSTRIAL_2_OF_5",
@@ -84,28 +83,39 @@ export class BarcodeScannerComponent implements OnInit {
       "JAPAN_POST",
       "ROYAL_TNT_POST",
       "AUSTRALIA_POST",
-      "DATABAR",
-      "DATABAR_EXPANDED",
       "DATABAR_LIMITED",
+      "MICRO_PDF_417",
       "GS1_COMPOSITE",
+      "RMQR_CODE",
+      "CODE_11",
+      "CODE_32",
+      "PHARMA_CODE",
+      "PHARMA_CODE_TWO_TRACK",
+      "PZN"
     ];
 
 
     const isOverlyScanner = this.isOverlayScanner();
 
-    const configuration: BarcodeScannerConfiguration = {
+    const configuration: BarcodeScannerViewConfiguration = {
       onBarcodesDetected: this.onBarcodesDetected.bind(this),
       containerId: ScanbotSdkService.BARCODE_SCANNER_CONTAINER_ID,
-      barcodeFormats,
+      detectionParameters: {
+        barcodeFormatConfigurations: [
+          new ScanbotSDK.Config.BarcodeFormatCommonConfiguration({
+            formats: barcodeFormats
+          })
+        ]
+      },
       onError: this.barcodeScannerError.bind(this),
       preferredCamera: 'camera2 0, facing back',
       overlay: {
         visible: isOverlyScanner,
-        onBarcodeFound: (code: Barcode, polygon: IBarcodePolygonHandle, label: IBarcodePolygonLabelHandle) => {
+        onBarcodeFound: (code: BarcodeItem, polygon: IBarcodePolygonHandle, label: IBarcodePolygonLabelHandle) => {
           // You can override onBarcodeFound and create your own implementation for custom styling, e.g.
           // if you wish to only color in certain types of barcodes, you can find and pick them, as demonstrated below:
           if (code.format === "QR_CODE") {
-            polygon?.style({ fill: "rgba(255, 255, 0, 0.3)", stroke: "yellow" })
+            polygon?.style({ fillColor: "rgba(255, 255, 0, 0.3)", strokeColor: "yellow" });
           }
         }
       },
@@ -142,7 +152,7 @@ export class BarcodeScannerComponent implements OnInit {
     Utils.alert(e.name + ': ' + e.message);
   }
 
-  async onBarcodesDetected(result: BarcodeResult) {
+  async onBarcodesDetected(result: BarcodeScannerResult) {
     this.documents.addBarcodes(result.barcodes);
     this.toastr.success(Utils.formatBarcodes(result.barcodes), "Detected Barcodes!");
     const counter = NavigationUtils.getElementByClassName("barcode-counter");

diff --git a/angular-js/src/app/document-scanner/document-scanner.component.ts b/angular-js/src/app/document-scanner/document-scanner.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import {
   DocumentDetectionResult,
-  DocumentScannerConfiguration,
+  DocumentScannerConfiguration, DocumentScannerViewConfiguration,
 } from "scanbot-web-sdk/@types";
 import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { Router } from "@angular/router";
@@ -45,22 +45,29 @@ export class DocumentScannerComponent implements OnInit {
   }
 
   async startScanner() {
-    const configuration: DocumentScannerConfiguration = {
+    const configuration: DocumentScannerViewConfiguration = {
       onDocumentDetected: this.onDocumentDetected.bind(this),
       containerId: ScanbotSdkService.CONTAINER_ID,
       text: {
         hint: {
           OK: "Capturing your document...",
-          OK_SmallSize: "The document is too small. Try moving closer.",
-          OK_BadAngles:
+          OK_BUT_TOO_SMALL: "The document is too small. Try moving closer.",
+          OK_BUT_BAD_ANGLES:
             "This is a bad camera angle. Hold the device straight over the document.",
-          OK_BadAspectRatio:
+          OK_BUT_BAD_ASPECT_RATIO:
             "Rotate the device sideways, so that the document fits better into the screen.",
-          OK_OffCenter: "Try holding the device at the center of the document.",
-          Error_NothingDetected:
+          OK_BUT_OFF_CENTER: "Try holding the device at the center of the document.",
+          OK_BUT_TOO_DARK: "It is too dark. Try turning on a light.",
+          ERROR_NOTHING_DETECTED:
             "Please hold the device over a document to start scanning.",
-          Error_Brightness: "It is too dark. Try turning on a light.",
-          Error_Noise: "Please move the document to a clear surface.",
+          ERROR_TOO_DARK: "It is too dark. Try turning on a light.",
+          ERROR_TOO_NOISY: "Please move the document to a clear surface.",
+          NOT_ACQUIRED: "Hold the device over a document to start scanning.",
+          OK_BUT_ORIENTATION_MISMATCH: "Please rotate the device to portrait mode.",
+        },
+        initializing: {
+          enabled: true,
+          value: "Please wait a moment...",
         },
       },
       style: {
@@ -69,7 +76,7 @@ export class DocumentScannerComponent implements OnInit {
         outline: {
           polygon: {
             strokeCapturing: "green",
-            strokeWidth: 4
+            strokeWidthCapturing: 4
           }
         }
       },

diff --git a/angular-js/src/app/home/home.component.ts b/angular-js/src/app/home/home.component.ts
@@ -60,9 +60,9 @@ export class HomeComponent implements OnInit {
       const image = await ImageUtils.pick(ImageUtils.MIME_TYPE_JPEG);
 
       const contourDetectionResult = await this.sdk.detectDocument(image.original);
-      if (contourDetectionResult.success === true && contourDetectionResult.polygon) {
-        const cropped = await this.sdk.cropAndRotateImageCcw(image.original, contourDetectionResult.polygon, 0);
-        const documentDetectionResult = { ...contourDetectionResult, original: image.original, cropped: cropped };
+      if (contourDetectionResult.status.startsWith('OK') === true && contourDetectionResult.pointsNormalized) { //TODO
+        const cropped = await this.sdk.cropAndRotateImageCcw(image.original, contourDetectionResult.pointsNormalized, 0);
+        const documentDetectionResult = { ...contourDetectionResult, original: image.original, cropped };
 
         this.documents.add(documentDetectionResult);
         await Utils.alert("Detection successful");
@@ -72,10 +72,11 @@ export class HomeComponent implements OnInit {
     }
 
     if (e.id === FeatureId.BarcodePicker) {
-      const result = await ImageUtils.pick(ImageUtils.MIME_TYPE_JPEG, true);
+      const result = await ImageUtils.pick(ImageUtils.MIME_TYPE_JPEG);
+      console.log('result', result);
 
       const detection = await this.sdk?.detectBarcodes(
-        result.data
+        result.original
       );
       if (detection !== undefined) {
         await Utils.alert(Utils.formatBarcodes(detection.barcodes));

diff --git a/angular-js/src/app/image-details/image-details.component.ts b/angular-js/src/app/image-details/image-details.component.ts
@@ -4,7 +4,6 @@ import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { DocumentRepository } from "../service/document-repository";
 import { NavigationUtils } from "../service/navigation-utils";
 import Swal from "sweetalert2";
-import { ImageFilter } from "scanbot-web-sdk/@types";
 import { RoutePaths } from "../model/RoutePaths";
 
 @Component({

diff --git a/angular-js/src/app/mrz-scanner/mrz-scanner.component.ts b/angular-js/src/app/mrz-scanner/mrz-scanner.component.ts
@@ -4,7 +4,7 @@ import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { DocumentRepository } from "../service/document-repository";
 import { NavigationUtils } from "../service/navigation-utils";
 import { ToastrService } from "ngx-toastr";
-import { MrzResult } from "scanbot-web-sdk/@types/model/mrz/mrz-result";
+import { MrzScannerResult } from "scanbot-web-sdk/@types";
 import { Utils } from "../service/utils";
 
 @Component({
@@ -76,7 +76,7 @@ export class MrzScannerComponent implements OnInit {
     return input[key] ? (input[key].value + this.toConfidenceString(input, key)) : ''
   }
 
-  async onMrzDetected(mrz: MrzResult) {
+  async onMrzDetected(mrz: MrzScannerResult) {
     let text = "";
 
     text += "Document Type: " + this.parseMRZValue(mrz, 'documentType') + "<br>";

diff --git a/angular-js/src/app/service/document-repository.ts b/angular-js/src/app/service/document-repository.ts
@@ -1,14 +1,17 @@
 import { Injectable } from "@angular/core";
-import { Barcode, Polygon } from "scanbot-web-sdk/@types";
+import { BarcodeItem, Image, Polygon } from "scanbot-web-sdk/@types";
+import type {  } from "scanbot-web-sdk/@types/core-types";
 
 @Injectable()
 export class DocumentRepository {
-  private readonly pages: any[];
-  private activeIndex: number = -1;
 
   constructor() {
     this.pages = [];
   }
+  private readonly pages: any[];
+  private activeIndex = -1;
+
+  private readonly _barcodes: BarcodeItem[] = [];
 
   add(page: any) {
     this.pages.push(page);
@@ -22,7 +25,7 @@ export class DocumentRepository {
     return this.pages;
   }
 
-  updateActiveItem(image: Uint8Array, polygon: Polygon, rotations: number) {
+  updateActiveItem(image: Image, polygon: Polygon, rotations: number) {
     this.pages[this.activeIndex].cropped = image;
     this.pages[this.activeIndex].polygon = polygon;
     this.pages[this.activeIndex].rotations = rotations;
@@ -31,7 +34,7 @@ export class DocumentRepository {
   hasActiveItem() {
     return this.activeIndex !== -1;
   }
-  
+
   getActiveItem() {
     return this.pages[this.activeIndex];
   }
@@ -45,10 +48,8 @@ export class DocumentRepository {
     this.activeIndex = index;
   }
 
-  private readonly _barcodes: Barcode[] = [];
-
-  public addBarcodes(barcodes: Barcode[]) {
-    barcodes.forEach((barcode: Barcode) => {
+  public addBarcodes(barcodes: BarcodeItem[]) {
+    barcodes.forEach((barcode: BarcodeItem) => {
       this._barcodes.push(barcode);
     });
   }