From 144926e62eb88d661383ceff9a051d780ad38752 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 13:41:32 +0800
Subject: [PATCH 1/7] bubble box

---
 .../3.show-result-texts-on-the-video.html     | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)
diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index aef686e0..1d5b8eeb 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -15,16 +15,33 @@
     <title>
       Dynamsoft Barcode Reader Sample - Show result texts on the video
     </title>
+    <style>
+      .div-inf{
+        position: absolute;
+        background: white;
+        border: 4px solid black;
+        padding: 4px;
+      }
+      .div-inf::after{
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        background: white;
+        border-left: 8px solid white;
+        border-bottom: 8px solid white;
+        border-right: 8px solid white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="div-ui-container" style="width: 100%; height: 90vh"></div>
+    <div id="div-information-containers"></div>
     <!--
     This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
     library offline. Please see the guide on how to host the library: 
     https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended
     -->
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script>
-  </head>
-  <body>
-    <div id="div-ui-container" style="width: 100%; height: 90vh"></div>
-    <div id="div-text-containers"></div>
     <script>
       if (location.protocol === "file:") {
         const message = `The page is opened via file:// and "BarcodeScanner" may not work properly. Please open the page via https:// or host it on "http://localhost/".`;
@@ -47,7 +64,7 @@
        * LICENSE ALERT - THE END
        */
 
-      const divTextContainers = document.querySelector("#div-text-containers");
+      const divInfContainers = document.querySelector("#div-information-containers");
       let scanner;
 
       (async () => {
@@ -68,7 +85,7 @@
             console.log(results);
 
             // Clear previous result text elements.
-            divTextContainers.innerText = "";
+            divInfContainers.innerText = "";
 
             for (let result of results) {
               const l = result.localizationResult;
@@ -88,29 +105,26 @@
               const convertedP1 = scanner.convertToPageCoordinates(p1);
               const convertedP2 = scanner.convertToPageCoordinates(p2);
               
-              textContainer = document.createElement("div");
+              divInf = document.createElement("div");
+              divInf.className = 'div-inf';
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position !== "static") {
                 const rect = document.body.getBoundingClientRect();
                 const borderWidth = parseInt(bodyStyle.borderWidth);
-                Object.assign(textContainer.style, {
-                  position: "absolute",
+                Object.assign(divInf.style, {
                   left: convertedP1.x - rect.left - borderWidth + "px",
                   right: rect.right - convertedP2.x - borderWidth + "px",
                   bottom: rect.bottom - convertedP1.y - borderWidth + "px",
-                  color: "#FE8E14",
                 });
               } else {
-                Object.assign(textContainer.style, {
-                  position: "absolute",
+                Object.assign(divInf.style, {
                   left: convertedP1.x + "px",
                   right: document.documentElement.clientWidth - convertedP2.x + "px",
                   bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
-                  color: "#FE8E14",
                 });
               }
-              textContainer.innerText = result.barcodeText;
-              divTextContainers.append(textContainer);
+              divInf.innerText = result.barcodeText;
+              divInfContainers.append(divInf);
 
               /**
                * You can also add more information, such as displaying product images.

From 97e26fa9816a00833f334db22be100bd48d83910 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 13:48:31 +0800
Subject: [PATCH 2/7] remove border color of bubble

---
 4.use-case/3.show-result-texts-on-the-video.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 1d5b8eeb..960fff76 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -19,7 +19,6 @@
       .div-inf{
         position: absolute;
         background: white;
-        border: 4px solid black;
         padding: 4px;
       }
       .div-inf::after{

From 2df60822ef36d140ff86b3b5bd3390cf27e52a74 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 15:19:09 +0800
Subject: [PATCH 3/7] Update 3.show-result-texts-on-the-video.html

---
 .../3.show-result-texts-on-the-video.html     | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 960fff76..ca63cee7 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -16,19 +16,23 @@
       Dynamsoft Barcode Reader Sample - Show result texts on the video
     </title>
     <style>
-      .div-inf{
+      .bubble-box{
         position: absolute;
         background: white;
+        border-radius: 4px; 
         padding: 4px;
+        word-break: break-all;
+        word-wrap: break-word;
+        box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
       }
-      .div-inf::after{
+      .bubble-box::after{
         content: '';
         position: absolute;
         bottom: -8px;
-        background: white;
-        border-left: 8px solid white;
-        border-bottom: 8px solid white;
-        border-right: 8px solid white;
+        left: calc(50% - 8px);
+        border-left: 8px solid transparent;
+        border-top: 8px solid white;
+        border-right: 8px solid transparent;
       }
     </style>
   </head>
@@ -105,21 +109,26 @@
               const convertedP2 = scanner.convertToPageCoordinates(p2);
               
               divInf = document.createElement("div");
-              divInf.className = 'div-inf';
+              divInf.className = 'bubble-box';
+              // define width of the bubble box
+              const divInfWidth = "20rem";
+              divInf.style.width = divInfWidth;
+              const divInfVerticalOffset = 4; //px
               const bodyStyle = getComputedStyle(document.body);
-              if (bodyStyle.position !== "static") {
-                const rect = document.body.getBoundingClientRect();
-                const borderWidth = parseInt(bodyStyle.borderWidth);
+              if (bodyStyle.position === "static") {
                 Object.assign(divInf.style, {
-                  left: convertedP1.x - rect.left - borderWidth + "px",
-                  right: rect.right - convertedP2.x - borderWidth + "px",
-                  bottom: rect.bottom - convertedP1.y - borderWidth + "px",
+                  left: `calc(${(convertedP1.x + convertedP2.x) / 2}px - ${divInfWidth} / 2)`,
+                  bottom: `${document.documentElement.clientHeight  - convertedP1.y + divInfVerticalOffset}px`,
                 });
-              } else {
+              } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
+                const bodyRect = document.body.getBoundingClientRect();
+                const bodyBorderLeft = parseInt(bodyStyle.borderLeftWidth);
+                const bodyBorderBottom = parseInt(bodyStyle.borderBottomWidth);
+                const bodyPaddingLeft = parseInt(bodyStyle.paddingLeft);
+                const bodyPaddingBottom = parseInt(bodyStyle.paddingBottom);
                 Object.assign(divInf.style, {
-                  left: convertedP1.x + "px",
-                  right: document.documentElement.clientWidth - convertedP2.x + "px",
-                  bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
+                  left: `calc(${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft - bodyPaddingLeft}px - ${divInfWidth} / 2)`,
+                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom - bodyPaddingBottom + divInfVerticalOffset}px`,
                 });
               }
               divInf.innerText = result.barcodeText;

From de37469381156cce536e8403c3bef48e1485c22b Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 15:27:37 +0800
Subject: [PATCH 4/7] parseFloat

---
 4.use-case/3.show-result-texts-on-the-video.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index ca63cee7..798cebdf 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -122,10 +122,10 @@
                 });
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
-                const bodyBorderLeft = parseInt(bodyStyle.borderLeftWidth);
-                const bodyBorderBottom = parseInt(bodyStyle.borderBottomWidth);
-                const bodyPaddingLeft = parseInt(bodyStyle.paddingLeft);
-                const bodyPaddingBottom = parseInt(bodyStyle.paddingBottom);
+                const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth);
+                const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
+                const bodyPaddingLeft = parseFloat(bodyStyle.paddingLeft);
+                const bodyPaddingBottom = parseFloat(bodyStyle.paddingBottom);
                 Object.assign(divInf.style, {
                   left: `calc(${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft - bodyPaddingLeft}px - ${divInfWidth} / 2)`,
                   bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom - bodyPaddingBottom + divInfVerticalOffset}px`,

From bfc5b4468b9adaf60c15da58de1c160356967a43 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 16:01:51 +0800
Subject: [PATCH 5/7] transform: translateX(-50%)

---
 4.use-case/3.show-result-texts-on-the-video.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 798cebdf..bfc10ff9 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -17,6 +17,7 @@
     </title>
     <style>
       .bubble-box{
+        max-width: 20rem; /* You are likely to change it */
         position: absolute;
         background: white;
         border-radius: 4px; 
@@ -24,6 +25,7 @@
         word-break: break-all;
         word-wrap: break-word;
         box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
+        transform: translateX(-50%);
       }
       .bubble-box::after{
         content: '';
@@ -111,24 +113,20 @@
               divInf = document.createElement("div");
               divInf.className = 'bubble-box';
               // define width of the bubble box
-              const divInfWidth = "20rem";
-              divInf.style.width = divInfWidth;
               const divInfVerticalOffset = 4; //px
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position === "static") {
                 Object.assign(divInf.style, {
-                  left: `calc(${(convertedP1.x + convertedP2.x) / 2}px - ${divInfWidth} / 2)`,
+                  left: `${(convertedP1.x + convertedP2.x) / 2}px`,
                   bottom: `${document.documentElement.clientHeight  - convertedP1.y + divInfVerticalOffset}px`,
                 });
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
                 const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth);
                 const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
-                const bodyPaddingLeft = parseFloat(bodyStyle.paddingLeft);
-                const bodyPaddingBottom = parseFloat(bodyStyle.paddingBottom);
                 Object.assign(divInf.style, {
-                  left: `calc(${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft - bodyPaddingLeft}px - ${divInfWidth} / 2)`,
-                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom - bodyPaddingBottom + divInfVerticalOffset}px`,
+                  left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
+                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom + divInfVerticalOffset}px`,
                 });
               }
               divInf.innerText = result.barcodeText;

From a1fd166acc684504cfde0fe47659378f39505c17 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 16:02:33 +0800
Subject: [PATCH 6/7] Update 3.show-result-texts-on-the-video.html

---
 4.use-case/3.show-result-texts-on-the-video.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index bfc10ff9..779f22d7 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -112,7 +112,6 @@
               
               divInf = document.createElement("div");
               divInf.className = 'bubble-box';
-              // define width of the bubble box
               const divInfVerticalOffset = 4; //px
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position === "static") {

From fb90de1ed33f1a9a221f2c0ffefe4e6040451580 Mon Sep 17 00:00:00 2001
From: Cube <877211593@qq.com>
Date: Wed, 24 May 2023 16:19:37 +0800
Subject: [PATCH 7/7] remove 'divInfVerticalOffset'

---
 4.use-case/3.show-result-texts-on-the-video.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 779f22d7..2f22b219 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -25,7 +25,7 @@
         word-break: break-all;
         word-wrap: break-word;
         box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
-        transform: translateX(-50%);
+        transform: translate(-50%, -4px);
       }
       .bubble-box::after{
         content: '';
@@ -112,12 +112,11 @@
               
               divInf = document.createElement("div");
               divInf.className = 'bubble-box';
-              const divInfVerticalOffset = 4; //px
               const bodyStyle = getComputedStyle(document.body);
               if (bodyStyle.position === "static") {
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2}px`,
-                  bottom: `${document.documentElement.clientHeight  - convertedP1.y + divInfVerticalOffset}px`,
+                  bottom: `${document.documentElement.clientHeight  - convertedP1.y}px`,
                 });
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
@@ -125,7 +124,7 @@
                 const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
-                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom + divInfVerticalOffset}px`,
+                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`,
                 });
               }
               divInf.innerText = result.barcodeText;
