You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md
+18-11Lines changed: 18 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,6 @@ software:
14
14
---
15
15
16
16
The **Arduino UNO R4 WiFi** comes with a built in 12x8 LED Matrix, that is available to be programmed to display graphics, animations, act as an interface, or even play games on.
17
-
18
17
## Goals
19
18
20
19
The matrix and its API are developed to be programmed in a few different ways, each suited for different applications. This guide will walk you through the basic concepts for programming the LED matrix, and get you started with creating your own animations, while highlighting two different ways of handling the LEDs to create animations and images. This makes it easier for you to decide what method fits your needs best!
@@ -68,7 +67,7 @@ A frame is what we call the "image" that is displayed at any given moment on the
68
67
69
68
How this frame is created can vary quite a lot, and you can choose whatever way is the easiest for your application, but most of the time you'll be creating an array that holds the frame in three 32-bit integers. A frame like this is difficult for a person to interpret, but it is efficient and therefore the way to go if you're making animations or graphics to display the states of a program or interfaces. You can create frames and animations such as this one by [this browser tool](#animation-generation) developed by Arduino. Such a frame may look similar to this:
70
69
71
-
```
70
+
```arduino
72
71
const uint32_t heart[] = {
73
72
0x3184a444,
74
73
0x44042081,
@@ -77,7 +76,7 @@ const uint32_t heart[] = {
77
76
```
78
77
79
78
Now if you've got several different frames, you can load and display them like this:
80
-
```
79
+
```arduino
81
80
const uint32_t happy[] = {
82
81
0x19819,
83
82
0x80000001,
@@ -90,16 +89,17 @@ const uint32_t heart[] = {
90
89
0x100a0040
91
90
};
92
91
93
-
matrix.loadFrame(happy);
92
+
matrix.loadFrame(happy);
94
93
delay(500);
94
+
95
95
matrix.loadFrame(heart);
96
96
delay(500);
97
97
```
98
98
99
99
100
100
You may also represent your frame with an array of individual bits, where each pixel is represented by a bit, and can be accessed by its row and column (this way being a good choice if you need to generate frames from within a sketch, for instance if you are making a game). This `frame` array contains a representation of each pixel in the matrix laid out in the same 12x8 grid.
101
101
102
-
```
102
+
```arduino
103
103
uint8_t frame[8][12] = {
104
104
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
105
105
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
@@ -113,8 +113,9 @@ uint8_t frame[8][12] = {
113
113
114
114
```
115
115
To target an individual pixel you select its address and change the value, remember that you'll need to start counting at 0. So, the following line will target the third pixel from the left and the second from the top, then turn it on:
116
-
```
116
+
```arduino
117
117
frame[2][1] = 1;
118
+
118
119
matrix.renderBitmap(frame, 8, 12);
119
120
```
120
121
@@ -124,9 +125,11 @@ Let's apply these concepts, with two basic sketches that display different frame
124
125
125
126
Here's a sketch that will first load a smiley face on your matrix, and then change it to a heart.
126
127
127
-
```
128
+
```arduino
128
129
#include "Arduino_LED_Matrix.h"
130
+
129
131
ArduinoLEDMatrix matrix;
132
+
130
133
void setup() {
131
134
Serial.begin(115200);
132
135
matrix.begin();
@@ -146,6 +149,7 @@ const uint32_t heart[] = {
146
149
void loop(){
147
150
matrix.loadFrame(happy);
148
151
delay(500);
152
+
149
153
matrix.loadFrame(heart);
150
154
delay(500);
151
155
}
@@ -155,9 +159,11 @@ The sketch is pretty simple, and yet the outcome is very expressive and can help
155
159
156
160
Now let's change approach and create a bitmap that we change in runtime. This sketch includes several functions that each draw part of a face, and then winks the left eye by turning off certain pixels.
0 commit comments