Skip to content

Commit e3a395b

Browse files
Felix-Dynamsoftfelixindrawan
Felix-Dynamsoft
and
felixindrawan
authored
feat: update angular sample and docs (#182)
* feat: update angular sample and docs * fix: formatting * add file names --------- Co-authored-by: felixindrawan <indrawan.felix123@gmail.com>
1 parent 61001dd commit e3a395b

13 files changed

Lines changed: 566 additions & 149 deletions

‎hello-world/angular/README.md‎

Lines changed: 398 additions & 4 deletions
Large diffs are not rendered by default.

‎hello-world/angular/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "dbrjs-sample-angular",
2+
"name": "dbrjs-angular-sample",
33
"version": "0.0.0",
44
"scripts": {
55
"ng": "ng",
@@ -36,4 +36,4 @@
3636
"karma-jasmine-html-reporter": "~2.1.0",
3737
"typescript": "~5.4.2"
3838
}
39-
}
39+
}

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

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
2-
31
.title {
42
display: flex;
53
justify-content: center;
64
align-items: center;
75
margin-top: 20px;
86
}
9-
/* .title .title-text {
10-
11-
} */
12-
.title .title-logo {
13-
width: 60px;
14-
height: 60px;
15-
animation: retate 5s infinite linear;
16-
}
177
.top-btns {
188
width: 30%;
199
margin: 20px auto;
@@ -36,17 +26,17 @@
3626
border-left: transparent;
3727
}
3828

