Merge pull request #124 from fuddster/main

Improve clickable images
PWNAGERobotics · Jan 22, 2025 · 18b2c1b · 18b2c1b
2 parents 8cbb614 + 4ad6b88
commit 18b2c1b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/2025/half_field.png b/2025/half_field.png
diff --git a/2025/reef.png b/2025/reef.png
diff --git a/2025/reefscape_config.js b/2025/reefscape_config.js
@@ -58,9 +58,10 @@ var config_data = `
     { "name": "Auto Start Position",
       "code": "as",
       "type": "clickable_image",
-      "filename": "2025/field_image.png",
+      "filename": "2025/half_field.png",
       "clickRestriction": "one",
-      "allowableResponses": "6 7 18 19 30 31 42 43 54 55 66 67",
+      "dimensions": "6 6",
+      "allowableResponses": "1 7 13 19 25 31",
       "shape": "circle 5 black red true"
     }
   ],
@@ -85,6 +86,14 @@ var config_data = `
       "code": "ac4",
       "type": "counter"
     },
+    { "name": "Auto Scoring Position",
+      "code": "asp",
+      "type": "clickable_image",
+      "filename": "2025/reef.png",
+      "dimensions": "6 6",
+      "allowableResponses": "1 2 3 4 5 6 7 8 9 10 11 12 13 14 17 18 19 20 23 24 25 26 27 28 29 30 31 32 33 34 35 36",
+      "shape": "circle 5 black red true"
+    },
     { "name": "Processor Score",
       "code": "aps",
       "type": "counter"

diff --git a/resources/js/scoutingPASS.js b/resources/js/scoutingPASS.js
@@ -333,8 +333,7 @@ function addClickableImage(table, idx, name, data) {
   inp.setAttribute("value", "none");
   if (data.hasOwnProperty('allowableResponses')) {
     let responses = data.allowableResponses.split(' ').map(Number)
-    console.log(responses)
-      inp.setAttribute("value", responses);
+    inp.setAttribute("value", responses);
   }
   cell.appendChild(inp);
 
@@ -1057,8 +1056,19 @@ function drawFields(name) {
     var shape = document.getElementById("shape_" + code);
     let shapeArr = shape.value.split(' ');
     var ctx = f.getContext("2d");
-    ctx.clearRect(0, 0, f.width, f.height);
-    ctx.drawImage(img, 0, 0, f.width, f.height);
+    var imgWidth = img.width;
+    var imgHeight = img.height;
+    let scale_factor = Math.min(ctx.canvas.width / img.width, ctx.canvas.height / img.height);
+    let newWidth = img.width * scale_factor;
+    let newHeight = img.height * scale_factor;
+    if (newWidth > 0) {
+      ctx.canvas.width = newWidth
+    }
+    if (newHeight > 0) {
+      ctx.canvas.height = newHeight
+    }
+    ctx.clearRect(0, 0, newWidth, newHeight);
+    ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
     var xyStr = document.getElementById("XY_" + code).value
     if (JSON.stringify(xyStr).length > 2) {