chore: add draw matrix block

Author: dido18

Taskfile.yaml

@@ -5,15 +5,28 @@ vars:
 tasks:
   scratch:init:
     - git clone --depth 1 --branch {{ .SCRATCH_EDITOR_VERSION }}  https://github.com/scratchfoundation/scratch-editor.git
-    - cd scratch-editor && npm install && npm run build
-    - cd scratch-editor/packages/scratch-gui && npm install
-    - cd scratch-editor/packages/scratch-vm && npm install
+
+  scratch:install:
+  dir: scratch-editor
+  cmds:
+    - npm install 
+    - npm run build --workspace @scratch/scratch-svg-renderer
+    - npm run build --workspace @scratch/scratch-vm
+    - npm run build:dev --workspace @scratch/scratch-gui
 
   scratch:patch:
     - cd scratch-editor/packages/scratch-gui && node ../../../scratch-arduino-extensions/scripts/patch-gui.js
 
   scratch:start:
-    - cd scratch-editor/packages/scratch-gui  && npm start
+  dir: scratch-editor
+    - npm start --workspace @scratch/scratch-gui
 
   scratch:clean:
     - rm -rf scratch-editor
+
+  board:upload:
+   -  adb push ./python/main.py  /home/arduino/ArduinoApps/scratch-arduino-app/python/main.py
+   -  adb push ./sketch/sketch.ino  /home/arduino/ArduinoApps/scratch-arduino-app/sketch/sketch.ino 
+   -  adb push ./sketch/sketch.yaml  /home/arduino/ArduinoApps/scratch-arduino-app/sketch/sketch.yaml 
+   -  adb push ./app.yaml /home/arduino/ArduinoApps/scratch-arduino-app/app.yaml  
+  #  -  adb shell arduino-app-cli app restart user:scratch-arduino-app 

app.yaml

@@ -1,5 +1,7 @@
 name: scratch-arduino-app
 description: Controll the Uno-Q borad using Scractch blocks
-ports: []
-bricks: []
+ports:
+   - 7000
+bricks:
+   - arduino:web_ui
 icon: 💡

python/main.py

@@ -1,7 +1,30 @@
-from arduino.app_utils import App
+from arduino.app_utils import App, Bridge
+from arduino.app_bricks.web_ui import WebUI
 import time
 
-def loop():
-    time.sleep(1) # do nothing: only to keep the track the app status
-    
-App.run(user_loop=loop)
+ui = WebUI()
+
+def on_matrix_draw(_, data):
+    print(f"Received frame to draw on matrix: {data}")
+    # from 5x5 to 8x13 matrix
+    frame_5x5 = data.get('frame')
+    row0 = "0"*13
+    row1 = "0"*4 + frame_5x5[0:5] + "0"*4
+    row2 = "0"*4 + frame_5x5[5:10] + "0"*4
+    row3 = "0"*4 + frame_5x5[10:15] + "0"*4
+    row4 = "0"*4 + frame_5x5[15:20] + "0"*4
+    row5 = "0"*4 + frame_5x5[20:25] + "0"*4
+    row6 = "0"*13
+    row7 = "0"*13
+    frame_8x13 = row0 + row1 + row2 + row3 + row4 + row5 + row6 + row7
+    print(f"Transformed frame to draw on 8x13 matrix: {frame_8x13}")
+    Bridge.call("matrix_draw", frame_8x13)
+
+ui.on_message("matrix_draw", on_matrix_draw)
+
+ui.on_connect(
+    lambda sid: (
+        print(f"Client connected: {sid} "),
+    )
+)
+App.run()

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

@@ -1,6 +1,7 @@
-// Option 1: Relative path to cousin folder
 // const formatMessage = require('../../../../../../scratch-editor/node_modules/format-message');
 const BlockType = require('../../../../../../scratch-editor/packages/scratch-vm/src/extension-support/block-type');
