@aspiresys/visor 1.2.6 → 1.2.8

package/dist/index.d.ts

@@ -36,7 +36,10 @@ export declare class Visor {
      * @example
      * await visor.click("./images/save.png", 0.9);
      */
-    click(image?: string, confidence?: number): Promise<void>;
+    click(image?: string, confidence?: number, offset?: {
+        x: number;
+        y: number;
+    }): Promise<void>;
     /**
      * Performs a right mouse click.
      *
@@ -61,7 +64,10 @@ export declare class Visor {
      * @example
      * await visor.rightClick();
      */
-    rightClick(image?: string, confidence?: number): Promise<void>;
+    rightClick(image?: string, confidence?: number, offset?: {
+        x: number;
+        y: number;
+    }): Promise<void>;
     /**
      * Performs a double left mouse click.
      *
@@ -87,7 +93,10 @@ export declare class Visor {
      * @example
      * await visor.doubleClick();
      */
-    doubleClick(image?: string, confidence?: number): Promise<void>;
+    doubleClick(image?: string, confidence?: number, offset?: {
+        x: number;
+        y: number;
+    }): Promise<void>;
     /**
      * Finds the best matching image on screen
      * using OpenCV template matching.
@@ -495,7 +504,10 @@ export declare class Visor {
      * @example
      * await visor.hover("menu.png");
      */
-    hover(image: string, confidence?: number): Promise<void>;
+    hover(image?: string, confidence?: number, offset?: {
+        x: number;
+        y: number;
+    }): Promise<void>;
     /**
      * Scrolls the mouse wheel downward.
      *

package/dist/index.js

@@ -78,7 +78,10 @@ class Visor {
      * @example
      * await visor.click("./images/save.png", 0.9);
      */
-    async click(image, confidence = 0.8) {
+    async click(image, confidence = 0.8, offset = {
+        x: 0,
+        y: 0
+    }) {
         this.checkConfig();
         if (!image) {
             await this.mouse.click(this.Button.LEFT);
@@ -90,7 +93,7 @@ class Visor {
             throw new Error(`Image not found: ${image}`);
         }
         (0, logger_1.log)("[CV] Match found:", region);
-        await (0, mouse_1.clickRegion)(region);
+        await (0, mouse_1.clickRegion)(region, offset);
     }
     /**
      * Performs a right mouse click.
@@ -116,14 +119,17 @@ class Visor {
      * @example
      * await visor.rightClick();
      */
-    async rightClick(image, confidence = 0.8) {
+    async rightClick(image, confidence = 0.8, offset = {
+        x: 0,
+        y: 0
+    }) {
         this.checkConfig();
         if (image) {
             const region = await this.find(image, confidence);
             if (!region) {
                 throw new Error(`Image not found: ${image}`);
             }
-            await (0, mouse_1.moveToRegion)(region);
+            await (0, mouse_1.moveToRegion)(region, offset);
         }
         await this.mouse.click(this.Button.RIGHT);
         (0, logger_1.log)("[MOUSE] Right click completed");
@@ -153,14 +159,17 @@ class Visor {
      * @example
      * await visor.doubleClick();
      */
-    async doubleClick(image, confidence = 0.8) {
+    async doubleClick(image, confidence = 0.8, offset = {
+        x: 0,
+        y: 0
+    }) {
         this.checkConfig();
         if (image) {
             const region = await this.find(image, confidence);
             if (!region) {
                 throw new Error(`Image not found: ${image}`);
             }
-            await (0, mouse_1.moveToRegion)(region);
+            await (0, mouse_1.moveToRegion)(region, offset);
         }
         await this.mouse.doubleClick(this.Button.LEFT);
         (0, logger_1.log)("[MOUSE] Double click completed");
@@ -674,13 +683,16 @@ CONF:${m.confidence.toFixed(3)}
      * @example
      * await visor.hover("menu.png");
      */
-    async hover(image, confidence = 0.8) {
+    async hover(image, confidence = 0.8, offset = {
+        x: 0,
+        y: 0
+    }) {
         this.checkConfig();
         const region = await this.find(image, confidence);
         if (!region) {
             throw new Error(`Image not found: ${image}`);
         }
-        await (0, mouse_1.moveToRegion)(region);
+        await (0, mouse_1.moveToRegion)(region, offset);
         (0, logger_1.log)("[MOUSE] Hover completed");
     }
     /**

package/dist/matcher.d.ts

@@ -1,4 +1,5 @@
 import { Region } from "./types";
 export declare function loadTemplate(path: string): Promise<any>;
+export declare function loadScreen(path: string): Promise<any>;
 export declare function matchTemplate(screen: any, template: any, confidence?: number): Region | null;
 export declare function findAllMatches(screen: any, template: any, confidence?: number): Region[];

package/dist/matcher.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTemplate = loadTemplate;
+exports.loadScreen = loadScreen;
 exports.matchTemplate = matchTemplate;
 exports.findAllMatches = findAllMatches;
 const fs_1 = __importDefault(require("fs"));
@@ -27,6 +28,16 @@ async function loadTemplate(path) {
     templateCache.set(path, template);
     return template.clone();
 }
+async function loadScreen(path) {
+    (0, logger_1.log)(`[SCREEN] Loading: ${path}`);
+    const buffer = fs_1.default.readFileSync(path);
+    const png = pngjs_1.PNG.sync.read(buffer);
+    return cv.matFromImageData({
+        data: png.data,
+        width: png.width,
+        height: png.height,
+    });
+}
 function resizeTemplate(template, scale) {
     const resized = new cv.Mat();
     const newWidth = Math.max(1, Math.floor(template.cols * scale));

package/dist/mouse.d.ts

@@ -1,3 +1,9 @@
 import { Region } from "./types";
-export declare function moveToRegion(region: Region): Promise<void>;
-export declare function clickRegion(region: Region): Promise<void>;
+export declare function moveToRegion(region: Region, offset?: {
+    x: number;
+    y: number;
+}): Promise<void>;
+export declare function clickRegion(region: Region, offset?: {
+    x: number;
+    y: number;
+}): Promise<void>;

package/dist/mouse.js

@@ -5,15 +5,21 @@ exports.clickRegion = clickRegion;
 const nut_js_1 = require("@nut-tree-fork/nut-js");
 const config_1 = require("./config");
 const logger_1 = require("./logger");
-async function moveToRegion(region) {
+async function moveToRegion(region, offset = {
+    x: 0,
+    y: 0
+}) {
     const scaleFactor = config_1.visorConfig.scaleFactor;
-    const centerX = Math.floor((region.x + region.width / 2) / scaleFactor);
-    const centerY = Math.floor((region.y + region.height / 2) / scaleFactor);
+    const centerX = Math.floor((region.x + region.width / 2 + offset.x) / scaleFactor);
+    const centerY = Math.floor((region.y + region.height / 2 + offset.y) / scaleFactor);
     (0, logger_1.log)("[MOUSE] Moving mouse to:", centerX, centerY);
     await nut_js_1.mouse.move([new nut_js_1.Point(centerX, centerY)]);
 }
-async function clickRegion(region) {
-    await moveToRegion(region);
+async function clickRegion(region, offset = {
+    x: 0,
+    y: 0
+}) {
+    await moveToRegion(region, offset);
     await new Promise((r) => setTimeout(r, 200));
     await nut_js_1.mouse.click(nut_js_1.Button.LEFT);
     (0, logger_1.log)("[MOUSE] Left click completed");

package/dist/types.d.ts

@@ -5,3 +5,7 @@ export interface Region {
     height: number;
     confidence: number;
 }
+export interface Offset {
+    x: number;
+    y: number;
+}

package/inspector/index.html

@@ -7,91 +7,52 @@
   <body>
     <div class="container">
       <header class="header">
-        <h1>VISOR INSPECTOR</h1>
+        <h3>VISOR INSPECTOR</h3>
       </header>
-
       <section class="controls-section">
         <div class="toolbar">
           <button id="captureBtn" class="btn btn-primary">
-            <span class="btn-icon">📸</span> Capture
-          </button>
+            <span class="btn-icon">📸</span> Capture Screen </button>
           <button id="saveBtn" class="btn btn-secondary">
-            <span class="btn-icon">💾</span> Save Template
-          </button>
+            <span class="btn-icon">💾</span> Save Template </button>
           <button id="loadTemplateBtn" class="btn btn-secondary">
-            <span class="btn-icon">📂</span> Load Template
-          </button>
+            <span class="btn-icon">📂</span> Load Template </button>
           <button id="testMatchBtn" class="btn btn-accent">
-            <span class="btn-icon">✓</span> Test Match
-          </button>
-        </div>
-
-        <div class="controls-grid">
-          <div class="control-group">
-            <label for="confidenceInput">Confidence Threshold</label>
-            <div class="input-wrapper">
-              <input 
-                id="confidenceInput" 
-                type="number" 
-                min="0" 
-                max="1" 
-                step="0.01" 
-                value="0.8"
-              />
-              <span class="input-hint">(0.0 - 1.0)</span>
+            <span class="btn-icon">✓</span> Test Match </button>
+          <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>
+              </div>
             </div>
           </div>
         </div>
       </section>
-
-      <section class="canvas-section">
-        <h3 class="section-title">Screen Capture</h3>
-        <canvas id="screenCanvas" class="canvas"></canvas>
-      </section>
-
+      <div class="capture-layout">
+        <div class="capture-panel">
+          <h3 class="section-title"> Current Capture </h3>
+          <canvas id="screenCanvas" class="canvas"></canvas>
+        </div>
+        <div class="result-panel">
+          <h3 class="section-title"> Match Result </h3>
+          <div id="matchResult"> No Match Tested </div>
+        </div>
+      </div>
       <section class="template-section">
         <h3 class="section-title">Template Management</h3>
         <div class="template-grid">
           <div class="template-info">
-            <p><strong>Current Template:</strong></p>
-            <span id="currentTemplate" class="template-status">None</span>
+            <p>
+              <strong>Current Template: </strong>
+              <span id="currentTemplate" class="template-status">None</span>
+            </p>
           </div>
           <img id="templatePreview" class="template-preview" />
         </div>
       </section>
-
-      <section class="results-section">
-        <h3 class="section-title">Match Results</h3>
-        <div class="results-grid">
-          <div class="result-card">
-            <span class="result-icon">📊</span>
-            <span class="result-label">Confidence</span>
-            <span id="resultConfidence" class="result-value">—</span>
-          </div>
-          <div class="result-card">
-            <span class="result-icon">📍</span>
-            <span class="result-label">X</span>
-            <span id="resultX" class="result-value">—</span>
-          </div>
-          <div class="result-card">
-            <span class="result-icon">⬆</span>
-            <span class="result-label">Y</span>
-            <span id="resultY" class="result-value">—</span>
-          </div>
-          <div class="result-card">
-            <span class="result-icon">↔</span>
-            <span class="result-label">Width</span>
-            <span id="resultWidth" class="result-value">—</span>
-          </div>
-          <div class="result-card">
-            <span class="result-icon">↕</span>
-            <span class="result-label">Height</span>
-            <span id="resultHeight" class="result-value">—</span>
-          </div>
-        </div>
-      </section>
     </div>
-
     <script src="./src/renderer.js"></script>
   </body>
-</html>
+</html>

package/inspector/main.js

@@ -133,8 +133,8 @@ ipcMain.handle("test-match",
 	async (event, data) => {
 		console.log("Test Match IPC", data);
 		const capturePath = path.join(__dirname, "assets", "capture.png");
-		const screen = await visorMatcher.loadTemplate(capturePath);
-		const template = await visorMatcher.loadTemplate(data.templatePath);
+		const screen = await visorMatcher.loadScreen(capturePath);
+		const template = await visorMatcher.loadScreen(data.templatePath);
 		const result = visorMatcher
 			.matchTemplate(
 				screen,

package/inspector/src/renderer.js

@@ -71,6 +71,8 @@ canvas.addEventListener("mousemove",
 			canvas.width,
 			canvas.height
 		);
+		ctx.strokeStyle = "red";
+		ctx.lineWidth = 2;
 		ctx.strokeRect(
 			displayStartX,
 			displayStartY,
@@ -143,25 +145,27 @@ testMatchBtn.addEventListener("click", async () => {
     templatePath: selectedTemplatePath,
     confidence: confidence
   });
+  console.log(
+	"Match Result:",
+	result
+	);
 
   if (!result) {
-    document.getElementById('resultConfidence').textContent = "—";
-    document.getElementById('resultX').textContent = "—";
-    document.getElementById('resultY').textContent = "—";
-    document.getElementById('resultWidth').textContent = "—";
-    document.getElementById('resultHeight').textContent = "—";
+	matchResult.textContent = "✗ MATCH NOT FOUND";
     return;
   }
+  matchResult.textContent = `
+	✓ MATCH FOUND
 
-  const updateMatchResults = (data) => {
-    document.getElementById('resultConfidence').textContent = data.confidence;
-    document.getElementById('resultX').textContent = data.x;
-    document.getElementById('resultY').textContent = data.y;
-    document.getElementById('resultWidth').textContent = data.width;
-    document.getElementById('resultHeight').textContent = data.height;
-  };
+	Confidence:
+	${result.confidence.toFixed(3)}
 
-  updateMatchResults(result);
+	Location:
+	(${result.x}, ${result.y})
+
+	Size:
+	${result.width} x ${result.height}
+	`;
 });
 
 

package/inspector/styles.css

@@ -4,10 +4,51 @@
   box-sizing: border-box;
 }
 
+.match-summary {
+  margin-top: 10px;
+}
+
+.match-metric {
+  text-align: center;
+
+  padding: 10px 0;
+}
+
+.match-metric:last-child {
+  border-bottom: none;
+}
+
+.metric-label {
+  display: block;
+
+  color: #888;
+
+  font-size: 0.75em;
+
+  text-transform: uppercase;
+
+  letter-spacing: 1px;
+
+  margin-bottom: 4px;
+}
+
+.metric-value {
+  display: block;
+
+  color: #00d4ff;
+
+  font-weight: 700;
+
+  font-size: 1.2em;
+
+  font-family: Consolas, monospace;
+}
+
 body {
   background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
   color: #e0e0e0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    sans-serif;
   line-height: 1.6;
   min-height: 100vh;
 }
@@ -15,15 +56,19 @@ body {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 30px 20px;
+  padding: 12px;
 }
 
 /* HEADER */
 .header {
-  text-align: center;
-  margin-bottom: 40px;
-  border-bottom: 2px solid #00d4ff;
-  padding-bottom: 25px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #00d4ff;
+  padding-bottom: 6px;
+}
+
+.header h3 {
+  font-size: 16px;
+  color: #00d4ff;
 }
 
 .header h1 {
@@ -47,7 +92,7 @@ body {
 .section-title {
   font-size: 1.2em;
   color: #00d4ff;
-  margin-bottom: 18px;
+  margin-bottom: 2px;
   margin-top: 0;
   font-weight: 600;
   display: flex;
@@ -60,29 +105,29 @@ body {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 12px;
-  padding: 25px;
-  margin-bottom: 30px;
+  padding: 10px;
+  margin-bottom: 15px;
   backdrop-filter: blur(10px);
 }
 
 .toolbar {
   display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+  align-items: center;
 }
 
 .btn {
-  padding: 10px 18px;
+  padding: 4px 8px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  font-size: 0.95em;
+  font-size: 12px;
   font-weight: 500;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 3px;
   white-space: nowrap;
 }
 
@@ -143,7 +188,7 @@ body {
 }
 
 .control-group label {
-  font-size: 0.95em;
+  font-size: 0.8em;
   color: #b0b0b0;
   font-weight: 500;
 }
@@ -158,10 +203,10 @@ input[type="number"] {
   background: rgba(37, 37, 38, 0.8);
   color: #00d4ff;
   border: 1px solid rgba(0, 212, 255, 0.3);
-  padding: 10px 12px;
+  padding: 5px 6px;
   border-radius: 6px;
-  font-size: 0.95em;
-  width: 120px;
+  font-size: 0.8em;
+  width: 60px;
   transition: all 0.3s ease;
 }
 
@@ -182,8 +227,8 @@ input[type="number"]:focus {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 12px;
-  padding: 20px;
-  margin-bottom: 30px;
+  padding: 10px;
+  margin-bottom: 10px;
 }
 
 .canvas {
@@ -200,8 +245,9 @@ input[type="number"]:focus {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 12px;
-  padding: 20px;
-  margin-bottom: 30px;
+  padding: 10px;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
 .template-grid {
@@ -223,7 +269,7 @@ input[type="number"]:focus {
 
 .template-status {
   display: inline-block;
-  padding: 8px 14px;
+  padding: 4px 7px;
   background: rgba(76, 175, 80, 0.15);
   border: 1px solid rgba(76, 175, 80, 0.3);
   border-radius: 6px;
@@ -237,7 +283,7 @@ input[type="number"]:focus {
   border-radius: 8px;
   max-width: 100%;
   height: auto;
-  max-height: 300px;
+  max-height: 150px;
   object-fit: contain;
   background: #0a0a0a;
   box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
@@ -253,22 +299,22 @@ input[type="number"]:focus {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 12px;
-  padding: 20px;
+  padding: 10px;
 }
 
 /* RESULTS GRID */
 .results-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   gap: 12px;
-  margin-top: 15px;
 }
 
 .result-card {
   background: rgba(0, 212, 255, 0.08);
   border: 1px solid rgba(0, 212, 255, 0.3);
   border-radius: 8px;
-  padding: 12px;
+  padding: 4px;
+  min-height: 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -284,10 +330,6 @@ input[type="number"]:focus {
   box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
 }
 
-.result-icon {
-  font-size: 1.3em;
-}
-
 .result-label {
   color: #888;
   font-size: 0.8em;
@@ -299,8 +341,8 @@ input[type="number"]:focus {
 .result-value {
   color: #00d4ff;
   font-weight: 700;
-  font-size: 1em;
-  font-family: 'Courier New', monospace;
+  font-size: 0.8em;
+  font-family: "Courier New", monospace;
 }
 
 #matchResult {
@@ -310,11 +352,11 @@ input[type="number"]:focus {
   background: rgba(37, 37, 38, 0.6);
   border: 1px solid rgba(100, 150, 180, 0.2);
   min-height: 60px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #888;
-  font-size: 0.95em;
+  font-size: 0.8em;
 }
 
 #matchResult:not(:empty) {
@@ -326,7 +368,7 @@ input[type="number"]:focus {
 /* RESPONSIVE */
 @media (max-width: 768px) {
   .container {
-    padding: 20px 15px;
+    padding: 12px;
   }
 
   .header h1 {
@@ -371,3 +413,35 @@ input[type="number"]:focus {
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 212, 255, 0.6);
 }
+
+.capture-layout {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 16px;
+}
+
+.capture-panel {
+  flex: 1;
+}
+
+.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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspiresys/visor",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {