@aspiresys/visor 1.2.6 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/matcher.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Region } from "./types";
2
2
  export declare function loadTemplate(path: string): Promise<any>;
3
+ export declare function loadScreen(path: string): Promise<any>;
3
4
  export declare function matchTemplate(screen: any, template: any, confidence?: number): Region | null;
4
5
  export declare function findAllMatches(screen: any, template: any, confidence?: number): Region[];
package/dist/matcher.js CHANGED
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.loadTemplate = loadTemplate;
7
+ exports.loadScreen = loadScreen;
7
8
  exports.matchTemplate = matchTemplate;
8
9
  exports.findAllMatches = findAllMatches;
9
10
  const fs_1 = __importDefault(require("fs"));
@@ -27,6 +28,16 @@ async function loadTemplate(path) {
27
28
  templateCache.set(path, template);
28
29
  return template.clone();
29
30
  }
31
+ async function loadScreen(path) {
32
+ (0, logger_1.log)(`[SCREEN] Loading: ${path}`);
33
+ const buffer = fs_1.default.readFileSync(path);
34
+ const png = pngjs_1.PNG.sync.read(buffer);
35
+ return cv.matFromImageData({
36
+ data: png.data,
37
+ width: png.width,
38
+ height: png.height,
39
+ });
40
+ }
30
41
  function resizeTemplate(template, scale) {
31
42
  const resized = new cv.Mat();
32
43
  const newWidth = Math.max(1, Math.floor(template.cols * scale));
Binary file
@@ -7,13 +7,13 @@
7
7
  <body>
8
8
  <div class="container">
9
9
  <header class="header">
10
- <h1>VISOR INSPECTOR</h1>
10
+ <h3>VISOR INSPECTOR</h3>
11
11
  </header>
12
12
 
13
13
  <section class="controls-section">
14
14
  <div class="toolbar">
15
15
  <button id="captureBtn" class="btn btn-primary">
16
- <span class="btn-icon">📸</span> Capture
16
+ <span class="btn-icon">📸</span> Capture Screen
17
17
  </button>
18
18
  <button id="saveBtn" class="btn btn-secondary">
19
19
  <span class="btn-icon">💾</span> Save Template
@@ -24,28 +24,27 @@
24
24
  <button id="testMatchBtn" class="btn btn-accent">
25
25
  <span class="btn-icon">✓</span> Test Match
26
26
  </button>
27
- </div>
28
-
29
- <div class="controls-grid">
30
- <div class="control-group">
31
- <label for="confidenceInput">Confidence Threshold</label>
32
- <div class="input-wrapper">
33
- <input
34
- id="confidenceInput"
35
- type="number"
36
- min="0"
37
- max="1"
38
- step="0.01"
39
- value="0.8"
40
- />
41
- <span class="input-hint">(0.0 - 1.0)</span>
27
+ <div class="controls-grid">
28
+ <div class="control-group">
29
+ <div class="input-wrapper">
30
+ <span class="input-hint">Confidence</span>
31
+ <input
32
+ id="confidenceInput"
33
+ type="number"
34
+ min="0"
35
+ max="1"
36
+ step="0.01"
37
+ value="0.8"
38
+ />
39
+ <span class="input-hint">(0.0 - 1.0)</span>
40
+ </div>
42
41
  </div>
43
42
  </div>
44
43
  </div>
45
44
  </section>
46
45
 
47
46
  <section class="canvas-section">
48
- <h3 class="section-title">Screen Capture</h3>
47
+ <h3 class="section-title">Current Capture</h3>
49
48
  <canvas id="screenCanvas" class="canvas"></canvas>
50
49
  </section>
51
50
 
@@ -58,35 +57,50 @@
58
57
  </div>
59
58
  <img id="templatePreview" class="template-preview" />
60
59
  </div>
61
- </section>
62
60
 
63
- <section class="results-section">
64
- <h3 class="section-title">Match Results</h3>
65
- <div class="results-grid">
66
- <div class="result-card">
67
- <span class="result-icon">📊</span>
68
- <span class="result-label">Confidence</span>
69
- <span id="resultConfidence" class="result-value">—</span>
70
- </div>
71
- <div class="result-card">
72
- <span class="result-icon">📍</span>
73
- <span class="result-label">X</span>
74
- <span id="resultX" class="result-value">—</span>
75
- </div>
76
- <div class="result-card">
77
- <span class="result-icon">⬆</span>
78
- <span class="result-label">Y</span>
79
- <span id="resultY" class="result-value">—</span>
61
+ <h3 class="section-title">
62
+ Match Result
63
+ </h3>
64
+ <div id="matchStatus"
65
+ class="match-status">
66
+ No Match Tested
67
+ </div>
68
+ <div class="match-details">
69
+ <div class="match-row">
70
+ <span class="match-label">
71
+ Confidence
72
+ </span>
73
+ <span id="resultConfidence"
74
+ class="match-value">
75
+
76
+ </span>
80
77
  </div>
81
- <div class="result-card">
82
- <span class="result-icon">↔</span>
83
- <span class="result-label">Width</span>
84
- <span id="resultWidth" class="result-value">—</span>
78
+ <div class="match-row">
79
+ <span class="match-label">
80
+ Position
81
+ </span>
82
+ <span class="match-value">
83
+ X:
84
+ <span id="resultX">—</span>
85
+ |
86
+
87
+ Y:
88
+ <span id="resultY">—</span>
89
+ </span>
85
90
  </div>
86
- <div class="result-card">
87
- <span class="result-icon">↕</span>
88
- <span class="result-label">Height</span>
89
- <span id="resultHeight" class="result-value">—</span>
91
+ <div class="match-row">
92
+ <span class="match-label">
93
+ Size
94
+ </span>
95
+ <span class="match-value">
96
+ W:
97
+ <span id="resultWidth">—</span>
98
+
99
+ |
100
+
101
+ H:
102
+ <span id="resultHeight">—</span>
103
+ </span>
90
104
  </div>
91
105
  </div>
92
106
  </section>
package/inspector/main.js CHANGED
@@ -133,8 +133,8 @@ ipcMain.handle("test-match",
133
133
  async (event, data) => {
134
134
  console.log("Test Match IPC", data);
135
135
  const capturePath = path.join(__dirname, "assets", "capture.png");
136
- const screen = await visorMatcher.loadTemplate(capturePath);
137
- const template = await visorMatcher.loadTemplate(data.templatePath);
136
+ const screen = await visorMatcher.loadScreen(capturePath);
137
+ const template = await visorMatcher.loadScreen(data.templatePath);
138
138
  const result = visorMatcher
139
139
  .matchTemplate(
140
140
  screen,
@@ -71,6 +71,8 @@ canvas.addEventListener("mousemove",
71
71
  canvas.width,
72
72
  canvas.height
73
73
  );
74
+ ctx.strokeStyle = "red";
75
+ ctx.lineWidth = 2;
74
76
  ctx.strokeRect(
75
77
  displayStartX,
76
78
  displayStartY,
@@ -143,8 +145,13 @@ testMatchBtn.addEventListener("click", async () => {
143
145
  templatePath: selectedTemplatePath,
144
146
  confidence: confidence
145
147
  });
148
+ console.log(
149
+ "Match Result:",
150
+ result
151
+ );
146
152
 
147
153
  if (!result) {
154
+ document.getElementById("matchStatus").textContent = "✗ Match Not Found";
148
155
  document.getElementById('resultConfidence').textContent = "—";
149
156
  document.getElementById('resultX').textContent = "—";
150
157
  document.getElementById('resultY').textContent = "—";
@@ -152,8 +159,8 @@ testMatchBtn.addEventListener("click", async () => {
152
159
  document.getElementById('resultHeight').textContent = "—";
153
160
  return;
154
161
  }
155
-
156
162
  const updateMatchResults = (data) => {
163
+ document.getElementById("matchStatus").textContent = "✓ Match Found";
157
164
  document.getElementById('resultConfidence').textContent = data.confidence;
158
165
  document.getElementById('resultX').textContent = data.x;
159
166
  document.getElementById('resultY').textContent = data.y;
@@ -4,6 +4,42 @@
4
4
  box-sizing: border-box;
5
5
  }
6
6
 
7
+ .spacer {
8
+ flex: 1;
9
+ }
10
+
11
+ .match-status {
12
+ padding: 8px;
13
+ border: 1px solid #444;
14
+ border-radius: 6px;
15
+ margin-bottom: 10px;
16
+ font-weight: bold;
17
+
18
+ }
19
+ .match-details {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: 6px;
23
+ }
24
+
25
+ .match-row {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ padding: 4px 0;
29
+ }
30
+
31
+ .match-label {
32
+ color: #999;
33
+ font-size: 0.9em;
34
+ }
35
+
36
+ .match-value {
37
+ color: #00d4ff;
38
+ font-family: Consolas,
39
+ monospace;
40
+
41
+ }
42
+
7
43
  body {
8
44
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
9
45
  color: #e0e0e0;
@@ -15,15 +51,19 @@ body {
15
51
  .container {
16
52
  max-width: 1200px;
17
53
  margin: 0 auto;
18
- padding: 30px 20px;
54
+ padding: 12px;
19
55
  }
20
56
 
21
57
  /* HEADER */
22
58
  .header {
23
- text-align: center;
24
- margin-bottom: 40px;
25
- border-bottom: 2px solid #00d4ff;
26
- padding-bottom: 25px;
59
+ margin-bottom: 10px;
60
+ border-bottom: 1px solid #00d4ff;
61
+ padding-bottom: 6px;
62
+ }
63
+
64
+ .header h3 {
65
+ font-size: 16px;
66
+ color: #00d4ff;
27
67
  }
28
68
 
29
69
  .header h1 {
@@ -60,29 +100,29 @@ body {
60
100
  background: rgba(255, 255, 255, 0.03);
61
101
  border: 1px solid rgba(0, 212, 255, 0.2);
62
102
  border-radius: 12px;
63
- padding: 25px;
64
- margin-bottom: 30px;
103
+ padding: 10px;
104
+ margin-bottom: 15px;
65
105
  backdrop-filter: blur(10px);
66
106
  }
67
107
 
68
108
  .toolbar {
69
109
  display: flex;
70
- gap: 12px;
71
- margin-bottom: 20px;
72
- flex-wrap: wrap;
110
+ gap: 6px;
111
+ margin-bottom: 8px;
112
+ align-items: center;
73
113
  }
74
114
 
75
115
  .btn {
76
- padding: 10px 18px;
116
+ padding: 4px 8px;
77
117
  border: none;
78
118
  border-radius: 8px;
79
119
  cursor: pointer;
80
- font-size: 0.95em;
120
+ font-size: 12px;
81
121
  font-weight: 500;
82
122
  transition: all 0.3s ease;
83
123
  display: flex;
84
124
  align-items: center;
85
- gap: 6px;
125
+ gap: 3px;
86
126
  white-space: nowrap;
87
127
  }
88
128
 
@@ -143,7 +183,7 @@ body {
143
183
  }
144
184
 
145
185
  .control-group label {
146
- font-size: 0.95em;
186
+ font-size: 0.8em;
147
187
  color: #b0b0b0;
148
188
  font-weight: 500;
149
189
  }
@@ -160,8 +200,8 @@ input[type="number"] {
160
200
  border: 1px solid rgba(0, 212, 255, 0.3);
161
201
  padding: 10px 12px;
162
202
  border-radius: 6px;
163
- font-size: 0.95em;
164
- width: 120px;
203
+ font-size: 0.8em;
204
+ width: 60px;
165
205
  transition: all 0.3s ease;
166
206
  }
167
207
 
@@ -182,8 +222,8 @@ input[type="number"]:focus {
182
222
  background: rgba(255, 255, 255, 0.02);
183
223
  border: 1px solid rgba(0, 212, 255, 0.2);
184
224
  border-radius: 12px;
185
- padding: 20px;
186
- margin-bottom: 30px;
225
+ padding: 10px;
226
+ margin-bottom: 10px;
187
227
  }
188
228
 
189
229
  .canvas {
@@ -200,8 +240,8 @@ input[type="number"]:focus {
200
240
  background: rgba(255, 255, 255, 0.02);
201
241
  border: 1px solid rgba(0, 212, 255, 0.2);
202
242
  border-radius: 12px;
203
- padding: 20px;
204
- margin-bottom: 30px;
243
+ padding: 10px;
244
+ margin-bottom: 10px;
205
245
  }
206
246
 
207
247
  .template-grid {
@@ -237,7 +277,7 @@ input[type="number"]:focus {
237
277
  border-radius: 8px;
238
278
  max-width: 100%;
239
279
  height: auto;
240
- max-height: 300px;
280
+ max-height: 150px;
241
281
  object-fit: contain;
242
282
  background: #0a0a0a;
243
283
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
@@ -253,22 +293,22 @@ input[type="number"]:focus {
253
293
  background: rgba(255, 255, 255, 0.02);
254
294
  border: 1px solid rgba(0, 212, 255, 0.2);
255
295
  border-radius: 12px;
256
- padding: 20px;
296
+ padding: 10px;
257
297
  }
258
298
 
259
299
  /* RESULTS GRID */
260
300
  .results-grid {
261
301
  display: grid;
262
- grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
302
+ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
263
303
  gap: 12px;
264
- margin-top: 15px;
265
304
  }
266
305
 
267
306
  .result-card {
268
307
  background: rgba(0, 212, 255, 0.08);
269
308
  border: 1px solid rgba(0, 212, 255, 0.3);
270
309
  border-radius: 8px;
271
- padding: 12px;
310
+ padding: 4px;
311
+ min-height: 50px;
272
312
  display: flex;
273
313
  flex-direction: column;
274
314
  align-items: center;
@@ -284,9 +324,6 @@ input[type="number"]:focus {
284
324
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
285
325
  }
286
326
 
287
- .result-icon {
288
- font-size: 1.3em;
289
- }
290
327
 
291
328
  .result-label {
292
329
  color: #888;
@@ -299,7 +336,7 @@ input[type="number"]:focus {
299
336
  .result-value {
300
337
  color: #00d4ff;
301
338
  font-weight: 700;
302
- font-size: 1em;
339
+ font-size: 0.8em;
303
340
  font-family: 'Courier New', monospace;
304
341
  }
305
342
 
@@ -314,7 +351,7 @@ input[type="number"]:focus {
314
351
  align-items: center;
315
352
  justify-content: center;
316
353
  color: #888;
317
- font-size: 0.95em;
354
+ font-size: 0.8em;
318
355
  }
319
356
 
320
357
  #matchResult:not(:empty) {
@@ -326,7 +363,7 @@ input[type="number"]:focus {
326
363
  /* RESPONSIVE */
327
364
  @media (max-width: 768px) {
328
365
  .container {
329
- padding: 20px 15px;
366
+ padding: 12px;
330
367
  }
331
368
 
332
369
  .header h1 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aspiresys/visor",
3
- "version": "1.2.6",
3
+ "version": "1.2.7",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
Binary file