Data refreshing after screen refreshing issue with ESP 32 and 3.5TFT Display ILI9486

[AjitN111]

I am doing esp32 communication (Sender and receiver) in which one esp32 is sending dht11 data to the receiver. And the receiver esp32 has a LCD TFT ILI9486 which shows that received value.
But the problem is real time date should get updated in the LCD without the complete screen being refreshed but thats not happening.
The complete screen goes white(refreshes) for a moment and then the data is updated in real time.

Attaching the code for your reference.

_#include <esp_now.h>
#include <WiFi.h>
#include "ESPAsyncWebServer.h"
#include <Arduino_JSON.h>
#include <HTTPClient.h>
#include <SPI.h>
#include "MCUFRIEND_kbv.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();

_#define ESP32_PARALLEL
#define ILI9486_DRIVER
String temperature;
String humidity;
//#define temperature;
//#define humidity;
// Replace with your network credentials (STATION)
const char ssid = "vivo 1919";
const char password = "12345678";

//ACCESS POINT credentials
const char* ssidAP = "ESP_E63B4D";
const char* passwordAP = "";

// Structure example to receive data
// Must match the sender structure
typedef struct struct_message {
int id;
float temperature;
float humidity;
unsigned int readingId;
} struct_message;

struct_message incomingReadings;

#define TFT_CD D15
#define TFT_RESET D32
#define TFTWIDTH 480
#define TFTHIGHT 320

#define TFT_BLACK 0x0000 /* 0, 0, 0 /
#define TFT_NAVY 0x000F / 0, 0, 128 /
#define TFT_DARKGREEN 0x03E0 / 0, 128, 0 /
#define TFT_DARKCYAN 0x03EF / 0, 128, 128 /
#define TFT_MAROON 0x7800 / 128, 0, 0 /
#define TFT_PURPLE 0x780F / 128, 0, 128 /
#define TFT_OLIVE 0x7BE0 / 128, 128, 0 /
#define TFT_LIGHTGREY 0xD69A / 211, 211, 211 /
#define TFT_DARKGREY 0x7BEF / 128, 128, 128 /
#define TFT_BLUE 0x001F / 0, 0, 255 /
#define TFT_GREEN 0x07E0 / 0, 255, 0 /
#define TFT_CYAN 0x07FF / 0, 255, 255 /
#define TFT_RED 0xF800 / 255, 0, 0 /
#define TFT_MAGENTA 0xF81F / 255, 0, 255 /
#define TFT_YELLOW 0xFFE0 / 255, 255, 0 /
#define TFT_WHITE 0xFFFF / 255, 255, 255 /
#define TFT_ORANGE 0xFDA0 / 255, 180, 0 /
#define TFT_GREENYELLOW 0xB7E0 / 180, 255, 0 /
#define TFT_PINK 0xFE19 / 255, 192, 203 / //Lighter pink, was 0xFC9F
#define TFT_BROWN 0x9A60 / 150, 75, 0 /
#define TFT_GOLD 0xFEA0 / 255, 215, 0 /
#define TFT_SILVER 0xC618 / 192, 192, 192 /
#define TFT_SKYBLUE 0x867D / 135, 206, 235 /
#define TFT_VIOLET 0x915C / 180, 46, 226 */

JSONVar board;

unsigned long previousMillis = 0;
const long interval = 0;

AsyncWebServer server(80);
AsyncEventSource events("/events");

// callback function that will be executed when data is received
void OnDataRecv(const uint8_t * mac_addr, const uint8_t *incomingData, int len) {
// Copies the sender mac address to a string
char macStr[18];
Serial.print("Packet received from: ");
snprintf(macStr, sizeof(macStr), "%02x:%02x:%02x:%02x:%02x:%02x",
mac_addr[0], mac_addr[1], mac_addr[2], mac_addr[3], mac_addr[4], mac_addr[5]);
Serial.println(macStr);
memcpy(&incomingReadings, incomingData, sizeof(incomingReadings));

board["id"] = incomingReadings.id;
board["temperature"] = incomingReadings.temperature;
board["humidity"] = incomingReadings.humidity;
board["readingId"] = String(incomingReadings.readingId);
String jsonString = JSON.stringify(board);
events.send(jsonString.c_str(), "new_readings", millis());

Serial.printf("Board ID %u: %u bytes\n", incomingReadings.id, len);
Serial.printf("t value: %4.2f \n", incomingReadings.temperature);
Serial.printf("h value: %4.2f \n", incomingReadings.humidity);
Serial.printf("readingID value: %d \n", incomingReadings.readingId);
Serial.println();
}

