Linear Meter Tick shadow not transparent with a SPIFFS BMP

[TangerineDreamer]

Hi bodmer, i make some experimentation with SPIFFS BMP and the Linear meter sketch,
i swept away all the things i didn't need ,hope i did it right :),so i kept the essential of the needle tick,but
the problem is that there is always a remanent trace of the moving tick and the transparent colour don't
do anything,here is the custom sketch i did and the photo of the result:

#define FS_NO_GLOBALS
#include <FS.h>
//#define ESP32 //choose esp32 or esp8266
#ifdef ESP32
#include "SPIFFS.h" // For ESP32 only
#endif
// Define meter size as 1 for tft.rotation(0) or 1.5555 for tft.rotation(1)
#define M_SIZE 2

#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI(); // Invoke custom library

#define TFT_GREY 0x5AEB

float ltx = 0; // Saved x coord of bottom of needle
uint16_t osx = M_SIZE120, osy = M_SIZE170; // Saved x & y coords
uint32_t updateTime = 0; // time for next update

int old_analog = -999; // Value last displayed

int value[6] = {0, 0, 0, 0, 0, 0};
int old_value[6] = { -1, -1, -1, -1, -1, -1};
int d = 0;

void setup() {
Serial.begin(115200); // For debug
if (!SPIFFS.begin()) {
Serial.println("SPIFFS initialisation failed!");
while (1) yield(); // Stay here twiddling thumbs waiting
}
Serial.println("\r\nSPIFFS initialised.");
tft.init();
tft.setRotation(3);

//tft.fillScreen(TFT_BLACK);

drawBmp("/vuMetre.bmp", 0, 0);

analogMeter(); // Draw analogue meter

updateTime = millis(); // Next update time
}

void loop() {
if (updateTime <= millis()) {
updateTime = millis() + 20; // Update meter needle every 20 milliseconds

// Create a Sine wave for testing
d += 4; if (d >= 360) d = 0;
//value[0] = 50 + 50 * sin((d + 0) * 0.0174532925);
value[0] = analogRead(A0); 

plotNeedle(value[0], 0); // It takes between 2 and 12ms to replot the needle with zero delay

}
}

// #########################################################################
// Draw the analogue meter on the screen
// #########################################################################
void analogMeter()
{

// Meter outline
/*
tft.fillRect(0, 0, M_SIZE239, M_SIZE176, TFT_GREY);
tft.fillRect(5, 3, M_SIZE230, M_SIZE170, TFT_WHITE);

tft.setTextColor(TFT_BLACK); // Text colour
*/

// Draw ticks every 5 degrees from -50 to +50 degrees (100 deg. FSD swing)
for (int i = -50; i < 51; i += 5) {
// Long scale tick length
int tl = 15;

// Coodinates of tick to draw
float sx = cos((i - 90) * 0.0174532925);
float sy = sin((i - 90) * 0.0174532925);
uint16_t x0 = sx * (M_SIZE*100 + tl) + M_SIZE*120;
uint16_t y0 = sy * (M_SIZE*100 + tl) + M_SIZE*140;
uint16_t x1 = sx * M_SIZE*100 + M_SIZE*120;
uint16_t y1 = sy * M_SIZE*100 + M_SIZE*140;

// Coordinates of next tick for zone fill
float sx2 = cos((i + 5 - 90) * 0.0174532925);
float sy2 = sin((i + 5 - 90) * 0.0174532925);
int x2 = sx2 * (M_SIZE*100 + tl) + M_SIZE*120;
int y2 = sy2 * (M_SIZE*100 + tl) + M_SIZE*140;
int x3 = sx2 * M_SIZE*100 + M_SIZE*120;
int y3 = sy2 * M_SIZE*100 + M_SIZE*140;

/*
// Yellow zone limits
//if (i >= -50 && i < 0) {
// tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_YELLOW);
// tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_YELLOW);
//}

// Green zone limits
if (i >= 0 && i < 25) {
  tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREEN);
  tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREEN);
}

// Orange zone limits
if (i >= 25 && i < 50) {
  tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_ORANGE);
  tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_ORANGE);
}

*/
// Short scale tick length
if (i % 25 != 0) tl = 8;

// Recalculate coords incase tick lenght changed
x0 = sx * (M_SIZE*100 + tl) + M_SIZE*120;
y0 = sy * (M_SIZE*100 + tl) + M_SIZE*140;
x1 = sx * M_SIZE*100 + M_SIZE*120;
y1 = sy * M_SIZE*100 + M_SIZE*140;

// Draw tick

// tft.drawLine(x0, y0, x1, y1, TFT_RED);//arc de cercle decoupé en graduations graduation
/*
// Check if labels should be drawn, with position tweaks / graduation de 25 en 25
if (i % 25 == 0) {
// Calculate label positions
x0 = sx * (M_SIZE100 + tl + 10) + M_SIZE120;
y0 = sy * (M_SIZE100 + tl + 10) + M_SIZE140;
switch (i / 25) {
case -2: tft.drawCentreString("0", x0, y0 - 12, 2); break;
case -1: tft.drawCentreString("25", x0, y0 - 9, 2); break;
case 0: tft.drawCentreString("50", x0, y0 - 7, 2); break;
case 1: tft.drawCentreString("75", x0, y0 - 9, 2); break;
case 2: tft.drawCentreString("100", x0, y0 - 12, 2); break;
}
}
*/

/*
// Now draw the arc of the scale / arc de cercle de la graduation
sx = cos((i + 5 - 90) * 0.0174532925);
sy = sin((i + 5 - 90) * 0.0174532925);
x0 = sx * M_SIZE100 + M_SIZE120;
y0 = sy * M_SIZE100 + M_SIZE140;
// Draw scale arc, don't draw the last part
if (i < 50) tft.drawLine(x0, y0, x1, y1, TFT_BLACK);
*/
}

/*
tft.drawString("%RH", M_SIZE*(5 + 230 - 40), M_SIZE*(119 - 20), 2); // Units at bottom right
tft.drawCentreString("%RH", M_SIZE120, M_SIZE70, 4); // Comment out to avoid font 4
tft.drawRect(5, 3, M_SIZE230, M_SIZE119, TFT_BLACK); // Draw bezel line
*/
plotNeedle(0, 0); // Put meter needle at 0
}

