Pixel Draw - Draw Pixels on the Arduino UNO Q's Built-In LED Matrix

Arduino App Lab

Arduino USB-C Cable (24 pin)

Arduino® UNO™ Q 4GB

<html><body><h3>Pixel Draw — A Web-Based Pixel Art Editor for Arduino UNO Q</h3><h3>Introduction</h3><blockquote>Pixel Draw is an interactive web-based pixel art editor built specifically for the Arduino UNO Q. </blockquote><blockquote>The project allows you to draw directly in a web browser using a 13 × 8 pixel grid. Every pixel in the web interface corresponds to one LED on the Arduino UNO Q's built-in LED matrix. </blockquote><blockquote>When a pixel is turned ON or OFF in the browser, the drawing is sent to the UNO Q and reproduced on its physical LED matrix. </blockquote><blockquote>The project uses the UNO Q's unique hybrid architecture, combining a Linux-based application processor with a dedicated STM32 microcontroller. The Linux side handles the web application and Python logic, while the STM32 handles the real-time LED matrix control. Arduino Bridge provides communication between the two sides. </blockquote><blockquote>The result is a simple but practical demonstration of how a modern Arduino board can combine web technologies, Python, Linux and embedded hardware control in a single project. </blockquote> What Makes This Project Different? The project does not require: <ol><li>An external LED matrix </li><li>Breadboard </li><li>Resistors </li><li>Jumper wires </li><li>Sensors </li><li>External displays </li></ol>Everything is built around the Arduino UNO Q itself. The UNO Q's onboard matrix contains 104 monochrome blue LEDs arranged as 8 rows × 13 columns. The Pixel Draw interface uses exactly the same dimensions, creating a one-to-one relationship between the browser and the physical hardware. So if you draw: <pre>○ ○ ○ ○ ○ </pre><pre>○ ● ● ● ○ </pre><pre>○ ● ○ ● ○ </pre><pre>○ ● ● ● ○ </pre><pre>○ ○ ○ ○ ○ </pre>the corresponding pixels are illuminated on the physical UNO Q matrix. <h3>How It Works</h3>The project consists of three main layers: <pre>┌─────────────────────────┐ </pre><pre>│ WEB BROWSER │ </pre><pre>│ │ </pre><pre>│ Pixel Draw UI │ </pre><pre>│ 13 × 8 │ </pre><pre>└────────────┬────────────┘ </pre><pre>	 │ </pre><pre>	 │ WebUI </pre><pre>	 ▼ </pre><pre>┌─────────────────────────┐ </pre><pre>│ LINUX / MPU │ </pre><pre>│ │ </pre><pre>│ Python │ </pre><pre>│ WebUI Brick │ </pre><pre>└────────────┬────────────┘ </pre><pre>	 │ </pre><pre>	 │ Arduino Bridge </pre><pre>	 ▼ </pre><pre>┌─────────────────────────┐ </pre><pre>│ STM32U585 MCU │ </pre><pre>│ │ </pre><pre>│ Arduino Sketch │ </pre><pre>│ LED Matrix Control │ </pre><pre>└────────────┬────────────┘ </pre><pre>	 │ </pre><pre>	 ▼ </pre><pre>┌─────────────────────────┐ </pre><pre>│ UNO Q LED MATRIX │ </pre><pre>│ │ </pre><pre>│ 8 × 13 │ </pre><pre>│ 104 LEDs │ </pre><pre>└─────────────────────────┘ </pre>The Arduino UNO Q is specifically designed around this dual-processor architecture: the Qualcomm Dragonwing QRB2210 MPU runs Linux, while the STM32U585 runs the Arduino sketch. Arduino Bridge provides RPC communication between the Linux MPU and the MCU. The Pixel Grid The Pixel Draw interface contains exactly: <code class="code">8 rows × 13 columns = 104 pixels</code>Each browser pixel has two possible states: <code class="code">0 → OFF</code><code class="code">1 → ON</code>The pixels are stored internally as a 104-element array. The index of each pixel is calculated using: <code class="code">index = row × 13 + column</code>For example: <pre>Row 0 → pixels 0–12 </pre><pre>Row 1 → pixels 13–25 </pre><pre>Row 2 → pixels 26–38 </pre><pre>Row 3 → pixels 39–51 </pre><pre>Row 4 → pixels 52–64 </pre><pre>Row 5 → pixels 65–77 </pre><pre>Row 6 → pixels 78–90 </pre><pre>Row 7 → pixels 91–103 </pre>This ensures that the browser grid and physical LED matrix maintain the same layout. User Interface The web interface is intentionally simple and focused on drawing. It contains: <ol><li>Pixel Grid - The main 13 × 8 drawing area. Each cell represents one physical LED. </li><li>Pixel Counter - The interface displays the number of currently active LEDs: 24 / 104 ON </li><li>Clear - Turns every pixel OFF. </li><li>Fill - Turns every pixel ON. </li><li>Connection Status - Shows whether the browser is connected to the UNO Q WebUI application. </li><li>Drawing - A pixel can be activated by clicking it. </li></ol>The user can also drag across the grid to draw larger shapes. Communication Flow When a user clicks a pixel, the following process takes place. 1. Pixel selection JavaScript updates the pixel state in the browser. For example: <code class="code">pixels[31] = 1</code>2. Complete frame creation Instead of sending only one changed pixel, the application sends the complete 104-pixel frame. For example: <code class="code">0010000000000</code><code class="code">0000110000000</code><code class="code">0000010000000</code><code class="code">...</code>This keeps the complete display state synchronized. 3. WebUI The browser sends the frame to the Python application through the WebUI Brick. <pre>Browser </pre><pre>	 ↓ </pre><pre>WebUI </pre><pre>	 ↓ </pre><pre>Python </pre>4. Python processing The Python application checks that exactly 104 pixels have been received. The binary values are converted into a compact string containing 0 and 1. 5. Arduino Bridge Python sends the frame to the STM32 using Arduino Bridge. <pre>Python </pre><pre>	 ↓ </pre><pre>Bridge.notify() </pre><pre>	 ↓ </pre><pre>STM32 </pre>6. STM32 processing The Arduino sketch receives the 104-character frame and converts each character into an LED state. <pre>'0' → OFF </pre><pre>'1' → ON </pre>7. Matrix update The frame is passed to: matrix.draw(frame); The physical matrix immediately displays the drawing. Why Use Arduino Bridge? The UNO Q is different from a traditional Arduino board because it contains both a Linux-capable processor and a microcontroller. The Linux side is ideal for: <ol><li>Web applications </li><li>Python </li><li>Networking </li><li>File handling </li><li>User interfaces </li></ol>The STM32 side is ideal for: <ol><li>Hardware control </li><li>Real-time operations </li><li>Arduino sketches </li><li>Direct peripheral control </li></ol>Arduino Bridge allows these two environments to communicate. For this project: <pre>Linux / Python </pre><pre>	 │ </pre><pre>	 │ Bridge </pre><pre>	 ▼ </pre><pre>STM32 </pre>This makes Pixel Draw a useful example of how the two processing environments of the UNO Q can work together. Why the Complete Frame Is Sent An alternative design would be to send only the changed pixel: <pre>row = 3 </pre><pre>column = 7 </pre><pre>state = ON </pre>However, Pixel Draw sends the complete 104-pixel frame instead. This has a useful advantage: the STM32 always receives the complete current state of the display. The architecture becomes: <pre>Browser </pre><pre>	 ↓ </pre><pre>Current 104-pixel frame </pre><pre>	 ↓ </pre><pre>Python </pre><pre>	 ↓ </pre><pre>STM32 </pre><pre>	 ↓ </pre><pre>Physical matrix </pre>This makes the implementation straightforward and keeps the browser and hardware representation synchronized. Why a String Is Used for the Bridge Frame The final implementation represents the 104 pixels as a string: <code class="code">010001000111000...</code>Each character represents one LED. <code class="code">0 = OFF</code><code class="code">1 = ON</code>Using a simple string keeps the Bridge payload compact and avoids unnecessary structured-array serialization between Python and the MCU. The STM32 converts the received string back into the 104-value matrix frame. LED Matrix Control The physical matrix is controlled from the STM32 Arduino sketch using: <code class="code">#include &lt;Arduino_LED_Matrix.h&gt;</code>The matrix is initialized with: <code class="code">matrix.begin();</code>For this project, one grayscale bit is used: <code class="code">matrix.setGrayscaleBits(1);</code>This is sufficient because Pixel Draw only needs two states: <pre>OFF </pre><pre>ON </pre>Finally, the complete frame is displayed using: <code class="code">matrix.draw(frame);</code>The UNO Q datasheet identifies the onboard matrix as an 8 × 13 monochrome blue LED matrix containing 104 pixels, driven by the STM32U585. <h3>Software Architecture</h3>The project is divided into frontend, Linux backend and MCU components. <pre>Pixel Draw </pre><pre>│ </pre><pre>├── Frontend </pre><pre>│ ├── HTML </pre><pre>│ ├── CSS </pre><pre>│ └── JavaScript </pre><pre>│ </pre><pre>├── Linux / MPU </pre><pre>│ └── Python </pre><pre>│ </pre><pre>└── MCU </pre><pre>	 └── Arduino C++ </pre>Frontend <ol><li>HTML defines the interface. </li><li>CSS controls the visual design. </li><li>JavaScript creates the 104-pixel grid and manages drawing. </li></ol>Linux / MPU Python receives WebUI messages and communicates with the MCU. MCU Arduino C++ receives the pixel frame and controls the physical matrix. <h3>Project Structure</h3>The application is organized approximately as follows: <pre>Pixel Draw/ </pre><pre>│ </pre><pre>├── app.yaml </pre><pre>│ </pre><pre>├── python/ </pre><pre>│ └── main.py </pre><pre>│ </pre><pre>├── sketch/ </pre><pre>│ └── sketch.ino </pre><pre>│ </pre><pre>└── assets/ </pre><pre>	 ├── index.html </pre><pre>	 ├── style.css </pre><pre>	 ├── app.js </pre><pre>	 │ </pre><pre>	 └── libs/ </pre><pre>	 ├── socket.io.min.js </pre><pre>	 └── arduino.js </pre>The WebUI Brick supplies the browser-side communication libraries required by the application. <h3>Hardware Required</h3>Only: <ol><li>1 × Arduino UNO Q </li><li>1 × USB-C cable </li></ol>No external electronics are required. The project uses the UNO Q's built-in LED matrix rather than connecting an external display. <h3>Software Required</h3>The project is developed using: <ol><li>Arduino App Lab </li><li>WebUI Brick </li><li>Arduino Bridge / Router Bridge </li><li>Arduino_LED_Matrix </li><li>Python </li><li>C++ </li><li>HTML </li><li>CSS </li><li>JavaScript </li></ol>Arduino describes App Lab as the recommended development environment for applications that use both the UNO Q's MPU and MCU. <h3>Getting Started</h3>1. Connect the UNO Q Connect the Arduino UNO Q to your computer using USB-C. Allow the board to finish booting. The UNO Q's onboard matrix displays a boot logo for approximately 20–30 seconds during Linux startup. Arduino notes that accessing the matrix before startup completes may interfere with MCU operation. 2. Open Arduino App Lab Create or open the Pixel Draw application. 3. Add WebUI Add the WebUI - HTML Brick to the application. 4. Add the Application Files The project contains: <pre>main.py </pre><pre>sketch.ino </pre><pre>index.html </pre><pre>style.css </pre><pre>app.js </pre>5. Run the Application Run the complete App Lab application so that both the Linux application and the MCU sketch operate together. 6. Open the Web Interface Open the WebUI in a browser. The Pixel Draw interface will appear. 7. Start Drawing Click or drag across the 13 × 8 grid. The physical UNO Q matrix reproduces the drawing. <h3>What I Learned From This Project</h3>This project demonstrates several important concepts: 1. Hybrid embedded systems - The UNO Q can use Linux and a microcontroller together. 2. Web-based hardware control - A browser interface can be used as the front end for an embedded hardware project. 3. WebUI communication - The WebUI Brick can connect a browser interface with a Python application running on the UNO Q. 4. MPU-to-MCU communication - Arduino Bridge allows the Linux processor and STM32 microcontroller to exchange data. 5. Pixel-based display representation - A physical LED matrix can be represented as a simple two-dimensional data structure. 6. Hardware/software synchronization - The browser and physical LED matrix maintain the same 104-pixel state. <h3>Conclusion</h3>Pixel Draw is a compact demonstration of the Arduino UNO Q's capabilities. What appears to be a simple pixel drawing application actually combines several layers of technology: <pre>HTML </pre><pre>	 + </pre><pre>CSS </pre><pre>	 + </pre><pre>JavaScript </pre><pre>	 + </pre><pre>WebUI </pre><pre>	 + </pre><pre>Python </pre><pre>	 + </pre><pre>Arduino Bridge </pre><pre>	 + </pre><pre>STM32 </pre><pre>	 + </pre><pre>Arduino_LED_Matrix </pre><pre>	 = </pre><pre>Interactive Hardware Application </pre>The project demonstrates how the Arduino UNO Q can bridge the gap between modern software interfaces and embedded hardware. With no external electronics, a browser becomes the drawing tool and the UNO Q's built-in 104-pixel matrix becomes the physical output. <blockquote>Draw on the screen. See it on the board. </blockquote> <div id="gallery"><img id="gallery" src="https://projects.arduinocontent.cc/c10e36c0-357b-4d23-aa01-79d6d06db838.jpg"/><figcaption></figcaption>,<img id="gallery" src="https://projects.arduinocontent.cc/c792e46e-fe2f-4c15-80c6-c2dabb77ef60.jpg"/><figcaption></figcaption>,<img id="gallery" src="https://projects.arduinocontent.cc/0b57f6f2-3ce9-4837-80db-ad5c30fced61.jpg"/><figcaption></figcaption>,<img id="gallery" src="https://projects.arduinocontent.cc/cd5636d4-b55e-499e-aaaf-b4ae232cebf2.png"/><figcaption></figcaption></div> </body></html>

Pixel Draw - Draw Pixels on the Arduino UNO Q's Built-In LED Matrix

A browser-based pixel drawing tool that lets you create 8×13 pixel artwork and instantly display it on the Arduino UNO Q's built-in LED matrix.