Add more framework samples to BarcodeScanner (#262)

* add more samples to rtu

* add more sample link in readme

* Shallower folder hierarchies

* Add links for new framework samples

* add framework logo

* fix prompt message

* fix canonical URL

* relative base url

* dist/ui/barcode-scanner.ui.xml

* Update README.md

---------

Co-authored-by: Justin <[email protected]>

Author: Keillion

README.md

@@ -52,6 +52,15 @@ Get the basic features working with plain/native JavaScript or within a framewor
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
 * [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.
+* [**Hello World in Svelte**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/svelte): Read single barcode from camera in a Svelte application.
+* [**Hello World in Capacitor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/capacitor): Read single barcode from camera in a Capacitor application.
+* [**Hello World in Webview**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/webview): Read single barcode from camera in a Webview application.
+* [**Hello World in Typescript**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/native-ts): Read single barcode from camera in a Typescript application.
+* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/electron): Read single barcode from camera in a Electron application.
+* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/blazor): Read single barcode from camera in a Blazor application.
+* [**Hello World in RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/requirejs.html): Read single barcode from camera in a RequireJS application.
+* [**Hello World in ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/es6.html): Read single barcode from camera in a ES6 application.
+* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pwa): Read single barcode from camera in a PWA application.
 
 **Scan multiple barcodes**
 

barcode-scanner-api-samples/scan-multiple-barcodes/README.md

@@ -112,4 +112,13 @@ Multiple samples are provided for single barcode scanning. These samples can be
 * [**Use customized template**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/use-customized-template): Use different customized templates for scanning various barcode types.
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
-* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.
+* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.
+* [**Hello World in Svelte**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/svelte): Read single barcode from camera in a Svelte application.
+* [**Hello World in Capacitor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/capacitor): Read single barcode from camera in a Capacitor application.
+* [**Hello World in Webview**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/webview): Read single barcode from camera in a Webview application.
+* [**Hello World in Typescript**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/native-ts): Read single barcode from camera in a Typescript application.
+* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/electron): Read single barcode from camera in a Electron application.
+* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/blazor): Read single barcode from camera in a Blazor application.
+* [**Hello World in RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/requirejs.html): Read single barcode from camera in a RequireJS application.
+* [**Hello World in ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/es6.html): Read single barcode from camera in a ES6 application.
+* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pwa): Read single barcode from camera in a PWA application.

barcode-scanner-api-samples/scan-single-barcode/README.md

@@ -131,6 +131,15 @@ It allows users to dynamically select a scanning template (e.g., DPM, Dot Code,
 * [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
 * [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
 * [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.
+* [**Hello World in Svelte**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/svelte): Read single barcode from camera in a Svelte application.
+* [**Hello World in Capacitor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/capacitor): Read single barcode from camera in a Capacitor application.
+* [**Hello World in Webview**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/webview): Read single barcode from camera in a Webview application.
+* [**Hello World in Typescript**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/native-ts): Read single barcode from camera in a Typescript application.
+* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/electron): Read single barcode from camera in a Electron application.
+* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/blazor): Read single barcode from camera in a Blazor application.
+* [**Hello World in RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/requirejs.html): Read single barcode from camera in a RequireJS application.
+* [**Hello World in ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/es6.html): Read single barcode from camera in a ES6 application.
+* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pwa): Read single barcode from camera in a PWA application.
 
 Scan multiple barcodes:
 

barcode-scanner-api-samples/scan-single-barcode/angular/README.md

@@ -19,7 +19,7 @@ npm install
 ### 2. Run the App
 
 ```bash
-ng serve
+npm run start
 ```
 
 Then open your browser at http://localhost:4200 to view the sample app.

barcode-scanner-api-samples/scan-single-barcode/angular/package.json

@@ -5,8 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "watch": "ng build --watch --configuration development"
   },
   "private": true,
   "dependencies": {

barcode-scanner-api-samples/scan-single-barcode/angular/public/favicon.ico

@@ -1,8 +1,7 @@
 <div class="barcode-scanner-hello-world-page">
   <div class="barcode-scanner-title">
     <h2 class="barcode-scanner-title-text">Hello World for Angular</h2>
-    <svg t="1744959268852" class="barcode-scanner-title-logo" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3482"><path d="M435.8 536.2H512V353z" fill="#DD0031" p-id="3483"></path><path d="M400.9 616.8l-52.4 130.8h-97.2L512 163V64L94.9 212.7l63.6 551.5L512 960V616.8z" fill="#DD0031" p-id="3484"></path><path d="M512 353v183.2h76.2z" fill="#C3002F" p-id="3485"></path><path d="M512 64v99l259.8 584.6h-97.2l-52.4-130.8H512V960l353.5-195.8 63.6-551.5z" fill="#C3002F" p-id="3486"></path></svg>
   </div>
   <!-- This div will host the barcode scanner's camera view -->
-  <div class="barcode-scanner-view" #scannerView></div>
+  <div class="barcode-scanner-view" #barcodeScannerViewRef></div>
 </div>

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html

@@ -9,17 +9,21 @@ import { BarcodeScanner, BarcodeScannerConfig } from 'dynamsoft-barcode-reader-b
 
 export class AppComponent {
   title = 'angular';
+  barcodeScanner: BarcodeScanner | null = null;
 
-  @ViewChild('scannerView') scannerView!: ElementRef<HTMLDivElement>;
+  @ViewChild('barcodeScannerViewRef') barcodeScannerViewRef!: ElementRef<HTMLDivElement>;
 
   async ngAfterViewInit(): Promise<void> {
     // Configuration object for initializing the BarcodeScanner instance
     const config: BarcodeScannerConfig = {
       license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
-      container: this.scannerView.nativeElement, // Specify where to render the scanner UI
+
+      // Specify where to render the scanner UI
+      // If container is not specified, the UI will take up the full screen
+      container: this.barcodeScannerViewRef.nativeElement, 
 
       // Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
-      uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
+      uiPath: "https://cdn.jsdelivr.net/npm/[email protected]/dist/ui/barcode-scanner.ui.xml",
 
       // showUploadImageButton: true,
       // scannerViewConfig: {
@@ -34,13 +38,16 @@ export class AppComponent {
     }
 
     // Create an instance of the BarcodeScanner with the provided configuration
-    const barcodeScanner = new BarcodeScanner(config);
+    this.barcodeScanner = new BarcodeScanner(config);
 
     // Launch the scanner; once a barcode is detected, display its text in an alert
-    barcodeScanner.launch().then((result) => {
-      if (result.barcodeResults.length) {
-        alert(result.barcodeResults[0].text);
-      }
-    });
+    let result = await this.barcodeScanner.launch();
+    if (result.barcodeResults.length) {
+      alert(result.barcodeResults[0].text);
+    }
+  }
+  async ngOnDestroy(): Promise<void> { 
+    // Dispose of the barcode scanner when the component unmounts
+    this.barcodeScanner?.dispose();
   }
 }

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.spec.ts

@@ -5,7 +5,6 @@
   <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>