added coord highlighting
This commit is contained in:
@@ -1,69 +1,84 @@
|
|||||||
<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">
|
||||||
|
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">
|
<div id="finalPrice"></div>
|
||||||
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" />
|
||||||
<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").attr("src", `http://localhost:8001/images/${name}.png`);
|
||||||
$("#screenshot")[0].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>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user