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

125
views/Upload.html
View File

@@ -1,69 +1,84 @@
<html>
<head>
<script src="../static/jquery-3.7.1.min.js"></script>
<script>
</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>
<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>
<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>
<div id="finalPrice"></div>
<img src="" id="screenshot" />
<div id="imageContainer">
<img src="" id="screenshot" />
<div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
</div>
<script>
(function (window, document, undefined) {
$(function () { // Document ready shorthand
$("#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}`);
$.ajax({
url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
}).done(function(){
$("#screenshot")[0].src = `http://localhost:8001/images/${name}.png`;
});
$("#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`);
});
});
$("#screenshot").click(function(event){
let offset = $(this).offset();
let overlay = $("#selectionOverlay");
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
}
});
});
$("#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>
</html>