Raise to version 2.0.0

The library has been cleaned up as it has got a bit untidy due to the large number of small incremental changes.

4bit Sprite examples renaed to be consistent with others.

alphaBlend example moved to generic folder (alphaBlend fn was moved to TFT_eSPI class).
Added sections + explanatory comments to functions prototypes.

Temporary comments added for potential gotchas for noobs when using DMA.

spi_begin/end functions renamed to reflect functionality. Old fns  retained for backwards compatibility with user setup.h files.
This commit is contained in:
Bodmer committed 2020-01-26 21:17:49 +00:00
1 parent b954372859
commit 0e0fd75277
29 files changed
+1267 -797

No files matched your search

@@ -1,9 +1,16 @@
/*
Sketch to show how a Sprite is created, how to draw pixels
Sketch to show how a 4 bit Sprite is created, how to draw pixels
and text within the Sprite and then push the Sprite onto
the display screen.
The advantage of 4 bit sprites is:
1. Small memory footprint
2. Any set of 16 colours can be specified
3. Colours can be changed without redrawing in Sprite
4. Simple animations like flashing text can be achieved
by colour palette cycling and pushing sprite to TFT:
https://en.wikipedia.org/wiki/Color_cycling
Example for library:
https://github.com/Bodmer/TFT_eSPI
@@ -14,14 +21,7 @@
any position. If there is sufficient RAM then the Sprite can
be the same size as the screen and used as a frame buffer.
A 16 bit Sprite occupies (2 * width * height) bytes in RAM.
On a ESP8266 Sprite sizes up to 126 x 160 can be accomodated,
this size requires 40kBytes of RAM for a 16 bit color depth.
When 8 bit color depth sprites are created they occupy
(width * height) bytes in RAM, so larger sprites can be
created, or the RAM required is halved.
A 4 bit Sprite occupies (width * height)/2 bytes in RAM.
*/
@@ -41,14 +41,15 @@ TFT_eSprite spr = TFT_eSprite(&tft); // Declare Sprite object "spr" with pointe
void setup()
{
Serial.begin(250000);
Serial.begin(115200);
Serial.println();
delay(500);
// Initialise the TFT registers
tft.init();
// Set the sprite colour depth to 4
spr.setColorDepth(4);
// Create a sprite of defined size
@@ -60,89 +61,72 @@ void setup()
void loop(void)
{
// Fill the whole sprite with color 5 (Sprite is in memory so not visible yet)
spr.fillSprite(10);
// Fill the whole sprite with color 0 (Sprite is in memory so not visible yet)
spr.fillSprite(0);
// create a color map with known colors
// create a color map with known colors (16 maximum for 4 bit Sprite
uint16_t cmap[16];
cmap[0] = TFT_BLACK;
cmap[1] = TFT_NAVY;
cmap[2] = TFT_DARKGREEN;
cmap[3] = TFT_DARKCYAN;
cmap[4] = TFT_MAROON;
cmap[5] = TFT_PURPLE;
cmap[6] = TFT_OLIVE;
cmap[7] = TFT_LIGHTGREY;
cmap[8] = TFT_DARKGREY;
cmap[9] = TFT_BLUE;
cmap[0] = TFT_BLACK; // We will keep this as black
cmap[1] = TFT_NAVY;
cmap[2] = TFT_DARKGREEN;
cmap[3] = TFT_DARKCYAN;
cmap[4] = TFT_MAROON;
cmap[5] = TFT_PURPLE;
cmap[6] = TFT_PINK;
cmap[7] = TFT_LIGHTGREY;
cmap[8] = TFT_YELLOW;
cmap[9] = TFT_BLUE;
cmap[10] = TFT_GREEN;
cmap[11] = TFT_CYAN;
cmap[12] = TFT_RED;
cmap[13] = TFT_MAGENTA;
cmap[14] = TFT_YELLOW;
cmap[15] = TFT_WHITE;
cmap[14] = TFT_WHITE; // Keep as white for text
cmap[15] = TFT_BLUE; // Keep as blue for sprite border
spr.createPalette(cmap, 16);
// Pass the palette to the Sprite class
spr.createPalette(cmap);
// Push Sprite parially off-screen to test cropping
spr.pushSprite(-40, -40);
spr.pushSprite(tft.width() / 2 - WIDTH / 2, tft.height() / 2 - HEIGHT / 2, 10);
spr.pushSprite(tft.width() - WIDTH + 40, tft.height() - HEIGHT + 40);
// Number of pixels to draw
uint16_t n = 100;
// Draw 100 random color pixels at random positions in sprite
while (n--)
{
uint16_t color = random(0x10); // Returns color 0 - 0x0F
int16_t x = random(WIDTH); // Random x coordinate
int16_t y = random(HEIGHT); // Random y coordinate
spr.drawPixel( x, y, color); // Draw pixel in sprite
uint16_t color = random(0x10); // Returns color 0 - 0x0F (i.e. 0-15)
int16_t x = random(WIDTH); // Random x coordinate
int16_t y = random(HEIGHT); // Random y coordinate
spr.drawPixel(x, y, color); // Draw pixel in sprite
}
spr.pushSprite(-40, -40);
spr.pushSprite(tft.width() / 2 - WIDTH / 2, tft.height() / 2 - HEIGHT / 2);
spr.pushSprite(tft.width() - WIDTH + 40, tft.height() - HEIGHT + 40);
delay(DELAY);
// Draw some lines
spr.drawLine(1, 0, WIDTH, HEIGHT-1, 6);
spr.drawLine(0, 0, WIDTH, HEIGHT, 6);
spr.drawLine(0, 1, WIDTH-1, HEIGHT, 2);
spr.drawLine(0, HEIGHT-1, WIDTH-1, 0, 2);
spr.drawLine(0, HEIGHT, WIDTH, 0, 3);
spr.drawLine(1, HEIGHT, WIDTH, 1, 3);
spr.drawLine(4, 0, 4, HEIGHT-1, 11);
spr.drawLine(0, 16, WIDTH-1, 16, 13);
// draw some circles with random colors.
spr.drawCircle(20, 60, 10, 6);
spr.drawCircle(80, 60, 15, 7);
spr.drawCircle(50, 108, 5, 9);
spr.drawCircle(45, 86, 3, 8);
spr.fillCircle(102, 56, 4, 11);
spr.fillRect(28, 32, 40, 4, 5);
//spr.fillRect(27, 42, 40, 14, 6);
//spr.fillRect(33, 55, 3, 4, 7);
//spr.fillRect(34, 32, 7, 4, 8);
spr.drawLine(1, 0, WIDTH, HEIGHT-1, 10);
spr.drawLine(0, 0, WIDTH, HEIGHT, 10);
spr.drawLine(0, 1, WIDTH-1, HEIGHT, 10);
spr.drawLine(0, HEIGHT-1, WIDTH-1, 0, 12);
spr.drawLine(0, HEIGHT, WIDTH, 0, 12);
spr.drawLine(1, HEIGHT, WIDTH, 1, 12);
// Draw some text with Middle Centre datum
spr.setTextDatum(MC_DATUM);
spr.drawString("Sprite", WIDTH / 2, HEIGHT / 2, 1);
spr.setTextColor(14); // White text
spr.drawString("Sprite", WIDTH / 2, HEIGHT / 2, 4);
// Now push the sprite to the TFT at position 0,0 on screen
// Now push the sprite to the TFT at 3 positions on screen
spr.pushSprite(-40, -40);
spr.pushSprite(tft.width() / 2 - WIDTH / 2, tft.height() / 2 - HEIGHT / 2);
spr.pushSprite(tft.width() - WIDTH + 40, tft.height() - HEIGHT + 40);
delay(DELAY * 4);
// create a new color map and use it instead
for (auto i = 0; i < 16; i++)
// create a new color map for colours 1-13 and use it instead
for (auto i = 1; i <= 13; i++)
{
cmap[i] = random(0x10000);
}
@@ -161,10 +145,9 @@ void loop(void)
// Draw a blue rectangle in sprite so when we move it 1 pixel it does not leave a trail
// on the blue screen background
cmap[14] = TFT_BLUE;
spr.createPalette(cmap, 16);
spr.createPalette(cmap);
spr.drawRect(0, 0, WIDTH, HEIGHT, 14);
spr.drawRect(0, 0, WIDTH, HEIGHT, 15); // Blue rectangle
int x = tft.width() / 2 - WIDTH / 2;
int y = tft.height() / 2 - HEIGHT / 2;
@@ -183,7 +166,15 @@ void loop(void)
if (y < -HEIGHT/2) dy = 1;
if (y >= tft.height()-HEIGHT/2) dy = -1;
// Draw it 50 time, moving in random direct or staying still
// Randomise the palette to change colours without redrawing
// the sprite
for (auto i = 1; i <= 13; i++)
{
cmap[i] = random(0x10000);
}
spr.createPalette(cmap); // Update sprite class palette
// Draw it 50 times, moving in random direct or staying still
n = 50;
int wait = random (50);
while (n)
@@ -205,4 +196,3 @@ void loop(void)
}
} // Infinite while, will not exit!
}
@@ -1,7 +1,7 @@
/*
Sketch to show scrolling of the graphics in sprites.
Sketch to show scrolling of the graphics in 4 bit sprites.
Scrolling in this way moves the pixels in a defined rectangle
within the Sprite. By defalt the whole sprite is scrolled.
within the Sprite. By default the whole sprite is scrolled.
The gap left by scrolling is filled with a defined colour.
Example for library:
@@ -14,10 +14,7 @@
any position. If there is sufficient RAM then the Sprite can
be the same size as the screen and used as a frame buffer.
A 16 bit Sprite occupies (2 * width * height) bytes in RAM.
An 8 bit Sprite occupies (width * height) bytes in RAM.
A 4 bit Sprite occupies (width * height)/2 bytes in RAM.
*/
#include <TFT_eSPI.h>
@@ -35,7 +32,8 @@ int delta = 1;
int grid = 0;
int tcount = 0;
uint16_t cmap[16];
// Palette colour table
uint16_t palette[16];
//==========================================================================================
void setup() {
@@ -43,47 +41,49 @@ void setup() {
tft.init();
tft.fillScreen(TFT_BLACK);
cmap[0] = TFT_BLACK;
cmap[1] = TFT_ORANGE;
cmap[2] = TFT_DARKGREEN;
cmap[3] = TFT_DARKCYAN;
cmap[4] = TFT_MAROON;
cmap[5] = TFT_PURPLE;
cmap[6] = TFT_OLIVE;
cmap[7] = TFT_DARKGREY;
cmap[8] = TFT_ORANGE;
cmap[9] = TFT_BLUE;
cmap[10] = TFT_GREEN;
cmap[11] = TFT_CYAN;
cmap[12] = TFT_RED;
cmap[13] = TFT_NAVY;
cmap[14] = TFT_YELLOW;
cmap[15] = TFT_WHITE;
// Populate the palette table, table must have 16 entires
palette[0] = TFT_BLACK;
palette[1] = TFT_ORANGE;
palette[2] = TFT_DARKGREEN;
palette[3] = TFT_DARKCYAN;
palette[4] = TFT_MAROON;
palette[5] = TFT_PURPLE;
palette[6] = TFT_OLIVE;
palette[7] = TFT_DARKGREY;
palette[8] = TFT_ORANGE;
palette[9] = TFT_BLUE;
palette[10] = TFT_GREEN;
palette[11] = TFT_CYAN;
palette[12] = TFT_RED;
palette[13] = TFT_NAVY;
palette[14] = TFT_YELLOW;
palette[15] = TFT_WHITE;
// Create a sprite for the graph
graph1.setColorDepth(4);
graph1.createSprite(128, 61);
graph1.createPalette(cmap, 16);
graph1.fillSprite(9); // Note: Sprite is filled with black when created
graph1.createPalette(palette);
graph1.fillSprite(9); // Note: Sprite is filled with palette[0] colour when created
// The scroll area is set to the full sprite size upon creation of the sprite
// but we can change that by defining a smaller area using "setScrollRect()"if needed
// parameters are x,y,w,h,color as in drawRect(), the color fills the gap left by scrolling
//graph1.setScrollRect(64, 0, 64, 61, TFT_DARKGREY); // Try this line to change the graph scroll area
// Create a sprite for the scrolling numbers
stext1.setColorDepth(4);
stext1.createSprite(32, 64);
stext1.createPalette(cmap, 16);
stext1.fillSprite(9); // Fill sprite with blue
stext1.setScrollRect(0, 0, 32, 64, 9); // here we set scroll gap fill color to blue
stext1.setTextColor(15); // White text, no background
stext1.createPalette(palette);
stext1.fillSprite(9); // Fill sprite with palette colour 9 (blue in this example)
stext1.setScrollRect(0, 0, 32, 64, 9); // here we set scroll gap fill color to blue
stext1.setTextColor(15); // Palette colour 15 (white) text, no background
stext1.setTextDatum(BR_DATUM); // Bottom right coordinate datum
// Create a sprite for Hello World
stext2.setColorDepth(4);
stext2.createSprite(80, 16);
stext2.createPalette(cmap, 16);
stext2.createPalette(palette);
stext2.fillSprite(7);
stext2.setScrollRect(0, 0, 40, 16, 7); // Scroll the "Hello" in the first 40 pixels
stext2.setTextColor(15); // White text, no background
@@ -97,7 +97,7 @@ void loop() {
// Draw number in stext1 sprite at 31,63 (bottom right datum set)
stext1.drawNumber(graphVal, 31, 63, 2); // plot value in font 2
// Push the sprites onto the TFT at specied coordinates
// Push the sprites onto the TFT at specified coordinates
graph1.pushSprite(0, 0);
stext1.pushSprite(0, 64);
stext2.pushSprite(40, 70);
@@ -132,7 +132,7 @@ void loop() {
tcount--;
if (tcount <=0)
{ // If we have scrolled 40 pixels the redraw text
{ // If we have scrolled 40 pixels then redraw text
tcount = 40;
stext2.drawString("Hello World", 6, 0, 2); // draw at 6,0 in sprite, font 2
}
@@ -0,0 +1,146 @@
/*
Sketch to show creation of a 4 bit sprite with a transparent
background, then plot it on the TFT. The palette setup and
palette update functions are also shown in this example.
Example for library:
https://github.com/Bodmer/TFT_eSPI
A Sprite is notionally an invisible graphics screen that is
kept in the processors RAM. Graphics can be drawn into the
Sprite just as it can be drawn directly to the screen. Once
the Sprite is completed it can be plotted onto the screen in
any position. If there is sufficient RAM then the Sprite can
be the same size as the screen and used as a frame buffer.
A 4 bit Sprite occupies (width * height)/2 bytes in RAM.
For example the "star" 70x80 Sprite uses 2800 bytes.
*/
// This is the default palette for 4 bit colour sprites
// which is built into the library. You can create your
// own palette (use a different array name!). The palette
// is captured and stored in RAM by the Sprite class so a
// copy does not need to be kept in the sketch.
// The default library palette is stored in FLASH and is called:
// default_4bit_palette
// To edit colours change the default_4bit_palette array name
// at line 32, then edit line 77 to match new name.
// To setup you own palette edit the next line to //*
/*
static const uint16_t default_4bit_palette[] PROGMEM = {
TFT_BLACK, // 0 ^
TFT_BROWN, // 1 |
TFT_RED, // 2 |
TFT_ORANGE, // 3 |
TFT_YELLOW, // 4 Colours 0-9 follow the resistor colour code!
TFT_GREEN, // 5 |
TFT_BLUE, // 6 |
TFT_PURPLE, // 7 |
TFT_DARKGREY, // 8 |
TFT_WHITE, // 9 v
TFT_CYAN, // 10 Blue+green mix
TFT_MAGENTA, // 11 Blue+red mix
TFT_MAROON, // 12 Darker red colour
TFT_DARKGREEN,// 13 Darker green colour
TFT_NAVY, // 14 Darker blue colour
TFT_PINK // 15
};
//*/
#include <TFT_eSPI.h> // Include the graphics library (this includes the sprite functions)
TFT_eSPI tft = TFT_eSPI(); // Create object "tft"
TFT_eSprite spr = TFT_eSprite(&tft); // Create Sprite object "spr" with pointer to "tft" object
// the pointer is used by pushSprite() to push it onto the TFT
void setup(void) {
Serial.begin(115200);
tft.init();
tft.setRotation(0);
}
void loop() {
tft.fillScreen(TFT_DARKGREY);
// Set color depth to 4 bits
spr.setColorDepth(4);
spr.createSprite(70, 80); // The Sprite MUST be created before setting the palette!
// Pass the default library palette to the Sprite class
// Edit palette array name if you use your own palette
spr.createPalette(default_4bit_palette); // <<<<<<<<<<<<<<<<<<<<<<<<< palette array name
// If <16 colours are defined then specify how many
// spr.createPalette(default_4bit_palette, 12);
// After rendering a Sprite you can change the palette to increase the range of colours
// plotted to the screen to the full 16 bit set.
// Change palette colour 11 to violet
spr.setPaletteColor(11, TFT_VIOLET);
uint16_t color15 = spr.getPaletteColor(15); // The 16 bit colour in a palette can be read back
// Draw 50 sprites containing a "transparent" colour
for (int i = 0; i < 50; i++)
{
int x = random(tft.width() - 70);
int y = random(tft.height() - 80);
int c = random(15); // Random colour 0-14 (4 bit index into color map). Leave 15 for transparent.
drawStar(x, y, c);
}
delay(2000);
// Change the palette to a 16 bit grey scale colour
for (uint8_t i = 0; i < 16; i++) {
// (i*16+i) produces a value in range 0-255 for the RGB colours
// Red Green Blue
spr.setPaletteColor(i, tft.color565(i*16+i, i*16+i, i*16+i));
}
// Now go bananas and draw 500 more
for (int i = 0; i < 500; i++)
{
int x = random(tft.width() - 70);
int y = random(tft.height() - 80);
int c = random(0x10); // Random colour
drawStar(x, y, c);
yield(); // Stop watchdog reset
}
// Delete it to free memory, the Sprite copy of the palette is also deleted
spr.deleteSprite();
delay(2000);
}
// #########################################################################
// Plot graphics to sprite using defined color and plot to screen
// #########################################################################
void drawStar(int x, int y, int star_color)
{
// star_color will be in the range 0-14 so that 15 is reserved for the
// transparent colour
// Fill Sprite with the chosen "transparent" colour
spr.fillSprite(15); // Fill with color 15
// Draw 2 triangles to create a filled in star
spr.fillTriangle(35, 0, 0, 59, 69, 59, star_color);
spr.fillTriangle(35, 79, 0, 20, 69, 20, star_color);
// Punch a star shaped hole in the middle with a smaller transparent star
spr.fillTriangle(35, 7, 6, 56, 63, 56, 15);
spr.fillTriangle(35, 73, 6, 24, 63, 24, 15);
// Push sprite to TFT screen at coordinate x,y (top left corner)
// Specify what colour from the palette is treated as transparent.
spr.pushSprite(x, y, 15);
}
@@ -1,168 +0,0 @@
/*
Sketch to show creation of a sprite with a transparent
background, then plot it on the TFT.
Example for library:
https://github.com/Bodmer/TFT_eSPI
A Sprite is notionally an invisible graphics screen that is
kept in the processors RAM. Graphics can be drawn into the
Sprite just as it can be drawn directly to the screen. Once
the Sprite is completed it can be plotted onto the screen in
any position. If there is sufficient RAM then the Sprite can
be the same size as the screen and used as a frame buffer.
A 16 bit Sprite occupies (2 * width * height) bytes in RAM.
On a ESP8266 Sprite sizes up to 126 x 160 can be accomodated,
this size requires 40kBytes of RAM for a 16 bit colour depth.
When 8 bit colour depth sprites are created they occupy
(width * height) bytes in RAM, so larger sprites can be
created, or the RAM required is halved.
*/
#include <TFT_eSPI.h> // Include the graphics library (this includes the sprite functions)
TFT_eSPI tft = TFT_eSPI(); // Create object "tft"
TFT_eSprite img = TFT_eSprite(&tft); // Create Sprite object "img" with pointer to "tft" object
// the pointer is used by pushSprite() to push it onto the TFT
TFT_eSprite img2 = TFT_eSprite(&tft);
void setup(void) {
Serial.begin(250000);
tft.init();
tft.setRotation(0);
}
void loop() {
tft.fillScreen(TFT_NAVY);
img.setColorDepth(4);
// Draw 10 sprites containing a "transparent" colour
for (int i = 0; i < 10; i++)
{
int x = random(240-70);
int y = random(320-80);
int c = random(0x0F); // Random colour (4 bit index into color map). Leave 15 for transparent.
drawStar(x, y, c); // note: not random; should be c
}
delay(2000);
uint32_t dt = millis();
// Now go bananas and draw 500 nore
for (int i = 0; i < 500; i++)
{
int x = random(240-70);
int y = random(320-80);
int c = random(0x10); // Random colour
drawStar(x, y, c);
yield(); // Stop watchdog reset
}
// Show time in milliseconds to draw and then push 1 sprite to TFT screen
numberBox( 10, 10, (millis()-dt)/500.0 );
delay(2000);
}
// #########################################################################
// Create sprite, plot graphics in it, plot to screen, then delete sprite
// #########################################################################
void drawStar(int x, int y, int star_color)
{
// Create an 8 bit sprite 70x 80 pixels (uses 5600 bytes of RAM)
img.setColorDepth(4);
img.createSprite(70, 80);
uint16_t cmap[16];
cmap[0] = TFT_BLACK;
cmap[1] = TFT_ORANGE;
cmap[2] = TFT_DARKGREEN;
cmap[3] = TFT_DARKCYAN;
cmap[4] = TFT_MAROON;
cmap[5] = TFT_PURPLE;
cmap[6] = TFT_OLIVE;
cmap[7] = TFT_LIGHTGREY;
cmap[8] = TFT_DARKGREY;
cmap[9] = TFT_BLUE;
cmap[10] = TFT_GREEN;
cmap[11] = TFT_CYAN;
cmap[12] = TFT_RED;
cmap[13] = TFT_MAGENTA;
cmap[14] = TFT_YELLOW;
cmap[15] = TFT_WHITE; // this one will be transparent.
img.createPalette(cmap, 16);
// Fill Sprite with a "transparent" colour
// TFT_TRANSPARENT is already defined for convenience
// We could also fill with any colour as "transparent" and later specify that
// same colour when we push the Sprite onto the screen.
img.fillSprite(15);
// Draw 2 triangles to create a filled in star
img.fillTriangle(35, 0, 0,59, 69,59, star_color);
img.fillTriangle(35,79, 0,20, 69,20, star_color);
// Punch a star shaped hole in the middle with a smaller transparent star
// this one damages on pixel in the second triangle
img.fillTriangle(35, 7, 6,56, 63,56, 15);
img.fillTriangle(35,73, 6,24, 63,24, 15);
// Push sprite to TFT screen at coordinate x,y (top left corner)
// Specify what colour from the map is to be treated as transparent.
img.pushSprite(x, y, 15);
// Delete it to free memory
img.deleteSprite();
}
// #########################################################################
// Draw a number in a rounded rectangle with some transparent pixels
// #########################################################################
void numberBox(int x, int y, float num )
{
// Size of sprite
#define IWIDTH 80
#define IHEIGHT 35
// Create a 8 bit sprite 80 pixels wide, 35 high (2800 bytes of RAM needed)
img.setColorDepth(8);
img.createSprite(IWIDTH, IHEIGHT);
// Fill it with black (this will be the transparent colour this time)
img.fillSprite(TFT_BLACK);
// Draw a background for the numbers
img.fillRoundRect( 0, 0, 80, 35, 15, TFT_RED);
img.drawRoundRect( 0, 0, 80, 35, 15, TFT_WHITE);
// Set the font parameters
img.setTextSize(1); // Font size scaling is x1
img.setTextColor(TFT_WHITE); // White text, no background colour
// Set text coordinate datum to middle right
img.setTextDatum(MR_DATUM);
// Draw the number to 3 decimal places at 70,20 in font 4
img.drawFloat(num, 3, 70, 20, 4);
// Push sprite to TFT screen CGRAM at coordinate x,y (top left corner)
// All black pixels will not be drawn hence will show as "transparent"
img.pushSprite(x, y, TFT_BLACK);
// Delete sprite to free up the RAM
img.deleteSprite();
}