Skip to content

Commit 4c6e69d

Browse files
Cube-JCube-J
committed
update packages version; show results in the page in Angular
1 parent 7f56631 commit 4c6e69d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+422
-368
lines changed

‎hello-world/angular/README.md‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ ng new my-app
2323

2424
```cmd
2525
cd my-app
26-
npm install @dynamsoft/dynamsoft-core
27-
npm install @dynamsoft/dynamsoft-license
26+
npm install dynamsoft-core
27+
npm install dynamsoft-license
2828
npm install @dynamsoft/dynamsoft-utility
2929
npm install @dynamsoft/dynamsoft-barcode-reader
30-
npm install @dynamsoft/dynamsoft-capture-vision-router
31-
npm install @dynamsoft/dynamsoft-camera-enhancer
30+
npm install dynamsoft-capture-vision-router
31+
npm install dynamsoft-camera-enhancer
3232
```
3333

3434
## Start to implement
3535

3636
### Add file "cvr.ts" under "/src/" to configure libraries
3737

3838
```typescript
39-
import { CoreModule } from '@dynamsoft/dynamsoft-core';
40-
import { LicenseManager } from '@dynamsoft/dynamsoft-license';
39+
import { CoreModule } from 'dynamsoft-core';
40+
import { LicenseManager } from 'dynamsoft-license';
4141
import '@dynamsoft/dynamsoft-barcode-reader';
4242

4343
/** LICENSE ALERT - README
@@ -56,13 +56,13 @@ LicenseManager.initLicense(
5656
*/
5757

5858
CoreModule.engineResourcePaths = {
59-
std: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231222202916/dist/",
60-
dip: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231219135109/dist/",
61-
core: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].20-dev-20231222181259/dist/",
62-
license: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].0-dev-20231222153411/dist/",
63-
cvr: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].20-dev-20231222144235/dist/",
64-
dbr: "https://npm.scannerproxy.com/cdn/@dynamsoft/[email protected]20231222153407/dist/",
65-
dce: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231222174818/dist/"
59+
std: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
60+
dip: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
61+
core: "https://cdn.jsdelivr.net/npm/[email protected].30/dist/",
62+
license: "https://cdn.jsdelivr.net/npm/[email protected].20/dist/",
63+
cvr: "https://cdn.jsdelivr.net/npm/[email protected].30/dist/",
64+
dbr: "https://npm.scannerproxy.com/cdn/@dynamsoft/[email protected]20240115142402/dist/",
65+
dce: "https://cdn.jsdelivr.net/npm/[email protected]/dist/"
6666
};
6767

6868
// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
@@ -104,6 +104,9 @@ ng generate component hello-world
104104

105105
```html
106106
<div #uiContainer class="div-ui-container"></div>
107+
Results:
108+
<br>
109+
<div #resultsContainer id="div-results-container"></div>
107110
```
108111

109112
* Add CSS style in `video-capture.component.css`.
@@ -113,22 +116,28 @@ ng generate component hello-world
113116
width: 100%;
114117
height: 70vh;
115118
}
119+
120+
.div-results-container {
121+
width: 100%;
122+
height: 10vh;
123+
overflow: auto;
124+
}
116125
```
117126

118127
* In `video-capture.component.ts`, add code for initializing and destroying some instances.
119128

