|
15 | 15 | <title> |
16 | 16 | Dynamsoft Barcode Reader Sample - Show result texts on the video |
17 | 17 | </title> |
| 18 | + <style> |
| 19 | + .bubble-box{ |
| 20 | + max-width: 20rem; /* You are likely to change it */ |
| 21 | + position: absolute; |
| 22 | + background: white; |
| 23 | + border-radius: 4px; |
| 24 | + padding: 4px; |
| 25 | + word-break: break-all; |
| 26 | + word-wrap: break-word; |
| 27 | + box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2); |
| 28 | + transform: translate(-50%, -4px); |
| 29 | + } |
| 30 | + .bubble-box::after{ |
| 31 | + content: ''; |
| 32 | + position: absolute; |
| 33 | + bottom: -8px; |
| 34 | + left: calc(50% - 8px); |
| 35 | + border-left: 8px solid transparent; |
| 36 | + border-top: 8px solid white; |
| 37 | + border-right: 8px solid transparent; |
| 38 | + } |
| 39 | + </style> |
| 40 | + </head> |
| 41 | + <body> |
| 42 | + <div id="div-ui-container" style="width: 100%; height: 90vh"></div> |
| 43 | + <div id="div-information-containers"></div> |
18 | 44 | <!-- |
19 | 45 | This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the |
20 | 46 | library offline. Please see the guide on how to host the library: |
21 | 47 | https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended |
22 | 48 | --> |
23 | 49 | <script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/dist/dbr.js"></script> |
24 | | - </head> |
25 | | - <body> |
26 | | - <div id="div-ui-container" style="width: 100%; height: 90vh"></div> |
27 | | - <div id="div-text-containers"></div> |
28 | 50 | <script> |
29 | 51 | if (location.protocol === "file:") { |
30 | 52 | 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 | 69 | * LICENSE ALERT - THE END |
48 | 70 | */ |
49 | 71 |
|
50 | | - const divTextContainers = document.querySelector("#div-text-containers"); |
| 72 | + const divInfContainers = document.querySelector("#div-information-containers"); |
51 | 73 | let scanner; |
52 | 74 |
|
53 | 75 | (async () => { |
|
68 | 90 | console.log(results); |
69 | 91 |
|
70 | 92 | // Clear previous result text elements. |
71 | | - divTextContainers.innerText = ""; |
| 93 | + divInfContainers.innerText = ""; |
72 | 94 |
|
73 | 95 | for (let result of results) { |
74 | 96 | const l = result.localizationResult; |
|
88 | 110 | const convertedP1 = scanner.convertToPageCoordinates(p1); |
89 | 111 | const convertedP2 = scanner.convertToPageCoordinates(p2); |
90 | 112 |
|
91 | | - textContainer = document.createElement("div"); |
| 113 | + divInf = document.createElement("div"); |
| 114 | + divInf.className = 'bubble-box'; |
92 | 115 | const bodyStyle = getComputedStyle(document.body); |
93 | | - if (bodyStyle.position !== "static") { |
94 | | - const rect = document.body.getBoundingClientRect(); |
95 | | - const borderWidth = parseInt(bodyStyle.borderWidth); |
96 | | - Object.assign(textContainer.style, { |
97 | | - position: "absolute", |
98 | | - left: convertedP1.x - rect.left - borderWidth + "px", |
99 | | - right: rect.right - convertedP2.x - borderWidth + "px", |
100 | | - bottom: rect.bottom - convertedP1.y - borderWidth + "px", |
101 | | - color: "#FE8E14", |
| 116 | + if (bodyStyle.position === "static") { |
| 117 | + Object.assign(divInf.style, { |
| 118 | + left: `${(convertedP1.x + convertedP2.x) / 2}px`, |
| 119 | + bottom: `${document.documentElement.clientHeight - convertedP1.y}px`, |
102 | 120 | }); |
103 | | - } else { |
104 | | - Object.assign(textContainer.style, { |
105 | | - position: "absolute", |
106 | | - left: convertedP1.x + "px", |
107 | | - right: document.documentElement.clientWidth - convertedP2.x + "px", |
108 | | - bottom: document.documentElement.clientHeight - convertedP1.y + "px", |
109 | | - color: "#FE8E14", |
| 121 | + } else { // if you set body `position` as `relative`, `absolute`, things can get complicated |
| 122 | + const bodyRect = document.body.getBoundingClientRect(); |
| 123 | + const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth); |
| 124 | + const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth); |
| 125 | + Object.assign(divInf.style, { |
| 126 | + left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`, |
| 127 | + bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`, |
110 | 128 | }); |
111 | 129 | } |
112 | | - textContainer.innerText = result.barcodeText; |
113 | | - divTextContainers.append(textContainer); |
| 130 | + divInf.innerText = result.barcodeText; |
| 131 | + divInfContainers.append(divInf); |
114 | 132 |
|
115 | 133 | /** |
116 | 134 | * You can also add more information, such as displaying product images. |
|
0 commit comments