// #########################################################################
// Update needle position
// This function is blocking while needle moves, time depends on ms_delay
// 10ms minimises needle flicker if text is drawn within needle sweep area
// Smaller values OK if text not in sweep area, zero for instant movement but
// does not look realistic... (note: 100 increments for full scale deflection)
// #########################################################################
void plotNeedle(int value, byte ms_delay)
{

// rectangle de visualisation de la valeur d'entrée
tft.setTextColor(TFT_YELLOW, TFT_BLUE);
char buf[8]; dtostrf(value, 5, 0, buf);
tft.drawRightString(buf, M_SIZE52, M_SIZE(143 - 20), 6);

if (value < -10) value = -10; // Limit value to emulate needle end stops
if (value > 110) value = 110;

// Move the needle until new value reached
while (!(value == old_analog)) {
if (old_analog < value) old_analog++;
else old_analog--;

if (ms_delay == 0) old_analog = value; // Update immediately if delay is 0

float sdeg = map(old_analog, -10, 110, -150, -30); // Map value to angle
// Calcualte tip of needle coords
float sx = cos(sdeg * 0.0174532925);
float sy = sin(sdeg * 0.0174532925);

// Calculate x delta of needle start (does not start at pivot point)
float tx = tan((sdeg + 90) * 0.0174532925);


// Erase old needle image // traces remanentes de l'aiguille
tft.drawLine(M_SIZE*(120 + 20 * ltx - 1), M_SIZE*(140 - 20), osx - 1, osy, TFT_BLACK);
tft.drawLine(M_SIZE*(120 + 20 * ltx), M_SIZE*(140 - 20), osx, osy, TFT_BLACK);
tft.drawLine(M_SIZE*(120 + 20 * ltx + 1), M_SIZE*(140 - 20), osx + 1, osy, TFT_BLACK);

/*
// Re-plot text under needle
tft.setTextColor(TFT_BLACK);
tft.drawCentreString("%RH", M_SIZE120, M_SIZE70, 4); // // Comment out to avoid font 4
*/

// Store new needle end coords for next erase
ltx = tx;
osx = M_SIZE*(sx * 98 + 120);
osy = M_SIZE*(sy * 98 + 140);

// Draw the needle in the new postion, magenta makes needle a bit bolder
// draws 3 lines to thicken needle
tft.drawLine(M_SIZE*(120 + 20 * ltx - 1), M_SIZE*(140 - 20), osx - 1, osy, TFT_RED);
tft.drawLine(M_SIZE*(120 + 20 * ltx), M_SIZE*(140 - 20), osx, osy, TFT_MAGENTA);
tft.drawLine(M_SIZE*(120 + 20 * ltx + 1), M_SIZE*(140 - 20), osx + 1, osy, TFT_RED);

// Slow needle down slightly as it approaches new postion
if (abs(old_analog - value) < 10) ms_delay += ms_delay / 5;

// Wait before next update
delay(ms_delay);

}
}