120129
```typescript
121130
import { Component, ElementRef, ViewChild } from '@angular/core';
122-
import { EnumCapturedResultItemType } from '@dynamsoft/dynamsoft-core'
131+
import { EnumCapturedResultItemType } from 'dynamsoft-core'
123132
import { DecodedBarcodesResult } from '@dynamsoft/dynamsoft-barcode-reader';
124133
import {
125134
CameraEnhancer,
126135
CameraView,
127-
} from '@dynamsoft/dynamsoft-camera-enhancer';
136+
} from 'dynamsoft-camera-enhancer';
128137
import {
129138
CapturedResultReceiver,
130139
CaptureVisionRouter,
131-
} from '@dynamsoft/dynamsoft-capture-vision-router';
140+
} from 'dynamsoft-capture-vision-router';
132141
import { MultiFrameResultCrossFilter } from '@dynamsoft/dynamsoft-utility';
133142

134143
@Component({
@@ -145,6 +154,8 @@ export class VideoCaptureComponent {
145154

146155
@ViewChild('uiContainer') uiContainer: ElementRef<HTMLDivElement> | null =
147156
null;
157+
@ViewChild('resultsContainer') resultsContainer: ElementRef<HTMLDivElement> | null =
158+
null;
148159

149160
async init(): Promise<{
150161
cameraView: CameraView;
@@ -164,9 +175,12 @@ export class VideoCaptureComponent {
164175
// Define a callback for results.
165176
const resultReceiver = new CapturedResultReceiver();
166177
resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => {
178+
if (!result.barcodesResultItems.length) return;
179+
180+
this.resultsContainer!.nativeElement.innerHTML = "";
181+
console.log(result);
167182
for (let item of result.barcodesResultItems) {
168-
console.log(item.text);
169-
alert(item.text);
183+
this.resultsContainer!.nativeElement.innerHTML += `${item.formatString}: ${item.text}<br><hr>`;
170184
}
171185
};
172186
router.addResultReceiver(resultReceiver);
@@ -252,7 +266,7 @@ export class VideoCaptureComponent {
252266
```typescript
253267
import { Component } from '@angular/core';
254268
import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader';
255-
import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router';
269+
import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
256270

257271
@Component({
258272
selector: 'app-image-capture',

‎hello-world/angular/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
"@angular/platform-browser": "^16.2.0",
1919
"@angular/platform-browser-dynamic": "^16.2.0",
2020
"@angular/router": "^16.2.0",
21-
"@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20231222153407",
22-
"@dynamsoft/dynamsoft-camera-enhancer": "^4.0.1-dev-20231222174818",
23-
"@dynamsoft/dynamsoft-capture-vision-router": "^2.0.20-dev-20231222144235",
24-
"@dynamsoft/dynamsoft-core": "^3.0.20-dev-20231222181259",
25-
"@dynamsoft/dynamsoft-license": "^3.0.0-dev-20231222153411",
26-
"@dynamsoft/dynamsoft-utility": "^1.0.10-dev-20231220174819",
21+
"@dynamsoft/dynamsoft-barcode-reader": "^10.0.20-dev-20240115142402",
22+
"@dynamsoft/dynamsoft-utility": "^1.0.20-dev-20240115141008",
23+
"dynamsoft-camera-enhancer": "^4.0.1",
24+
"dynamsoft-capture-vision-router": "^2.0.30",
25+
"dynamsoft-core": "^3.0.30",
26+
"dynamsoft-license": "^3.0.20",
2727
"rxjs": "~7.8.0",
2828
"tslib": "^2.3.0",
2929
"zone.js": "~0.13.0"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component } from '@angular/core';
22
import { BarcodeResultItem } from '@dynamsoft/dynamsoft-barcode-reader';
3-
import { CaptureVisionRouter } from '@dynamsoft/dynamsoft-capture-vision-router';
3+
import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
44

55
@Component({
66
selector: 'app-image-capture',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,9 @@
22
width: 100%;
33
height: 70vh;
44
}
5+
6+
.div-results-container {
7+
width: 100%;
8+
height: 10vh;
9+
overflow: auto;
10+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
<div #uiContainer class="div-ui-container"></div>
2+
Results:
3+
<br>
4+
<div #resultsContainer id="div-results-container"></div>

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Component, ElementRef, ViewChild } from '@angular/core';
2-
import { EnumCapturedResultItemType } from '@dynamsoft/dynamsoft-core'
2+
import { EnumCapturedResultItemType } from 'dynamsoft-core'
33
import { DecodedBarcodesResult } from '@dynamsoft/dynamsoft-barcode-reader';
44
import {
55
CameraEnhancer,
66
CameraView,
7-
} from '@dynamsoft/dynamsoft-camera-enhancer';
7+
} from 'dynamsoft-camera-enhancer';
88
import {
99
CapturedResultReceiver,
1010
CaptureVisionRouter,
11-
} from '@dynamsoft/dynamsoft-capture-vision-router';
11+
} from 'dynamsoft-capture-vision-router';
1212
import { MultiFrameResultCrossFilter } from '@dynamsoft/dynamsoft-utility';
1313

