Skip to content

Commit 1511b69

Browse files
Cube-JCube-J
committed
show results in the page
1 parent 4c6e69d commit 1511b69

File tree

27 files changed

+263
-111
lines changed

27 files changed

+263
-111
lines changed

‎hello-world/angular/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ ng generate component hello-world
106106
<div #uiContainer class="div-ui-container"></div>
107107
Results:
108108
<br>
109-
<div #resultsContainer id="div-results-container"></div>
109+
<div #resultsContainer class="div-results-container"></div>
110110
```
111111

112112
* Add CSS style in `video-capture.component.css`.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div #uiContainer class="div-ui-container"></div>
22
Results:
33
<br>
4-
<div #resultsContainer id="div-results-container"></div>
4+
<div #resultsContainer class="div-results-container"></div>

‎hello-world/electron/action.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = {
2020
license: "./node_modules/dynamsoft-license/dist/",
2121
cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
2222
dbr: "./node_modules/@dynamsoft/dynamsoft-barcode-reader/dist/",
23-
dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
23+
dce: "./node_modules/dynamsoft-camera-enhancer/dist/",
2424
};
2525
(async function () {
2626
try {
@@ -40,9 +40,13 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = {
4040
// Define a callback for results.
4141
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
4242
resultReceiver.onDecodedBarcodesReceived = (result) => {
43+
if (!result.barcodesResultItems.length) return;
44+
45+
const resultsContainer = document.querySelector("#div-results-container");
46+
resultsContainer.innerHTML = "";
47+
console.log(result);
4348
for (let item of result.barcodesResultItems) {
44-
console.log(item.text);
45-
alert(item.text);
49+
resultsContainer.innerHTML += `${item.formatString}: ${item.text}<br><hr>`;
4650
}
4751
};
4852
router.addResultReceiver(resultReceiver);

‎hello-world/electron/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
<body>
1717
<h1>Hello World for Electron</h1>
1818
<div id="div-ui-container"></div>
19+
Results:
20+
<br>
21+
<div id="div-results-container"></div>
1922
<script src="action.js"></script>
2023
</body>
2124
</html>

‎hello-world/electron/style.css‎

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

‎hello-world/hello-world.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,7 @@ <h1>Hello World (Decode via Camera)</h1>
100100

101101
// Open camera and start scanning single barcode.
102102
await cameraEnhancer.open();
103-
// await router.startCapturing("ReadSingleBarcode");
104-
await router.startCapturing("ReadBarcodes_SpeedFirst");
103+
await router.startCapturing("ReadSingleBarcode");
105104
} catch (ex) {
106105
let errMsg;
107106
if (ex.message?.includes("network connection error")) {

‎hello-world/next/README.md‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility";
110110
import "./VideoCapture.css";
111111

112112
function VideoCapture() {
113+
const uiContainer = useRef<HTMLDivElement>(null);
114+
const resultsContainer = useRef<HTMLDivElement>(null);
115+
113116
const pInit = useRef(
114117
null as Promise<{
115118
cameraView: CameraView;
@@ -128,8 +131,8 @@ function VideoCapture() {
128131
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
129132
const cameraView = await CameraView.createInstance();
130133
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
131-
elRef.current!.innerText = "";
132-
elRef.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
134+
uiContainer.current!.innerText = "";
135+
uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
133136

134137
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
135138
const router = await CaptureVisionRouter.createInstance();
@@ -140,8 +143,12 @@ function VideoCapture() {
140143
resultReceiver.onDecodedBarcodesReceived = (
141144
result: DecodedBarcodesResult
142145
) => {
146+
if (!result.barcodesResultItems.length) return;
147+
148+
resultsContainer.current!.innerHTML = "";
149+
console.log(result);
143150
for (let item of result.barcodesResultItems) {
144-
console.log(item.text);
151+
resultsContainer.current!.innerHTML += `${item.formatString}: ${item.text}<br><hr>`;
145152
}
146153
};
147154
router.addResultReceiver(resultReceiver);
@@ -193,7 +200,6 @@ function VideoCapture() {
193200
cameraView.dispose();
194201
}
195202
};
196-
const elRef = useRef<HTMLDivElement>(null);
197203

198204
useEffect(() => {
199205
(async () => {
@@ -214,7 +220,14 @@ function VideoCapture() {
214220
};
215221
}, []);
216222

217-
return <div ref={elRef} className="div-ui-container"></div>;
223+
return (
224+
<div>
225+
<div ref={uiContainer} className="div-ui-container"></div>
226+
Results:
227+
<br />
228+
<div ref={resultsContainer} className="div-results-container"></div>
229+
</div>
230+
);
218231
}
219232

220233
export default VideoCapture;
@@ -231,6 +244,12 @@ export default VideoCapture;
231244
width: 100%;
232245
height: 70vh;
233246
}
247+
248+
.div-results-container {
249+
width: 100%;
250+
height: 10vh;
251+
overflow: auto;
252+
}
234253
```
235254

236255
### Create and edit the `ImageCapture` component
@@ -424,7 +443,6 @@ button {
424443

425444
.container {
426445
margin: 2vmin auto;
427-
text-align: center;
428446
font-size: medium;
429447
width: 80vw;
430448
}

‎hello-world/next/components/HelloWorld/HelloWorld.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ button {
2222

2323
.container {
2424
margin: 2vmin auto;
25-
text-align: center;
2625
font-size: medium;
2726
width: 80vw;
2827
}

‎hello-world/next/components/VideoCapture/VideoCapture.css‎

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

‎hello-world/next/components/VideoCapture/VideoCapture.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { MultiFrameResultCrossFilter } from "@dynamsoft/dynamsoft-utility";
1515
import "./VideoCapture.css";
1616

1717
function VideoCapture() {
18+
const uiContainer = useRef<HTMLDivElement>(null);
19+
const resultsContainer = useRef<HTMLDivElement>(null);
20+
1821
const pInit = useRef(
1922
null as Promise<{
2023
cameraView: CameraView;
@@ -33,8 +36,8 @@ function VideoCapture() {
3336
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
3437
const cameraView = await CameraView.createInstance();
3538
const cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
36-
elRef.current!.innerText = "";
37-
elRef.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
39+
uiContainer.current!.innerText = "";
40+
uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
3841

3942
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
4043
const router = await CaptureVisionRouter.createInstance();
@@ -45,8 +48,12 @@ function VideoCapture() {
4548
resultReceiver.onDecodedBarcodesReceived = (
4649
result: DecodedBarcodesResult
4750
) => {
51+
if (!result.barcodesResultItems.length) return;
52+
53+
resultsContainer.current!.innerHTML = "";
54+
console.log(result);
4855
for (let item of result.barcodesResultItems) {
49-
console.log(item.text);
56+
resultsContainer.current!.innerHTML += `${item.formatString}: ${item.text}<br><hr>`;
5057
}
5158
};
5259
router.addResultReceiver(resultReceiver);
@@ -98,7 +105,6 @@ function VideoCapture() {
98105
cameraView.dispose();
99106
}
100107
};
101-
const elRef = useRef<HTMLDivElement>(null);
102108

103109
useEffect(() => {
104110
(async () => {
@@ -119,7 +125,14 @@ function VideoCapture() {
119125
};
120126
}, []);
121127

122-
return <div ref={elRef} className="div-ui-container"></div>;
128+
return (
129+
<div>
130+
<div ref={uiContainer} className="div-ui-container"></div>
131+
Results:
132+
<br />
133+
<div ref={resultsContainer} className="div-results-container"></div>
134+
</div>
135+
);
123136
}
124137

125138
export default VideoCapture;

0 commit comments

Comments
 (0)