[EPIC-5444] Document RTU UI example (#103)

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]
+      }
     }
   ]
 }

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",

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");

angular-js/src/app/cropping/cropping.component.ts

@@ -45,7 +45,7 @@ export class CroppingComponent implements OnInit {
 
     const options = {
       containerId: "cropping-view-container",
-      image: this.repository.getActiveItem().original,
+      image: this.repository.getActiveItem().originalImage,
       polygon: this.repository.getActiveItem().polygon,
       disableScroll: true,
       rotations: this.repository.getActiveItem().rotations ?? 0,

angular-js/src/app/document-scanner/document-scanner.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit } from "@angular/core";
 import {
+  CroppedDetectionResult,
   DocumentDetectionResult,
-  DocumentScannerConfiguration,
+  DocumentScannerConfiguration, DocumentScannerViewConfiguration,
 } from "scanbot-web-sdk/@types";
 import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { Router } from "@angular/router";
 import { NavigationUtils } from "../service/navigation-utils";
-import { DocumentRepository } from "../service/document-repository";
+import { DocumentRepository, SBDocumentResult } from "../service/document-repository";
 import ViewUtils from "../service/view-utils";
 import { Utils } from "../service/utils";
 
@@ -45,22 +46,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 +77,7 @@ export class DocumentScannerComponent implements OnInit {
         outline: {
           polygon: {
             strokeCapturing: "green",
-            strokeWidth: 4
+            strokeWidthCapturing: 4
           }
         }
       },
@@ -90,9 +98,14 @@ export class DocumentScannerComponent implements OnInit {
     Utils.alert(e.name + ': ' + e.message);
   }
 
-  async onDocumentDetected(result: DocumentDetectionResult) {
+  async onDocumentDetected(result: CroppedDetectionResult) {
     ViewUtils.flash();
-    this.documents.add(result);
+    const document: SBDocumentResult = {
+      originalImage: result.originalImage,
+      croppedImage: result.croppedImage,
+      polygon: result.pointsNormalized,
+    }
+    this.documents.add(document);
     const counter = NavigationUtils.getElementByClassName(
       "scanner-page-counter"
     );

angular-js/src/app/home/home.component.ts

@@ -3,15 +3,17 @@ import { Router } from "@angular/router";
 import { ScanbotSdkService } from "../service/scanbot-sdk-service";
 import { NavigationUtils } from "../service/navigation-utils";
 import { ImageUtils } from "../service/image-utils";
-import { DocumentRepository } from "../service/document-repository";
+import { DocumentRepository, SBDocumentResult } from "../service/document-repository";
 import { RoutePaths } from "../model/RoutePaths";
 import { Utils } from "../service/utils";
+import { DocumentDetectionResult } from "scanbot-web-sdk/@types";
 
 export enum FeatureId {
   DocumentPicker,
   BarcodePicker,
   License,
 }
+
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
@@ -59,23 +61,23 @@ export class HomeComponent implements OnInit {
     if (e.id === FeatureId.DocumentPicker) {
       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 };
-
-        this.documents.add(documentDetectionResult);
+      const result = await this.sdk.detectDocument(image.original);
+      if (result.status.startsWith('OK') === true && result.pointsNormalized) {
+        const cropped = await this.sdk.cropAndRotateImageCcw(image.original, result.pointsNormalized, 0);
+        const document: SBDocumentResult = { ...result, originalImage: image.original, croppedImage: cropped };
+        this.documents.add(document);
         await Utils.alert("Detection successful");
       } else {
         await Utils.alert("Detection failed");
       }
     }
 
     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));

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({
@@ -67,22 +66,20 @@ export class ImageDetailsComponent implements OnInit {
     const result = await Swal.fire({
       title: "Select filter",
       input: "select",
-      inputOptions: this.sdk.availableFilters(),
-      inputPlaceholder: this.repository.getActiveItem().filter ?? "none",
+      inputOptions: this.sdk.stringifiedFilters(),
+      inputPlaceholder: this.repository.getActiveItem().filter?._type ?? "none",
     });
 
     const filter = this.sdk.filterByIndex(result.value);
-
     const page = this.repository.getActiveItem();
+
     if (filter === "none") {
       page.filter = undefined;
-      page.filtered = undefined;
+      page.filteredImage = undefined;
     } else {
       page.filter = filter;
-      page.filtered = await this.sdk.applyFilter(
-        page.cropped ?? page.original,
-        filter
-      );
+      const buffer = (page.croppedImage ?? page.originalImage) as ArrayBuffer;
+      page.filteredImage = await this.sdk.applyFilter(buffer, filter);
     }
 
     await this.loadImage();

angular-js/src/app/image-results/image-results.component.ts

@@ -36,9 +36,7 @@ export class ImageResultsComponent implements OnInit {
 
     const pages = this.repository.getPages();
     if (pages.length > 0) {
-      NavigationUtils.getElementByClassName(
-        "nothing-to-display-hint"
-      ).style.display = "none";
+      NavigationUtils.getElementByClassName("nothing-to-display-hint").style.display = "none";
     }
 
     let i = 0;

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>";