1414
@Component({
@@ -25,6 +25,8 @@ export class VideoCaptureComponent {
2525

2626
@ViewChild('uiContainer') uiContainer: ElementRef<HTMLDivElement> | null =
2727
null;
28+
@ViewChild('resultsContainer') resultsContainer: ElementRef<HTMLDivElement> | null =
29+
null;
2830

2931
async init(): Promise<{
3032
cameraView: CameraView;
@@ -44,9 +46,12 @@ export class VideoCaptureComponent {
4446
// Define a callback for results.
4547
const resultReceiver = new CapturedResultReceiver();
4648
resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => {
49+
if (!result.barcodesResultItems.length) return;
50+
51+
this.resultsContainer!.nativeElement.innerHTML = "";
52+
console.log(result);
4753
for (let item of result.barcodesResultItems) {
48-
console.log(item.text);
49-
alert(item.text);
54+
this.resultsContainer!.nativeElement.innerHTML += `${item.formatString}: ${item.text}<br><hr>`;
5055
}
5156
};
5257
router.addResultReceiver(resultReceiver);

‎hello-world/angular/src/cvr.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { CoreModule } from '@dynamsoft/dynamsoft-core';
2-
import { LicenseManager } from '@dynamsoft/dynamsoft-license';
1+
import { CoreModule } from 'dynamsoft-core';
2+
import { LicenseManager } from 'dynamsoft-license';
33
import '@dynamsoft/dynamsoft-barcode-reader';
44

55
/** LICENSE ALERT - README
@@ -18,13 +18,13 @@ LicenseManager.initLicense(
1818
*/
1919

2020
CoreModule.engineResourcePaths = {
21-
std: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231222202916/dist/",
22-
dip: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231219135109/dist/",
23-
core: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].20-dev-20231222181259/dist/",
24-
license: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].0-dev-20231222153411/dist/",
25-
cvr: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected].20-dev-20231222144235/dist/",
26-
dbr: "https://npm.scannerproxy.com/cdn/@dynamsoft/[email protected]20231222153407/dist/",
27-
dce: "https://npm.scannerproxy.com/cdn/@dynamsoft/dynamsoft[email protected]-dev-20231222174818/dist/"
21+
std: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
22+
dip: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
23+
core: "https://cdn.jsdelivr.net/npm/[email protected].30/dist/",
24+
license: "https://cdn.jsdelivr.net/npm/[email protected].20/dist/",
25+
cvr: "https://cdn.jsdelivr.net/npm/[email protected].30/dist/",
26+
dbr: "https://npm.scannerproxy.com/cdn/@dynamsoft/[email protected]20240115142402/dist/",
27+
dce: "https://cdn.jsdelivr.net/npm/[email protected]/dist/"
2828
};
2929

3030
// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.

‎hello-world/electron/README.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ npm init
2323

2424
```cmd
2525
npm install electron --save-dev
26-
npm install @dynamsoft/dynamsoft-capture-vision-std
27-
npm install @dynamsoft/dynamsoft-image-processing
28-
npm install @dynamsoft/dynamsoft-core
29-
npm install @dynamsoft/dynamsoft-license
26+
npm install dynamsoft-capture-vision-std
27+
npm install dynamsoft-image-processing
28+
npm install dynamsoft-core
29+
npm install dynamsoft-license
3030
npm install @dynamsoft/dynamsoft-utility
3131
npm install @dynamsoft/dynamsoft-barcode-reader
32-
npm install @dynamsoft/dynamsoft-capture-vision-router
33-
npm install @dynamsoft/dynamsoft-camera-enhancer
32+
npm install dynamsoft-capture-vision-router
33+
npm install dynamsoft-camera-enhancer
3434
```
3535

3636
## Start to implement
@@ -91,12 +91,12 @@ Create the page to be loaded in the created window.
9191
<meta name="keywords" content="barcode, camera, Electron">
9292
<title>Dynamsoft Barcode Reader Sample - Electron</title>
9393
<link href="style.css" rel="stylesheet">
94-
<script src="./node_modules/@dynamsoft/dynamsoft-core/dist/core.js"></script>
95-
<script src="./node_modules/@dynamsoft/dynamsoft-license/dist/license.js"></script>
94+
<script src="./node_modules/dynamsoft-core/dist/core.js"></script>
95+
<script src="./node_modules/dynamsoft-license/dist/license.js"></script>
9696
<script src="./node_modules/@dynamsoft/dynamsoft-utility/dist/utility.js"></script>
9797
<script src="./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/dbr.js"></script>
98-
<script src="./node_modules/@dynamsoft/dynamsoft-capture-vision-router/dist/cvr.js"></script>
99-
<script src="./node_modules/@dynamsoft/dynamsoft-camera-enhancer/dist/dce.js"></script>
98+
<script src="./node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
99+
<script src="./node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
100100
</head>
101101
<body>
102102
<h1>Hello World for Electron</h1>
@@ -127,13 +127,13 @@ Dynamsoft.License.LicenseManager.initLicense(
127127
*/
128128

129129
Dynamsoft.Core.CoreModule.engineResourcePaths = {
130-
std: "./node_modules/@dynamsoft/dynamsoft-capture-vision-std/dist/",
131-
dip: "./node_modules/@dynamsoft/dynamsoft-image-processing/dist/",
132-
core: "./node_modules/@dynamsoft/dynamsoft-core/dist/",
133-
license: "./node_modules/@dynamsoft/dynamsoft-license/dist/",
134-
cvr: "./node_modules/@dynamsoft/dynamsoft-capture-vision-router/dist/",
130+
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
131+
dip: "./node_modules/dynamsoft-image-processing/dist/",
132+
core: "./node_modules/dynamsoft-core/dist/",
133+
license: "./node_modules/dynamsoft-license/dist/",
134+
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
135135
dbr: "./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/",
136-
dce: "./node_modules/@dynamsoft/dynamsoft-camera-enhancer/dist/"
136+
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
137137
};
138138
(async function () {
139139
try {

‎hello-world/electron/action.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ Dynamsoft.License.LicenseManager.initLicense(
1414
*/
1515

1616
Dynamsoft.Core.CoreModule.engineResourcePaths = {
17-
std: "./node_modules/@dynamsoft/dynamsoft-capture-vision-std/dist/",
18-
dip: "./node_modules/@dynamsoft/dynamsoft-image-processing/dist/",
19-
core: "./node_modules/@dynamsoft/dynamsoft-core/dist/",
20-
license: "./node_modules/@dynamsoft/dynamsoft-license/dist/",
21-
cvr: "./node_modules/@dynamsoft/dynamsoft-capture-vision-router/dist/",
17+
std: "./node_modules/dynamsoft-capture-vision-std/dist/",
18+
dip: "./node_modules/dynamsoft-image-processing/dist/",
19+
core: "./node_modules/dynamsoft-core/dist/",
20+
license: "./node_modules/dynamsoft-license/dist/",
21+
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
2222
dbr: "./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/",
23-
dce: "./node_modules/@dynamsoft/dynamsoft-camera-enhancer/dist/"
23+
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
2424
};
2525
(async function () {
2626
try {

‎hello-world/electron/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<meta name="keywords" content="barcode, camera, Electron">
77
<title>Dynamsoft Barcode Reader Sample - Electron</title>
88
<link href="style.css" rel="stylesheet">
9-
<script src="./node_modules/@dynamsoft/dynamsoft-core/dist/core.js"></script>
10-
<script src="./node_modules/@dynamsoft/dynamsoft-license/dist/license.js"></script>
9+
<script src="./node_modules/dynamsoft-core/dist/core.js"></script>
10+
<script src="./node_modules/dynamsoft-license/dist/license.js"></script>
1111
<script src="./node_modules/@dynamsoft/dynamsoft-utility/dist/utility.js"></script>
1212
<script src="./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/dbr.js"></script>
13-
<script src="./node_modules/@dynamsoft/dynamsoft-capture-vision-router/dist/cvr.js"></script>
14-
<script src="./node_modules/@dynamsoft/dynamsoft-camera-enhancer/dist/dce.js"></script>
13+
<script src="./node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
14+
<script src="./node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>
1515
</head>
1616
<body>
1717
<h1>Hello World for Electron</h1>

0 commit comments

Comments
 (0)