39-
@media screen and (max-width: 500px) {
29+
@media screen and (max-width: 800px) {
4030
.top-btns {
41-
width: 70%;
31+
width: 70%;
4232
}
4333
}
4434

4535
@keyframes retate {
4636
from {
47-
transform: rotate(0deg);
37+
transform: rotate(0deg);
4838
}
4939
to {
50-
transform: rotate(360deg);
40+
transform: rotate(360deg);
5141
}
52-
}
42+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<h2 class='title-text'>Hello World for Angular</h2>
44
</div>
55
<div class='top-btns'>
6-
<button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Video Capture</button>
7-
<button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Image Capture</button>
6+
<button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Decode Video</button>
7+
<button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Decode Image</button>
88
</div>
99
@if (mode === 'video') {
1010
<app-video-capture></app-video-capture>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import { VideoCaptureComponent } from './video-capture/video-capture.component';
99
standalone: true,
1010
templateUrl: './app.component.html',
1111
styleUrl: './app.component.css',
12-
imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent]
12+
imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent],
1313
})
1414
export class AppComponent {
15-
title = 'dbrjs-sample-angular';
15+
title = 'dbrjs-angular-sample';
1616

17-
mode: string = "video";
17+
mode: string = 'video';
1818

1919
switchMode(value: string) {
2020
this.mode = value;

‎hello-world/angular/src/app/dynamsoft.config.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1-
import { CoreModule } from "dynamsoft-core";
2-
import { LicenseManager } from "dynamsoft-license";
3-
import "dynamsoft-barcode-reader";
1+
import { CoreModule } from 'dynamsoft-core';
2+
import { LicenseManager } from 'dynamsoft-license';
3+
import 'dynamsoft-barcode-reader';
4+
5+
// Configures the paths where the .wasm files and other necessary resources for modules are located.
6+
CoreModule.engineResourcePaths = {
7+
std: 'https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/',
8+
dip: 'https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/',
9+
core: 'https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/',
10+
license: 'https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/',
11+
cvr: 'https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/',
12+
dbr: 'https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/',
13+
dce: 'https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/',
14+
};
415

516
/** LICENSE ALERT - README
617
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
718
*/
819

9-
LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
20+
LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', true);
1021

1122
/**
1223
* 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.
@@ -15,15 +26,5 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
1526
* LICENSE ALERT - THE END
1627
*/
1728

18-
CoreModule.engineResourcePaths = {
19-
std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
20-
dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
21-
core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
22-
license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
23-
cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
24-
dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
25-
dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
26-
};
27-
2829
// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
29-
CoreModule.loadWasm(["DBR"]);
30+
CoreModule.loadWasm(['DBR']);

‎hello-world/angular/src/app/image-capture/image-capture.component.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
.capture-img {
1+
.image-capture-container {
22
width: 100%;
33
height: 100%;
4-
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
4+
font-family: Consolas, Monaco, Lucida Console, Liberation Mono,
5+
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
56
}
67

7-
.capture-img .img-ipt {
8+
.image-capture-container .input-container {
89
width: 80%;
910
height: 100%;
1011
display: flex;
@@ -13,6 +14,6 @@
1314
margin: 0 auto;
1415
}
1516

16-
.capture-img .result-area {
17+
.image-capture-container .results {
1718
margin-top: 20px;
1819
}

‎hello-world/angular/src/app/image-capture/image-capture.component.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<div class="capture-img">
2-
<div class="img-ipt"><input type="file" (change)="captureImage($event)"/></div>
3-
<div class="result-area" #resDiv></div>
1+
<div class="image-capture-container">
2+
<div class="input-container">
3+
<input
4+
type="file"
5+
multiple
6+
(change)="captureImage($event)"
7+
accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
8+
/>
9+
</div>
10+
<div class="results" #results></div>
411
</div>

‎hello-world/angular/src/app/image-capture/image-capture.component.ts‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, ViewChild, ElementRef } from '@angular/core';
2-
import "../dynamsoft.config";
3-
import { EnumCapturedResultItemType } from "dynamsoft-core";
4-
import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
5-
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
2+
import '../dynamsoft.config';
3+
import { EnumCapturedResultItemType } from 'dynamsoft-core';
4+
import type { BarcodeResultItem } from 'dynamsoft-barcode-reader';
5+
import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
66

77
@Component({
88
selector: 'app-image-capture',
@@ -11,49 +11,57 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
1111
standalone: true,
1212
})
1313
export class ImageCaptureComponent {
14-
15-
@ViewChild('resDiv') resDiv?: ElementRef<HTMLDivElement>;
14+
@ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
1615

1716
pCvRouter?: Promise<CaptureVisionRouter>;
18-
bDestoried = false;
17+
isDestroyed = false;
1918

2019
captureImage = async (e: Event) => {
21-
let files = [...(e.target! as HTMLInputElement).files as any as File[]];
22-
(e.target! as HTMLInputElement).value = '';
23-
this.resDiv!.nativeElement.innerText = "";
20+
let files = [...((e.target! as HTMLInputElement).files as any as File[])];
21+
(e.target! as HTMLInputElement).value = ''; // reset input
22+
this.resultsContainer!.nativeElement.innerText = '';
2423
try {
25-
const cvRouter = await (this.pCvRouter = this.pCvRouter || CaptureVisionRouter.createInstance());
26-
if (this.bDestoried) return;
27-
28-
for(let file of files){
24+
// ensure cvRouter is created only once
25+
const cvRouter = await (this.pCvRouter =
26+
this.pCvRouter || CaptureVisionRouter.createInstance());
27+
if (this.isDestroyed) return;
28+
29+
for (let file of files) {
2930
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
30-
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
31-
if (this.bDestoried) return;
32-
33-
if(files.length > 1){
34-
this.resDiv!.nativeElement.innerText += `\n${file.name}:\n`;
31+
const result = await cvRouter.capture(file, 'ReadBarcodes_SpeedFirst');
32+
if (this.isDestroyed) return;
33+
34+
// Print file name if there's multiple files
35+
if (files.length > 1) {
36+
this.resultsContainer!.nativeElement.innerText += `\n${file.name}:\n`;
3537
}
3638
for (let _item of result.items) {
37-
if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
39+
if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
40+
continue; // check if captured result item is a barcode
41+
}
3842
let item = _item as BarcodeResultItem;
39-
this.resDiv!.nativeElement.innerText += item.text + "\n";
43+
this.resultsContainer!.nativeElement.innerText += item.text + '\n'; // output the decoded barcode text
4044
console.log(item.text);
4145
}
42-
if (!result.items.length) this.resDiv!.nativeElement.innerText += 'No barcode found\n';
46+
// If no items are found, display that no barcode was detected
47+
if (!result.items.length)
48+
this.resultsContainer!.nativeElement.innerText +=
49+
'No barcode found\n';
4350
}
4451
} catch (ex: any) {
4552
let errMsg = ex.message || ex;
4653
console.error(errMsg);
4754
alert(errMsg);
4855
}
49-
}
56+
};
5057

58+
// dispose cvRouter when it's no longer needed
5159
async ngOnDestroy() {
52-
this.bDestoried = true;
53-
if(this.pCvRouter){
54-
try{
60+
this.isDestroyed = true;
61+
if (this.pCvRouter) {
62+
try {
5563
(await this.pCvRouter).dispose();
56-
}catch(_){}
64+
} catch (_) {}
5765
}
5866
}
5967
}

‎hello-world/angular/src/app/video-capture/video-capture.component.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.div-ui-container {
1+
.camera-view-container {
22
width: 100%;
33
height: 70vh;
44
}
55

6-
.div-results-container {
6+
.results {
77
width: 100%;
88
height: 10vh;
99
overflow: auto;

0 commit comments

Comments
 (0)