84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
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>
|
|
<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="imageContainer">
|
|
<img src="" id="screenshot" />
|
|
<div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
|
|
</div>
|
|
|
|
<script>
|
|
$(function () { // Document ready shorthand
|
|
|
|
$("#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
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</html> |