cleaned up coord highlight and centered containers via flexbox
This commit is contained in:
@@ -61,6 +61,11 @@ app.get("/takeScreenshot", async function(req, res){
|
||||
});
|
||||
|
||||
app.get("/getValueFromImage", async function(req, res){
|
||||
/*
|
||||
Sometimes grabs some random characters that are not on the screen. This is especially obvious
|
||||
when grabing the price off of LiquidationDelivered.com. The rectangle has to be pretty tight on the price
|
||||
in order to avoid grabbing random characters. Need to investigate because that could be a huge issue.
|
||||
*/
|
||||
console.log("Pulling info from image");
|
||||
let name = req.query["name"];
|
||||
let top = req.query["top"]; //374
|
||||
@@ -80,6 +85,7 @@ app.get("/getValueFromImage", async function(req, res){
|
||||
} = await worker.recognize(img,
|
||||
{ rectangle }
|
||||
);
|
||||
console.log(text)
|
||||
console.log("Found Price!");
|
||||
res.send(text);
|
||||
res.end();
|
||||
|
||||
@@ -1,84 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../static/jquery-3.7.1.min.js"></script>
|
||||
<style>
|
||||
#imageContainer {
|
||||
position: relative;
|
||||
display: inline-block; /* Makes the container fit the size of the image */
|
||||
}
|
||||
#selectionOverlay {
|
||||
position: absolute;
|
||||
border: 2px solid red; /* Visible border for the selection */
|
||||
pointer-events: none; /* Prevents the overlay from capturing mouse events */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<title>Image Selection</title>
|
||||
<script src="../static/jquery-3.7.1.min.js"></script>
|
||||
<style>
|
||||
body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
}
|
||||
#finalPriceContainer{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#finalPrice{
|
||||
background-color: #FAC898;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
#mainForm{
|
||||
display: flex;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
#mainForm input{
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#mainForm label{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
#submitURLButton{
|
||||
text-align: center !important;
|
||||
}
|
||||
#mainFormContainer{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
padding: 2rem;
|
||||
background: #e1e1e1;
|
||||
justify-content: center;
|
||||
}
|
||||
#image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#imageContainer{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
#selectionBox {
|
||||
position: absolute;
|
||||
background: red;
|
||||
opacity: 0.3;
|
||||
border: 2px dashed red; /* Dashed blue border for the selection box */
|
||||
display: none; /* Initially hidden */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mainFormContainer">
|
||||
<form id="mainForm">
|
||||
URL: <input type="text" id="url" />
|
||||
Name: <input type="text" id="name" />
|
||||
<input type="submit" id="submitURLButton" title="submit" />
|
||||
<label>URL</label>
|
||||
<input type="text" id="url" />
|
||||
<label>Name</label>
|
||||
<input type="text" id="name" />
|
||||
<input type="submit" id="submitURLButton" value="Submit" />
|
||||
</form>
|
||||
<form id="coordsForm">
|
||||
Top:<input type="text" id="top"/>
|
||||
Left:<input type="text" id="left" />
|
||||
Height:<input type="text" id="height" />
|
||||
Width:<input type="text" id="width" />
|
||||
</form>
|
||||
|
||||
<div id="finalPrice"></div>
|
||||
|
||||
<div id="imageContainer">
|
||||
<img src="" id="screenshot" />
|
||||
<div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
|
||||
</div>
|
||||
<div id="finalPriceContainer"><h1 id="finalPrice"></h1></div>
|
||||
<div id="imageContainer">
|
||||
<div id="image">
|
||||
<img src="" id="screenshot" style="max-width: 100%; height: auto;">
|
||||
<div id="selectionBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
$(function () { // Document ready shorthand
|
||||
$(function() {
|
||||
let startX, startY, isDragging = false;
|
||||
|
||||
$("#mainForm").on("submit", function(event){
|
||||
event.preventDefault();
|
||||
let url = $("#url").val();
|
||||
let name = $("#name").val();
|
||||
$.ajax({
|
||||
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
|
||||
}).done(function(){
|
||||
$("#mainForm").on("submit", function(event) {
|
||||
event.preventDefault();
|
||||
let url = $("#url").val();
|
||||
let name = $("#name").val();
|
||||
|
||||
$.ajax({
|
||||
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
|
||||
}).done(function() {
|
||||
$("#screenshot").attr("src", `http://localhost:8001/images/${name}.png`);
|
||||
$("#selectionBox").hide(); // Hide selection box when a new image is loaded
|
||||
});
|
||||
});
|
||||
|
||||
$("#screenshot").click(function(event){
|
||||
$("#screenshot").on('mousedown', function(event) {
|
||||
let offset = $(this).offset();
|
||||
let overlay = $("#selectionOverlay");
|
||||
startX = event.pageX - offset.left;
|
||||
startY = event.pageY - offset.top;
|
||||
isDragging = true;
|
||||
$("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
|
||||
});
|
||||
|
||||
if($("#left").val()){
|
||||
let top = Math.min($("#top").val(), event.pageY - offset.top);
|
||||
let left = Math.min($("#left").val(), event.pageX - offset.left);
|
||||
let height = Math.abs((event.pageY - offset.top) - $("#top").val());
|
||||
let width = Math.abs(event.pageX - offset.left - $("#left").val());
|
||||
|
||||
$("#height").val(height);
|
||||
$("#width").val(width);
|
||||
$("#top").val(top);
|
||||
$("#left").val(left);
|
||||
|
||||
overlay.css({ top: top, left: left, width: width, height: height }); // Update overlay position and size
|
||||
|
||||
let name = $("#name").val();
|
||||
|
||||
let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
|
||||
$.ajax({
|
||||
url: newUrl,
|
||||
}).done(function (response) {
|
||||
$("#finalPrice").text("Found Price!!! " + response);
|
||||
});
|
||||
} else {
|
||||
$("#left").val(event.pageX - offset.left);
|
||||
$("#top").val(event.pageY - offset.top);
|
||||
overlay.css({ top: event.pageY - offset.top, left: event.pageX - offset.left, width: 0, height: 0 }); // Reset overlay size
|
||||
$(document).on('mousemove', function(event) {
|
||||
if (isDragging) {
|
||||
let offset = $("#screenshot").offset();
|
||||
let currentX = event.pageX - offset.left;
|
||||
let currentY = event.pageY - offset.top;
|
||||
let width = Math.abs(currentX - startX);
|
||||
let height = Math.abs(currentY - startY);
|
||||
let newLeft = (currentX < startX) ? currentX : startX;
|
||||
let newTop = (currentY < startY) ? currentY : startY;
|
||||
$("#selectionBox").css({ width: width, height: height, left: newLeft, top: newTop });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('mouseup', function(event) {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
|
||||
// Capture the final coordinates and dimensions
|
||||
let finalCoords = $("#selectionBox").position();
|
||||
// default of 1 for width/height value presents request error to tesseract - allows for misclicks when grabbing coordinates via click/drag
|
||||
let width = $("#selectionBox").width() === 0 ? 1 : $("#selectionBox").width();
|
||||
let height = $("#selectionBox").height() === 0 ? 1 : $("#selectionBox").height();
|
||||
console.log("Final Coordinates: ", finalCoords.top, finalCoords.left, width, height);
|
||||
|
||||
// Assuming you have the 'name' letiable available from the image name
|
||||
let name = $("#name").val(); // Retrieve the name of the image if needed
|
||||
|
||||
// Construct the URL with query parameters for the AJAX request
|
||||
let requestUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${finalCoords.top}&left=${finalCoords.left}&width=${width}&height=${height}`;
|
||||
|
||||
// Send an AJAX request to the server with the selection box coordinates and dimensions
|
||||
$.ajax({
|
||||
url: requestUrl,
|
||||
method: 'GET',
|
||||
success: function(response) {
|
||||
// Handle the server response here
|
||||
console.log("Value from the selected area: ", response);
|
||||
console.log(response)
|
||||
response !== '' ? $("#finalPrice").css('padding', '1rem') : $("#finalPrice").css('padding', '0rem'); // Set padding to 1rem
|
||||
$("#finalPrice").text(response); // Display the response in the 'finalPrice' div
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// Handle errors
|
||||
console.error("Error fetching value: ", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
});;
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user