Skip to content

bubble box #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 24, 2023
Merged

bubble box #125

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6999ac
Merge pull request #121 from Dynamsoft/_dev
May 23, 2023
8b9f59d
Merge pull request #122 from Dynamsoft/_dev
May 24, 2023
144926e
bubble box
Keillion May 24, 2023
97e26fa
remove border color of bubble
Keillion May 24, 2023
2df6082
Update 3.show-result-texts-on-the-video.html
Keillion May 24, 2023
de37469
parseFloat
Keillion May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 47 additions & 25 deletions 4.use-case/3.show-result-texts-on-the-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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/".`;
Expand All @@ -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 () => {
Expand All @@ -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;
Expand All @@ -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.
Expand Down