Added an HTML element for inputting license key

Author: yushulx

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -17,11 +18,12 @@ import { TopBarComponent } from './top-bar/top-bar.component';
     BarcodeScannerComponent,
     ProductListComponent,
     TopBarComponent,
-    
+
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/barcode-reader/barcode-reader.component.html

@@ -1,7 +1,7 @@
-<span id="loading-status" style="font-size:x-large" [hidden]="isLoaded"
+<!-- <span id="loading-status" style="font-size:x-large" [hidden]="isLoaded"
   >Loading Library...</span
 >
-<br />
+<br /> -->
 
 <input type="file" id="file" accept="image/*" (change)="onChange($event)" />
 <div>
@@ -11,4 +11,4 @@
 <div id="imageview">
   <img id="image" />
   <canvas id="overlay"></canvas>
-</div>
+</div>

src/app/barcode-scanner/barcode-scanner.component.html

@@ -1,7 +1,7 @@
-<span id="loading-status" style="font-size:x-large" [hidden]="isLoaded"
+<!-- <span id="loading-status" style="font-size:x-large" [hidden]="isLoaded"
   >Loading Library...</span
 >
-<br />
+<br /> -->
 
 <div class="select">
   <label for="videoSource">Video source: </label>
@@ -11,4 +11,4 @@
 <div id="videoview">
   <div class="dce-video-container" id="videoContainer"></div>
   <canvas id="overlay"></canvas>
-</div>
+</div>

src/app/product-list/product-list.component.html

@@ -1,28 +1,25 @@
-<h2>Examples</h2>
-
-<div *ngFor="let product of products">
-  <h3>
-    <div *ngIf="product.id === 'reader'; else elseBlock">
-      <a [title]="product.name + ' details'" [routerLink]="['/barcode-reader']"
-        >>
-        {{ product.name }}
-      </a>
-    </div>
-    <ng-template #elseBlock
-      ><a
-        [title]="product.name + ' details'"
-        [routerLink]="['/barcode-scanner']"
-        >>
-        {{ product.name }}
-      </a></ng-template
-    >
-  </h3>
-
-  <p *ngIf="product.description">Description: {{ product.description }}</p>
+<div>
+  <div>
+    Get a License key from <a href="https://www.dynamsoft.com/customer/license/trialLicense" target="_blank">here</a>
+  </div>
+  <input type="text" [(ngModel)]="inputText" [placeholder]="placeholderText">
+  <button (click)="activate()">Activate SDK</button>
 </div>
 
-<!-- 
-Copyright Google LLC. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at https://angular.io/license
--->
+<div *ngIf="showDiv">
+  <h2>Examples</h2>
+  <div *ngFor="let product of products">
+    <h3>
+      <div *ngIf="product.id === 'reader'; else elseBlock">
+        <a [title]="product.name + ' details'" [routerLink]="['/barcode-reader']">>
+          {{ product.name }}
+        </a>
+      </div>
+      <ng-template #elseBlock><a [title]="product.name + ' details'" [routerLink]="['/barcode-scanner']">>
+          {{ product.name }}
+        </a></ng-template>
+    </h3>
+
+    <p *ngIf="product.description">Description: {{ product.description }}</p>
+  </div>
+</div>

src/app/product-list/product-list.component.ts

@@ -2,17 +2,57 @@ import { Component } from '@angular/core';
 
 import { products } from '../products';
 
+import { CoreModule, LicenseManager } from 'dynamsoft-barcode-reader-bundle';
+
+import { SharedService } from '../shared.service';
+
 @Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css'],
 })
 export class ProductListComponent {
   products = products;
-}
+  inputText: string = '';
+  processedText: string = '';
+  placeholderText: string = 'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==';
+
+  constructor(private sharedService: SharedService) { }
+
+  async activate(): Promise<void> {
+    this.processedText = this.inputText.toUpperCase();
+    // Configure the paths where the .wasm files and other necessary resources for modules are located.
+    CoreModule.engineResourcePaths = {
+      std: 'assets/dynamsoft-capture-vision-std/',
+      dip: 'assets/dynamsoft-image-processing/',
+      core: 'assets/dynamsoft-core/',
+      license: 'assets/dynamsoft-license/',
+      cvr: 'assets/dynamsoft-capture-vision-router/',
+      dbr: 'assets/dynamsoft-barcode-reader/',
+      dce: 'assets/dynamsoft-camera-enhancer/',
+    };
+
+    try {
+      // Visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr to get a trial license.
+      let licenseKey: string = this.inputText === '' ? this.placeholderText : this.inputText;
+      await LicenseManager.initLicense(licenseKey, true);
 
-/*
-Copyright Google LLC. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at https://angular.io/license
-*/
+
+      // Preload "BarcodeReader" module for saving the time of loading it when needed.
+      CoreModule.loadWasm(['DBR']);
+
+      this.toggleDivVisibility();
+    } catch (error) {
+      alert(error);
+    }
+
+  }
+
+  toggleDivVisibility(): void {
+    this.sharedService.toggleShowDiv();
+  }
+
+  get showDiv(): boolean {
+    return this.sharedService.getShowDiv();
+  }
+}

src/app/products.ts

@@ -1,25 +1,3 @@
-// import { CoreModule } from 'dynamsoft-core';
-// import { LicenseManager } from 'dynamsoft-license';
-// import 'dynamsoft-barcode-reader';
-import { CoreModule, LicenseManager } from 'dynamsoft-barcode-reader-bundle';
-
-// Configure the paths where the .wasm files and other necessary resources for modules are located.
-CoreModule.engineResourcePaths = {
-  std: 'assets/dynamsoft-capture-vision-std/',
-  dip: 'assets/dynamsoft-image-processing/',
-  core: 'assets/dynamsoft-core/',
-  license: 'assets/dynamsoft-license/',
-  cvr: 'assets/dynamsoft-capture-vision-router/',
-  dbr: 'assets/dynamsoft-barcode-reader/',
-  dce: 'assets/dynamsoft-camera-enhancer/',
-};
-
-// Visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr to get a trial license.
-LicenseManager.initLicense('DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==', true);
-
-
-// Preload "BarcodeReader" module for saving the time of loading it when needed.
-CoreModule.loadWasm(['DBR']);
 
 export interface Product {
   id: string;

src/app/shared.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SharedService } from './shared.service';
+
+describe('SharedService', () => {
+  let service: SharedService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SharedService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SharedService {
+  private showDiv: boolean = false;
+
+  getShowDiv(): boolean {
+    return this.showDiv;
+  }
+
+  setShowDiv(value: boolean): void {
+    this.showDiv = value;
+  }
+
+  toggleShowDiv(): void {
+    this.showDiv = !this.showDiv;
+  }
+}

src/app/top-bar/top-bar.component.html

@@ -1,4 +1,3 @@
 <a [routerLink]="['/']">
-    <h1>Dynamsoft Barcode Reader and Scanner</h1>
-  </a>
-  
+  <h1>Dynamsoft Capture Vision SDK</h1>
+</a>