Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 890836293d | |||
| ac9154ddcf |
@@ -61,6 +61,11 @@ app.get("/takeScreenshot", async function(req, res){
|
|||||||
});
|
});
|
||||||
|
|
||||||
app.get("/getValueFromImage", 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");
|
console.log("Pulling info from image");
|
||||||
let name = req.query["name"];
|
let name = req.query["name"];
|
||||||
let top = req.query["top"]; //374
|
let top = req.query["top"]; //374
|
||||||
@@ -80,6 +85,7 @@ app.get("/getValueFromImage", async function(req, res){
|
|||||||
} = await worker.recognize(img,
|
} = await worker.recognize(img,
|
||||||
{ rectangle }
|
{ rectangle }
|
||||||
);
|
);
|
||||||
|
console.log(text)
|
||||||
console.log("Found Price!");
|
console.log("Found Price!");
|
||||||
res.send(text);
|
res.send(text);
|
||||||
res.end();
|
res.end();
|
||||||
|
|||||||
@@ -1,69 +1,174 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="../static/jquery-3.7.1.min.js"></script>
|
<title>Image Selection</title>
|
||||||
<script>
|
<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">
|
||||||
|
<label>URL</label>
|
||||||
|
<input type="text" id="url" />
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" id="name" />
|
||||||
|
<input type="submit" id="submitURLButton" value="Submit" />
|
||||||
|
</form>
|
||||||
|
</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>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<form id="mainForm">
|
|
||||||
URL: <input type="text" id="url" />
|
|
||||||
Name: <input type="text" id="name" />
|
|
||||||
<input type="submit" id="submitURLButton" title="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>
|
|
||||||
|
|
||||||
<img src="" id="screenshot" />
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function (window, document, undefined) {
|
$(function() {
|
||||||
|
let startX, startY, isDragging = false;
|
||||||
|
|
||||||
$("#mainForm").on("submit", function(event){
|
$("#mainForm").on("submit", function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let url = $("#url")[0].value;
|
let url = $("#url").val();
|
||||||
let name = $("#name")[0].value;
|
let name = $("#name").val();
|
||||||
console.log(`http://localhost:8001/takeScreenshot?name=${name}&url=${url}`);
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
|
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
|
||||||
}).done(function(){
|
}).done(function() {
|
||||||
$("#screenshot")[0].src = `http://localhost:8001/images/${name}.png`;
|
$("#screenshot").attr("src", `http://localhost:8001/images/${name}.png`);
|
||||||
|
$("#selectionBox").hide(); // Hide selection box when a new image is loaded
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#screenshot").on('mousedown', function(event) {
|
||||||
|
let offset = $(this).offset();
|
||||||
|
startX = event.pageX - offset.left;
|
||||||
|
startY = event.pageY - offset.top;
|
||||||
|
isDragging = true;
|
||||||
|
$("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
|
||||||
|
});
|
||||||
|
|
||||||
|
$(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);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});;
|
||||||
|
});
|
||||||
$("#screenshot").click(function(event){
|
|
||||||
let offset = $(this).offset();
|
|
||||||
if($("#left")[0].value){
|
|
||||||
$("#height")[0].value = Math.floor((event.pageY - offset.top) - $("#top")[0].value);
|
|
||||||
$("#width")[0].value = Math.floor(event.pageX - offset.left) - ($("#left")[0].value);
|
|
||||||
let name = $("#name")[0].value;
|
|
||||||
let top = $("#top")[0].value;
|
|
||||||
let left = $("#left")[0].value;
|
|
||||||
let width = $("#width")[0].value;
|
|
||||||
let height = $("#height")[0].value;
|
|
||||||
|
|
||||||
let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
|
|
||||||
console.log(`${newUrl}`);
|
|
||||||
$.ajax({
|
|
||||||
url: newUrl,
|
|
||||||
}).done(function (response) {
|
|
||||||
console.log("Found Price!!!");
|
|
||||||
$("#finalPrice")[0].innerText = response;
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
$("#left")[0].value = Math.floor(event.pageX - offset.left);
|
|
||||||
$("#top")[0].value = Math.floor(event.pageY - offset.top);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
})(this, this.document);
|
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user