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
+76-31Lines changed: 76 additions & 31 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ description: "Get off the ground with the Arduino UNO R4 WiFi's built in LED mat
4
4
tags:
5
5
- Guide
6
6
- LED Matrix
7
-
author: 'Jacob Hylén'
7
+
author: 'Jacob Hylén & Tom Igoe'
8
8
hardware:
9
9
- hardware/02.hero/boards/uno-r4-wifi
10
10
software:
@@ -65,17 +65,85 @@ The LED Matrix library for the UNO R4 WiFi works on the principle of creating a
65
65
66
66
A frame is what we call the "image" that is displayed at any given moment on the matrix. If an animation is a series of images, a frame is one of those images in the series.
67
67
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:
68
+
In order to control the 12x8 LED matrix on the Uno R4 WiFi, you need a space in memory that's at least 96 bits in size. The library provides two ways to do this.
69
69
70
+
The first is simply to make a two-dimensional array of bytes like so:
70
71
```arduino
71
-
const uint32_t heart[] = {
72
-
0x3184a444,
73
-
0x44042081,
74
-
0x100a0040
72
+
byte pixels[8][12] = {
73
+
{ 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0 },
74
+
{ 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0 },
75
+
{ 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0 },
76
+
{ 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
77
+
{ 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0 },
78
+
{ 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 },
79
+
{ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 },
80
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
75
81
};
76
82
```
77
83
78
-
Now if you've got several different frames, you can load and display them like this:
84
+
This option is simple to understand, because you can see the image in the pattern of the array, and it is easy to edit in runtime. The ones in the array above form a heart, and that's the image you'd see on the screen.
85
+
86
+
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:
87
+
88
+
```arduino
89
+
frame[2][1] = 1;
90
+
91
+
matrix.renderBitmap(frame, 8, 12);
92
+
```
93
+
94
+
This method takes more memory than is needed, however. Even though each LED needs only a single bit to store its state, you're using eight bits (a byte). The more memory-efficient method to store a frame is to use an array of 32-bit integers.
95
+
96
+
In this section we'll walk through the process and the concept of how you may create one of these frames yourself. Though we have developed a tool that can do this for you, so you can [click here](#animation-generation) if you want to skip this exercise.
97
+
98
+
Here's the same heart in that form:
99
+
100
+
```arduino
101
+
unsigned long pixels[] = {
102
+
0x3184a444,
103
+
0x42081100,
104
+
0xa0040000
105
+
};
106
+
```
107
+
An unsigned long variable holds 32 bits, and 96/32 is 3, so an unsigned long array is an efficient way to hold all the bits you need for the LED matrix.
108
+
109
+
But how do those hexadecimal values relate to the positions of the pixels? To find out, convert the hexadecimal values to binary values. Here's a code snippet that will do this:
110
+
111
+
```arduino
112
+
for (int b = 0; b < 3; b++) {
113
+
Serial.println(pixels[b], BIN);
114
+
}
115
+
```
116
+
117
+
This will print out all the bit values of the array. The output will look like this:
118
+
119
+
```arduino
120
+
110001100001001010010001000100
121
+
1000010000010000001000100000000
122
+
10100000000001000000000000000000
123
+
```
124
+
125
+
This method doesn't show you all the bits, though. Each array element should have 32 bits. If you add zeros to show all 32 bits of each element, you get:
126
+
127
+
```arduino
128
+
00110001100001001010010001000100
129
+
01000010000010000001000100000000
130
+
10100000000001000000000000000000
131
+
```
132
+
Now divide it into groups of 12 bits and you've got the heart back:
133
+
```arduino
134
+
001100011000
135
+
010010100100
136
+
010001000100
137
+
001000001000
138
+
000100010000
139
+
000010100000
140
+
000001000000
141
+
000000000000
142
+
```
143
+
144
+
***Hint: You can see the heart easier if you highlight all "1"s on the page by pressing CTRL/command + F and search for "1".***
145
+
146
+
If you've got several different frames, you can load and display them like this:
79
147
```arduino
80
148
const uint32_t happy[] = {
81
149
0x19819,
@@ -96,32 +164,9 @@ const uint32_t heart[] = {
96
164
delay(500);
97
165
```
98
166
99
-
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
-
102
-
```arduino
103
-
uint8_t frame[8][12] = {
104
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
105
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
106
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
107
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
108
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
109
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
110
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
111
-
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
112
-
};
113
-
114
-
```
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
-
```arduino
117
-
frame[2][1] = 1;
118
-
119
-
matrix.renderBitmap(frame, 8, 12);
120
-
```
121
-
122
167
## Testing It Out
123
168
124
-
Let's apply these concepts, with two basic sketches that display different frames on your board. First, let's load 3x32-bit integer frames and load them one by one.
169
+
Let's apply these concepts, with two basic sketches that display different frames on your board. First, let's create 3x32-bit integer frames and load them one by one.
125
170
126
171
Here's a sketch that will first load a smiley face on your matrix, and then change it to a heart.
0 commit comments