Wio Terminal Wifi has broken Sprites

Hi, when I include “AtWiFi.h” Sprites stop working, even without actually using anything from the AtWiFi library. The LCD still works and I can use the TFT_eSPI() funtions but TFT_eSprite() does not work.

How can I use both?

Thanks

Hi @JohnF

Can you provide your example code so that i can figure what’s wrong with it please.

Thanks
Anson

It works for me but it slows down considerably.

I took the One_bit_Yin_Yang sprite example from the LCD library and included AtWiFi.h and it runs but very poor performance. It will run ok for 5 seconds and then slow down and almost stop… it then will speed up a little but then slow down again.

I do get a LOT of compiler warnings pertaining to macro redefinitions and an error in the function mdns_free() which is void but is returning a value anyway. Something very wrong with that.

// This sketch draws a rotating Yin and Yang symbol. It illustrates
// the drawimg and rendering of simple animated graphics using
// a 1 bit per pixel (1 bpp) Sprite.

// Note:  TFT_BLACK sets the pixel value to 0
// Any other colour sets the pixel value to 1

// A square sprite of side = 2 x RADIUS will be created
// (80 * 80)/8 = 800 bytes needed for 1 bpp sprite
//              6400 bytes for 8 bpp
//             12800 bytes for 16 bpp
#define RADIUS 40      // Radius of completed symbol = 40

#define WAIT 0         // Loop delay

// 1bpp Sprites are economical on memory but slower to render
#define COLOR_DEPTH 1  // Colour depth (1, 8 or 16 bits per pixel)

// Rotation angle increment and start angle
#define ANGLE_INC 3
int angle = 0;


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

TFT_eSPI    tft = TFT_eSPI();         // Invoke library

TFT_eSprite img = TFT_eSprite(&tft);  // Sprite class

// -------------------------------------------------------------------------
void setup(void) {
    tft.begin();
    tft.setRotation(0);
    tft.fillScreen(TFT_BLUE);

    img.setColorDepth(COLOR_DEPTH);
    img.createSprite(RADIUS * 2 + 1, RADIUS * 2 + 1);
    img.fillSprite(TFT_BLACK);
}
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
void loop() {
    // Draw Yin and Yang symbol circles into Sprite
    yinyang(RADIUS, RADIUS, angle, RADIUS);

    // Set the 2 pixel palette colours that 1 and 0 represent on the display screen
    img.setBitmapColor(TFT_WHITE, TFT_BLACK);

    // Push Sprite image to the TFT screen at x, y
    img.pushSprite(tft.width() / 2 - RADIUS, 0); // Plot sprite

    angle += 3;                 //Increment angle to rotate circle positions
    if (angle > 359) {
        angle = 0;    // Limit angle range
    }

    // Slow things down
    delay(WAIT);
}
// -------------------------------------------------------------------------


// =========================================================================
// Draw circles for Yin and Yang - rotate positions to create symbol
// =========================================================================
// x,y == coordinate center within Sprite
// start_angle = 0 - 359
// r = radius

void yinyang(int x, int y, int start_angle, int r) {
    int x1 = 0; // getCoord() will update these
    int y1 = 0;

    getCoord(x, y, &x1, &y1, r / 2, start_angle); // Get x1 ,y1
    img.fillCircle(x1,  y1, r / 2, TFT_WHITE);
    img.fillCircle(x1,  y1, r / 8, TFT_BLACK);

    getCoord(x, y, &x1, &y1, r / 2, start_angle + 180);
    img.fillCircle(x1,  y1, r / 2, TFT_BLACK);
    img.fillCircle(x1,  y1, r / 8, TFT_WHITE);

    img.drawCircle(x, y, r, TFT_WHITE);
}

// =========================================================================
// Get coordinates of end of a vector, pivot at x,y, length r, angle a
// =========================================================================
// Coordinates are returned to caller via the xp and yp pointers
#define RAD2DEG 0.0174532925
void getCoord(int x, int y, int* xp, int* yp, int r, int a) {
    float sx1 = cos((a - 90) * RAD2DEG);
    float sy1 = sin((a - 90) * RAD2DEG);
    *xp =  sx1 * r + x;
    *yp =  sy1 * r + y;
}

Here is an example. Only commenting or uncommenting #include “AtWiFi.h” stops the Sprite working.

#include"TFT_eSPI.h"
#include"Free_Fonts.h" //include the header file

#include “AtWiFi.h”

