From 4d9ec3ab6c4ac4636c2e927837351f970dc9fe76 Mon Sep 17 00:00:00 2001 From: felixindrawan Date: Wed, 26 Jun 2024 11:54:47 -0700 Subject: [PATCH 1/4] fix: add installing exact dbr bundle version to docs --- hello-world/angular/README.md | 2 +- hello-world/next/README.md | 6 ++- hello-world/nuxt/README.md | 2 +- hello-world/react-hooks/README.md | 2 +- hello-world/react/README.md | 2 +- hello-world/vue/README.md | 85 +++---------------------------- hello-world/vue/src/App.vue | 12 ++--- 7 files changed, 22 insertions(+), 89 deletions(-) diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md index c299ec0b..0d09a646 100644 --- a/hello-world/angular/README.md +++ b/hello-world/angular/README.md @@ -57,7 +57,7 @@ Below is the configuration used for this sample. ```cmd cd my-app -npm install dynamsoft-barcode-reader-bundle +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement diff --git a/hello-world/next/README.md b/hello-world/next/README.md index 0feaf2f6..5bbd76a7 100644 --- a/hello-world/next/README.md +++ b/hello-world/next/README.md @@ -59,7 +59,7 @@ Below is the configuration used for this sample. ```cmd cd my-app -npm install dynamsoft-barcode-reader-bundle +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement @@ -421,3 +421,7 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +## Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/hello-world/nuxt/README.md b/hello-world/nuxt/README.md index b237e8f1..6dc6d204 100644 --- a/hello-world/nuxt/README.md +++ b/hello-world/nuxt/README.md @@ -47,7 +47,7 @@ You will be asked to configure quite a few things for the application during the ```cmd cd my-app -npm install dynamsoft-barcode-reader-bundle +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md index 07ba10c8..9de7aa7d 100644 --- a/hello-world/react-hooks/README.md +++ b/hello-world/react-hooks/README.md @@ -45,7 +45,7 @@ npx create-react-app my-app --template typescript ```cmd cd my-app -npm install dynamsoft-barcode-reader-bundle +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement diff --git a/hello-world/react/README.md b/hello-world/react/README.md index f845a084..313f9a7e 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -45,7 +45,7 @@ npx create-react-app my-app --template typescript ```cmd cd my-app -npm install dynamsoft-barcode-reader-bundle +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement diff --git a/hello-world/vue/README.md b/hello-world/vue/README.md index 3290dab2..6b973f30 100644 --- a/hello-world/vue/README.md +++ b/hello-world/vue/README.md @@ -60,8 +60,8 @@ Below is the configuration used for this sample. ### **CD** to the root directory of the application and install necessary libraries ```cmd -npm install -npm install dynamsoft-barcode-reader-bundle +cd vue-project +npm install dynamsoft-barcode-reader-bundle -E ``` ## Start to implement @@ -69,6 +69,7 @@ npm install dynamsoft-barcode-reader-bundle ### Add file "dynamsoft.config.ts" under "/src/" to configure libraries ```typescript +/* /src/dynamsoft.config.ts */ import { CoreModule } from "dynamsoft-core"; import { LicenseManager } from "dynamsoft-license"; import "dynamsoft-barcode-reader"; @@ -110,7 +111,7 @@ CoreModule.loadWasm(["DBR"]); * Create `VideoCapture.vue` under `/components/`. The VideoCapture component helps decode barcodes via camera. -* In `VideoCapture.vue`, add the following code for initializing and destroying some instances. +* In `VideoCapture.vue`, add the following code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). ```vue @@ -213,20 +214,6 @@ onBeforeUnmount(async () => {
- - ``` > Note: > @@ -236,7 +223,7 @@ onBeforeUnmount(async () => { * Create `ImageCapture.vue` under `/components/`. The `ImageCapture` component helps decode barcodes in an image. -* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. +* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). ```vue @@ -306,41 +293,18 @@ onBeforeUnmount(async () => {
- - ``` ### Add the `VideoCapture` and `ImageCapture` component to `App.vue` * On `/src/App.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. -* Add following code to `App.vue`. +* Add following code to `App.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). ```vue - - - - ``` > Note: > @@ -226,7 +203,7 @@ onBeforeUnmount(async () => { ### Edit the `ImageCapture` component -* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. +* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). ```vue @@ -296,35 +273,13 @@ onBeforeUnmount(async () => {
- - ``` ### Add `VideoCapture` and `ImageCapture` components in `app.vue` * On `/app.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. -* Add following code to `app.vue`. +* Add following code to `app.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). ```vue @@ -333,7 +288,7 @@ onBeforeUnmount(async () => {

Hello World for NuxtJS

-
+
-
+
diff --git a/hello-world/angular/src/app/app.component.css b/hello-world/angular/src/app/app.component.css index e3a585fd..0ecbfcfd 100644 --- a/hello-world/angular/src/app/app.component.css +++ b/hello-world/angular/src/app/app.component.css @@ -4,30 +4,30 @@ align-items: center; margin-top: 20px; } -.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; } -.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: 800px) { - .top-btns { + .buttons-container { width: 70%; } } diff --git a/hello-world/angular/src/app/app.component.html b/hello-world/angular/src/app/app.component.html index 8b8e0de7..e48bd9d9 100644 --- a/hello-world/angular/src/app/app.component.html +++ b/hello-world/angular/src/app/app.component.html @@ -2,7 +2,7 @@

Hello World for Angular

-
+
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.css b/hello-world/angular/src/app/video-capture/video-capture.component.css index 465e054e..86184aac 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.css +++ b/hello-world/angular/src/app/video-capture/video-capture.component.css @@ -7,4 +7,5 @@ width: 100%; height: 10vh; overflow: auto; + white-space: pre-wrap; } diff --git a/hello-world/es6.html b/hello-world/es6.html index a8694690..60faa2fb 100644 --- a/hello-world/es6.html +++ b/hello-world/es6.html @@ -13,7 +13,7 @@

Hello World for ES6 (Decode via Camera)

Results:
-
+