From ac9154ddcfad6268494f439cdf5340688a2fac0a Mon Sep 17 00:00:00 2001
From: TylerP33 <tyler3321@gmail.com>
Date: Sat, 10 Feb 2024 13:25:43 -0600
Subject: [PATCH] added coord highlighting

---
 views/Upload.html | 129 ++++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 57 deletions(-)
diff --git a/views/Upload.html b/views/Upload.html
index 896df13..667dee9 100644
--- a/views/Upload.html
+++ b/views/Upload.html
@@ -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) {
-            
-            $("#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`;
-                });
-                
+$(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
+        }
+    });
+});
 
-            $("#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>
\ No newline at end of file
