Built-in project · Arduino Uno R4 WiFi

Uno R4 WiFi heart

A heart beating on the Uno R4 WiFi’s 12 x 8 LED matrix, drawn through Arduino_LED_Matrix.h with no parts to wire. The whole build, an Arduino Uno R4 WiFi, runs here in your browser on the firmware below; open it in the editor to change the wiring or the code and run it again.

Open in the simulator Read the code

Teaching? Assign it to your class in one click.

Beginner About 5 minutes to build and run. Runs in your browser. Free, and no account needed.

The parts retail for about $28. On Mokxi they're free.

The circuit runs here once the page has loaded.

What you'll learn

Drawing on an LED matrix from a bitmap
How a matrix lights many LEDs on few pins
Using the Arduino_LED_Matrix library
Animating by swapping two pictures

Difficulty: Beginner
Time: About 5 minutes
Board: Arduino Uno R4 WiFi
Parts: 1

How it works

The Uno R4 WiFi has a built-in matrix of 12 by 8 LEDs, and this sketch draws a beating heart on it. There is nothing to wire.

The picture is stored as eight rows of twelve numbers, where a 1 is a lit LED. There are two pictures: a big heart in BIG and a smaller one in SMALL.

The loop shows BIG for 400 ms, then SMALL for 600 ms, which looks like a beat. The LED on pin 13 is on during the big heart and off during the small one.

Parts list

1 part, plus the jumper wires. They retail for about $28; on Mokxi they're free.

1 × Arduino Uno R4 WiFi

The code

The firmware exactly as the editor opens it. Change a line there and press Run: it compiles in the browser.

sketch.ino · Arduino Uno R4 WiFi

// Matrix: a heart on the Uno R4 WiFi's 12 x 8 LED matrix, beating.
//
// The picture is eight rows of twelve, written the way it looks: a 1 is a lit
// LED. renderBitmap() hands it to the library, and the library does the hard
// part in the background: the matrix is ninety-six LEDs on only eleven pins,
// so it lights one pin's worth at a time, a millisecond each, faster than an
// eye can follow. Nothing on the board remembers the picture; the sketch just
// changes it.
//
// The LED on pin 13 blinks with the beat, so the two lamps show the same
// thing: one on its own pin, one ninety-sixth of a charlieplexed panel.

#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

const uint8_t BIG[8][12] = {
  {0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0},
  {0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
  {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
  {0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0},
  {0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0},
  {0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0},
  {0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0},
};

const uint8_t SMALL[8][12] = {
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0},
  {0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0},
  {0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0},
  {0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0},
  {0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
};

void setup() {
  Serial.begin(115200);
  pinMode(LED_BUILTIN, OUTPUT);
  matrix.begin();
  Serial.println("a heart on the LED matrix");
}

void loop() {
  matrix.renderBitmap(BIG, 8, 12);
  digitalWrite(LED_BUILTIN, HIGH);
  delay(400);
  matrix.renderBitmap(SMALL, 8, 12);
  digitalWrite(LED_BUILTIN, LOW);
  delay(600);
}

Code walkthrough

The key functions of the sketch, and what each one does.

`setup` sketch.ino

It starts the serial port at 115200 and sets the built-in LED as an output. Then matrix.begin starts the LED matrix and a line is printed. The library keeps the matrix lit in the background.

void setup() {
  Serial.begin(115200);
  pinMode(LED_BUILTIN, OUTPUT);
  matrix.begin();
  Serial.println("a heart on the LED matrix");
}

`loop` sketch.ino

It draws BIG with renderBitmap, turns the built-in LED on and waits 400 ms. Then it draws SMALL, turns the LED off and waits 600 ms. That makes one beat.

void loop() {
  matrix.renderBitmap(BIG, 8, 12);
  digitalWrite(LED_BUILTIN, HIGH);
  delay(400);
  matrix.renderBitmap(SMALL, 8, 12);
  digitalWrite(LED_BUILTIN, LOW);
  delay(600);
}

Troubleshooting

The usual mistakes with this circuit, and the fix for each.

The picture looks squashed or wrong. This project
Each picture must be 8 rows of 12 numbers, and renderBitmap must be called with 8 and 12.
You want a different shape. This project
Change the 1s and 0s in BIG and SMALL. A 1 lights that LED.
The LED matrix does nothing. Arduino Uno R4 WiFi
Include Arduino_LED_Matrix.h, call begin() and then load a frame or use renderBitmap. The matrix is 12 columns by 8 rows. Pick the Arduino UNO R4 Boards package.
WiFi does not connect. Arduino Uno R4 WiFi
Use the WiFiS3 library and check your SSID and password. It supports 2.4 GHz networks only. Wait for the status to become connected before sending data.

Change it and keep it

Open it in the editor, change the circuit or the code, and keep your version in a free account.

Start building free

Open it in the editor