Loading an image from LittleFS into a Sprite

[RDJunc]

I have an application that displays a "wedge" gauge. (The shape is narrower at the left end and gets larger towards the right. ) The gauge graphic is in a 100x100 sprite. My intention is to display the value by creating two rectangles within the sprite. The first has the width of the value to be shown. The second starts where the first one ends and fills out the remaining area to the right. To create the wedge appearance, I want to then load an image into the sprite that has a transparent region with the wedge shape. Once that is loaded, I would push the sprite.

As a test, I create the two part rectangle, pushed the sprite, and then just drew the image file from LittleFS over it. It works but of course it flickers because the whole rectangle is drawn and then the mask is applied.

Your suggestions are most appreciated.

[Basitadam]

Hi,
Make the image from LittleFS as a sprite,
Make other rectangle parts as sprite as well,
Then use method "push sprite into a sprite",
Last, push the LittleFS sprite to the screen. Like this:

#include <TFT_eSPI.h>       // Library for drawing on the display
TFT_eSPI    tft     = TFT_eSPI();  // Invoke custom library
TFT_eSprite Needle  = TFT_eSprite(&tft); // Sprite object for needle
TFT_eSprite Bgnd    = TFT_eSprite(&tft); // Sprite object



  Bgnd.setSwapBytes(true);
  Bgnd.setColorDepth(16);
  Bgnd.createSprite(240,240);                                           // create the needle Sprite
  Bgnd.fillSprite(TFT_BLACK);                                           // in init tft background already filled in black
  Bgnd.pushImage(0, 0, 240, 240, backgorund_image);   // draw the fullscreen a backgorund image 

  Needle.setSwapBytes(true);
  Needle.setColorDepth(16);
  Needle.createSprite(135,68);                                              // create the needle Sprite
  Needle.fillSprite(TFT_BLACK);                                              // Color that will be NOT displayed from sprite
  Needle.pushImage(0,0,135,68,second_image);

while(reason)
{
      Bgnd.pushImage(0, 0, 240, 240, backgorund_image);  // draw the fullscreen background image 
      Needle.pushToSprite(&Bgnd,20,10);
      Bgnd.pushSprite(0,0);
}

in while loop:
First line will put bacground (into its sprite data,RAM)
Second line will put second_image over background sprite RAM (while ignoring the color set in Needle.fillSprite(TFT_BLACK); command)
Third line will show the image on the display. It will be only one step, so, no flickering

240,240 is the display resolution, 135,68 is the second image resolution as an example

[RDJunc]

Sorry for the delay in responding. I am away on a short vacation but this looks PERFECT! I figured it would be something like that. I will try it as soon as I get back later next week. I will let you know how it works but like I said, I expect that this is exactly what I needed. Thanks again!

[Basitadam]

Glad to hear. Have a nice holiday