@aspiresys/visor 1.2.7 → 1.2.9

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/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

@@ -9,103 +9,50 @@
       <header class="header">
         <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 Screen
-          </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>
+            <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"
-                />
+                <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">Current 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>
-
-        <h3 class="section-title">
-          Match Result
-        </h3>
-        <div id="matchStatus"
-            class="match-status">
-          No Match Tested
-        </div>
-        <div class="match-details">
-          <div class="match-row">
-            <span class="match-label">
-              Confidence
-            </span>
-            <span id="resultConfidence"
-                  class="match-value">
-              —
-            </span>
-          </div>
-          <div class="match-row">
-            <span class="match-label">
-              Position
-            </span>
-            <span class="match-value">
-              X:
-              <span id="resultX">—</span>
-              |
-
-              Y:
-              <span id="resultY">—</span>
-            </span>
-          </div>
-          <div class="match-row">
-            <span class="match-label">
-              Size
-            </span>
-            <span class="match-value">
-              W:
-              <span id="resultWidth">—</span>
-
-              |
-
-              H:
-              <span id="resultHeight">—</span>
-            </span>
-          </div>
-        </div>
       </section>
     </div>
-
     <script src="./src/renderer.js"></script>
   </body>
-</html>
+</html>

package/inspector/src/renderer.js

@@ -151,24 +151,21 @@ testMatchBtn.addEventListener("click", async () => {
 	);
 
   if (!result) {
-	document.getElementById("matchStatus").textContent = "✗ Match Not Found";
-    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;
   }
-  const updateMatchResults = (data) => {
-	document.getElementById("matchStatus").textContent = "✓ Match Found";
-    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;
-  };
+  matchResult.textContent = `
+	✓ MATCH FOUND
 
-  updateMatchResults(result);
+	Confidence:
+	${result.confidence.toFixed(3)}
+
+	Location:
+	(${result.x}, ${result.y})
+
+	Size:
+	${result.width} x ${result.height}
+	`;
 });
 
 

package/inspector/styles.css

@@ -4,46 +4,51 @@
   box-sizing: border-box;
 }
 
-.spacer {
-  flex: 1;
+.match-summary {
+  margin-top: 10px;
 }
 
-.match-status {
-  padding: 8px;
-  border: 1px solid #444;
-  border-radius: 6px;
-  margin-bottom: 10px;
-  font-weight: bold;
+.match-metric {
+  text-align: center;
 
-}
-.match-details {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  padding: 10px 0;
 }
 
-.match-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 4px 0;
+.match-metric:last-child {
+  border-bottom: none;
 }
 
-.match-label {
-  color: #999;
-  font-size: 0.9em;
+.metric-label {
+  display: block;
+
+  color: #888;
+
+  font-size: 0.75em;
+
+  text-transform: uppercase;
+
+  letter-spacing: 1px;
+
+  margin-bottom: 4px;
 }
 
-.match-value {
+.metric-value {
+  display: block;
+
   color: #00d4ff;
-  font-family: Consolas,
-               monospace;
 
+  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;
 }
@@ -87,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;
@@ -198,7 +203,7 @@ 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.8em;
   width: 60px;
@@ -242,6 +247,7 @@ input[type="number"]:focus {
   border-radius: 12px;
   padding: 10px;
   margin-bottom: 10px;
+  margin-top: 10px;
 }
 
 .template-grid {
@@ -263,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;
@@ -324,7 +330,6 @@ input[type="number"]:focus {
   box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
 }
 
-
 .result-label {
   color: #888;
   font-size: 0.8em;
@@ -337,7 +342,7 @@ input[type="number"]:focus {
   color: #00d4ff;
   font-weight: 700;
   font-size: 0.8em;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
 }
 
 #matchResult {
@@ -347,7 +352,7 @@ 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;
@@ -408,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.7",
+  "version": "1.2.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {