@aspiresys/visor 1.2.11 → 1.3.1

package/dist/types.js

@@ -1,2 +1,270 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Region = void 0;
+const nut_js_1 = require("@nut-tree-fork/nut-js");
+const mouse_1 = require("./mouse");
+const ocr_1 = require("./ocr");
+const text_1 = require("./text");
+const matcher_1 = require("./matcher");
+const screen_1 = require("./screen");
+const path_1 = require("./path");
+const config_1 = require("./config");
+const console_1 = require("console");
+const display_1 = require("./display");
+/**
+ * Represents a rectangular screen region.
+ *
+ * A Region can be returned by:
+ * - image matching
+ * - OCR text search
+ * - region-based searches
+ *
+ * Provides helper methods for:
+ * - mouse interaction
+ * - OCR operations
+ * - image matching
+ * - geometry calculations
+ * Example:
+ *
+ * const dialog = await visor.find("dialog.png");
+ *
+ * const saveButton = await dialog.find("save.png");
+ *
+ * await saveButton.click();
+ *
+ * const text = await dialog.findText("Submit");
+ */
+class Region {
+    constructor(x, y, width, height, confidence = 1) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.confidence = confidence;
+    }
+    checkConfig() {
+        if (Region.configWarningShown) {
+            return;
+        }
+        const missing = [];
+        if (!config_1.visorConfig.imagePath) {
+            missing.push("imagePath");
+        }
+        if (!config_1.visorConfig.outputPath) {
+            missing.push("outputPath");
+        }
+        if (missing.length > 0) {
+            (0, console_1.warn)(`[VISOR] Configuration incomplete.\n` +
+                `Missing: ${missing.join(", ")}\n\n` +
+                `Relative paths may not work correctly.\n` +
+                `Use visor.loadConfig(...) or provide absolute paths directly to functions.`);
+        }
+        if (!config_1.visorConfig.initialized) {
+            config_1.visorConfig.scaleFactor = (0, display_1.getWindowsScaleFactor)();
+            (0, console_1.warn)(`[VISOR] Configuration not loaded.\n` +
+                `Auto-detected scaleFactor=${config_1.visorConfig.scaleFactor}.\n`);
+        }
+        if (missing.length > 0 || !config_1.visorConfig.initialized) {
+            Region.configWarningShown = true;
+        }
+    }
+    /**
+   * Returns the center point of the region.
+   *
+   * Useful for:
+   * - mouse movement
+   * - coordinate calculations
+   * - custom interactions
+   */
+    center() {
+        return {
+            x: this.x + Math.floor(this.width / 2),
+            y: this.y + Math.floor(this.height / 2)
+        };
+    }
+    /**
+   * Moves the mouse to the center of the region.
+   *
+   * Mouse coordinates are automatically
+   * adjusted for display scaling.
+   */
+    async move() {
+        await (0, mouse_1.moveToRegion)(this);
+    }
+    /**
+   * Performs a left click on the region.
+   *
+   * Clicks the center of the region by default.
+   *
+   * Optional offset can be supplied to click
+   * a specific position relative to the center.
+   */
+    async click(offset) {
+        await (0, mouse_1.clickRegion)(this, offset);
+    }
+    /**
+   * Performs a double left click on the region.
+   *
+   * Optional offset can be supplied to click
+   * a specific position relative to the center.
+   */
+    async doubleClick(offset) {
+        await (0, mouse_1.moveToRegion)(this, offset);
+        await nut_js_1.mouse.doubleClick(nut_js_1.Button.LEFT);
+    }
+    /**
+   * Performs a right click on the region.
+   *
+   * Optional offset can be supplied to click
+   * a specific position relative to the center.
+   */
+    async rightClick(offset) {
+        await (0, mouse_1.moveToRegion)(this, offset);
+        await nut_js_1.mouse.click(nut_js_1.Button.RIGHT);
+    }
+    /**
+   * Checks whether the supplied coordinates
+   * are located inside this region.
+   *
+   * Returns:
+   * - true if inside
+   * - false otherwise
+   */
+    contains(x, y) {
+        return (x >= this.x) && (x <= this.x + this.width) && (y >= this.y) && (y <= this.y + this.height);
+    }
+    /**
+   * Creates a new Region shifted by the
+   * supplied x and y offsets.
+   *
+   * Original region remains unchanged.
+   */
+    offset(x, y) {
+        return new Region(this.x + x, this.y + y, this.width, this.height, this.confidence);
+    }
+    /**
+   * Checks whether this region overlaps
+   * with another region.
+   *
+   * Returns:
+   * - true if regions intersect
+   * - false otherwise
+   */
+    intersects(region) {
+        return (this.x <= region.x + region.width) && (this.x + this.width >= region.x) && (this.y <= region.y + region.height) && (this.y + this.height >= region.y);
+    }
+    /**
+   * Returns the total area of the region
+   * in pixels.
+   */
+    area() {
+        return this.width * this.height;
+    }
+    /**
+   * Extracts OCR text from this region.
+   *
+   * Returns full OCR output including:
+   * - text
+   * - TSV data
+   * - HOCR data
+   * - block information
+   */
+    async readText() {
+        this.checkConfig();
+        return await (0, ocr_1.extractTextFromRegion)(this);
+    }
+    /**
+   * Searches for text within this region.
+   *
+   * Returns the matching text region
+   * if found, otherwise null.
+   *
+   * Supports selecting a specific match
+   * using the index parameter.
+   */
+    async findText(text, index = 0) {
+        this.checkConfig();
+        const match = await (0, text_1.findText)(text, index, this);
+        if (match == null) {
+            return null;
+        }
+        return match.offset(this.x, this.y);
+    }
+    /**
+   * Checks whether the supplied text
+   * exists within this region.
+   *
+   * Returns:
+   * - true if found
+   * - false otherwise
+   */
+    async existsText(text) {
+        this.checkConfig();
+        return await (0, text_1.existsText)(text, this);
+    }
+    /**
+   * Searches for an image within this region.
+   *
+   * Matching is performed only inside
+   * the current region, improving speed
+   * and reducing false positives.
+   *
+   * Returns:
+   * - matching Region if found
+   * - null otherwise
+   */
+    async find(image, confidence = 0.8) {
+        this.checkConfig();
+        const screenshot = await (0, screen_1.captureScreen)();
+        const croppedScreenshot = await (0, matcher_1.cropMat)(screenshot, this);
+        const template = await (0, matcher_1.loadTemplate)((0, path_1.resolveImagePath)(image));
+        try {
+            const match = (0, matcher_1.matchInspectorTemplate)(croppedScreenshot, template, confidence, false);
+            if (!match) {
+                return null;
+            }
+            return match.offset(this.x, this.y);
+        }
+        finally {
+            screenshot.delete();
+            croppedScreenshot.delete();
+            template.delete();
+        }
+    }
+    /**
+   * Finds all image matches within this region.
+   *
+   * Matching is performed only inside
+   * the current region.
+   *
+   * Returns an array of matching regions.
+   */
+    async findAll(image, confidence = 0.8) {
+        this.checkConfig();
+        const screenshot = await (0, screen_1.captureScreen)();
+        const croppedScreenshot = await (0, matcher_1.cropMat)(screenshot, this);
+        const template = await (0, matcher_1.loadTemplate)((0, path_1.resolveImagePath)(image));
+        try {
+            const matches = (0, matcher_1.findAllMatches)(croppedScreenshot, template, confidence);
+            return matches.map(match => match.offset(this.x, this.y));
+        }
+        finally {
+            screenshot.delete();
+            croppedScreenshot.delete();
+            template.delete();
+        }
+    }
+    /**
+   * Checks whether an image exists
+   * within this region.
+   *
+   * Returns:
+   * - true if found
+   * - false otherwise
+   */
+    async exists(image, confidence = 0.8) {
+        return await this.find(image, confidence) !== null;
+    }
+}
+exports.Region = Region;
+Region.configWarningShown = false;

