fix: exact installation in docs, buttons-container class, and white-space for VideoCapture (#185)

* fix: add installing exact dbr bundle version to docs

* removed css on readme for nuxt

* fix whitespace styling

* fix: remove personal trial license

---------

Co-authored-by: felixindrawan <[email protected]>

Author: Felix-Dynamsoft

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
@@ -348,7 +348,7 @@ export class ImageCaptureComponent {
   <div class='title'>
     <h2 class='title-text'>Hello World for Angular</h2>
   </div>
-  <div class='top-btns'>
+  <div class='buttons-container'>
     <button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Decode Video</button>
     <button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Decode Image</button>
   </div>

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%;
   }
 }

hello-world/angular/src/app/app.component.html

@@ -2,7 +2,7 @@
   <div class='title'>
     <h2 class='title-text'>Hello World for Angular</h2>
   </div>
-  <div class='top-btns'>
+  <div class='buttons-container'>
     <button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Decode Video</button>
     <button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Decode Image</button>
   </div>

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;
 }

hello-world/es6.html

@@ -13,7 +13,7 @@
     <h1>Hello World for ES6 (Decode via Camera)</h1>
     <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
     Results:<br />
-    <div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
+    <div id="results" style="width: 100%; height: 10vh; overflow: auto; white-space: pre-wrap"></div>
     <script type="module">
       import {
         CoreModule,

hello-world/hello-world.html

@@ -13,7 +13,7 @@
     <h1>Hello World (Decode via Camera)</h1>
     <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
     Results:<br />
-    <div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
+    <div id="results" style="width: 100%; height: 10vh; overflow: auto; white-space: pre-wrap"></div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
     <script>
       /** LICENSE ALERT - README

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).

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

@@ -8,4 +8,5 @@
   width: 100%;
   height: 10vh;
   overflow: auto;
+  white-space: pre-wrap;
 }

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
@@ -102,7 +102,7 @@ CoreModule.loadWasm(["DBR"]);
 
 ### Edit the `VideoCapture` component
 
-* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera.
+* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera.  For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
 
 ```vue
 <!-- /components/VideoCapture.client.vue -->
@@ -196,37 +196,14 @@ onBeforeUnmount(async () => {
   } catch (_) { }
 });
 </script>
-
-<template>
-  <div>
-    <div ref="cameraViewContainer" class="camera-view-container"></div>
-    <br />
-    Results:
-    <div ref="resultsContainer" class="results"></div>
-  </div>
-</template>
-
-<style scoped>
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-  background: #eee;
-}
-
-.results {
-  width: 100%;
-  height: 10vh;
-  overflow: auto;
-}
-</style>
 ```
 > Note:
 >
 > If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customize-the-ui)
 
 ### 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
 <!-- /components/ImageCapture.client.vue -->
@@ -296,35 +273,13 @@ onBeforeUnmount(async () => {
     <div class="results" ref="resultContainer"></div>
   </div>
 </template>
-
-<style scoped>
-.image-capture-container {
-  width: 100%;
-  height: 100%;
-  font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.image-capture-container .input-container {
-  width: 80%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  border: 1px solid black;
-  margin: 0 auto;
-}
-
-.image-capture-container .results {
-  margin-top: 20px;
-  height: 100%;
-}
-</style>
 ```
 
 ### 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
 <!-- /app.vue -->
@@ -333,7 +288,7 @@ onBeforeUnmount(async () => {
     <div class='title'>
       <h2 class='title-text'>Hello World for NuxtJS</h2>
     </div>
-    <div class='top-btns'>
+    <div class='buttons-container'>
       <button @click="mode = 'video'"
         :style="{ backgroundColor: mode === 'video' ? 'rgb(255, 174, 55)' : '#FFFFFF' }">Video Capture</button>
       <button @click="mode = 'image'"
@@ -355,34 +310,6 @@ import ImageCapture from "./components/ImageCapture.client.vue";
 
 const mode: Ref<string> = ref("video");
 </script>
-
-<style scoped>
-.title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-}
-
-.top-btns {
-  width: 30%;
-  margin: 20px auto;
-}
-
-.top-btns button {
-  display: inline-block;
-  border: 1px solid black;
-  padding: 5px 15px;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-@media screen and (max-width: 800px) {
-  .top-btns {
-    width: 70%;
-  }
-}
-</style>
 ```
 > Note: 
 >

hello-world/nuxt/app.vue

@@ -4,7 +4,7 @@
       <h2 class='title-text'>Hello World for NuxtJS</h2>
       <img class='title-logo' src="./assets/logo.svg" alt="logo" />
     </div>
-    <div class='top-btns'>
+    <div class='buttons-container'>
       <button @click="mode = 'video'"
         :style="{ backgroundColor: mode === 'video' ? 'rgb(255, 174, 55)' : '#FFFFFF' }">Video Capture</button>
       <button @click="mode = 'image'"
@@ -41,33 +41,33 @@ const mode: Ref<string> = ref("video");
   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;
 }
 
-.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%;
   }
 }