@aspiresys/visor 1.3.4 → 1.4.0

package/inspector/src/renderer.js

@@ -1,235 +1,177 @@
-const captureBtn = document.getElementById("captureBtn");
-const saveBtn = document.getElementById("saveBtn");
-const canvas = document.getElementById("screenCanvas");
-const ctx = canvas.getContext("2d");
-const templatePreview = document.getElementById("templatePreview");
-const testMatchBtn = document.getElementById("testMatchBtn");
-const matchResult = document.getElementById("matchResult");
-const loadTemplateBtn = document.getElementById("loadTemplateBtn");
-const currentTemplate = document.getElementById("currentTemplate");
-const confidenceInput = document.getElementById("confidenceInput");
-const image = new Image();
-let selectedTemplatePath = null;
-let imageScaleX = 1;
-let imageScaleY = 1;
-let startX;
-let startY;
-let endX;
-let endY;
-let selecting = false;
-let displayStartX;
-let displayStartY;
-let displayEndX;
-let displayEndY;
-
-captureBtn.addEventListener("click",
-	async () => {
-		const imagePath = await window.visor.capture();
-		image.onload = () => {
-			const maxWidth = 1000;
-			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,
-				0,
-				canvas.width,
-				canvas.height
-			);
-			imageScaleX = image.width / canvas.width;
-			imageScaleY = image.height / canvas.height;
-		};
-		image.src = imagePath + "?t=" + Date.now();
-	}
-);
-
-canvas.addEventListener("mousedown",
-	(e) => {
-		displayStartX = e.offsetX;
-		displayStartY = e.offsetY;
-		startX = e.offsetX * imageScaleX;
-		startY = e.offsetY * imageScaleY;
-		selecting = true;
-		console.log("mousedown", e.offsetX, e.offsetY);
-	}
-);
-
-canvas.addEventListener("mousemove",
-	(e) => {
-		if (!selecting) {
-			document.getElementById("mousex").innerHTML = Math.round(e.offsetX * imageScaleX);
-			document.getElementById("mousey").innerHTML = Math.round(e.offsetY * imageScaleY);
-			return;
-		}
-		displayEndX = e.offsetX;
-		displayEndY = e.offsetY;
-		endX = e.offsetX * imageScaleX;
-		endY = e.offsetY * imageScaleY;
-		ctx.drawImage(
-			image,
-			0,
-			0,
-			canvas.width,
-			canvas.height
-		);
-		ctx.strokeStyle = "red";
-		ctx.lineWidth = 2;
-		ctx.strokeRect(
-			displayStartX,
-			displayStartY,
-			displayEndX - displayStartX,
-			displayEndY - displayStartY
-		);
-		console.log("mousemove", e.offsetX, e.offsetY);
-	}
-);
-
-canvas.addEventListener("mouseup",
-	() => {
-		selecting = false;
-		document.getElementById("mousex").innerHTML = Math.round(startX);
-		document.getElementById("mousey").innerHTML = Math.round(startY);
-		document.getElementById("mousew").innerHTML = Math.round(Math.abs(endX - startX));
-		document.getElementById("mouseh").innerHTML = Math.round(Math.abs(endY - startY));
-		console.log(startX, startY, endX, endY);
-	}
-);
-
-saveBtn.addEventListener("click",
-	async () => {
-		if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {
-			alert("Please select an area first.");
-			return;
-		}
-		const filePath = await window.visor.saveTemplateDialog({
-				x: Math.min(startX, endX),
-				y: Math.min(startY, endY),
-				width: Math.abs(endX - startX),
-				height: Math.abs(endY - startY)
-			});
-		if (!filePath) {
-			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
-		});
-		const fileName = filePath.split(/[\\/]/).pop();
-		selectedTemplatePath = filePath;
-		currentTemplate.textContent = fileName;
-		currentTemplate.title = filePath;
-		matchResult.innerHTML = "<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;
-	}
-	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
-	);
-	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 () => {
-		const path = await window.visor.selectTemplate();
-		if (!path) {
-			return;
-		}
-		const fileName = path.split(/[\\/]/).pop();
-		selectedTemplatePath = 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();
-	}
-);
+const captureBtn = document.getElementById('captureBtn');
+const saveBtn = document.getElementById('saveBtn');
+const canvas = document.getElementById('screenCanvas');
+const ctx = canvas.getContext('2d');
+const templatePreview = document.getElementById('templatePreview');
+const testMatchBtn = document.getElementById('testMatchBtn');
+const matchResult = document.getElementById('matchResult');
+const loadTemplateBtn = document.getElementById('loadTemplateBtn');
+const currentTemplate = document.getElementById('currentTemplate');
+const confidenceInput = document.getElementById('confidenceInput');
+const image = new Image();
+let selectedTemplatePath = null;
+let imageScaleX = 1;
+let imageScaleY = 1;
+let startX;
+let startY;
+let endX;
+let endY;
+let selecting = false;
+let displayStartX;
+let displayStartY;
+let displayEndX;
+let displayEndY;
+
+captureBtn.addEventListener('click', async () => {
+    const imagePath = await window.visor.capture();
+    image.onload = () => {
+        const maxWidth = 1000;
+        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, 0, canvas.width, canvas.height);
+        imageScaleX = image.width / canvas.width;
+        imageScaleY = image.height / canvas.height;
+    };
+    image.src = imagePath + '?t=' + Date.now();
+});
+
+canvas.addEventListener('mousedown', (e) => {
+    displayStartX = e.offsetX;
+    displayStartY = e.offsetY;
+    startX = e.offsetX * imageScaleX;
+    startY = e.offsetY * imageScaleY;
+    selecting = true;
+    console.log('mousedown', e.offsetX, e.offsetY);
+});
+
+canvas.addEventListener('mousemove', (e) => {
+    if (!selecting) {
+        document.getElementById('mousex').innerHTML = Math.round(e.offsetX * imageScaleX);
+        document.getElementById('mousey').innerHTML = Math.round(e.offsetY * imageScaleY);
+        return;
+    }
+    displayEndX = e.offsetX;
+    displayEndY = e.offsetY;
+    endX = e.offsetX * imageScaleX;
+    endY = e.offsetY * imageScaleY;
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = 'red';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(displayStartX, displayStartY, displayEndX - displayStartX, displayEndY - displayStartY);
+    console.log('mousemove', e.offsetX, e.offsetY);
+});
+
+canvas.addEventListener('mouseup', () => {
+    selecting = false;
+    document.getElementById('mousex').innerHTML = Math.round(startX);
+    document.getElementById('mousey').innerHTML = Math.round(startY);
+    document.getElementById('mousew').innerHTML = Math.round(Math.abs(endX - startX));
+    document.getElementById('mouseh').innerHTML = Math.round(Math.abs(endY - startY));
+    console.log(startX, startY, endX, endY);
+});
+
+saveBtn.addEventListener('click', async () => {
+    if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {
+        alert('Please select an area first.');
+        return;
+    }
+    const filePath = await window.visor.saveTemplateDialog({
+        x: Math.min(startX, endX),
+        y: Math.min(startY, endY),
+        width: Math.abs(endX - startX),
+        height: Math.abs(endY - startY),
+    });
+    if (!filePath) {
+        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,
+    });
+    const fileName = filePath.split(/[\\/]/).pop();
+    selectedTemplatePath = filePath;
+    currentTemplate.textContent = fileName;
+    currentTemplate.title = filePath;
+    matchResult.innerHTML = '<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;
+    }
+    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);
+    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 () => {
+    const path = await window.visor.selectTemplate();
+    if (!path) {
+        return;
+    }
+    const fileName = path.split(/[\\/]/).pop();
+    selectedTemplatePath = 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

@@ -1,16 +1,8 @@
-#!/usr/bin/env node
-
-const path = require("path");
-const {
-  spawn
-} = require("child_process");
-const electron = require("electron");
-spawn(
-  electron,
-  [
-    path.join(__dirname, "main.js")
-  ],
-  {
-    stdio: "inherit"
-  }
-);
+#!/usr/bin/env node
+
+const path = require('path');
+const { spawn } = require('child_process');
+const electron = require('electron');
+spawn(electron, [path.join(__dirname, 'main.js')], {
+    stdio: 'inherit',
+});