package/inspector/index.html

@@ -5,6 +5,9 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
+    <div id="imageModal" class="image-modal">
+      <img id="modalImage"/>
+    </div>
     <div class="container">
       <header class="header">
         <h3>VISOR INSPECTOR</h3>
@@ -22,10 +25,13 @@
           <div class="controls-grid">
             <div class="control-group">
               <div class="input-wrapper">
-                <span class="input-hint">Confidence</span>
-                <input id="confidenceInput" type="number" min="0" max="1" step="0.01" value="0.8" />
-                <span class="input-hint">(0.0 - 1.0)    </span>
-                Current Template: <span id="currentTemplate" class="template-status">None</span>
+                <span class="input-hint" title="Range [0, 1]">Confidence</span>
+                  <input type="range" id="confRange" min="0" max="1" value="0.8" step="0.01" 
+                    oninput="document.getElementById('confidenceInput').value = this.value"/>
+                <input id="confidenceInput" type="number" min="0" max="1" step="0.01" value="0.8"
+                    onchange="document.getElementById('confRange').value = this.value"/>
+                <!--<span class="input-hint">Multi Sacle Match:</span><input id="multiScaleCheck" type="checkbox" value="false"/>-->
+                <span class="input-hint">Current Template:</span><span id="currentTemplate" class="template-status">None</span>
               </div>
             </div>
           </div>

