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

added coord highlighting

Browse Source
This commit is contained in:
TylerP33
2024-02-10 13:25:43 -06:00
parent 398db10e6b
commit ac9154ddcf
1 changed files with 72 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
views/Upload.html
View File

@@ -1,11 +1,19 @@
<html> <html>
<head> <head>
<script src="../static/jquery-3.7.1.min.js"></script> <script src="../static/jquery-3.7.1.min.js"></script>
<script> <style>
#imageContainer {
</script> 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> </head>
<body>
<form id="mainForm"> <form id="mainForm">
URL: <input type="text" id="url" /> URL: <input type="text" id="url" />
Name: <input type="text" id="name" /> Name: <input type="text" id="name" />
@@ -20,50 +28,57 @@
<div id="finalPrice"></div> <div id="finalPrice"></div>
<div id="imageContainer">
<img src="" id="screenshot" /> <img src="" id="screenshot" />
<div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
</div>
<script> <script>
(function (window, document, undefined) { $(function () { // Document ready shorthand
$("#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`);
}); });
}); });
$("#screenshot").click(function(event){ $("#screenshot").click(function(event){
let offset = $(this).offset(); let offset = $(this).offset();
if($("#left")[0].value){ let overlay = $("#selectionOverlay");
$("#height")[0].value = Math.floor((event.pageY - offset.top) - $("#top")[0].value);
$("#width")[0].value = Math.floor(event.pageX - offset.left) - ($("#left")[0].value); if($("#left").val()){
let name = $("#name")[0].value; let top = Math.min($("#top").val(), event.pageY - offset.top);
let top = $("#top")[0].value; let left = Math.min($("#left").val(), event.pageX - offset.left);
let left = $("#left")[0].value; let height = Math.abs((event.pageY - offset.top) - $("#top").val());
let width = $("#width")[0].value; let width = Math.abs(event.pageX - offset.left - $("#left").val());
let height = $("#height")[0].value;
$("#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}`; let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
console.log(`${newUrl}`);
$.ajax({ $.ajax({
url: newUrl, url: newUrl,
}).done(function (response) { }).done(function (response) {
console.log("Found Price!!!"); $("#finalPrice").text("Found Price!!! " + response);
$("#finalPrice")[0].innerText = response;
}); });
} else { } else {
$("#left")[0].value = Math.floor(event.pageX - offset.left); $("#left").val(event.pageX - offset.left);
$("#top")[0].value = Math.floor(event.pageY - offset.top); $("#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
} }
});
}); });
})(this, this.document);
</script> </script>
</html> </html>