Next up, load the testshapes_16x32 or testshapes_32x32 example sketch, which will test every drawing element available (again, you may need to edit the pin numbers for the 32x32 panel).
The most simple thing you may want to do is draw a single pixel, we saw this introduced above.
// draw a pixel in solid white matrix.drawPixel(0, 0, matrix.Color333(7, 7, 7));
Next we will fill the screen with green by drawing a really large rectangle. The first two arguments are the top left point, then the width in pixels, and the height in pixels, finally the color
// fix the screen with green matrix.fillRect(0, 0, 32, 16, matrix.Color333(0, 7, 0));
Next we will draw just the outline of a rectangle, in yellow
// draw a box in yellow matrix.drawRect(0, 0, 32, 16, matrix.Color333(7, 7, 0));
Next you may want to draw lines. The drawLine procedure will draw a line in any color you want, we used this to draw a big X
// draw an 'X' in red matrix.drawLine(0, 0, 31, 15, matrix.Color333(7, 0, 0)); matrix.drawLine(31, 0, 0, 15, matrix.Color333(7, 0, 0));
The next shapes we draw are circles. You can draw the outline of a circle with drawCircle or fill a circle with fillCircle. The first two arguments are the center point, the third argument is the radius in pixels, finally the color to use.
// draw a blue circle matrix.drawCircle(7, 7, 7, matrix.Color333(0, 0, 7)); // fill a violet circle matrix.fillCircle(23, 7, 7, matrix.Color333(7, 0, 7));
fillScreen allows you to fill the entire screen with a single color:
// fill the screen with 'black' matrix.fillScreen(matrix.Color333(0, 0, 0));
Finally, we draw the text that is shown up top as the demonstration image. We can use the print function, which you'll be familiar with from Serial. You can use print to print strings, numbers, variables, etc. However, we need to set up the printing before just going off and doing it! First, we must set the cursor location with setCursor which is where the top left pixel of the first character will go, this can be anywhere but note that text characters are 8 pixels high by default. Next setTextSize lets you set the size to 1 (8 pixel high) or 2 (16 pixel high for really big text!), you probably want just to stick with 1 for now. Lastly we can set the color of the text with setTextColor. Once this is all done, we can just useprint('1') to print the character "1".
// draw some text!
matrix.setCursor(1, 0); // start at top left, with one pixel of spacing
matrix.setTextSize(1); // size 1 == 8 pixels high
// print each letter with a rainbow color
matrix.setTextColor(matrix.Color333(7,0,0));
matrix.print('1');
matrix.setTextColor(matrix.Color333(7,4,0));
matrix.print('6');
matrix.setTextColor(matrix.Color333(7,7,0));
matrix.print('x');
matrix.setTextColor(matrix.Color333(4,7,0));
matrix.print('3');
matrix.setTextColor(matrix.Color333(0,7,0));
matrix.print('2');
matrix.setCursor(1, 9); // next line
matrix.setTextColor(matrix.Color333(0,7,7));
matrix.print('*');
matrix.setTextColor(matrix.Color333(0,4,7));
matrix.print('R');
matrix.setTextColor(matrix.Color333(0,0,7));
matrix.print('G');
matrix.setTextColor(matrix.Color333(4,0,7));
matrix.print("B");
matrix.setTextColor(matrix.Color333(7,0,4));
matrix.print("*");
Page last edited December 11, 2012
Text editor powered by tinymce.
