Merge pull request #159 from Dynamsoft/_dev

Dev

Author: Shen-wb

hello-world/README.md

@@ -1,6 +1,6 @@
 # The Hello World Sample Set
 
-As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.21#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly.
+As you have already gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10#getting-started---hello-world), you may have come across some basic "Hello World" code that can help you create a simple web application using our SDK quickly.
 
 In this set of samples, we will revisit the "Hello World" code and show how to implement it using some popular frameworks, such as Angular, React, and Vue.
 

hello-world/angular/README.md

@@ -51,18 +51,18 @@ LicenseManager.initLicense(
 /**
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
  * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.21&utm_source=github#specify-the-license or contact [email protected].
+ * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact [email protected].
  * LICENSE ALERT - THE END
  */
 
 CoreModule.engineResourcePaths = {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.0.0/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.0.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.33/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.40/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.0.32/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.0.21/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/[email protected].1/dist/"
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/",
+  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/",
+  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/",
+  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/",
+  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/[email protected].2/dist/"
 };
 
 // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
@@ -183,16 +183,16 @@ export class VideoCaptureComponent {
       // Filter out unchecked and duplicate results.
       const filter = new MultiFrameResultCrossFilter();
       filter.enableResultCrossVerification(
-        EnumCapturedResultItemType.CRIT_BARCODE,
+        "barcode",
         true
       ); // Filter out unchecked barcodes.
       // Filter out duplicate barcodes within 3 seconds.
       filter.enableResultDeduplication(
-        EnumCapturedResultItemType.CRIT_BARCODE,
+        "barcode",
         true
       );
       filter.setDuplicateForgetTime(
-        EnumCapturedResultItemType.CRIT_BARCODE,
+        "barcode",
         3000
       );
       await router.addResultFilter(filter);

hello-world/angular/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hello-world",
+  "name": "dbrjs-sample-angular",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -18,12 +18,12 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "dynamsoft-barcode-reader": "10.0.21",
-    "dynamsoft-utility": "1.0.21",
-    "dynamsoft-camera-enhancer": "4.0.1",
-    "dynamsoft-capture-vision-router": "2.0.32",
-    "dynamsoft-core": "3.0.33",
-    "dynamsoft-license": "3.0.40",
+    "dynamsoft-barcode-reader": "10.2.10",
+    "dynamsoft-utility": "1.2.10",
+    "dynamsoft-camera-enhancer": "4.0.2",
+    "dynamsoft-capture-vision-router": "2.2.10",
+    "dynamsoft-core": "3.2.10",
+    "dynamsoft-license": "3.2.10",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

hello-world/angular/src/app/app.component.css

@@ -0,0 +1,41 @@
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+}
+.title .title-logo {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+}
+
+.top-btns {
+  width: 30%;
+  margin: 20px auto;
+}
+
+.top-btns button {
+  display: inline-block;
+  border: 1px solid black;
+  padding: 5px 15px;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.top-btns button:first-child {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-right: transparent;
+}
+.top-btns button:nth-child(2) {
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-left: transparent;
+}
+
+@media screen and (max-width: 500px) {
+  .top-btns {
+    width: 70%;
+  }
+}

hello-world/angular/src/app/app.component.html

@@ -1 +1,12 @@
-<app-hello-world></app-hello-world>
+<div class='App'>
+  <div class='title'>
+    <h2 class='title-text'>Hello World for Angular</h2>
+    <img class='title-logo' src="./assets/logo.svg" alt="logo" />
+  </div>
+  <div class='top-btns'>
+    <button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Video Capture</button>
+    <button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Image Capture</button>
+  </div>
+  <app-video-capture *ngIf="mode === 'video'"></app-video-capture>
+  <app-image-capture *ngIf="mode === 'image'"></app-image-capture>
+</div>

hello-world/angular/src/app/app.component.ts

@@ -6,5 +6,11 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'angular';
+  title = 'my-app';
+
+  mode: string = "video";
+
+  switchMode(value: string) {
+    this.mode = value;
+  }
 }

hello-world/angular/src/app/app.module.ts

@@ -2,14 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { HelloWorldComponent } from './hello-world/hello-world.component';
 import { ImageCaptureComponent } from './image-capture/image-capture.component';
 import { VideoCaptureComponent } from './video-capture/video-capture.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HelloWorldComponent,
     ImageCaptureComponent,
     VideoCaptureComponent
   ],