TFT_eSPI tft = TFT_eSPI(); // Declare object “tft”
TFT_eSprite spr = TFT_eSprite(&tft); // Declare Sprite object “spr” with pointer to “tft” object

int humi;

void setup()
{
tft.init();
tft.fillScreen(TFT_BLUE);
tft.setRotation(3);
tft.setFreeFont(FSS12); //select Free, Sans
tft.drawString(“Startup tft”,0,5);//prints string
delay(1000);
spr.createSprite(320, 240);// Create a sprite of defined size
spr.setFreeFont(FSS24); //select Free, Sans
spr.drawString(“Startup Sprite”,0,50);//prints string
spr.pushSprite(0, 0);//52ms
delay(1000);
}

void loop()
{
humi++;
spr.drawString("humi: " + String(humi) + " ",0,5);//prints string
spr.pushSprite(0, 0);//52ms
delay(1000);
}

We have just figured this bug, and we are working on this. Please stay tuned

@ansonhe97, do we have any update on the Compatibility issues between AtWiFi and TFT_eSPI.

Thanks.

Hi @salman

This was fixed a while ago, check commits here: https://github.com/Seeed-Studio/Seeed_Arduino_atUnified/commit/bf63f457e286ed03f2f130c02455706f8190181b

Simply go to Network wiki and go through and get all the new updates.

1 Like

Hi @ansonhe97,

I update the Wio terminal board definitions, Wireless Core Firmware and added new libraries mentioned Wio terminal wiki page, and still facing the issue.

When I add the #include <AtWiFi.h> nothing comes in the display, and if i add spr.setColorDepth(1); , sprite is shows as black and white color.

Can you share your sketch and we test on our end?

@ansonhe97 Sure,

#include <TFT_eSPI.h>
#include <Multichannel_Gas_GMXXX.h>
#include <Wire.h>
#include <ArduinoJson.h>
#include "DHT.h"
#include <AtWiFi.h>

GAS_GMXXX<TwoWire> gas;

TFT_eSPI tft;
TFT_eSprite spr = TFT_eSprite(&tft);


#define DHTPIN 0
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);


//ArduinoJson value
String gasValue;


void setup() {
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(3);

  gas.begin(Wire, 0x08);

  dht.begin();

  spr.createSprite(tft.width(), tft.height());

}

