Arduino Uno R4 LED Matrix displays Number Character

The Arduino Uno R4 WiFi comes with a 12x8 LED Matrix. In this tutorial, we will explore how to use the built-in LED matrix to display numbers and characters. Specifically, we will cover the following:

Arduino Uno R4 built-in LED matrix

Hardware Required

1×Arduino UNO R4 WiFi
1×USB Cable Type-C
1×(Recommended) Screw Terminal Block Shield for Arduino UNO R4
1×(Recommended) Breadboard Shield For Arduino UNO R4
1×(Recommended) Enclosure For Arduino UNO R4

Or you can buy the following sensor kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Please note: These are Amazon affiliate links. If you buy the components through these links, We will get a commission at no extra cost to you. We appreciate it.

Demonstration

Arduino Code - Displays digits (0-9) or characters (A-Z)

The code below sequentially displays digits from 0 to 9 and characters from A to Z, one by one, in the center of the LED matrix.

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-uno-r4-led-matrix-displays-number-character */ #include "Arduino_LED_Matrix.h" #include "fonts.h" ArduinoLEDMatrix matrix; uint8_t frame[8][12] = { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 } }; void setup() { // put your setup code here, to run once: Serial.begin(115200); delay(1500); matrix.begin(); } void loop() { for (char c = '0'; c <= '9'; c++) { clear_frame(); add_to_frame(c, 4); display_frame(); delay(1000); } for (char c = 'A'; c <= 'Z'; c++) { clear_frame(); add_to_frame(c, 4); display_frame(); delay(1000); } } void clear_frame() { for (int row = 0; row < 8; row++) { for (int col = 0; col < 12; col++) { frame[row][col] = 0; } } } void display_frame() { matrix.renderBitmap(frame, 8, 12); } void add_to_frame(char c, int pos) { int index = -1; if (c >= '0' && c <= '9') index = c - '0'; else if (c >= 'A' && c <= 'Z') index = c - 'A' + 10; else { Serial.println("WARNING: unsupported character"); return; } for (int row = 0; row < 8; row++) { uint32_t temp = fonts[index][row] << (7 - pos); for (int col = 0; col < 12; col++) { frame[row][col] |= (temp >> (11 - col)) & 1; } } }

Quick Steps

Arduino IDE 2 adds file
  • Either click on the button just below the serial monitor icon and choose "New Tab", or use Ctrl+Shift+N.
  • Give file's name fonts.h and click OK button
Arduino IDE 2 adds file fonts.h
  • Copy the below code and paste it to that file.
