diff --git a/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/assets/led-matrix-editor.png b/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/assets/led-matrix-tool.png similarity index 100% rename from content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/assets/led-matrix-editor.png rename to content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/assets/led-matrix-tool.png diff --git a/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md b/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md index 0aca9f3853..aa93823817 100644 --- a/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md +++ b/content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md @@ -280,10 +280,38 @@ delay(1000); ## Animation Generation We have developed a tool that is used to generate frames and animations to be rendered on the LED Matrix in your browser. This tool is part of [Arduino labs](https://labs.arduino.cc), and is therefore considered experimental software. -[Click here](https://ledmatrix-editor.arduino.cc) to go to the LED Matrix tool. +To use the tool you need to upload the following sketch, allowing the board to read serial inputs send by the browser. +You can also find the sketch in **File > Examples > LED_Matrix > LivePreview** -![LED Matrix Editor](./assets/led-matrix-editor.png) +```arduino +#include "Arduino_LED_Matrix.h" + +ArduinoLEDMatrix matrix; + +void setup() { + Serial.begin(115200); + matrix.begin(); +} + +uint32_t frame[] = { + 0, 0, 0, 0xFFFF +}; + +void loop() { + if(Serial.available() >= 12){ + frame[0] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24; + frame[1] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24; + frame[2] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24; + matrix.loadFrame(frame); + } +} +``` + +[Click here](https://ledmatrix-editor.arduino.cc) to go to the LED Matrix tool. + + +![LED Matrix Editor](./assets/led-matrix-tool.png) Once you've made your animations, you can export them from the tool in the format that lets you use them like [previously discussed](#how-to-write-a-frame).