Skip to content

Commit 70481ad

Browse files
committed
Address feedback from review
1 parent ade892a commit 70481ad

File tree

1 file changed

+113
-1
lines changed
  • content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix

1 file changed

+113
-1
lines changed

content/hardware/02.hero/boards/uno-r4-wifi/tutorials/led-matrix/led-matrix.md

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ The matrix and its' API is developed to be programmed in a few different ways, e
2222
## Hardware & Software Needed
2323
To follow along with this guide, you will of course need:
2424
- 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)
2526
- and the [Arduino IDE](https://www.arduino.cc/en/software).
2627

2728
## Initializing Matrix
@@ -41,6 +42,8 @@ void setup() {
4142
## How to Write a Frame
4243
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.
4344

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+
4447
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:
4548

4649
```
@@ -93,6 +96,113 @@ frame[2][1] = 1;
9396
matrix.renderBitmap(frame, 8, 12);
9497
```
9598

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+
96206
## FotogramMatrice
97207
The FotogramMatrice tool is used to generate frames and animations to be rendered on the LED matrix.
98208

@@ -104,12 +214,14 @@ With the live preview sketch loaded on your board, connect the port to the brows
104214
// waiting for the interface to be developed
105215

106216
## 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.
108218

109219
Have fun creating interactive interfaces or animation on your UNO R4 WiFi!
110220

111221
## API
112222

223+
To write more advanced sketches on your own, you may use the full API of the library as found below.
224+
113225
Members | Descriptions
114226
--------------------------------|---------------------------------------------
115227
`public ` [`ArduinoLEDMatrix`](#)`()` | The main class for controlling the LED matrix.

0 commit comments

Comments
 (0)