garrett/BattysPriceCheck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: garrett:master
Branches Tags
garrett:master garrett:dev/tyler
...
pull from: garrett:dev/tyler
Branches Tags
garrett:dev/tyler garrett:master

2 Commits
master ... dev/tyler

Author SHA1 Message Date
TylerP33
890836293d cleaned up coord highlight and centered containers via flexbox 2024-02-10 18:21:20 -06:00
TylerP33
ac9154ddcf added coord highlighting 2024-02-10 13:25:43 -06:00
2 changed files with 174 additions and 63 deletions
Expand all files Collapse all files

6
server.js
View File

@@ -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();

203
views/Upload.html
View File

@@ -1,69 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<head>
<title>Image Selection</title>
<script src="../static/jquery-3.7.1.min.js"></script>
<script>
</script>
</head>
<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" />
</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" />
<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>
<div id="finalPrice"></div>
<img src="" id="screenshot" />
<script>
(function (window, document, undefined) {
$(function() {
let startX, startY, isDragging = false;
$("#mainForm").on("submit", function(event){
$("#mainForm").on("submit", function(event) {
event.preventDefault();
let url = $("#url")[0].value;
let name = $("#name")[0].value;
console.log(`http://localhost:8001/takeScreenshot?name=${name}&url=${url}`);
let url = $("#url").val();
let name = $("#name").val();
$.ajax({
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
}).done(function(){
$("#screenshot")[0].src = `http://localhost:8001/images/${name}.png`;
}).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();
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;
startX = event.pageX - offset.left;
startY = event.pageY - offset.top;
isDragging = true;
$("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
});
}else{
$("#left")[0].value = Math.floor(event.pageX - offset.left);
$("#top")[0].value = Math.floor(event.pageY - offset.top);
$(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 });
}
});
})(this, this.document);
$(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>
</body>
</html>