Skip to content

Commit

Permalink
fixed merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@eugene-dynamsoft
eugene-dynamsoft committed Sep 5, 2024
1 parent e47ff08 commit ee53b1e
Show file tree
Hide file tree
Showing 8 changed files with 412 additions and 567 deletions.
764 changes: 382 additions & 382 deletions VINScanner/VIN_Template.json
View file

Large diffs are not rendered by default.

43 changes: 2 additions & 41 deletions VINScanner/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ img {
}

.scanner-container .header .camera-list {
width: 165px;
position: absolute;
top: 46px;
left: 0;
Expand Down Expand Up @@ -273,10 +274,6 @@ img {
cursor: pointer;
}

.result-container #result-image-container {
display: flex;
justify-content: center;
}
.result-container #result-image-container {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -326,7 +323,6 @@ img {
font-family: "Oswald-Regular";
}

.scan-mode-container {
.scan-mode-container {
display: none;
justify-content: center;
Expand All @@ -336,20 +332,12 @@ img {
left: 5%;
right: 5%;
z-index: 2;
position: fixed;
bottom: 15%;
left: 5%;
right: 5%;
z-index: 2;
}

.scan-mode-container .scan-mode-content {
position: relative;
.scan-mode-container .scan-mode-content {
position: relative;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
background-color: rgb(34, 34, 34);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
Expand All @@ -359,38 +347,20 @@ img {
opacity: 0.8;
}

.scan-option-btn {
background-color: transparent;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 0.5rem;
width: max-content;
opacity: 0.8;
}

.scan-option-btn {
background-color: transparent;
padding: 0.5rem;
font-family: OpenSans-Regular;
color: white;
width: 5rem;
}

.selected {
background-color: #fe8e14;
color: white;
border-radius: 8px;
color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.scan-orientation-btn {
position: absolute;
top: -90%;
right: 0;
padding: 0.5rem;
display: none;
.scan-orientation-btn {
position: absolute;
top: -90%;
Expand All @@ -404,15 +374,6 @@ img {
background-color: rgb(34, 34, 34);
}

.scan-orientation-btn .scan-orientation-icon {
width: 24px;
height: 24px;
filter: invert(0.4);
border-radius: 8px;
opacity: 0.8;
background-color: rgb(34, 34, 34);
}

.scan-orientation-btn .scan-orientation-icon {
width: 24px;
height: 24px;
Expand Down Expand Up @@ -509,4 +470,4 @@ img {
.result-container .parsed-result-area .parsed-filed {
font-size: 14px;
}
}
}
3 changes: 1 addition & 2 deletions VINScanner/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@
min-width: 100px;
min-height: 100px;
background: #6f6f6f;
overflow-y: hidden;
"
>
<svg
Expand Down Expand Up @@ -315,4 +314,4 @@
<script type="module" src="./js/init.js"></script>
<script type="module" src="./js/index.js"></script>
</body>
</html>
</html>
14 changes: 6 additions & 8 deletions VINScanner/js/const.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ const SCAN_TEMPLATES = {
text: "ReadVINText",
both: "ReadVIN",
};

const SCAN_MODE_TITLES = {
barcode: "Scan by Barcode",
text: "Scan by Text",
both: "Scan Text or Barcode",
};
let currentMode = SCAN_MODES[2]; // Set scan mode as "Scan Both" by default

let scanOrientation = "landscape";

let scanOrientation = "landscape";

// Get the UI element
const homePage = document.querySelector(".home-page");

Expand All @@ -33,7 +35,6 @@ const cameraSelector = document.querySelector(".camera-selector");
const scannerContainer = document.querySelector(".scanner-container");
const startScanningBtn = document.querySelector(".start-btn");

const scanHelpMsg = document.querySelector(".scan-help-msg");
const scanHelpMsg = document.querySelector(".scan-help-msg");
const scanModeContainer = document.querySelector(".scan-mode-container");

Expand All @@ -55,7 +56,4 @@ const up = document.querySelector(".up");
const notification = document.querySelector("#notification");

const scanOrientationBtn = document.querySelector(".scan-orientation-btn");
const scanOrientationIcon = document.querySelector(".scan-orientation-icon");

const scanOrientationBtn = document.querySelector(".scan-orientation-btn");
const scanOrientationIcon = document.querySelector(".scan-orientation-icon");
const scanOrientationIcon = document.querySelector(".scan-orientation-icon");
90 changes: 1 addition & 89 deletions VINScanner/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,6 @@ import {
showNotification,
toggleScanOrientation,
} from "./util.js";
import {
checkOrientation,
getVisibleRegionOfVideo,
resetScanOrientation,
shouldShowScanModeContainer,
shouldShowScanOrientation,
showNotification,
toggleScanOrientation,
} from "./util.js";

// Create event listener for each scan modes
SCAN_MODES.forEach((mode) =>
Expand All @@ -36,38 +27,30 @@ SCAN_MODES.forEach((mode) =>
await cameraEnhancer.open();
}

// Highlight the selected camera in the camera list container
// Highlight the selected camera in the camera list container
const currentCamera = cameraEnhancer.getSelectedCamera();
cameraListContainer.childNodes.forEach((child) => {
cameraListContainer.childNodes.forEach((child) => {
if (currentCamera.deviceId === child.deviceId) {
child.className = "camera-item camera-selected";
}
});
});

// Start capturing based on the selected scan mode template
// Start capturing based on the selected scan mode template
await cvRouter.startCapturing(SCAN_TEMPLATES[mode]);
// By default, cameraEnhancer captures grayscale images to optimize performance.
// To capture RGB Images, we set the Pixel Format to EnumImagePixelFormat.IPF_ABGR_8888
cameraEnhancer.setPixelFormat(Dynamsoft.Core.EnumImagePixelFormat.IPF_ABGR_8888);

// Update button styles to show selected scan mode
document.querySelectorAll(".scan-option-btn").forEach((button) => {
// Update button styles to show selected scan mode
document.querySelectorAll(".scan-option-btn").forEach((button) => {
button.classList.remove("selected");
});
document.querySelector(`#scan-${mode}-btn`).classList.add("selected");
showNotification(`Scan mode switched successfully`, "banner-success");

// Update the current mode to the newly selected mode and set scan orientation based on current mode
// Update the current mode to the newly selected mode and set scan orientation based on current mode
currentMode = mode;
configureScanOrientation();
configureScanOrientation();
})();
} catch (ex) {
let errMsg = ex.message || ex;
Expand Down Expand Up @@ -129,22 +112,6 @@ const regionTop = () => {
};

const region = () => {
let region =
scanOrientation === "landscape"
? {
left: regionLeft(),
right: 100 - regionLeft(),
top: regionTop(),
bottom: 100 - regionTop(),
isMeasuredInPercentage: true,
}
: {
left: regionTop() - 10,
right: 100 - regionTop() + 10,
top: Math.max(5, regionLeft()),
bottom: 75 - regionLeft(),
isMeasuredInPercentage: true,
};
let region =
scanOrientation === "landscape"
? {
Expand Down Expand Up @@ -176,7 +143,6 @@ window.addEventListener("resize", () => {
timer && clearTimeout(timer);
timer = setTimeout(() => {
configureScanOrientation();
configureScanOrientation();
}, 500);
});

Expand All @@ -186,20 +152,13 @@ startScanningBtn.addEventListener("click", () => {
scanBothBtn.click();
});

// On click restart video button
const restartVideo = async () => {
resultContainer.style.display = "none";
document.querySelector(`#scan-${currentMode}-btn`).click();
};

// On click restart video button
const restartVideo = async () => {
resultContainer.style.display = "none";
document.querySelector(`#scan-${currentMode}-btn`).click();
};
restartVideoBtn.addEventListener("click", restartVideo);

// On click camera selector
// On click camera selector
cameraSelector.addEventListener("click", (e) => {
e.stopPropagation();
Expand All @@ -209,7 +168,6 @@ cameraSelector.addEventListener("click", (e) => {
down.style.display = isShow ? "inline-block" : "none";
});

// On click sound button
// On click sound button
playSoundBtn.addEventListener("click", () => {
playSoundBtn.style.display = "none";
Expand All @@ -224,7 +182,6 @@ closeSoundBtn.addEventListener("click", () => {
isSoundOn = true;
});

// On click copy button
// On click copy button
copyResultBtn.addEventListener("click", () => {
const resultText = parsedResultMain.innerText;
Expand All @@ -242,7 +199,6 @@ copyResultBtn.addEventListener("click", () => {
});
});

// On click save image button
// On click save image button
saveImageBtn.addEventListener("click", () => {
const imageCanvas = resultImageContainer.querySelector("canvas");
Expand Down Expand Up @@ -300,48 +256,4 @@ scanOrientationBtn.addEventListener("click", () => {
// Update camera region
cameraEnhancer.setScanRegion(region());
updateScanOrientationStyles();
});
/**
* Sets up the scan orientation button visibility and resets the camera region
* based on the current scan mode and device orientation
*/
function configureScanOrientation() {
shouldShowScanModeContainer();
if (shouldShowScanOrientation()) {
scanOrientationBtn.style.display = "flex";
} else {
scanOrientationBtn.style.display = "none";
resetScanOrientation(); // Reset scan orientation to landscape
}
cameraEnhancer.setScanRegion(region()); // Update cameraEnhancer scan region
updateScanOrientationStyles(); // update scan orientation button styles
}

/**
* Applies the UI styles for the scan orientation button and scan help message
* based on the current scan orientation.
*/
function updateScanOrientationStyles() {
if (scanOrientation === "portrait") {
scanOrientationBtn.style.backgroundColor = "#fe8e14";
scanOrientationIcon.style.filter = "invert(0)";
scanHelpMsg.style.display = "none"; // Hide the scan help message in portrait orientation
} else {
scanOrientationBtn.style.backgroundColor = "rgb(34,34,34)";
scanOrientationIcon.style.filter = "invert(0.4)";
scanHelpMsg.style.display = "block"; // Show the scan help message in landscape orientation
}
}

// On click scan orientation button
scanOrientationBtn.addEventListener("click", () => {
// Only allow switch on portrait devices and scan mode is barcode
if (shouldShowScanOrientation()) {
toggleScanOrientation();
} else {
resetScanOrientation();
}
// Update camera region
cameraEnhancer.setScanRegion(region());
updateScanOrientationStyles();
});
});
Loading

0 comments on commit ee53b1e

Please sign in to comment.