Skip to content

Commit 6c55bba

Browse files
Felix-DynamsoftfelixindrawanKeillion
authored
feat: update svelte sample and docs (#184)
* feat: update svelte sample and docs * fix: add white-space prewrap * feat: remove README generated by framework --------- Co-authored-by: felixindrawan <[email protected]> Co-authored-by: Keillion <[email protected]>
1 parent 4f24fcb commit 6c55bba

File tree

7 files changed

+532
-204
lines changed

7 files changed

+532
-204
lines changed

‎hello-world/svelte/README.md‎

Lines changed: 334 additions & 26 deletions
Large diffs are not rendered by default.

‎hello-world/svelte/index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite + Svelte + TS</title>
6+
<meta name="keywords" content="barcodes, camera, images, vite, svelte" />
7+
<meta
8+
name="description"
9+
content="Web site created using create-react-app"
10+
content="Dynamsoft Barcode Reader in a Vite + Svelte Application, helps read barcodes from camera or images."
11+
/>
12+
<title>Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample</title>
713
</head>
814
<body>
915
<div id="app"></div>

‎hello-world/svelte/src/App.svelte‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,20 @@
99
<div class="App">
1010
<div class="title">
1111
<h2 class="title-text">Hello World for Svelte</h2>
12-
<img
13-
class="title-logo"
14-
src="https://www.svelte.cn/svelte-logo-horizontal.svg"
15-
alt="svelte"
16-
/>
12+
<img class="title-logo" src="https://www.svelte.cn/svelte-logo-horizontal.svg" alt="svelte" />
1713
</div>
18-
<div class="top-btns">
14+
<div class="buttons-container">
1915
<button
2016
style="background-color: {mode === 'video' ? 'rgb(255, 174, 55)' : 'white'}"
2117
on:click={() => {
2218
mode = "video";
23-
}}>Video Capture</button
19+
}}>Decode Video</button
2420
>
2521
<button
2622
style="background-color: {mode === 'image' ? 'rgb(255, 174, 55)' : 'white'}"
2723
on:click={() => {
2824
mode = "image";
29-
}}>Image Capture</button
25+
}}>Decode Image</button
3026
>
3127
</div>
3228
{#if mode === "video"}
@@ -51,40 +47,41 @@
5147
align-items: center;
5248
margin-top: 20px;
5349
}
50+
5451
.title .title-logo {
5552
width: 70px;
5653
height: 30px;
5754
margin-left: 10px;
5855
}
5956
60-
.top-btns {
57+
.buttons-container {
6158
width: 30%;
6259
margin: 20px auto;
6360
}
6461
65-
.top-btns button {
62+
.buttons-container button {
6663
display: inline-block;
6764
border: 1px solid black;
6865
padding: 5px 15px;
6966
background-color: transparent;
7067
cursor: pointer;
71-
/* TODO */
72-
margin-right: -5px;
68+
margin-right: -5px;
7369
}
7470
75-
.top-btns button:first-child {
71+
.buttons-container button:first-child {
7672
border-top-left-radius: 10px;
7773
border-bottom-left-radius: 10px;
7874
border-right: transparent;
7975
}
80-
.top-btns button:nth-child(2) {
76+
77+
.buttons-container button:nth-child(2) {
8178
border-top-right-radius: 10px;
8279
border-bottom-right-radius: 10px;
8380
border-left: transparent;
8481
}
8582
86-
@media screen and (max-width: 500px) {
87-
.top-btns {
83+
@media screen and (max-width: 800px) {
84+
.buttons-container {
8885
width: 70%;
8986
}
9087
}

‎hello-world/svelte/src/components/ImageCapture.svelte‎

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,73 @@
11
<script lang="ts">
2-
import { onMount } from "svelte";
3-
import "../dynamsoft.config";
4-
import { EnumCapturedResultItemType } from "dynamsoft-core";
5-
import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
6-
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
2+
import { onMount } from "svelte";
3+
import "../dynamsoft.config";
4+
import { EnumCapturedResultItemType } from "dynamsoft-core";
5+
import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
6+
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
77
8-
let resDiv: HTMLDivElement;
8+
let resultsContainer: HTMLDivElement;
99
10-
let pCvRouter: Promise<CaptureVisionRouter>;
11-
let bDestoried = false;
10+
let pCvRouter: Promise<CaptureVisionRouter>;
11+
let isDestroyed = false;
1212
13+
const captureImage = async (e: Event) => {
14+
let files = [...(e.target! as HTMLInputElement).files!];
15+
(e.target! as HTMLInputElement).value = ""; // reset input
16+
resultsContainer.innerText = "";
1317
14-
const captureImage = async (e: Event) => {
15-
let files = [...(e.target! as HTMLInputElement).files!];
16-
(e.target! as HTMLInputElement).value = '';
17-
resDiv.innerText = "";
18-
try {
19-
const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
20-
if (bDestoried) return;
21-
22-
for(let file of files){
23-
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
24-
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
25-
if (bDestoried) return;
18+
try {
19+
const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
20+
if (isDestroyed) return;
2621
27-
if(files.length > 1){
28-
resDiv.innerText += `\n${file.name}:\n`;
29-
}
30-
for (let _item of result.items) {
31-
if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
32-
let item = _item as BarcodeResultItem;
33-
resDiv.innerText += item.text + "\n";
34-
console.log(item.text);
35-
}
36-
if (!result.items.length) resDiv.innerText += 'No barcode found\n';
37-
}
38-
} catch (ex: any) {
39-
let errMsg = ex.message || ex;
40-
console.error(errMsg);
41-
alert(errMsg);
42-
}
43-
};
22+
for (let file of files) {
23+
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
24+
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
25+
if (isDestroyed) return;
4426
45-
onMount(() => {
46-
// onBeforeUnmount
47-
return async()=>{
48-
bDestoried = true;
49-
if(pCvRouter){
50-
try{
51-
(await pCvRouter).dispose();
52-
}catch(_){}
27+
// Print file name if there's multiple files
28+
if (files.length > 1) {
29+
resultsContainer.innerText += `\n${file.name}:\n`;
30+
}
31+
for (let _item of result.items) {
32+
if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
33+
continue; // check if captured result item is a barcode
34+
}
35+
let item = _item as BarcodeResultItem;
36+
resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text
37+
console.log(item.text);
38+
}
39+
// If no items are found, display that no barcode was detected
40+
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
41+
}
42+
} catch (ex: any) {
43+
let errMsg = ex.message || ex;
44+
console.error(errMsg);
45+
alert(errMsg);
5346
}
5447
};
55-
});
48+
49+
onMount(() => {
50+
// onBeforeUnmount. dispose cvRouter when it's no longer needed
51+
return async () => {
52+
isDestroyed = true;
53+
if (pCvRouter) {
54+
try {
55+
(await pCvRouter).dispose();
56+
} catch (_) {}
57+
}
58+
};
59+
});
5660
</script>
5761

58-
<div class="capture-img">
59-
<div class="img-ipt">
60-
<input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"/>
62+
<div class="image-capture-container">
63+
<div class="input-container">
64+
<input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
6165
</div>
62-
<div class="result-area" bind:this={resDiv}></div>
66+
<div class="result" bind:this={resultsContainer}></div>
6367
</div>
6468

6569
<style>
66-
.capture-img {
70+
.image-capture-container {
6771
width: 100%;
6872
height: 100%;
6973
font-family:
@@ -77,7 +81,7 @@ onMount(() => {
7781
monospace;
7882
}
7983
80-
.capture-img .img-ipt {
84+
.image-capture-container .input-container {
8185
width: 80%;
8286
height: 100%;
8387
display: flex;
@@ -86,7 +90,7 @@ onMount(() => {
8690
margin: 0 auto;
8791
}
8892
89-
.capture-img .result-area {
93+
.image-capture-container .result {
9094
margin-top: 20px;
9195
}
9296
</style>

0 commit comments

Comments
 (0)