const char index_html[] PROGMEM = R"rawliteral(

<title>ESP-NOW DASHBOARD</title> <style> html {font-family: Arial; display: inline-block; text-align: center;} p { font-size: 1.2rem;} body { margin: 0;} .topnav { overflow: hidden; background-color: #2f4468; color: white; font-size: 1.7rem; } .content { padding: 20px; } .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); } .cards { max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .reading { font-size: 2.8rem; } .packet { color: #bebebe; } .card.temperature { color: #fd7e14; } .card.humidity { color: #1b78e2; } </style>

ESP-NOW DASHBOARD

LECP #1 - TEMPERATURE

°C

Reading ID:

LECP #1 - HUMIDITY

%

Reading ID:

LECP #2 - TEMPERATURE

°C

Reading ID:

LECP #2 - HUMIDITY

%

Reading ID:

LECP #3 - TEMPERATURE

°C

Reading ID:

LECP #3 - HUMIDITY

%

Reading ID:

LECP #4 - TEMPERATURE

°C

Reading ID:

LECP #4 - HUMIDITY

%

Reading ID:

LECP #5 - TEMPERATURE

°C

Reading ID:

LECP #5 - HUMIDITY

%

Reading ID:

<script> if (!!window.EventSource) { var source = new EventSource('/events');

source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);

source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);

source.addEventListener('new_readings', function(e) {
console.log("new_readings", e.data);
var obj = JSON.parse(e.data);
document.getElementById("t"+obj.id).innerHTML = obj.temperature.toFixed(2);
document.getElementById("h"+obj.id).innerHTML = obj.humidity.toFixed(2);
document.getElementById("rt"+obj.id).innerHTML = obj.readingId;
document.getElementById("rh"+obj.id).innerHTML = obj.readingId;
}, false);
}
</script>

)rawliteral";

void setup() {
// Initialize Serial Monitor
Serial.begin(115200);

// Set the device as a Station and Soft Access Point simultaneously
WiFi.mode(WIFI_AP_STA);

// Set device as a Wi-Fi Station
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.print("Wi-Fi Channel: ");
Serial.println(WiFi.channel());

// Init ESP-NOW
if (esp_now_init() != ESP_OK) {
Serial.println("Error initializing ESP-NOW");
return;
}

// Once ESPNow is successfully Init, we will register for recv CB to
// get recv packer info
esp_now_register_recv_cb(OnDataRecv);

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});

events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 0);
});
server.addHandler(&events);
server.begin();
}

