@aspiresys/visor 1.2.10 → 1.3.0

package/inspector/src/renderer.js

@@ -30,6 +30,8 @@ captureBtn.addEventListener("click",
 			const scale = image.width > maxWidth ? maxWidth / image.width : 1;
 			canvas.width = image.width * scale;
 			canvas.height = image.height * scale;
+			matchResult.textContent = " No Match Tested ";
+			ctx.imageSmoothingEnabled = false;
 			ctx.drawImage(
 				image,
 				0,
@@ -88,24 +90,14 @@ canvas.addEventListener("mousemove",
 canvas.addEventListener("mouseup",
 	() => {
 		selecting = false;
-		console.log(
-			startX,
-			startY,
-			endX,
-			endY
-		);
+		console.log(startX, startY, endX, endY);
 	}
 );
 
 
 saveBtn.addEventListener("click",
 	async () => {
-		if (
-			startX === undefined ||
-			startY === undefined ||
-			endX === undefined ||
-			endY === undefined
-		) {
+		if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {
 			alert("Please select an area first.");
 			return;
 		}
@@ -119,58 +111,103 @@ saveBtn.addEventListener("click",
 			return;
 		}
 		await window.visor.saveTemplate({
-				x: Math.min(startX, endX),
-				y: Math.min(startY, endY),
-				width: Math.abs(endX - startX),
-				height: Math.abs(endY - startY),
-				outputPath: filePath
-			});
+			x: Math.min(startX, endX),
+			y: Math.min(startY, endY),
+			width: Math.abs(endX - startX),
+			height: Math.abs(endY - startY),
+			outputPath: filePath
+		});
+		const fileName = filePath.split(/[\\/]/).pop();
 		selectedTemplatePath = filePath;
-		currentTemplate.textContent = filePath;
+		currentTemplate.textContent = fileName;
+		currentTemplate.title = filePath;
+		matchResult.textContent = "<b>No Match Tested</b>";
+		ctx.drawImage(
+			image,
+			0,
+			0,
+			canvas.width,
+			canvas.height
+		);
 		templatePreview.src = filePath + "?t=" + Date.now();
 		alert("Template Saved");
 	}
 );
 
-testMatchBtn.addEventListener("click", async () => {
-  if (!selectedTemplatePath) {
-    alert("Please load or save a template first.");
-    return;
-  }
-
-  const confidence = parseFloat(confidenceInput.value);
-  if (isNaN(confidence) || confidence < 0 || confidence > 1) {
-    alert("Confidence must be between 0 and 1");
-    return;
-  }
-
-  const result = await window.visor.testMatch({
-    templatePath: selectedTemplatePath,
-    confidence: confidence
-  });
-  console.log(
-	"Match Result:",
-	result
+testMatchBtn.addEventListener("click", 
+  async () => {
+	if (!selectedTemplatePath) {
+		alert("Please load or save a template first.");
+		return;
+	}
+	const confidence = parseFloat(confidenceInput.value);
+	if (isNaN(confidence) || confidence < 0 || confidence > 1) {
+		alert("Confidence must be between 0 and 1");
+		return;
+	}
+	matchResult.textContent = "🔍 Matching...";
+	await new Promise(resolve => setTimeout(resolve, 10));
+	const result = await window.visor.testMatch({
+		templatePath: selectedTemplatePath,
+		confidence: confidence,
+		//isMultiMatch: document.getElementById("multiScaleCheck").checked
+	});
+	console.log("Match Result:", result);
+	if (!result || result.length==0) {
+		matchResult.textContent = "✗ MATCH NOT FOUND";
+		ctx.drawImage(
+			image,
+			0,
+			0,
+			canvas.width,
+			canvas.height
+		);
+		return;
+	}
+	ctx.drawImage(
+		image,
+		0,
+		0,
+		canvas.width,
+		canvas.height
 	);
-
-  if (!result) {
-	matchResult.textContent = "✗ MATCH NOT FOUND";
-    return;
-  }
-  matchResult.textContent = `
-	✓ MATCH FOUND
-
-	Confidence:
-	${result.confidence.toFixed(3)}
-
-	Location:
-	(${result.x}, ${result.y})
-
-	Size:
-	${result.width} x ${result.height}
-	`;
+	let matchR = "<b>✓ MATCH FOUND</b>\n";
+	let i = 1;
+	for(const match of result){
+		ctx.strokeStyle = "lime";
+		ctx.lineWidth = 2;
+		ctx.strokeRect(
+			match.x / imageScaleX,
+			match.y / imageScaleY,
+			match.width / imageScaleX,
+			match.height / imageScaleY
+		);
+		matchR += `<b>Match:</b> ${i}
+		<b>Confidence:</b>
+		${match.confidence.toFixed(3)}
+		<b>Location:</b>
+		(${match.x}, ${match.y})
+		<b>Size:</b>
+		${match.width} x ${match.height}
+		<hr>
+		`;
+		i += 1;
+	}
+	matchResult.innerHTML = matchR;
 });
 
+templatePreview.addEventListener("click", 
+	() => {
+      modalImage.src = templatePreview.src;
+      imageModal.style.display = "flex";
+    }
+);
+
+imageModal.addEventListener("click",
+    () => {
+      imageModal.style.display = "none";
+    }
+);
 
 loadTemplateBtn.addEventListener("click",
 	async () => {
@@ -178,8 +215,18 @@ loadTemplateBtn.addEventListener("click",
 		if (!path) {
 			return;
 		}
+		const fileName = path.split(/[\\/]/).pop();
 		selectedTemplatePath = path;
-		currentTemplate.textContent = path;
+		currentTemplate.textContent = fileName;
+		currentTemplate.title = path;
+		matchResult.innerHTML = "<b>No Match Tested</b>";
+		ctx.drawImage(
+			image,
+			0,
+			0,
+			canvas.width,
+			canvas.height
+		);
 		templatePreview.src = path + "?t=" + Date.now();
 	}
 );

package/inspector/start.js

@@ -8,10 +8,7 @@ const electron = require("electron");
 spawn(
   electron,
   [
-    path.join(
-      __dirname,
-      "main.js"
-    )
+    path.join(__dirname, "main.js")
   ],
   {
     stdio: "inherit"

package/inspector/styles.css

@@ -199,18 +199,29 @@ body {
   gap: 10px;
 }
 
-input[type="number"] {
+input[type="range"] {
   background: rgba(37, 37, 38, 0.8);
   color: #00d4ff;
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  padding: 5px 6px;
-  border-radius: 6px;
-  font-size: 0.8em;
-  width: 60px;
+  width: 100px;
   transition: all 0.3s ease;
+  height: 5px;
 }
 
-input[type="number"]:focus {
+input[type="number"] {
+    color: rgb(0, 212, 255);
+    font-size: 0.8em;
+    width: 60px;
+    background: rgba(37, 37, 38, 0.8);
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(0, 212, 255, 0.3);
+    border-image: initial;
+    padding: 5px 6px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+input[type="range"]:focus, input[type="number"]:focus  {
   outline: none;
   border-color: #00d4ff;
   box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
@@ -238,6 +249,7 @@ input[type="number"]:focus {
   display: block;
   margin-top: 15px;
   box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
+  width: stretch;
 }
 
 /* TEMPLATE SECTION */
@@ -268,26 +280,24 @@ input[type="number"]:focus {
 }
 
 .template-status {
-  display: inline-block;
-  padding: 4px 7px;
-  background: rgba(76, 175, 80, 0.15);
-  border: 1px solid rgba(76, 175, 80, 0.3);
-  border-radius: 6px;
   color: #4caf50;
-  font-weight: 500;
-  width: fit-content;
+  font-size: small;
 }
 
 .template-preview {
   border: 2px solid #00d4ff;
   border-radius: 8px;
+  width: 130px;
   max-width: 100%;
-  height: auto;
+  height: 130px;
   max-height: 150px;
   object-fit: contain;
   background: #0a0a0a;
   box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
   display: none;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  cursor: zoom-in;
 }
 
 .template-preview[src]:not([src=""]) {
@@ -346,22 +356,23 @@ input[type="number"]:focus {
 }
 
 #matchResult {
-  margin-top: 15px;
-  padding: 15px;
+  padding: 12px;
+  min-height: 157px;
+  max-height: 300px;
+  overflow-y: auto;
+  max-width: max-content;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 8px;
-  background: rgba(37, 37, 38, 0.6);
-  border: 1px solid rgba(100, 150, 180, 0.2);
-  min-height: 60px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #888;
+  font-family: Consolas, monospace;
+  white-space: pre-line;
   font-size: 0.8em;
+  border-color: rgb(76, 175, 79);
 }
 
 #matchResult:not(:empty) {
   background: rgba(76, 175, 80, 0.1);
-  border-color: rgba(76, 175, 80, 0.3);
+  border-color: rgb(76, 175, 79);
   color: #e0e0e0;
 }
 
@@ -426,22 +437,22 @@ input[type="number"]:focus {
 
 .result-panel {
   width: 250px;
-
   flex-shrink: 0;
 }
 
-#matchResult {
-  padding: 12px;
 
-  min-height: 157px;
-
-  background: rgba(255, 255, 255, 0.03);
-
-  border: 1px solid rgba(0, 212, 255, 0.2);
-
-  border-radius: 8px;
-
-  font-family: Consolas, monospace;
-
-  white-space: pre-line;
+.image-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background:
+    rgba(0,0,0,0.8);
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
 }
+
+.image-modal img {
+  max-width: 90vw;
+  max-height: 90vh;
+}

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@aspiresys/visor",
-  "version": "1.2.10",
+  "version": "1.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "start": "ts-node src/test.ts"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "dependencies": {
     "@nut-tree-fork/nut-js": "^4.1.0",
     "@techstark/opencv-js": "^4.12.0-release.1",