Merge branch '2025_Nov_re-structure' of https://github.com/Dynamsoft/barcode-reader-javascript-samples into 2025_Nov_re-structure

Author: Shen-wb

README.md

@@ -64,6 +64,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 - [show-result-texts-on-the-video/](./scenarios/show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning.
 - [batch-inventory/](./scenarios/batch-inventory/) — Batch scanning workflow for inventory collection and export.
 - [read-a-drivers-license/](./scenarios/read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data.
+- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code.
 - [read-and-parse-GS1-AI/](./scenarios/read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction.
 - [scan-qr-code/](./scenarios/scan-qr-code/) — QR code targeted demo and settings.
 - [scan-common-1D-and-2D/](./scenarios/scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats.

index.html

@@ -29,14 +29,14 @@
     </style>
     <!--
         For document, copy start from here
-        search `href="frameworks` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/frameworks`
         search `href="scenarios` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/scenarios`
     -->
     <style>
       /* `balloon.min.css` used for tooltip styling */
       :root {
         --balloon-border-radius: 6px;
-        --balloon-color: #24292e;
+        /* use a slightly opaque background to mask underlying page text */
+        --balloon-color: rgba(36,41,46,0.95);
         --balloon-text-color: #fff;
         --balloon-font-size: 13px;
         --balloon-move: 4px;
@@ -58,14 +58,21 @@
         font-style: normal;
         text-shadow: none;
         font-size: var(--balloon-font-size);
+        /* solid background and slight blur to improve legibility over page content */
         background: var(--balloon-color);
         color: var(--balloon-text-color);
         border-radius: var(--balloon-border-radius);
         content: attr(aria-label);
-        padding: 0.5em 1em;
+        padding: 0.55em 0.9em;
         position: absolute;
+        display: inline-block;
         white-space: nowrap;
-        z-index: 10;
+        z-index: 9999;
+        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
+        -webkit-backdrop-filter: blur(3px);
+        backdrop-filter: blur(3px);
+        max-width: 90vw;
+        overflow-wrap: break-word;
       }
       [aria-label][data-balloon-pos]:before {
         width: 0;
@@ -77,7 +84,7 @@
         transition: all 0.18s ease-out 0.18s;
         content: "";
         position: absolute;
-        z-index: 10;
+        z-index: 9999;
       }
       [aria-label][data-balloon-pos]:hover:before,
       [aria-label][data-balloon-pos]:hover:after,
@@ -1272,7 +1279,7 @@ <h3>
       <!-- Scenario Samples -->
       <div class="file">
         <h3>
-          Scenario Samples <span class="sample-count">(16)</span>
+          Scenario Samples <span class="sample-count">(17)</span>
           <a
             class="button title readme-link section-readme-link"
             href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/scenarios/README.md"
@@ -1384,7 +1391,7 @@ <h3>
             <span data-balloon-length="large" data-balloon-pos="down" aria-label="Demo focused on decoding common 2D barcode formats."
               ><a
                 class="button title demo-link"
-                href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/scan-common-2D-codes/index.html"
+                href="scenarios/scan-common-2D-codes/index.html"
                 title="View live demo"
                 >Scan Common 2D Codes</a
               ><a
@@ -1454,6 +1461,17 @@ <h3>
               ></span
             >
           </div>
+          <div class="file">
+            <span data-balloon-length="large" data-balloon-pos="down" aria-label="Read the VIN(vehicle identification number) code and parse it."
+              ><a class="button title demo-link" href="scenarios/read-vin/index.html" title="View live demo">Read VIN</a
+              ><a
+                class="button title source-link"
+                href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/read-vin"
+                title="View source code on GitHub"
+                >Source</a
+              ></span
+            >
+          </div>
           <div class="file">
             <span data-balloon-length="large" data-balloon-pos="down" aria-label="Example showing GS1 AI parsing and data extraction."
               ><a class="button title demo-link" href="scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html" title="View live demo"

scenarios/README.md

@@ -10,8 +10,10 @@ Included samples
 - [show-result-texts-on-the-video/](./show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning.
 - [batch-inventory/](./batch-inventory/) — Batch scanning workflow for inventory collection and export.
 - [read-a-drivers-license/](./read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data.
+- [read-vin/](./read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code.
 - [read-and-parse-GS1-AI/](./read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction.
 - [scan-qr-code/](./scan-qr-code/) — QR code targeted demo and settings.
+- [scan-datamatrix-code/](./scan-datamatrix-code/) — DataMatrix code targeted demo and settings.
 - [scan-common-1D-and-2D/](./scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats.
 - [scan-common-2D-codes/](./scan-common-2D-codes/) — Focused on common 2D barcode formats decoding.
 - [scan-1D-Retail/](./scan-1D-Retail/) — 1D retail barcode tuning example.

scenarios/read-a-drivers-license/README.md

@@ -1,12 +1,12 @@
-# 🪪 Read a Driver's License
+# 🚗 Read a Driver's License
 
 A focused demo that decodes and parses barcode data from driver's license images (camera or file input). The sample demonstrates extracting structured fields (name, DOB, license number, address, etc.) using a parsing template.
 
 ## Included files
 
 - `index.html` — main demo page (camera + image input UI).  
 - `SampleDriversLicense.jpg` — example license image.  
-- `read_and_parse_dl.json` — parsing template / configuration used by the sample.  
+- `read_dl.json` — JSON template used by the sample.  
 - `style.css` — page styles.
 
 ## ✨ Features

scenarios/read-vin/README.md

@@ -0,0 +1,40 @@
+# 🚗 Read a Vehicle Identification Number (VIN)
+
+This focused demo decodes and parses VIN barcodes from vehicle images or live camera input. It shows how to extract structured VIN data and display results in a simple UI.
+
+## Included files
+
+- `index.html` — main demo page (camera + image/file input UI)
+- `SampleVIN.jpg` — example vehicle image with a VIN barcode (if not present, use your own test image)
+- `read_vin.json` — JSON template used by the sample. used by the sample
+
+## Features
+
+- Decode VIN barcodes from camera or static image (common 1D/2D formats used for VIN encoding)
+- Validate VIN length/characters and show parsing/validation results
+- Simple UI for testing images, camera input, and parsing rules
+
+## How it works
+
+- The demo initializes the barcode reader and captures either a selected image or live video frames from the camera.
+- When a barcode is detected, the raw text is displayed and validated against VIN rules (length 17, allowed characters). If a parsing template is available, parsed fields are shown alongside the raw VIN.
+
+## Quick start
+
+Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
+
+1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+
+2. Right-click on `index.html` and select "Open with Five Server".
+
+## 💡 Tips
+
+- Use high-resolution images or a higher camera resolution for reliable decoding and parsing.
+- If a barcode isn't found, try cropping the image to the VIN region or increase camera resolution.
+- VIN validation: the demo checks for 17 characters and excludes I, O, Q characters which are not used in VINs.
+
+## Notes
+
+- Serve via localhost or HTTPS to enable camera access.  
+- Replace the included trial/demo license with a valid Dynamsoft license for extended evaluation.  
+- See the repository root `README.md` for running instructions and API documentation.