package/inspector/main.js

@@ -135,12 +135,17 @@ ipcMain.handle("test-match",
 		const capturePath = path.join(__dirname, "assets", "capture.png");
 		const screen = await visorMatcher.loadScreen(capturePath);
 		const template = await visorMatcher.loadScreen(data.templatePath);
-		const result = visorMatcher
-			.matchTemplate(
-				screen,
-				template,
-				data.confidence
-			);
+		const result = visorMatcher.findAllInspectorMatches(
+			screen,
+			template,
+			data.confidence
+		);
+`		const result = visorMatcher.matchInspectorTemplate(
+			screen,
+			template,
+			data.confidence,
+			data.isMultiMatch
+		);`
 		console.log("match Result:", result);
 		screen.delete();
 		template.delete();

package/inspector/src/renderer.js

@@ -31,6 +31,7 @@ captureBtn.addEventListener("click",
 			canvas.width = image.width * scale;
 			canvas.height = image.height * scale;
 			matchResult.textContent = " No Match Tested ";
+			ctx.imageSmoothingEnabled = false;
 			ctx.drawImage(
 				image,
 				0,
@@ -89,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;
 		}
@@ -120,17 +111,17 @@ 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 = fileName;
 		currentTemplate.title = filePath;
-		matchResult.textContent = " No Match Tested ";
+		matchResult.textContent = "<b>No Match Tested</b>";
 		ctx.drawImage(
 			image,
 			0,
@@ -143,29 +134,36 @@ saveBtn.addEventListener("click",
 	}
 );
 
-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
-	);
-
-  if (!result) {
-	matchResult.textContent = "✗ MATCH NOT FOUND";
+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,
@@ -173,37 +171,43 @@ testMatchBtn.addEventListener("click", async () => {
 		canvas.width,
 		canvas.height
 	);
-    return;
-  }
-  ctx.drawImage(
-  	image,
-	0,
-	0,
-	canvas.width,
-	canvas.height
-  );
-  ctx.strokeStyle = "lime";
-  ctx.lineWidth = 3;
-  ctx.strokeRect(
-	result.x / imageScaleX,
-	result.y / imageScaleY,
-	result.width / imageScaleX,
-	result.height / imageScaleY
-  );
-  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 () => {
@@ -215,7 +219,7 @@ loadTemplateBtn.addEventListener("click",
 		selectedTemplatePath = path;
 		currentTemplate.textContent = fileName;
 		currentTemplate.title = path;
-		matchResult.textContent = " No Match Tested ";
+		matchResult.innerHTML = "<b>No Match Tested</b>";
 		ctx.drawImage(
 			image,
 			0,

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);
@@ -286,6 +297,7 @@ input[type="number"]:focus {
   display: none;
   margin-top: 15px;
   margin-bottom: 15px;
+  cursor: zoom-in;
 }
 
 .template-preview[src]:not([src=""]) {
@@ -344,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;
 }
 
@@ -424,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.11",
+  "version": "1.3.1",
   "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",