Merge pull request #125 from Dynamsoft/Keillion-patch-2

Cube · web-flow · commit 8ff04b9f41d2 · 2023-05-24T15:43:04.000+08:00
bubble box
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
@@ -15,16 +15,36 @@
     <title>
       Dynamsoft Barcode Reader Sample - Show result texts on the video
     </title>
+    <style>
+      .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);
+      }
+      .bubble-box::after{
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: calc(50% - 8px);
+        border-left: 8px solid transparent;
+        border-top: 8px solid white;
+        border-right: 8px solid transparent;
+      }
+    </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 +67,7 @@
        * LICENSE ALERT - THE END
        */
 
-      const divTextContainers = document.querySelector("#div-text-containers");
+      const divInfContainers = document.querySelector("#div-information-containers");
       let scanner;
 
       (async () => {
@@ -68,7 +88,7 @@
             console.log(results);
 
             // Clear previous result text elements.
-            divTextContainers.innerText = "";
+            divInfContainers.innerText = "";
 
             for (let result of results) {
               const l = result.localizationResult;
@@ -88,29 +108,31 @@
               const convertedP1 = scanner.convertToPageCoordinates(p1);
               const convertedP2 = scanner.convertToPageCoordinates(p2);
               
-              textContainer = document.createElement("div");
+              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") {
-                const rect = document.body.getBoundingClientRect();
-                const borderWidth = parseInt(bodyStyle.borderWidth);
-                Object.assign(textContainer.style, {
-                  position: "absolute",
-                  left: convertedP1.x - rect.left - borderWidth + "px",
-                  right: rect.right - convertedP2.x - borderWidth + "px",
-                  bottom: rect.bottom - convertedP1.y - borderWidth + "px",
-                  color: "#FE8E14",
+              if (bodyStyle.position === "static") {
+                Object.assign(divInf.style, {
+                  left: `calc(${(convertedP1.x + convertedP2.x) / 2}px - ${divInfWidth} / 2)`,
+                  bottom: `${document.documentElement.clientHeight  - convertedP1.y + divInfVerticalOffset}px`,
                 });
-              } else {
-                Object.assign(textContainer.style, {
-                  position: "absolute",
-                  left: convertedP1.x + "px",
-                  right: document.documentElement.clientWidth - convertedP2.x + "px",
-                  bottom: document.documentElement.clientHeight  - convertedP1.y + "px",
-                  color: "#FE8E14",
+              } 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`,
                 });
               }
-              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.
