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