Add more examples

Transparent PNG
Smooth graphics

TFT_eSPI.cpp

@@ -4004,13 +4004,13 @@ void TFT_eSPI::drawArc(int32_t x, int32_t y, int32_t r, int32_t ir,
   int32_t xs = 0;       // x start position for quadrant scan
   uint8_t alpha = 0;    // alpha value for blending pixels
 
-  int32_t r2 = r * r;   // Outer arc radius^2
+  uint32_t r2 = r * r;   // Outer arc radius^2
   if (smooth) r++;      // Outer AA zone radius
-  int32_t r1 = r * r;   // Outer AA radius^2
+  uint32_t r1 = r * r;   // Outer AA radius^2
   int16_t w  = r - ir;  // Width of arc (r - ir + 1)
-  int32_t r3 = ir * ir; // Inner arc radius^2
+  uint32_t r3 = ir * ir; // Inner arc radius^2
   if (smooth) ir--;     // Inner AA zone radius
-  int32_t r4 = ir * ir; // Inner AA radius^2
+  uint32_t r4 = ir * ir; // Inner AA radius^2
 
   // Float variants of adjusted inner and outer arc radii
   //float irf = ir;

TFT_eSPI.h

@@ -86,7 +86,9 @@
 #elif defined(ARDUINO_ARCH_ESP8266) || defined(ESP32)
   #include <pgmspace.h>
 #else
+  #ifndef PROGMEM
     #define PROGMEM
+  #endif
 #endif
 
 // Include the processor specific drivers

examples/PNG Images/Flash_transparent_PNG/Flash_transparent_PNG.ino

@@ -0,0 +1,86 @@
+
+// This example renders a png file that is stored in a FLASH array
+// using the PNGdec library (available via library manager).
+
+// The example png is encoded as ARGB 8 bits per pixel with indexed colour
+// It was created using GIMP and has a transparent background area.
+
+// Image files can be converted to arrays using the tool here:
+// https://notisrac.github.io/FileToCArray/
+// To use this tool:
+//   1. Drag and drop PNG image file on "Browse..." button
+//   2. Tick box "Treat as binary"
+//   3. Click "Convert"
+//   4. Click "Save as file" and move the header file to sketch folder
+//      (alternatively use the "Copy to clipboard" and paste into a new tab)
+//   5. Open the sketch in IDE
+//   6. Include the header file containing the array (SpongeBob.h in this example)
+
+// Include the PNG decoder library, available via the IDE library manager
+#include <PNGdec.h>
+
+// Include image array
+#include "SpongeBob.h"
+
+PNG png; // PNG decoder instance
+
+#define MAX_IMAGE_WDITH 240 // Sets rendering line buffer lengths, adjust for your images
+
+// Include the TFT library - see https://github.com/Bodmer/TFT_eSPI for library information
+#include "SPI.h"
+#include <TFT_eSPI.h>              // Hardware-specific library
+TFT_eSPI tft = TFT_eSPI();         // Invoke custom library
+
+// Position variables must be global (PNGdec does not handle position coordinates)
+int16_t xpos = 0;
+int16_t ypos = 0;
+
+//====================================================================================
+//                                    Setup
+//====================================================================================
+void setup()
+{
+  Serial.begin(115200);
+  Serial.println("\n\n Using the PNGdec library");
+
+  // Initialise the TFT
+  tft.begin();
+  tft.fillScreen(TFT_BLACK);
+
+  Serial.println("\r\nInitialisation done.");
+}
+
+//====================================================================================
+//                                    Loop
+//====================================================================================
+void loop()
+{
+  uint16_t pngw = 0, pngh = 0; // To store width and height of image
+
+  int16_t rc = png.openFLASH((uint8_t *)bob, sizeof(bob), pngDraw);
+
+  if (rc == PNG_SUCCESS) {
+    Serial.println("Successfully png file");
+    pngw = png.getWidth();
+    pngh = png.getHeight();
+    Serial.printf("Image metrics: (%d x %d), %d bpp, pixel type: %d\n", pngw, pngh, png.getBpp(), png.getPixelType());
+
+    tft.startWrite();
+    uint32_t dt = millis();
+    rc = png.decode(NULL, 0);
+    tft.endWrite();
+    Serial.print(millis() - dt); Serial.println("ms");
+    tft.endWrite();
+
+    // png.close(); // Required for files, not needed for FLASH arrays
+  }
+
+  delay(250);
+
+  // Randomly change position
+  xpos = random(tft.width() - pngw);
+  ypos = random(tft.height() - pngh);
+
+  // Fill screen with a random colour at random intervals
+  if (random(100) < 20) tft.fillScreen(random(0x10000));
+}

examples/PNG Images/Flash_transparent_PNG/png_support.ino

@@ -0,0 +1,18 @@
+
+// PNGdec support functions
+
+//=========================================v==========================================
+//  pngDraw: Callback function to draw pixels to the display
+//====================================================================================
+// This function will be called during decoding of the png file to render each image
+// line to the TFT. PNGdec generates the image line and a 1bpp mask.
+void pngDraw(PNGDRAW *pDraw) {
+  uint16_t lineBuffer[MAX_IMAGE_WDITH];          // Line buffer for rendering
+  uint8_t  maskBuffer[1 + MAX_IMAGE_WDITH / 8];  // Mask buffer
+
+  png.getLineAsRGB565(pDraw, lineBuffer, PNG_RGB565_BIG_ENDIAN, 0xffffffff);
+
+  if (png.getAlphaMask(pDraw, maskBuffer, 255)) {
+    tft.pushMaskedImage(xpos, ypos + pDraw->y, pDraw->iWidth, 1, lineBuffer, maskBuffer);
+  }
+}

examples/Smooth Graphics/Draw_Smooth_Circles/Draw_Smooth_Circles.ino

@@ -0,0 +1,98 @@
+// Example for drawSmoothCircle function. Which draws anti-aliased circles
+// The circle periphery has a "thickness" of ~3 pixles to minimise the
+// "braiding" effect present in narrow anti-aliased lines.
+
+// For thicker or thinner circle outlines use the drawArc function.
+
+#include <TFT_eSPI.h>       // Include the graphics library
+TFT_eSPI tft = TFT_eSPI();  // Create object "tft"
+
+// -------------------------------------------------------------------------
+// Setup
+// -------------------------------------------------------------------------
+void setup(void) {
+  Serial.begin(115200);
+  tft.init();
+  tft.fillScreen(TFT_BLACK);
+}
+
+// -------------------------------------------------------------------------
+// Main loop
+// -------------------------------------------------------------------------
+void loop()
+{
+  static uint32_t radius = 2;
+  static uint32_t index = 0;
+
+  uint16_t fg_color = rainbow(index);
+  uint16_t bg_color = TFT_BLACK;       // This is the background colour used for smoothing (anti-aliasing)
+
+  uint16_t x = tft.width() / 2; // Position of centre of arc
+  uint16_t y = tft.height() / 2;
+
+  tft.drawSmoothCircle(x, y, radius, fg_color, bg_color);
+
+  radius += 11;
+  index += 5;
+  index = index%192;
+
+  if (radius > tft.height()/2) {
+    delay (1000);
+    radius = 2;
+  }
+}
+
+
+// -------------------------------------------------------------------------
+// Return a 16 bit rainbow colour
+// -------------------------------------------------------------------------
+unsigned int rainbow(byte value)
+{
+  // If 'value' is in the range 0-159 it is converted to a spectrum colour
+  // from 0 = red through to 127 = blue to 159 = violet
+  // Extending the range to 0-191 adds a further violet to red band
+ 
+  value = value%192;
+  
+  byte red   = 0; // Red is the top 5 bits of a 16 bit colour value
+  byte green = 0; // Green is the middle 6 bits, but only top 5 bits used here
+  byte blue  = 0; // Blue is the bottom 5 bits
+
+  byte sector = value >> 5;
+  byte amplit = value & 0x1F;
+
+  switch (sector)
+  {
+    case 0:
+      red   = 0x1F;
+      green = amplit; // Green ramps up
+      blue  = 0;
+      break;
+    case 1:
+      red   = 0x1F - amplit; // Red ramps down
+      green = 0x1F;
+      blue  = 0;
+      break;
+    case 2:
+      red   = 0;
+      green = 0x1F;
+      blue  = amplit; // Blue ramps up
+      break;
+    case 3:
+      red   = 0;
+      green = 0x1F - amplit; // Green ramps down
+      blue  = 0x1F;
+      break;
+    case 4:
+      red   = amplit; // Red ramps up
+      green = 0;
+      blue  = 0x1F;
+      break;
+    case 5:
+      red   = 0x1F;
+      green = 0;
+      blue  = 0x1F - amplit; // Blue ramps down
+      break;
+  }
+  return red << 11 | green << 6 | blue;
+}

examples/Smooth Graphics/Smooth_Rounted_Rectangles/Smooth_Rounted_Rectangles.ino

@@ -0,0 +1,50 @@
+// Draw random coloured smooth (anti-aliased) rounded rectangles on the TFT
+
+#include <TFT_eSPI.h>
+
+TFT_eSPI tft = TFT_eSPI();
+
+void setup(void) {
+  tft.init();
+  tft.fillScreen(TFT_BLACK); // Background is black
+}
+
+void loop() {
+  tft.fillScreen(TFT_BLACK);
+  tft.setCursor(0, 0);
+
+  // Draw some random smooth rounded rectangles
+  for (int i = 0; i < 20; i++)
+  {
+    int radius = random(60);
+    int w = random(2 * radius, 160);
+    int h = random(2 * radius, 160);
+    int t = random(1, radius / 3);
+    int x = random(tft.width() - w);
+    int y = random(tft.height() - h);
+
+    // Random colour is anti-aliased (blended) with background colour (black in this case)
+    tft.drawSmoothRoundRect(x, y, radius, radius - t, w, h, random(0x10000), TFT_BLACK);
+  }
+  tft.print("Variable thickness");
+  delay(2000);
+
+  tft.fillScreen(TFT_BLACK);
+  tft.setCursor(0, 0);
+
+  // Draw some random minimum thickness smooth rounded rectangles
+  for (int i = 0; i < 20; i++)
+  {
+    int radius = random(60);
+    int w = random(2 * radius, 160);
+    int h = random(2 * radius, 160);
+    int t = 0;
+    int x = random(tft.width() - w);
+    int y = random(tft.height() - h);
+
+    // Random colour is anti-aliased (blended) with background colour (black in this case)
+    tft.drawSmoothRoundRect(x, y, radius, radius - t, w, h, random(0x10000), TFT_BLACK);
+  }
+  tft.print("Minimum thickness");
+  delay(2000);
+}