MatrixIDE

MatrixIDE ist eine moderne Web-IDE zur Programmierung und Verwaltung der PixelMatrix (siehe PixelMatrix Projekt). Sie ermöglicht das Schreiben, Kompilieren und Übertragen von Programmen auf die LED-Matrix direkt im Browser.

Inhaltsverzeichnis

• Setup & Installation
• Entwicklungsserver starten
• Funktionsweise: WebAssembly
• Matrix-Verbindung & Firmware-Update
• Benutzung: Programmieren der Matrix
• Technologien
• Ressourcen

---

Setup & Installation

1. Repository klonen

   git clone https://github.com/wri-obernburg/MatrixIDE.git
   cd MatrixIDE

2. Abhängigkeiten installieren

   npm install

Entwicklungsserver starten

Starte den lokalen Entwicklungsserver mit:

npm run dev

Die Anwendung ist dann unter http://localhost:3000 erreichbar.

---

Funktionsweise: WebAssembly

Die IDE nutzt WebAssembly (WASM), um den Compiler und Emulator der PixelMatrix direkt im Browser auszuführen. Die C/C++-Logik der Matrix wird mit Emscripten nach WASM kompiliert und als index.wasm im public/-Verzeichnis bereitgestellt. Die Kommunikation zwischen JavaScript und WASM erfolgt über die Module.ccall-Schnittstelle, z.B.:

// Beispiel: LEDs aus WASM holen
const ptr = Module.ccall("get_leds", "number", null, null);
const leds = Module.HEAPU8.subarray(ptr, ptr + (144*4));

Der C++-Code für den Compiler ist in folgender Repository.

Dadurch kann die Matrix-Logik performant und plattformunabhängig im Browser ausgeführt werden.

---

Matrix-Verbindung & Firmware-Update

Die Matrix wird per WLAN verbunden. Standardmäßig ist sie unter http://192.168.0.1 oder http://matrix.local erreichbar. Die Verbindung erfolgt direkt aus dem Browser (WebUSB/WebSerial wird nicht benötigt, aber ein Chromium-basierter Browser ist erforderlich).

Firmware-Update

1. Firmware herunterladen: Über die Update-Funktion in der IDE oder direkt von PixelMatrix Releases.
2. Mit Matrix-WLAN verbinden (SSID: z.B. PixelMatrix-XXXX).
3. Update-Seite öffnen: http://matrix.local/update
4. Firmware hochladen und Update durchführen.

---

Benutzung: Programmieren der Matrix

1. Programm schreiben: Im Editor-Feld der Web-IDE. Die Sprache basiert auf Wrench mit aktivierten Erweiterungen für Math, String und Container.
2. Kompilieren: Über den "Compile"-Button wird der Code im Browser nach WASM kompiliert und simuliert.
3. Simulation: Die LED-Matrix wird im Browser visualisiert.
4. Matrix verbinden: Stelle sicher, dass du mit dem Matrix-WLAN verbunden bist. Die Verbindung wird im UI angezeigt.
5. Programm übertragen: Mit "Send to Matrix" wird das kompilierte Programm direkt auf die Matrix übertragen (/pushDevCode-API).
6. Matrix steuern & Apps verwalten: Über die "Matrix Settings" können Apps verwaltet und die Start-App gesetzt werden.

Hinweis: Die Verbindung und Übertragung funktionieren nur in Chromium-basierten Browsern (z.B. Chrome, Edge).

---

Technologien

• Next.js (React-Framework)
• TypeScript
• TailwindCSS
• WebAssembly (WASM)
• Emscripten

---

Ressourcen

• PixelMatrix Firmware & Hardware
• Wrench Sprache
• Matrix Funktionen (API)

---

Viel Spaß beim Programmieren deiner PixelMatrix!