/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-uno-r4-led-matrix-displays-number-character */ uint8_t fonts[36][8] = { { // 0 0b01110, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b01110, }, { // 1 0b00110, 0b01110, 0b10110, 0b00110, 0b00110, 0b00110, 0b00110, 0b11111, }, { // 2 0b11110, 0b00001, 0b00010, 0b00100, 0b01000, 0b10000, 0b10000, 0b11111, }, { // 3 0b11110, 0b00001, 0b00010, 0b00100, 0b00110, 0b00001, 0b00001, 0b11110, }, { // 4 0b00010, 0b00110, 0b01010, 0b10010, 0b11111, 0b00010, 0b00010, 0b00010, }, { // 5 0b11111, 0b10000, 0b10000, 0b11110, 0b00001, 0b00001, 0b10001, 0b01110, }, { // 6 0b01110, 0b10000, 0b10000, 0b11110, 0b10001, 0b10001, 0b10001, 0b01110, }, { // 7 0b11111, 0b00001, 0b00010, 0b00100, 0b01000, 0b01000, 0b10000, 0b10000, }, { // 8 0b01110, 0b10001, 0b10001, 0b01110, 0b10001, 0b10001, 0b10001, 0b01110, }, { // 9 0b01110, 0b10001, 0b10001, 0b10001, 0b11110, 0b00001, 0b00001, 0b11110, }, { // A 0b00100, 0b01010, 0b10001, 0b11111, 0b10001, 0b10001, 0b10001, 0b10001, }, { // B 0b11110, 0b10001, 0b10001, 0b11110, 0b10001, 0b10001, 0b10001, 0b11110, }, { // C 0b01110, 0b10001, 0b10000, 0b10000, 0b10000, 0b10000, 0b10001, 0b01110, }, { // D 0b11110, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b11110, }, { // E 0b11111, 0b10000, 0b10000, 0b11110, 0b10000, 0b10000, 0b10000, 0b11111, }, { // F 0b11111, 0b10000, 0b10000, 0b11110, 0b10000, 0b10000, 0b10000, 0b10000, }, { // G 0b01110, 0b10001, 0b10000, 0b10000, 0b10111, 0b10001, 0b10001, 0b01110, }, { // H 0b10001, 0b10001, 0b10001, 0b11111, 0b10001, 0b10001, 0b10001, 0b10001, }, { // I 0b11111, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, 0b11111, }, { // J 0b11111, 0b00010, 0b00010, 0b00010, 0b00010, 0b00010, 0b10010, 0b01100, }, { // K 0b10001, 0b10010, 0b10100, 0b11000, 0b10100, 0b10010, 0b10001, 0b10001, }, { // L 0b10000, 0b10000, 0b10000, 0b10000, 0b10000, 0b10000, 0b10000, 0b11111, }, { // M 0b10001, 0b11011, 0b10101, 0b10101, 0b10001, 0b10001, 0b10001, 0b10001, }, { // N 0b10001, 0b10001, 0b11001, 0b10101, 0b10011, 0b10001, 0b10001, 0b10001, }, { // O 0b01110, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b01110, }, { // P 0b11110, 0b10001, 0b10001, 0b11110, 0b10000, 0b10000, 0b10000, 0b10000, }, { // Q 0b01110, 0b10001, 0b10001, 0b10001, 0b10001, 0b10101, 0b10010, 0b01101, }, { // R 0b11110, 0b10001, 0b10001, 0b11110, 0b10010, 0b10001, 0b10001, 0b10001, }, { // S 0b01110, 0b10001, 0b10000, 0b01110, 0b00001, 0b00001, 0b10001, 0b01110, }, { // T 0b11111, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, }, { // U 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b10001, 0b01110, }, { // V 0b10001, 0b10001, 0b10001, 0b10001, 0b01010, 0b01010, 0b00100, 0b00100, }, { // W 0b10001, 0b10001, 0b10001, 0b10101, 0b10101, 0b11011, 0b11011, 0b10001, }, { // X 0b10001, 0b10001, 0b01010, 0b00100, 0b00100, 0b01010, 0b10001, 0b10001, }, { // Y 0b10001, 0b10001, 0b01010, 0b00100, 0b00100, 0b00100, 0b00100, 0b00100, }, { // Z 0b11111, 0b00001, 0b00010, 0b00100, 0b01000, 0b10000, 0b10000, 0b11111, } };
  • Click Upload button on Arduino IDE to upload code to Arduino
  • Check the state of the LED Matrix

Code Explanation

In the provided code, it is crucial to focus on the add_to_frame(char c, int pos) function. This function accepts two arguments:

  • char c: The character to be displayed. Valid values range from 0 to 9 and A to Z.
  • int pos: The column position where the character should be displayed. Valid values range from 0 to 11.

Arduino Code - Displays two characters simultaneously

The following Arduino code simultaneously displays two characters on the LED matrix.

/* * Created by ArduinoGetStarted.com * * This example code is in the public domain * * Tutorial page: https://arduinogetstarted.com/tutorials/arduino-uno-r4-led-matrix-displays-number-character */ #include "Arduino_LED_Matrix.h" #include "fonts.h" ArduinoLEDMatrix matrix; uint8_t frame[8][12] = { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 } }; void setup() { // put your setup code here, to run once: Serial.begin(115200); delay(1500); matrix.begin(); } void loop() { clear_frame(); add_to_frame('A', 0); add_to_frame('5', 6); display_frame(); delay(1000); clear_frame(); add_to_frame('7', 0); add_to_frame('F', 6); display_frame(); delay(1000); } void clear_frame() { for (int row = 0; row < 8; row++) { for (int col = 0; col < 12; col++) { frame[row][col] = 0; } } } void display_frame() { matrix.renderBitmap(frame, 8, 12); } void add_to_frame(char c, int pos) { int index = -1; if (c >= '0' && c <= '9') index = c - '0'; else if (c >= 'A' && c <= 'Z') index = c - 'A' + 10; else { Serial.println("WARNING: unsupported character"); return; } for (int row = 0; row < 8; row++) { uint32_t temp = fonts[index][row] << (7 - pos); for (int col = 0; col < 12; col++) { frame[row][col] |= (temp >> (11 - col)) & 1; } } }

The Best Arduino Starter Kit

※ OUR MESSAGES