+const ArgumentType = require('../../../../../../scratch-editor/packages/scratch-vm/src/extension-support/argument-type');
+const io = require('./socket.io.min.js');
 
 /**
  * Url of icon to be displayed at the left edge of each extension block.
@@ -16,9 +17,16 @@ const iconURI = '';
 // eslint-disable-next-line max-len
 const menuIconURI =  ''
 
+const wsServerURL = 'http://192.168.1.39:7000';
+
 class Scratch3Arduino {
     constructor (runtime) {
         this.runtime = runtime;
+        this.io = io(wsServerURL, {
+            path: '/socket.io',
+            transports: ['polling','websocket'],
+            autoConnect: true
+        });
    }
 };
 
@@ -30,17 +38,24 @@ Scratch3Arduino.prototype.getInfo = function () {
             blockIconURI: iconURI,
             blocks: [ 
                 {
-                    opcode: 'noop',
+                    opcode: 'matrixDraw',
                     blockType: BlockType.COMMAND,
-                    text: 'do nothing',
-                    func: 'noop'
+                    text: 'draw [FRAME] on matrix',
+                    func: 'matrixDraw',
+                    arguments: {
+                        FRAME: {
+                           type: ArgumentType.MATRIX,
+                            defaultValue: '0101010101100010101000100'
+                        }
+                    }
                 },
             ],
-        
         };
 }
 
-Scratch3Arduino.prototype.noop = function () {
+Scratch3Arduino.prototype.matrixDraw = function (args) {
+    console.log(`Drawing frame on matrix: ${args}`);
+    this.io.emit("matrix_draw", {frame: args.FRAME});
 };
 
 module.exports = Scratch3Arduino;

scratch-arduino-extensions/packages/scratch-vm/src/extensions/scratch3_arduino/socket.io.min.js

@@ -1,75 +1,41 @@
-// SPDX-FileCopyrightText: Copyright (C) 2025 ARDUINO SA <http://www.arduino.cc>
-//
-// SPDX-License-Identifier: MPL-2.0
-
 #include <Arduino_RouterBridge.h>
-#include <Modulino.h>
-
-// TODO: those will go into an header file.
-extern "C" void matrixWrite(const uint32_t* buf);
-extern "C" void matrixBegin();
-
-ModulinoButtons buttons;
+#include "Arduino_LED_Matrix.h"
 
-void set_led_state(bool state) {
-  // LOW state means LED is ON
-  digitalWrite(LED_BUILTIN, state ? LOW : HIGH);
-}
+Arduino_LED_Matrix matrix;
 
 void setup() {
-  matrixBegin();
-  //Monitor.begin();
-  Modulino.begin(Wire1);
-
- while(!buttons.begin()){
-   set_led_state(true);
-   delay(1000);
-   set_led_state(false);
- }
- buttons.setLeds(true, true, true);
-
-  pinMode(LED_BUILTIN, OUTPUT);
-  // Start with the LED OFF (HIGH state of the PIN)
-  digitalWrite(LED_BUILTIN, HIGH);
-
+  matrix.begin();
   Bridge.begin();
-  Bridge.provide("set_led_state", set_led_state);
   Bridge.provide("matrix_draw", matrix_draw);
 }
 
-void loop() {
-  
-if (buttons.update()) {
-    if (buttons.isPressed(0)) {
-      // Monitor.println("button a pressed");
-      // Serial.println("Button A pressed!");
-      Bridge.notify("button_pressed");
-      set_led_state(true);
-      delay(500);
-    } else if (buttons.isPressed(1)) {
-      // Serial.println("Button B pressed!");
-      // Monitor.println("button B pressed");
-      set_led_state(false);
-      Bridge.notify("button_pressed");
-      delay(500);
-    } else if (buttons.isPressed(1)) {
-      // Serial.println("Button C pressed!");
-      // Monitor.println("button C pressed");
-      Bridge.notify("button_pressed");
-      delay(500);
-    }
- }
-}
-
-const uint32_t heart[] = {
-	0x1f88ffff,
-	0xe0fe03f0,
-	0xc1ef1e3d,
-	0x1f
+void loop() {}
+
+uint8_t shades[104] = {
+	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	0,	
+	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,	1,
+	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,	2,
+	3,	3,	3,	3,	3,	3,	3,	3,	3,	3,	3,	3,	3,
+	4,	4,	4,	4,	4,	4,	4,	4,	4,	4,	4,	4,	4,
+	5,	5,	5,	5,	5,	5,	5,	5,	5,	5,	5,	5,	5,
+	6,	6,	6,	6,	6,	6,	6,	6,	6,	6,	6,	6,	6,
+	7,	7,	7,	7,	7,	7,	7,	7,	7,	7,	7,	7,	7,
 };
 
-void matrix_draw(){
-   matrixWrite(heart);
+
+void matrix_draw(String frame){
+  if (frame.length() != 104) {
+    Serial.println("Error: Frame length must be 104 characters.");
+    return;
+  }
+  for (int i = 0; i < 104; i++) {
+    if (frame.charAt(i) == '1') {
+      shades[i] = 1;
+    } else{
+      shades[i] = 0;
+    }
+  }
+  matrix.draw(shades);
 }
 
 

sketch/sketch.ino

@@ -8,10 +8,10 @@ profiles:
       - DebugLog (0.8.4)
       - ArxContainer (0.7.0)
       - ArxTypeTraits (0.3.1)
-      - Modulino (0.5.1)
-      - Arduino_HS300x (1.0.0)
-      - STM32duino VL53L4CD (1.0.5)
-      - STM32duino VL53L4ED (1.0.1)
-      - Arduino_LSM6DSOX (1.1.2)
-      - Arduino_LPS22HB (1.0.2)
+      # - Modulino (0.5.1)
+      # - Arduino_HS300x (1.0.0)
+      # - STM32duino VL53L4CD (1.0.5)
+      # - STM32duino VL53L4ED (1.0.1)
+      # - Arduino_LSM6DSOX (1.1.2)
+      # - Arduino_LPS22HB (1.0.2)
 default_profile: default