feat: update README and Taskfile for improved local development instructions and fix Arduino board connection handling

Author: dido18

README.md

@@ -25,7 +25,11 @@ NOTE: the `https` is needed by the `getUserMedia()` method for security reason.
 ## Local development
 
 - `task scratch:init`
-- `task scratch:local:start`
-- `ŧask board:upload`
-- change the `const DEFAULT_HOST =`<YOUR_IP|BOARD_NAME>`;` in the `scratch-arduino-extensions/packages/scratch-vm/src/extensions/ArduinoUnoQ.js`
-- Open local scratch on http://localhost:8601/
+- `task scratch:watch` watch scratch GUI files and reload on save
+- Open the `http://localhost:8602?host=BOARD_IP`
+- `task watch` watch files changes for both python and sketch, and upload the changes to the board and restart"
+
+
+For testing on the board
+- `ŧask app:build`
+- `task board:app:upload`

Taskfile.yaml

@@ -29,7 +29,8 @@ tasks:
     - cd scratch-prg-extensions/extensions/src/arduino_basics && pnpm install
 
   scratch:watch:
-    - cd prg-raise-playground && pnpm dev -i arduino_basics
+    cmds:
+      - cd prg-raise-playground && pnpm dev -i arduino_basics &
 
   app:build:
     desc: "Copy app files (python, assets, app.yaml) to a build directory"
@@ -81,7 +82,7 @@ tasks:
       - cd build && zip -r scratch-arduino-app-{{.APP_VERSION}}.zip scratch-arduino-app && cd ..
 
   watch:
-    desc: "wathc files changes for both python and sketch, and upload the changes to the board and restart"
+    desc: "watch files changes for both python and sketch, and upload the changes to the board and restart"
     deps:
       - python:watch
       - sketch:watch

scratch-prg-extensions/extensions/src/arduino_basics/index.ts

@@ -1,9 +1,7 @@
 import {
-  type BlockUtilityWithID,
   type Environment,
   extension,
   type ExtensionMenuDisplayDetails,
-  Language,
   scratch,
 } from "$common";
 import { io, Socket } from "socket.io-client";
@@ -20,9 +18,20 @@ const details: ExtensionMenuDisplayDetails = {
   menuSelectColor: "#62AEB2",
 };
 
-const DEFAULT_HOST = "192.168.1.39";
+// Get Arduino board IP or hostname from URL parameter - required
+const getArduinoBoardHost = () => {
+  if (typeof window !== 'undefined' && window.location) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const boardHost = urlParams.get('host');
+    if (boardHost) {
+      console.log(`Connecting to Arduino board: ${boardHost}`);
+      return boardHost;
+    }
+  }
+  throw new Error('Arduino board host required. Add ?host=arduino_board_ip_or_name to the URL');
+};
 
-// TODO: support the brightness `0-7' of the leds
+// TODO: make the block to support the brightness `0-7' of the leds
 const PATTERNS = {
   heart: [
     [0, 0, 0, 7, 7, 0, 0, 0, 7, 7, 0, 0, 0],
@@ -41,7 +50,8 @@ export default class ArduinoBasics extends extension(details, "ui", "customArgum
   private socket: Socket | null = null;
 
   init(env: Environment) {
-    var serverURL = `wss://${DEFAULT_HOST}:7000`; // Changed from wss to ws
+    const arduinoBoardHost = getArduinoBoardHost();
+    var serverURL = `wss://${arduinoBoardHost}:7000`;
 
     this.socket = io(serverURL, {
       path: "/socket.io",
@@ -77,9 +87,12 @@ export default class ArduinoBasics extends extension(details, "ui", "customArgum
     }
   }
 
-  @scratch.command`Clear matrix`
+
+  @(scratch.command`Clear matrix`)
   clearMatrix(matrix: number[][]) {
     var matrixString = PATTERNS.empty.flat().join("");
-    this.socket.emit("matrix_draw", { frame: matrixString });
+    if (this.socket) {
+      this.socket.emit("matrix_draw", { frame: matrixString });
+    }
   }
 }