void loop() {
static unsigned long lastEventTime = millis();
static const unsigned long EVENT_INTERVAL_MS = 100;
if ((millis() - lastEventTime) > EVENT_INTERVAL_MS) {
if(WiFi.status()== WL_CONNECTED ){
events.send("ping",NULL,millis());
lastEventTime = millis();
}

//display.clearDisplay();

tft.begin(0x9486); // Initialise LCD
tft.setRotation(2);
tft.fillScreen(ILI9486_BLACK); // Black Background
tft.fillRect(0,0,40,480,TFT_CYAN); // Upper GREEN Rectange
tft.setRotation(1);
tft.fillRect(0,40,160,140,TFT_MAGENTA); // Upper GREEN Rectange
tft.fillRect(160,40,160,140,TFT_MAGENTA); // Lower RED Rectange
tft.fillRect(320,40,160,140,TFT_MAGENTA); // Upper BLUE Rectange

tft.drawRect(0,40,160,140,TFT_YELLOW); // White borders to the rectangles
tft.drawRect(160,40,160,140,TFT_YELLOW); // White borders to the rectangles
tft.drawRect(320,40,160,140,TFT_YELLOW); // White borders to the rectangles

tft.fillRect(0,180,160,140,TFT_MAGENTA); // Upper GREEN Rectange
tft.fillRect(160,180,160,140,TFT_MAGENTA); // Lower RED Rectange
tft.fillRect(320,180,160,140,TFT_MAGENTA); // Upper BLUE Rectange

tft.drawRect(0,180,160,140,TFT_YELLOW); // White borders to the rectangles
tft.drawRect(160,180,160,140,TFT_YELLOW); // White borders to the rectangles
tft.drawRect(320,180,160,140,TFT_YELLOW); // White borders to the rectangles

tft.setTextColor(TFT_BLACK); // Set Text Proporties
tft.setTextSize(2);
tft.setCursor(30,10);
tft.println("LOCAL ENGINE CONTROL PANEL (LECP)"); // Write Text on LCD

tft.setTextColor(TFT_BLACK);
tft.setCursor(40,45);
tft.println("LECP 1"); // Write Text on LCD
// display temperature

Serial.println("Temperature: " + temperature + " *C - Humidity: " + humidity );
tft.setTextSize(2);
tft.setTextColor(TFT_BLACK);
tft.setCursor(30,70);
tft.print("T: ");

  tft.print(incomingReadings.temperature);
  tft.print(" ");
  tft.setTextSize(1);
  //tft.cp437(true);
  tft.write(248);
  tft.setTextSize(2);
  tft.print("C");
  
  // display humidity
  tft.setTextSize(2);
  tft.setCursor(30,90);
  tft.print("H: ");
  tft.print(incomingReadings.humidity);
  tft.print(" %");  

Serial.println("Temperature: " + temperature + " *C - Humidity: " + humidity );
tft.setCursor(200, 45);
tft.println("LECP 2"); // Write Text on LCD
// display temperature
tft.setTextSize(2);
tft.setTextColor(TFT_BLACK);
tft.setCursor(200,70);
tft.print("T: ");
tft.print(temperature);
tft.print(" ");
tft.setTextSize(1);
// tft._cp437(true);
tft.write(248);
tft.setTextSize(2);
tft.print("C");

  // display humidity
  tft.setTextSize(2);
  tft.setCursor(200, 90);
  tft.print("H: ");
  tft.print(humidity);
  tft.print(" %"); 


  Serial.println("Temperature: " + temperature + " *C - Humidity: " + humidity );

tft.setCursor(360,45);
tft.println("LECP 3"); // Write Text on LCD
// display temperature
tft.setTextSize(2);
tft.setTextColor(TFT_BLACK);
tft.setCursor(360,70);
tft.print("T: ");
tft.print(temperature);
tft.print(" ");
tft.setTextSize(1);
// tft._cp437(true);
tft.write(248);
tft.setTextSize(2);
tft.print("C");

  // display humidity
  tft.setTextSize(2);
  tft.setCursor(360, 90);
  tft.print("H: ");
  tft.print(humidity);
  tft.print(" %");  


  Serial.println("Temperature: " + temperature + " *C - Humidity: " + humidity );

tft.setCursor(40,185);
tft.println("LECP 4"); // Write Text on LCD
// display temperature
tft.setTextSize(2);
tft.setTextColor(TFT_BLACK);
tft.setCursor(40,215);
tft.print("T: ");
tft.print(temperature);
tft.print(" ");
tft.setTextSize(1);
// tft._cp437(true);
tft.write(248);
tft.setTextSize(2);
tft.print("C");

  // display humidity
  tft.setTextSize(2);
  tft.setCursor(40, 235);
  tft.print("H: ");
  tft.print(humidity);
  tft.print(" %"); 


  Serial.println("Temperature: " + temperature + " *C - Humidity: " + humidity );

tft.setCursor(200,185);
tft.println("LECP 5"); // Write Text on LCD
// display temperature
tft.setTextSize(2);
tft.setTextColor(TFT_BLACK);
tft.setCursor(200,215);
tft.print("T: ");
tft.print(temperature);
tft.print(" ");
tft.setTextSize(1);
// tft._cp437(true);
tft.write(248);
tft.setTextSize(2);
tft.print("C");

  // display humidity
  tft.setTextSize(2);
  tft.setCursor(200, 235);
  tft.print("H: ");
  tft.print(humidity);
  tft.print(" %"); 

delay(10000);

  // save the last HTTP GET Request
  //previousMillis = currentMillis;

// else {
// Serial.println("WiFi Disconnected");
}
} __**

[Bodmer]

tft.begin() initialises the display so should be in setup() not loop().