Skip to content

Dev #128

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
Parent: feat: update demo license to deploy
merged 11 commits into from
May 24, 2023
Merged

Dev #128

Changes from all commits
Commits
Show all changes
11 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
645420d
Merge pull request #125 from Dynamsoft/Keillion-patch-2
May 24, 2023
bfc5b44
transform: translateX(-50%)
Keillion May 24, 2023
a1fd166
Update 3.show-result-texts-on-the-video.html
Keillion May 24, 2023
52131bb
Merge pull request #126 from Dynamsoft/Keillion-patch-2
May 24, 2023
fb90de1
remove 'divInfVerticalOffset'
Cube-J 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
68 changes: 43 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,38 @@
<title>
Dynamsoft Barcode Reader Sample - Show result texts on the video
</title>
<style>
.bubble-box{
max-width: 20rem; /* You are likely to change it */
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);
transform: translate(-50%, -4px);
}
.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 +69,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 +90,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 +110,25 @@
const convertedP1 = scanner.convertToPageCoordinates(p1);
const convertedP2 = scanner.convertToPageCoordinates(p2);

textContainer = document.createElement("div");
divInf = document.createElement("div");
divInf.className = 'bubble-box';
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: `${(convertedP1.x + convertedP2.x) / 2}px`,
bottom: `${document.documentElement.clientHeight - convertedP1.y}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);
Object.assign(divInf.style, {
left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}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