Update static/js/script.js

static/js/script.js

@@ -5,28 +5,38 @@ console.log("JS is loaded!");
 let hMin = 0, hMax = 179, sMin = 0, sMax = 255, vMin = 0, vMax = 255;
 let currentImage = null;
 
-document.getElementById('upload-form').addEventListener('submit', function(e) {
-    e.preventDefault();
 
-    const fileInput = document.getElementById('pdf-input');
+document.getElementById('upload-form').onsubmit = async function(e) {
+    e.preventDefault();
     const formData = new FormData();
+    formData.append("file", document.getElementById("pdf-input").files[0]);
+
+    const response = await fetch("/upload", { method: "POST", body: formData });
+    const result = await response.json();
+
+    const img = document.getElementById("image");
+    img.src = `/static/converted_images/${result.image_filename}?${new Date().getTime()}`; // cache-bust
+    img.onload = () => {
+        const canvas = document.getElementById("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+    };
+};
 
-    formData.append('file', fileInput.files[0]);
+canvas.addEventListener('click', async (event) => {
+    const x = event.offsetX;
+    const y = event.offsetY;
 
-    fetch(`${window.location.origin}/upload`, {
+    const response = await fetch('/pixel', {
         method: 'POST',
-        body: formData
-    })
-    .then(res => res.json())
-    .then(data => {
-        document.getElementById('upload-status').innerText = data.message;
-        console.log('Upload success:', data);
-        updateImage(data.image_path);
-    })
-    .catch(err => {
-        document.getElementById('upload-status').innerText = 'Upload failed';
-        console.error('Upload error:', err);
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ x, y })
     });
+
+    const pixelData = await response.json();
+    document.getElementById("pixel-info").textContent = `Clicked: (${x}, ${y}) - RGB: ${pixelData.rgb} - HSV: ${pixelData.hsv}`;
 });
 
 function updateImage(src) {