user frinedly and readme updates

Author: Tom-Dynamsoft

1.hello-world/2.read-an-image.html

@@ -50,17 +50,13 @@ <h1 style="font-size: 1.5em;">Read Barcode from Images</h1>
             }
         })();
 
-
-
-
         // html elements
         const iptFile = document.getElementById('ipt-file');
         const iptReadonlyLastResult = document.getElementById('ipt-readonly-last-result');
         const pReading = document.getElementById('p-reading');
         const divResults = document.getElementById('div-results');
         const divCvsContainer = document.getElementById('div-cvs-container');
 
-
         // reader for decoding pictures
         let pReader = null;
         iptFile.addEventListener('change', async function() {

1.hello-world/4.read-video-react/src/components/HelloWorld/HelloWorld.css

@@ -43,7 +43,7 @@ span {
 
 .latest-result:focus {
     outline: none;
-    box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
+    box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
 }
 
 #results {

1.hello-world/5.read-video-vue/src/components/HelloWorld.vue

@@ -109,7 +109,7 @@ span {
 
 .latest-result:focus {
   outline: none;
-  box-shadow: 0.1rem 0.4rem 0.8rem #5e35b1;
+  box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
 }
 
 #results {

1.hello-world/README.md

@@ -0,0 +1,73 @@
+# The Hello World Sample Set
+
+As you have gone through the [user guide](https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#getting-started---hello-world), you might have seen some basic "Hello World" code to help you quickly create a basic web application that uses our SDK.
+
+This sample set will revisit the Hello World code, and its implementation in some of the popular frameworks such as Angular, React, an Vue.
+
+Let's break down each of the samples
+
+## Hello World - Read Barcodes via Video
+
+In this sample, you will find the basic lines of code ncessary to initialize the SDK and set it up.
+
+Let's quickly break down the methods used in order:
+
+* `license`: This property specifies a license key. Read more on Specify the license.
+* `createInstance()`: This method creates a `BarcodeScanner` object. This object can read barcodes directly from a video input with the help of its interactive UI (hidden by default) and the MediaDevices interface.
+* `onFrameRead`: This event is triggered every time the SDK finishes scanning a video frame. The results object contains all the barcode results that the SDK have found on this frame. In this example, we print the results to the browser console.
+* `onUniqueRead`: This event is triggered when the SDK finds a new barcode, which is not a duplicate among multiple frames. txt holds the barcode text value while result is an object that holds details of the barcode. In this example, an alert will be displayed for this new barcode.
+* `show()`: This method brings up the built-in UI of the `BarcodeScanner` object and starts scanning
+
+In fact, `onFrameRead` and `onUniqueRead` do not have to both be defined in the code. `onUniqueRead` is the more used one between the two as it is triggered when a new barcode is found rather than on every frame.
+
+## Hello World - Read Barcodes from an Image
+
+The second sample in this set focuses on the secondary class `BarcodeReader` which is a low-level barcode reader that processes still images and returns barcode results.
+
+In this sample, a listener is set up so that the SDK decodes any image that the user uploads.
+
+[`decode`](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode) is the main method to go for when using the `BarcodeReader` class, although the class offers a number of other methods should you work with base64 strings, for instance. The rest of the image decoding methods can be found [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/BarcodeReader.html?ver=latest#decode-barcodes).
+
+## Hello World - Angular
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-angular.html).
+
+## Hello World in React
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-reactjs.html).
+
+## Hello World in Vue 2
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejs.html).
+
+## Hello World in Vue 3
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-vuejsv3.html).
+
+## Hello World in Next.js
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nextjs.html).
+
+## Hello World in NuxtJS
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-nuxtjs.html).
+
+## Hello World in Electron
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-electron.html).
+
+## Hello World in PWA
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-pwa.html).
+
+## Hello World with RequireJS
+
+Read more on the sample [here](https://www.dynamsoft.com/barcode-reader/programming/javascript/samples-demos/helloworld-requirejs.html).
+
+## Hello World with ES6
+
+This sample shows how to use the SDK in a web page based on ES6 (also known as ECMAScript 2015 or ECMAScript 6).
+
+## Support
+
+If you have any questions, feel free to contact Dynamsoft support via [email](mailto:support@dynamsoft.com) or [live chat](https://www.dynamsoft.com/barcode-reader/overview/) via the "Let's Chat" button.

2.ui-tweaking/1.read-video-show-result.html

@@ -10,9 +10,15 @@
 </head>
 
 <body>
-    <h1>Use the Default Built-in UI</h1>
+    <h1 style="font-size: 1.5em;">Use the Default Built-in UI</h1>
+    <input type="text" id="result" title="Double click to clear!" readonly="true" class="latest-result" placeholder="The Last Read Barcode">
     <div id="UIElement" class="UIElement">
-        <button id="showScanner" class="showScanner">Show The Scanner</button>
+        <span id='lib-load' style='font-size:x-large' hidden>Loading Library...</span><br />
+        <button id="showScanner" hidden>Show The Scanner</button>
+    </div>
+    <div>
+        <span style="float:left;margin-top:20px;">All Results:</span><br />
+        <div id="results"></div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.0/dist/dbr.js"></script>
     <script>
@@ -31,77 +37,151 @@ <h1>Use the Default Built-in UI</h1>
 
         // scanner for decoding video
         let pScanner = null;
-        (async () => {
+        (async() => {
             //Load the library on page load to speed things up.
             try {
+                document.getElementById('lib-load').hidden = false;
                 await Dynamsoft.DBR.BarcodeReader.loadWasm();
+                startBarcodeScanner();
             } catch (ex) {
                 alert(ex.message);
                 throw ex;
             }
+            document.getElementById('result').addEventListener('dblclick', async() => {
+                document.getElementById('result').value = "";
+            });
+            document.getElementById('showScanner').addEventListener('click', async() => {
+                if (pScanner)(await pScanner).show();
+            });
         })();
-        document.getElementById('showScanner').addEventListener('click', async () => {
+        // decode video from camera
+        async function startBarcodeScanner() {
             try {
                 let scanner = await (pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-                scanner.onUniqueRead = (txt, result) => { alert(txt); };
+                document.getElementById('showScanner').hidden = false;
+                scanner.onFrameRead = (_results) => {
+                    for (let result of _results) {
+                        let newElements = [];
+                        newElements.push(createASpan(result.barcodeFormatString + ": "));
+                        newElements.push(createASpan(result.barcodeText, "resultText"));
+                        newElements.push(document.createElement('br'));
+                        if (result.barcodeText.indexOf("Attention(exceptionCode") != -1) {
+                            newElements.push(createASpan(" Error: " + result.exception.message));
+                            newElements.push(document.createElement('br'));
+                        }
+                        for (let span of newElements) {
+                            document.getElementById('results').appendChild(span);
+                        }
+                        document.getElementById('results').scrollTop = document.getElementById('results').scrollHeight;
+                    }
+                };
+                scanner.onUniqueRead = (txt, result) => {
+                    document.getElementById('result').value = result.barcodeFormatString + ": " + txt;
+                    document.getElementById('result').focus();
+                    setTimeout(() => {
+                        document.getElementById('result').blur();
+                    }, 2000);
+                };
                 document.getElementById('UIElement').appendChild(scanner.getUIElement());
                 await scanner.show();
-            } catch (ex) {
-                alert(ex.message);
-                setSingleFrameMode();
-                throw ex;
-            }
-        });
-        async function setSingleFrameMode() {
-            try {
-                let scanner = await(pScanner = pScanner || Dynamsoft.DBR.BarcodeScanner.createInstance());
-                scanner.singleFrameMode = true;
-                await scanner.show();
+                document.getElementById('lib-load').hidden = true;
+                document.getElementById('results').style.visibility = "visible";
             } catch (ex) {
                 alert(ex.message);
                 throw ex;
             }
         }
+
+        function createASpan(txt, className) {
+            let newSPAN = document.createElement("span");
+            newSPAN.textContent = txt;
+            if (className)
+                newSPAN.className = className;
+            return newSPAN;
+        }
     </script>
 </body>
 <style>
-    * {
-        margin: 0;
-        padding: 0;
+    button#showScanner {
+        position: absolute;
+        width: 50%;
+        left: 25%;
+        top: 30%;
     }
-
+    
     body {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         width: 100vw;
-        height: 100vh;
+        height: 90vh;
         color: #455A64;
+        margin: 0;
     }
-
-    h1 {
-        font-size: 1.5em;
-    }
-
+    
     button {
-        margin-bottom: 2vh;
         font-size: 1.5rem;
+        margin-bottom: 2vh;
     }
-
-    .UIElement {
-        height: 60vh;
+    
+    span {
+        font-size: 0.8rem;
+    }
+    
+    .latest-result {
+        display: block;
+        margin: 0;
+        padding: 0.4rem 0.8rem;
+        color: inherit;
+        min-width: 40vw;
+        width: auto;
+        border: none;
+        font-size: 1rem;
+        border-radius: 0.2rem;
+        text-align: center;
+    }
+    
+    .latest-result::placeholder {
+        color: #B0BEC5;
+    }
+    
+    .latest-result:focus {
+        outline: none;
+        box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
+    }
+    
+    #results {
+        border: 1px dashed grey;
+        overflow: auto;
         width: 80vw;
+        padding: 2vmin;
+        margin-bottom: 3vh;
+        height: 15vh;
+    }
+    
+    .resultText {
+        color: #cE5E04
+    }
+    
+    .bigger {
+        font-size: large;
+        margin-bottom: 2%;
+    }
+    
+    #UIElement {
         margin: 2vmin auto;
         text-align: center;
         font-size: medium;
+        height: 40vh;
+        width: 80vw;
     }
-
-    .showScanner {
-        position: absolute;
-        width: 50%;
-        left: 25%;
+    
+    #UIElement img {
+        max-width: 100%;
+        max-height: 90%;
+        border: solid 1px gray;
     }
 </style>