void loop() {


  int no2, c2h5ch, voc, co;


  spr.fillSprite(TFT_BLACK);
  spr.setFreeFont(&FreeSansBoldOblique18pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawString("Gas Monitor", 60 - 15, 10 , 1);
  for (int8_t line_index = 0; line_index < 5 ; line_index++)
  {
    spr.drawLine(0, 50 + line_index, tft.width(), 50 + line_index, TFT_GREEN);
  }

  spr.drawRoundRect(5, 60, (tft.width() / 2) - 20 , tft.height() - 65 , 10, TFT_WHITE); // L1


  // VOC

  voc = gas.getGM502B();
  if (voc > 999) voc = 999;
  Serial.print("VOC: ");
  Serial.print(voc);
  Serial.println(" ppm");


  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_RED);
  spr.drawString("VOC", 7 , 65 , 1);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(voc, 15, 100, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("ppm", 55, 108, 1);


  //CO

  co = gas.getGM702B();
  if (co > 999) co = 999;
  Serial.print("CO: ");
  Serial.print(co);
  Serial.println(" ppm");

  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_RED);
  spr.drawString("CO", 7 , 150 , 1);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(co, 15, 185, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("ppm", 55, 193, 1);

  //Temp

  float t = dht.readTemperature();
  //int tem = round(t);
  int tem = t;
  Serial.print("Temperature: ");
  Serial.print(tem);
  Serial.println( "*C");

  spr.drawRoundRect((tft.width() / 2) - 10  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s1

  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  spr.setTextColor(TFT_RED) ;
  spr.drawString("Temp", (tft.width() / 2) - 1  , 70 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(t, (tft.width() / 2) - 1 , 100, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("o", (tft.width() / 2) + 20, 95, 1);
  spr.drawString("C", (tft.width() / 2) + 30, 100, 1);


  //NO2

  no2 = gas.getGM102B();
  if (no2 > 999) no2 = 999;
  Serial.print("NO2: ");
  Serial.print(no2);
  Serial.println(" ppm");

  spr.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s2

  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  spr.setTextColor(TFT_RED) ;
  spr.drawString("NO2", ((tft.width() / 2) + (tft.width() / 2) / 2)   , 70 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(no2, ((tft.width() / 2) + (tft.width() / 2) / 2)  , 100, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , 110, 1);



  //Humdity

  float h = dht.readHumidity();
  Serial.print("Humidity: ");
  Serial.print(h);
  Serial.println( "%");

  spr.drawRoundRect((tft.width() / 2) - 10 , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s3

  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  spr.setTextColor(TFT_RED) ;
  spr.drawString("Humi", (tft.width() / 2) - 1 , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(h, (tft.width() / 2) - 1 , (tft.height() / 2) + 70, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("%", (tft.width() / 2) + 21, (tft.height() / 2) + 70, 1);


  //C2H5CH

  c2h5ch = gas.getGM302B();
  if (c2h5ch > 999) c2h5ch = 999;
  Serial.print("C2H5CH: ");
  Serial.print(c2h5ch);
  Serial.println(" ppm");

  spr.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s4

  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  spr.setTextColor(TFT_RED) ;
  spr.drawString("Ethyl", ((tft.width() / 2) + (tft.width() / 2) / 2)   , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(c2h5ch, ((tft.width() / 2) + (tft.width() / 2) / 2) , (tft.height() / 2) + 70, 1);
  spr.setTextColor(TFT_GREEN);
  spr.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , (tft.height() / 2) + 80, 1);



  const size_t capacity = JSON_OBJECT_SIZE(7) + 145;
  DynamicJsonDocument doc(capacity);

  doc["id"] = "wio#2";
  doc["voc"] = voc;
  doc["co"] = co;
  doc["no2"] = no2;
  doc["eth"] = c2h5ch;
  doc["temp"] = tem;
  doc["hum"] = h;

  
  char buffer[256];
  serializeJson(doc, buffer);
  //client.publish("WTout", buffer);
  Serial.println(buffer);

  spr.pushSprite(0, 0);

  Serial.println("--------------------------------------------------------");

  delay(2000);

}

It will only display the sprite if I comment or remove the #include <AtWiFi.h>

Hi @salman,

I have tested the program and the main problem is not two conflicts library but because of the limited ram of WT. The sprite can be used with Wifi but it’s limited.

Wifi it self runs freertos underneath and it takes about 75kb of ram at least for it. If creating a sprite with 320x240 that would another 76kb. And you are using some others such as ArduinoJson which also takes some ram. Wio Terminal only has 192kb of RAM.

My suggestion is that to use simply lcd fuctions for text that dont change much and only small sprites for changing text. You may do spr.deleteSprite() right after your pushSprite to save room too.

You may also check on this, I just altered the sprite size to 10x10 to test:

image

1 Like

Hi @ansonhe97, Thanks for insights.

I made all the static components to normal text and dynamic content to sprite such as sensor value, but it shows the normal text components first then sprite components, not printing them together.

#include <TFT_eSPI.h>
#include <Multichannel_Gas_GMXXX.h>
#include <Wire.h>
#include <ArduinoJson.h>
#include "DHT.h"
#include <AtWiFi.h>

GAS_GMXXX<TwoWire> gas;

TFT_eSPI tft;
TFT_eSprite spr = TFT_eSprite(&tft);  //sprite



#define DHTPIN 0
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);


//ArduinoJson value
String gasValue;


void setup() {
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(3);

  gas.begin(Wire, 0x08);

  dht.begin();

  //spr.setColorDepth(2);

  spr.createSprite(tft.width(), tft.height());


}

void loop() {


  int no2, c2h5ch, voc, co;

 
//  spr.fillSprite(TFT_BLACK);
//  spr.setFreeFont(&FreeSansBoldOblique18pt7b);
//  spr.setTextColor(TFT_WHITE);
//  spr.drawString("Gas Monitor", 60 - 15, 10 , 1);

  tft.fillScreen(TFT_BLACK); //Black background
  tft.setTextColor(TFT_WHITE);
  tft.setFreeFont(&FreeSansBoldOblique12pt7b); //select Free, Sans, Bold, Oblique, 12p
  tft.drawString("Gas Monitor", 60 - 15, 10); //prints string at (70,80)

  //  for (int8_t line_index = 0; line_index < 5 ; line_index++)
  //  {
  //    spr.drawLine(0, 50 + line_index, tft.width(), 50 + line_index, TFT_GREEN);
  //  }
  //
  //  spr.drawRoundRect(5, 60, (tft.width() / 2) - 20 , tft.height() - 65 , 10, TFT_WHITE); // L1



  for (int8_t line_index = 0; line_index < 5 ; line_index++)
  {
    tft.drawLine(0, 50 + line_index, tft.width(), 50 + line_index, TFT_GREEN);
  }

  tft.drawRoundRect(5, 60, (tft.width() / 2) - 20 , tft.height() - 65 , 10, TFT_WHITE); // L1

  // VOC

  voc = gas.getGM502B();
  if (voc > 999) voc = 999;
  Serial.print("VOC: ");
  Serial.print(voc);
  Serial.println(" ppm");


  //  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  //  spr.setTextColor(TFT_RED);
  //  spr.drawString("VOC", 7 , 65 , 1);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(voc, 15, 100, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("ppm", 55, 108, 1);

  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  tft.setTextColor(TFT_RED);
  tft.drawString("VOC", 7 , 65 );
  //  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(voc, 15, 100, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", 55, 108, 1);


  //CO

  co = gas.getGM702B();
  if (co > 999) co = 999;
  Serial.print("CO: ");
  Serial.print(co);
  Serial.println(" ppm");

  //  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  //  spr.setTextColor(TFT_RED);
  //  spr.drawString("CO", 7 , 150 , 1);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(co, 15, 185, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("ppm", 55, 193, 1);


  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  tft.setTextColor(TFT_RED);
  tft.drawString("CO", 7 , 150 , 1);
  //  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(co, 15, 185, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", 55, 193, 1);




  //Temp

  float t = dht.readTemperature();
  //int tem = round(t);
  int tem = t;
  Serial.print("Temperature: ");
  Serial.print(tem);
  Serial.println( "*C");

  tft.drawRoundRect((tft.width() / 2) - 10  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s1

  //  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  //  spr.setTextColor(TFT_RED) ;
  //  spr.drawString("Temp", (tft.width() / 2) - 1  , 70 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(t, (tft.width() / 2) - 1 , 100, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("o", (tft.width() / 2) + 20, 95, 1);
  //  spr.drawString("C", (tft.width() / 2) + 30, 100, 1);

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Temp", (tft.width() / 2) - 1  , 70 , 1); // Print the test text in the custom font
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(t, (tft.width() / 2) - 1 , 100, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("o", (tft.width() / 2) + 20, 95, 1);
  tft.drawString("C", (tft.width() / 2) + 30, 100, 1);


  //NO2

  no2 = gas.getGM102B();
  if (no2 > 999) no2 = 999;
  Serial.print("NO2: ");
  Serial.print(no2);
  Serial.println(" ppm");

  tft.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s2

  //  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  //  spr.setTextColor(TFT_RED) ;
  //  spr.drawString("NO2", ((tft.width() / 2) + (tft.width() / 2) / 2)   , 70 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(no2, ((tft.width() / 2) + (tft.width() / 2) / 2)  , 100, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , 110, 1);

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("NO2", ((tft.width() / 2) + (tft.width() / 2) / 2)   , 70 , 1); // Print the test text in the custom font
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(no2, ((tft.width() / 2) + (tft.width() / 2) / 2)  , 100, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , 110, 1);



  //Humdity

  float h = dht.readHumidity();
  Serial.print("Humidity: ");
  Serial.print(h);
  Serial.println( "%");

  tft.drawRoundRect((tft.width() / 2) - 10 , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s3

  //  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  //  spr.setTextColor(TFT_RED) ;
  //  spr.drawString("Humi", (tft.width() / 2) - 1 , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(h, (tft.width() / 2) - 1 , (tft.height() / 2) + 70, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("%", (tft.width() / 2) + 21, (tft.height() / 2) + 70, 1);

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Humi", (tft.width() / 2) - 1 , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(h, (tft.width() / 2) - 1 , (tft.height() / 2) + 70, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("%", (tft.width() / 2) + 21, (tft.height() / 2) + 70, 1);


  //C2H5CH

  c2h5ch = gas.getGM302B();
  if (c2h5ch > 999) c2h5ch = 999;
  Serial.print("C2H5CH: ");
  Serial.print(c2h5ch);
  Serial.println(" ppm");

  tft.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s4

  //  spr.setFreeFont(&FreeSansBoldOblique9pt7b);
  //  spr.setTextColor(TFT_RED) ;
  //  spr.drawString("Ethyl", ((tft.width() / 2) + (tft.width() / 2) / 2)   , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(c2h5ch, ((tft.width() / 2) + (tft.width() / 2) / 2) , (tft.height() / 2) + 70, 1);
  //  spr.setTextColor(TFT_GREEN);
  //  spr.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , (tft.height() / 2) + 80, 1);

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Ethyl", ((tft.width() / 2) + (tft.width() / 2) / 2)   , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  //  tft.setTextColor(TFT_WHITE);
  //  tft.drawNumber(c2h5ch, ((tft.width() / 2) + (tft.width() / 2) / 2) , (tft.height() / 2) + 70, 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , (tft.height() / 2) + 80, 1);


  const size_t capacity = JSON_OBJECT_SIZE(7) + 145;
  DynamicJsonDocument doc(capacity);

  doc["id"] = "wio#2";
  doc["voc"] = voc;
  doc["co"] = co;
  doc["no2"] = no2;
  doc["eth"] = c2h5ch;
  doc["temp"] = tem;
  doc["hum"] = h;


  char buffer[256];
  serializeJson(doc, buffer);
  //client.publish("WTout", buffer);
  Serial.println(buffer);

  spr.pushSprite(0, 0);


  Serial.println("--------------------------------------------------------");

  delay(2000);


}

You are still creating the full size buffer by this:

 spr.createSprite(tft.width(), tft.height());

you may check this example for some reference:

Create what you need and delete after.

1 Like

Hi @ansonhe97, Thanks, I moved all the static elements to basic LCD and dynamic elements to sprite like you mentioned, but still there is a problem. now the display and wifi is not working, do we have any practise or way to optimize the SRAM?

Can you share your code again pls?

@ansonhe97 Sure.

#include <TFT_eSPI.h>
#include <Multichannel_Gas_GMXXX.h>
#include <Wire.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>
#include <AtWiFi.h>
#include "DHT.h"



GAS_GMXXX<TwoWire> gas;

TFT_eSPI tft;
TFT_eSprite spr = TFT_eSprite(&tft);  //sprite

unsigned int no2, c2h5ch, voc, co;


// Update these with values suitable for your network.
const char* ssid = "********"; // WiFi Name
const char* password = "********";  // WiFi Password
const char* mqtt_server = "********";  // MQTT Broker URL

#define DHTPIN 0
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

WiFiClient wioClient;
PubSubClient client(wioClient);


//ArduinoJson value
char gasValue[256];



void setup_wifi() {

  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password); // Connecting WiFi

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");

  Serial.println("IP address: ");
  Serial.println(WiFi.localIP()); // Display Local IP Address
}

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
   // Serial.print("Attempting MQTT connection...");
    // Create a random client ID
    String clientId = "WioTerminal-";
    clientId += String(random(0xffff), HEX);
    // Attempt to connect
    if (client.connect(clientId.c_str())) {
      //Serial.println("connected");
      // Once connected, publish an announcement...
     
    } else {
//      Serial.print("failed, rc=");
//      Serial.print(client.state());
//      Serial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}



void setup() {
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(3);
  setup_wifi();

  gas.begin(Wire, 0x08);

  dht.begin();


  //Head
  tft.fillScreen(TFT_BLACK);
  tft.setFreeFont(&FreeSansBoldOblique18pt7b);
  tft.setTextColor(TFT_WHITE);
  tft.drawString("Air Quality", 70, 10 , 1);

  //Line
  for (int8_t line_index = 0; line_index < 5 ; line_index++)
  {
    tft.drawLine(0, 50 + line_index, tft.width(), 50 + line_index, TFT_GREEN);
  }


  //VCO & CO Rect
  tft.drawRoundRect(5, 60, (tft.width() / 2) - 20 , tft.height() - 65 , 10, TFT_WHITE); // L1

  //VCO Text
  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  tft.setTextColor(TFT_RED);
  tft.drawString("VOC", 7 , 65 , 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", 55, 108, 1);

  //CO Text
  tft.setFreeFont(&FreeSansBoldOblique12pt7b);
  tft.setTextColor(TFT_RED);
  tft.drawString("CO", 7 , 150 , 1);
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", 55, 193, 1);


  // Temp rect
  tft.drawRoundRect((tft.width() / 2) - 10  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s1

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Temp", (tft.width() / 2) - 1  , 70 , 1); // Print the test text in the custom font
  tft.setTextColor(TFT_GREEN);
  tft.drawString("o", (tft.width() / 2) + 30, 95, 1);
  tft.drawString("C", (tft.width() / 2) + 40, 100, 1);


  //No2 rect
  tft.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , 60, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s2

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED);
  tft.drawString("NO2", ((tft.width() / 2) + (tft.width() / 2) / 2)   , 70 , 1); // Print the test text in the custom font
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , 120, 1);

  //Humi Rect
  tft.drawRoundRect((tft.width() / 2) - 10 , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s3

  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Humi", (tft.width() / 2) - 1 , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  tft.setTextColor(TFT_GREEN);
  tft.drawString("%", (tft.width() / 2) + 30, (tft.height() / 2) + 70, 1);



  //c2h5ch Rect
  tft.drawRoundRect(((tft.width() / 2) + (tft.width() / 2) / 2) - 5  , (tft.height() / 2) + 30, (tft.width() / 2) / 2 , (tft.height() - 65) / 2 , 10, TFT_BLUE); // s4


  tft.setFreeFont(&FreeSansBoldOblique9pt7b);
  tft.setTextColor(TFT_RED) ;
  tft.drawString("Ethyl", ((tft.width() / 2) + (tft.width() / 2) / 2)   , (tft.height() / 2) + 40 , 1); // Print the test text in the custom font
  tft.setTextColor(TFT_GREEN);
  tft.drawString("ppm", ((tft.width() / 2) + (tft.width() / 2) / 2) + 30 , (tft.height() / 2) + 90, 1);

setup_wifi();
}

void loop() {

  if (!client.connected()) {
    reconnect();
  }

  // VOC

  voc = gas.getGM502B();
  if (voc > 999) voc = 999;
//  Serial.print("VOC: ");
//  Serial.print(voc);
//  Serial.println(" ppm");

  spr.createSprite(40, 30);
  spr.fillSprite(TFT_BLACK);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(voc, 0, 0, 1);
  spr.pushSprite(15, 100);
  spr.deleteSprite();

  //CO

  co = gas.getGM702B();
  if (co > 999) co = 999;
//  Serial.print("CO: ");
//  Serial.print(co);
//  Serial.println(" ppm");

  spr.createSprite(40, 30);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(co, 0, 0, 1);
  spr.setTextColor(TFT_GREEN);
  spr.pushSprite(15, 185);
  spr.deleteSprite();

  //Temp

  float t = dht.readTemperature();
  //int tem = round(t);
  int tem = t;
//  Serial.print("Temperature: ");
//  Serial.print(tem);
//  Serial.println( "*C");

  spr.createSprite(30, 30);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(t, 0, 0, 1);
  spr.setTextColor(TFT_GREEN);
  spr.pushSprite((tft.width() / 2) - 1, 100);
  spr.deleteSprite();

  //NO2
  no2 = gas.getGM102B();
  if (no2 > 999) no2 = 999;
//  Serial.print("NO2: ");
//  Serial.print(no2);
//  Serial.println(" ppm");

  spr.createSprite(45, 30);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(no2, 0, 0, 1);
  spr.pushSprite(((tft.width() / 2) + (tft.width() / 2) / 2), 97);
  spr.deleteSprite();


  //Humidity
  float h = dht.readHumidity();
  if (h > 99) h = 99;
//  Serial.print("Humidity: ");
//  Serial.print(h);
//  Serial.println( "%");

  spr.createSprite(30, 30);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(h, 0, 0, 1);
  spr.pushSprite((tft.width() / 2) - 1, (tft.height() / 2) + 67);
  spr.deleteSprite();

  //C2H5CH
  c2h5ch = gas.getGM302B();
  if (c2h5ch > 999) c2h5ch = 999;
//  Serial.print("C2H5CH: ");
//  Serial.print(c2h5ch);
//  Serial.println(" ppm");

  spr.createSprite(45, 30);
  spr.setFreeFont(&FreeSansBoldOblique12pt7b);
  spr.setTextColor(TFT_WHITE);
  spr.drawNumber(c2h5ch, 0 , 0, 1);
  spr.pushSprite(((tft.width() / 2) + (tft.width() / 2) / 2), (tft.height() / 2) + 67);
  spr.deleteSprite();

  const size_t capacity = JSON_OBJECT_SIZE(7) + 145;
  DynamicJsonDocument doc(capacity);

  doc["id"] = "wio#2";
  doc["voc"] = voc;
  doc["co"] = co;
  doc["no2"] = no2;
  doc["eth"] = c2h5ch;
  doc["temp"] = tem;
  doc["hum"] = h;


  serializeJson(doc, gasValue);
  Serial.println(gasValue);
  client.publish("WTout", "hello");

  delay(2000);
}

I only commented out the mqtt part and seems working fine.

1 Like

But I need the MQTT to send to the data to server! Is there any other way?

Seems out of ram.

192k RAM is a struggle with LCD graphics…

1 Like

Thanks.I saw that, so is there anyway save some SRAM?