175 lines
6.3 KiB
HTML
175 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Image Selection</title>
|
|
<script src="../static/jquery-3.7.1.min.js"></script>
|
|
<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">
|
|
<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>
|
|
|
|
|
|
<script>
|
|
$(function() {
|
|
let startX, startY, isDragging = false;
|
|
|
|
$("#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`);
|
|
$("#selectionBox").hide(); // Hide selection box when a new image is loaded
|
|
});
|
|
});
|
|
|
|
$("#screenshot").on('mousedown', function(event) {
|
|
let offset = $(this).offset();
|
|
startX = event.pageX - offset.left;
|
|
startY = event.pageY - offset.top;
|
|
isDragging = true;
|
|
$("#selectionBox").css({ top: startY, left: startX, width: 0, height: 0, display: 'block' });
|
|
});
|
|
|
|
$(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 });
|
|
}
|
|
});
|
|
|
|
$(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>
|