Skip to content

feat: update svelte sample and docs #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 2, 2024
Merged

feat: update svelte sample and docs #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ad54c3
feat: update svelte sample and docs
felixindrawan Jun 26, 2024
0745103
fix: add white-space prewrap
felixindrawan Jun 26, 2024
1569aee
feat: remove README generated by framework
Keillion Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
360 changes: 334 additions & 26 deletions hello-world/svelte/README.md
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions hello-world/svelte/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte + TS</title>
<meta name="keywords" content="barcodes, camera, images, vite, svelte" />
<meta
name="description"
content="Web site created using create-react-app"
content="Dynamsoft Barcode Reader in a Vite + Svelte Application, helps read barcodes from camera or images."
/>
<title>Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample</title>
</head>
<body>
<div id="app"></div>
Expand Down
29 changes: 13 additions & 16 deletions hello-world/svelte/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,20 @@
<div class="App">
<div class="title">
<h2 class="title-text">Hello World for Svelte</h2>
<img
class="title-logo"
src="https://www.svelte.cn/svelte-logo-horizontal.svg"
alt="svelte"
/>
<img class="title-logo" src="https://www.svelte.cn/svelte-logo-horizontal.svg" alt="svelte" />
</div>
<div class="top-btns">
<div class="buttons-container">
<button
style="background-color: {mode === 'video' ? 'rgb(255, 174, 55)' : 'white'}"
on:click={() => {
mode = "video";
}}>Video Capture</button
}}>Decode Video</button
>
<button
style="background-color: {mode === 'image' ? 'rgb(255, 174, 55)' : 'white'}"
on:click={() => {
mode = "image";
}}>Image Capture</button
}}>Decode Image</button
>
</div>
{#if mode === "video"}
Expand All @@ -51,40 +47,41 @@
align-items: center;
margin-top: 20px;
}

.title .title-logo {
width: 70px;
height: 30px;
margin-left: 10px;
}

.top-btns {
.buttons-container {
width: 30%;
margin: 20px auto;
}

.top-btns button {
.buttons-container button {
display: inline-block;
border: 1px solid black;
padding: 5px 15px;
background-color: transparent;
cursor: pointer;
/* TODO */
margin-right: -5px;
margin-right: -5px;
}

.top-btns button:first-child {
.buttons-container button:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: transparent;
}
.top-btns button:nth-child(2) {

.buttons-container 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 {
@media screen and (max-width: 800px) {
.buttons-container {
width: 70%;
}
}
Expand Down
110 changes: 57 additions & 53 deletions hello-world/svelte/src/components/ImageCapture.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,73 @@
<script lang="ts">
import { onMount } from "svelte";
import "../dynamsoft.config";
import { EnumCapturedResultItemType } from "dynamsoft-core";
import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
import { onMount } from "svelte";
import "../dynamsoft.config";
import { EnumCapturedResultItemType } from "dynamsoft-core";
import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";

let resDiv: HTMLDivElement;
let resultsContainer: HTMLDivElement;

let pCvRouter: Promise<CaptureVisionRouter>;
let bDestoried = false;
let pCvRouter: Promise<CaptureVisionRouter>;
let isDestroyed = false;

const captureImage = async (e: Event) => {
let files = [...(e.target! as HTMLInputElement).files!];
(e.target! as HTMLInputElement).value = ""; // reset input
resultsContainer.innerText = "";

const captureImage = async (e: Event) => {
let files = [...(e.target! as HTMLInputElement).files!];
(e.target! as HTMLInputElement).value = '';
resDiv.innerText = "";
try {
const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
if (bDestoried) return;

for(let file of files){
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
if (bDestoried) return;
try {
const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
if (isDestroyed) return;

if(files.length > 1){
resDiv.innerText += `\n${file.name}:\n`;
}
for (let _item of result.items) {
if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
let item = _item as BarcodeResultItem;
resDiv.innerText += item.text + "\n";
console.log(item.text);
}
if (!result.items.length) resDiv.innerText += 'No barcode found\n';
}
} catch (ex: any) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
};
for (let file of files) {
// Decode selected image with 'ReadBarcodes_SpeedFirst' template.
const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
if (isDestroyed) return;

onMount(() => {
// onBeforeUnmount
return async()=>{
bDestoried = true;
if(pCvRouter){
try{
(await pCvRouter).dispose();
}catch(_){}
// Print file name if there's multiple files
if (files.length > 1) {
resultsContainer.innerText += `\n${file.name}:\n`;
}
for (let _item of result.items) {
if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
continue; // check if captured result item is a barcode
}
let item = _item as BarcodeResultItem;
resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text
console.log(item.text);
}
// If no items are found, display that no barcode was detected
if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
}
} catch (ex: any) {
let errMsg = ex.message || ex;
console.error(errMsg);
alert(errMsg);
}
};
});

onMount(() => {
// onBeforeUnmount. dispose cvRouter when it's no longer needed
return async () => {
isDestroyed = true;
if (pCvRouter) {
try {
(await pCvRouter).dispose();
} catch (_) {}
}
};
});
</script>

<div class="capture-img">
<div class="img-ipt">
<input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"/>
<div class="image-capture-container">
<div class="input-container">
<input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
</div>
<div class="result-area" bind:this={resDiv}></div>
<div class="result" bind:this={resultsContainer}></div>
</div>

<style>
.capture-img {
.image-capture-container {
width: 100%;
height: 100%;
font-family:
Expand All @@ -77,7 +81,7 @@ onMount(() => {
monospace;
}

.capture-img .img-ipt {
.image-capture-container .input-container {
width: 80%;
height: 100%;
display: flex;
Expand All @@ -86,7 +90,7 @@ onMount(() => {
margin: 0 auto;
}

.capture-img .result-area {
.image-capture-container .result {
margin-top: 20px;
}
</style>
Loading