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
+113-1Lines changed: 113 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -22,6 +22,7 @@ The matrix and its' API is developed to be programmed in a few different ways, e
22
22
## Hardware & Software Needed
23
23
To follow along with this guide, you will of course need:
24
24
- an [Arduino UNO R4 WiFi](https://store.arduino.cc/products/arduino-uno-r4-wifi),
25
+
- The latest version of the [UNO R4 Core](https://github.com/arduino/ArduinoCore-renesas)
25
26
- and the [Arduino IDE](https://www.arduino.cc/en/software).
26
27
27
28
## Initializing Matrix
@@ -41,6 +42,8 @@ void setup() {
41
42
## How to Write a Frame
42
43
The LED matrix library for the UNO R4 WiFi works on the principle of creating a frame, and then loading it into a buffer which displays the frame.
43
44
45
+
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.
46
+
44
47
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 3 32bit 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 states of a program or interfaces. You can create frames and animations such as this one by using tools such as [FotogramMatrice](#fotogrammatrice). Such a frame may look similar to this:
45
48
46
49
```
@@ -93,6 +96,113 @@ frame[2][1] = 1;
93
96
matrix.renderBitmap(frame, 8, 12);
94
97
```
95
98
99
+
## Testing it Out
100
+
101
+
Let's apply these concepts, with two basic sketches that display different frames on your board. First, let's load 3x32bit integer frames and load them one by one.
102
+
103
+
Here's a sketch that will first load a smiley face on your matrix, and then change it to a heart.
104
+
105
+
```
106
+
#include "Arduino_LED_Matrix.h"
107
+
ArduinoLEDMatrix matrix;
108
+
void setup() {
109
+
Serial.begin(115200);
110
+
matrix.begin();
111
+
}
112
+
113
+
const uint32_t happy[] = {
114
+
0x19819,
115
+
0x80000001,
116
+
0x81f8000
117
+
};
118
+
const uint32_t heart[] = {
119
+
0x3184a444,
120
+
0x44042081,
121
+
0x100a0040
122
+
};
123
+
124
+
void loop(){
125
+
matrix.loadFrame(happy);
126
+
delay(500);
127
+
matrix.loadFrame(heart);
128
+
delay(500);
129
+
}
130
+
```
131
+
132
+
The sketch is pretty simple, and yet the outcome is very expressive and can help you easily indicate states of your projects.
133
+
134
+
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.
135
+
136
+
```
137
+
#include "Arduino_LED_Matrix.h"
138
+
ArduinoLEDMatrix matrix;
139
+
void setup() {
140
+
Serial.begin(115200);
141
+
matrix.begin();
142
+
}
143
+
144
+
uint8_t frame[8][12] = {
145
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
146
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
147
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
148
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
149
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
150
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
151
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
152
+
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
153
+
};
154
+
155
+
void leftEye(){
156
+
//Left eye
157
+
frame[1][3] = 1;
158
+
frame[1][4] = 1;
159
+
frame[2][3] = 1;
160
+
frame[2][4] = 1;
161
+
}
162
+
163
+
void wink(){
164
+
//Wink with the left eye
165
+
frame[1][3] = 0;
166
+
frame[1][4] = 0;
167
+
frame[2][3] = 1;
168
+
frame[2][4] = 1;
169
+
}
170
+
171
+
void rightEye(){
172
+
//Right eye
173
+
frame[1][8] = 1;
174
+
frame[1][9] = 1;
175
+
frame[2][8] = 1;
176
+
frame[2][9] = 1;
177
+
}
178
+
179
+
void mouth(){
180
+
//Mouth
181
+
frame[5][3] = 1;
182
+
frame[5][9] = 1;
183
+
frame[6][3] = 1;
184
+
frame[6][4] = 1;
185
+
frame[6][5] = 1;
186
+
frame[6][6] = 1;
187
+
frame[6][7] = 1;
188
+
frame[6][8] = 1;
189
+
frame[6][9] = 1;
190
+
}
191
+
192
+
void loop(){
193
+
leftEye();
194
+
rightEye();
195
+
mouth();
196
+
197
+
matrix.renderBitmap(frame, 8, 12);
198
+
199
+
delay(1000);
200
+
wink();
201
+
matrix.renderBitmap(frame, 8, 12);
202
+
delay(1000);
203
+
}
204
+
```
205
+
96
206
## FotogramMatrice
97
207
The FotogramMatrice tool is used to generate frames and animations to be rendered on the LED matrix.
98
208
@@ -104,12 +214,14 @@ With the live preview sketch loaded on your board, connect the port to the brows
104
214
// waiting for the interface to be developed
105
215
106
216
## Conclusion
107
-
In this article we've gone over the basics of using the LED matrix built in on the Arduino UNO R4 WiFi, we've gone over the differnet practices for building frames and animations, as well as how to load them onto your board.
217
+
In this article we've gone over the basics of using the LED matrix built in on the Arduino UNO R4 WiFi, we've gone over the different practices for building frames and animations, as well as how to load them onto your board.
108
218
109
219
Have fun creating interactive interfaces or animation on your UNO R4 WiFi!
110
220
111
221
## API
112
222
223
+
To write more advanced sketches on your own, you may use the full API of the library as found below.
0 commit comments