refactor: update ArduinoUnoQ integration to use default host and enhance object detection methods

Author: dido18

scratch-arduino-extensions/packages/scratch-vm/src/extensions/ArduinoUnoQ.js

@@ -1,8 +1,11 @@
 const io = require("./socket.io.min.js");
 
+// const DEFAULT_HOST = window.location.hostname;
+const DEFAULT_HOST = "192.168.1.39";
+
 class ArduinoUnoQ {
-  constructor(host, port) {
-    this.serverURL = `wss://${host}:${port}`;
+  constructor() {
+    this.serverURL = `wss://${DEFAULT_HOST}:7000`;
 
     this.io = io(this.serverURL, {
       path: "/socket.io",
@@ -99,6 +102,34 @@ class ArduinoUnoQ {
     const clearFrame = "0".repeat(25);
     this.matrixDraw(clearFrame);
   }
+
+  // AI object detection
+
+  detectObjects(imageData) {
+    this.io.emit("detect_objects", { image: imageData });
+    console.log("Emitted detect_objects event");
+  }
+
+  // ===== EVENT HANDLING METHODS =====
+
+  on(event, callback) {
+    if (this.io) {
+      this.io.on(event, callback);
+      console.log(`Registered event listener for: ${event}`);
+    } else {
+      console.error("Socket.io not initialized");
+    }
+  }
+
+  emit(event, data) {
+    if (this.io && this.isConnected) {
+      this.io.emit(event, data);
+      console.log(`Emitted event: ${event}`, data);
+    } else {
+      console.warn(`Cannot emit ${event}: Not connected to Arduino UNO Q`);
+    }
+  }
+
 }
 
 module.exports = ArduinoUnoQ;

scratch-arduino-extensions/packages/scratch-vm/src/extensions/arduino_basics/index.js

@@ -11,7 +11,7 @@ const menuIconURI = "";
 class ArduinoBasics {
   constructor(runtime) {
     this.runtime = runtime;
-    this.unoq = new ArduinoUnoQ(`${window.location.hostname}`, 7000);
+    this.unoq = new ArduinoUnoQ();
     this.unoq.connect();
   }
 }

scratch-arduino-extensions/packages/scratch-vm/src/extensions/arduino_modulino/index.js

@@ -2,36 +2,23 @@ const BlockType = require("../../../../../../scratch-editor/packages/scratch-vm/
 const ArgumentType = require(
   "../../../../../../scratch-editor/packages/scratch-vm/src/extension-support/argument-type",
 );
-const io = require("../socket.io.min.js");
+const ArduinoUnoQ = require("../ArduinoUnoQ");
 
-/**
- * Url of icon to be displayed at the left edge of each extension block.
- * @type {string}
- */
-// eslint-disable-next-line max-len
+// TODO: add icons
 const iconURI = "";
-
-/**
- * Url of icon to be displayed in the toolbox menu for the extension category.
- * @type {string}
- */
-// eslint-disable-next-line max-len
 const menuIconURI = "";
 
 const wsServerURL = `${window.location.protocol}//${window.location.hostname}:7000`;
 
 class ArduinoModulino {
   constructor(runtime) {
     this.runtime = runtime;
-    this.io = io(wsServerURL, {
-      path: "/socket.io",
-      transports: ["polling", "websocket"],
-      autoConnect: true,
-    });
+    this.unoq = new ArduinoUnoQ();
+    this.unoq.connect();
 
     // TODO: move to ModulinoPeripheral
     this._button_pressed = "";
-    this.io.on("modulino_buttons_pressed", (data) => {
+    this.unoq.on("modulino_buttons_pressed", (data) => {
       console.log(`Modulino button pressed event received: ${data.btn}`);
       this._button_pressed = data.btn.toUpperCase();
     });

scratch-arduino-extensions/packages/scratch-vm/src/extensions/arduino_object_detection/index.js

@@ -2,27 +2,16 @@ const BlockType = require("../../../../../../scratch-editor/packages/scratch-vm/
 const ArgumentType = require(
   "../../../../../../scratch-editor/packages/scratch-vm/src/extension-support/argument-type",
 );
-const io = require("../socket.io.min.js");
 const Video = require("../../../../../../scratch-editor/packages/scratch-vm/src/io/video");
 const Rectangle = require("../../../../../../scratch-editor/packages/scratch-render/src/Rectangle.js");
 const StageLayering = require("../../../../../../scratch-editor/packages/scratch-vm/src/engine/stage-layering.js");
 const { Detection, MODEL_LABELS } = require("./object_detection");
+const ArduinoUnoQ = require("../ArduinoUnoQ");
 
-/**
- * Url of icon to be displayed at the left edge of each extension block.
- * @type {string}
- */
-// eslint-disable-next-line max-len
+//TODO add icons
 const iconURI = "";
-
-/**
- * Url of icon to be displayed in the toolbox menu for the extension category.
- * @type {string}
- */
-// eslint-disable-next-line max-len
 const menuIconURI = "";
 
-const wsServerURL = `${window.location.protocol}//${window.location.hostname}:7000`;
 
 /**
  * RGB color constants for confidence visualization
@@ -37,6 +26,9 @@ class ArduinoObjectDetection {
   constructor(runtime) {
     this.runtime = runtime;
 
+    this.unoq = new ArduinoUnoQ();
+    this.unoq.connect();
+
     /** @type {Array<Detection>} */
     this.detectedObjects = [];
 
@@ -66,15 +58,8 @@ class ArduinoObjectDetection {
       }
     });
 
-    this.io = io(wsServerURL, {
-      path: "/socket.io",
-      transports: ["polling", "websocket"],
-      autoConnect: true,
-    });
-
-    this.io.on("detection_result", (data) => {
+    this.unoq.on("detection_result", (data) => {
       this.detectedObjects = [];
-
       this._clearBoundingBoxes();
 
       data.detection.forEach((detection) => {
@@ -264,7 +249,7 @@ ArduinoObjectDetection.prototype._detectObjects = function(args) {
   }
   const dataUrl = canvas.toDataURL("image/png");
   const base64Frame = dataUrl.split(",")[1];
-  this.io.emit("detect_objects", { image: base64Frame });
+  this.unoq.detectObjects(base64Frame);
 };
 
 ArduinoObjectDetection.prototype._clearBoundingBoxes = function(args) {