Is there a way to make a sprite really transparent over a BMP when and where i want it?

[Bodmer]

Post the sketch as a zip file complete with the images.

The markdown scrambles pasted code unless you use the triple tick markdown for embedding code.

[TangerineDreamer]

Oups,very sorry for the convenience,all is in a folder with the BMP data,with only the working code and
some comments around the problem, i tried the transparent colour for the needle erasing trace but it's the same.
TEST_LINEAR_CLEAN.zip

[Bodmer]

The problem is that the image is over-written with the needle image, so to move the needle to a new position the background image pixels have to be restored.

As the image is large it will take too long to redraw the whole image and this will cause flicker.

The Animated_dial example grabs a copy from the screen before before plotting the needle, then pastes back the original needle free area, grabs a copy of the screen where the new needle position will be and repeats this process. The Animated_dial uses a short needle so the screen area is quire small and the process is reasonable fast.

Ideally a copy of the meter image (at least the entire needle update zone) needs to be kept in memory but there is unlikely to be enough RAM in this case.

If your screen can be read (i.e. the animated dial example works) then is is possible to grab a copy of just the meter image while the needle is drawn, then restore these pixels and repeat when the needle moves. This will need much less RAM. I have this approach working but it requires an update to the TFT_eSPI library or the TFT_eFEX library. Even then you may find that it is difficult to track the input signal at the speed you need for an audio signal peak unless it jumps to a new position rather than smoothly moves.

Check if your screen can be read and report back.

[TangerineDreamer]

Thanks to spend some time with my sketch :)
Is it a Read user setup test you want?

TFT_eSPI ver = 2.3.61
Processor = ESP8266
Frequency = 80MHz
Voltage = 3.29V
Transactions = No
Interface = SPI
SPI overlap = No

Display driver = 9488
Display width = 320
Display height = 480

TFT_CS = PIN_D8
TFT_DC = PIN_D3
TOUCH_CS = PIN_D4

Font GLCD loaded
Font 2 loaded
Font 4 loaded
Font 6 loaded
Font 7 loaded
Font 8 loaded
Smooth font enabled

Display SPI frequency = 20.00
Touch SPI frequency = 2.50

I use a Mini D1 R2, i had the same issue with a 7inch SSD1963 and ESP Wrover
Is it possible to load the bitmap in a sprite or a viewport and push it over the needle?
i know it's really a silly candid question :)

[Bodmer]

Run the Animated_Dial example, if needle movement wipes out the scale values then the screen cannot be read. I suspect it can be read but it is worth checking. That sketch grabs a copy of the screen area where the needle is drawn.

An ESP8266 will not have enough RAM to buffer the large meter graphic.

[TangerineDreamer]

Yes,all the values have been wiped out,but not the last 240,because the needle didn't go so far.
I tried with another jpg.image but the sketch use an array,not the SPIFFS.
I have the same issue with esp32.

[Bodmer]

It should be possible to read from the ILI9488 screen. List all connections between the ESP8266 and the TFT screen.

[TangerineDreamer]

For the TFT 3.5 or 4.0 i use ILI9488 or ST7796,the two work with this config:

#define TFT_CS PIN_D8 // Chip select control pin D8
#define TFT_DC PIN_D3 // Data Command control pin
#define TFT_RST -1 // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V

#define TOUCH_CS PIN_D4 // Chip select pin (T_CS) of touch screen

#define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2 // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4 // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6 // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7 // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8 // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

#define SMOOTH_FONT

#define SPI_FREQUENCY 20000000

#define SPI_READ_FREQUENCY 20000000

#define SPI_TOUCH_FREQUENCY 2500000

additional infos:

MINI D1 R2 (ESP266) & TFT 480X320( ILI7796 or ILI9488)

CS=D8 , DC=D3 , MOSI & T_DIN=D7
SCK& T_CLK=D5 , MISO=NOTHING!
T_CS=D4 , T_DO=D6 , LED=5V
RESET=3,3V