Solved: using keypad makes unexpected shift in position of tft.drawNumber & tft.drawString (left and up) #2132

llmpowerll · 2022-11-03T09:49:31Z

llmpowerll
Nov 3, 2022

hi Bodmer .
I played with TFT_eSPI on ESP32 and 320X240 2.8" (ili9341 XPT2046 resistive touch) key pad example.
I found bad problem when I use keypad syntax for simple action all the tft.drawNumber and tft.drawString function shifted unexpectedly left and up .
i checked the position X and Y in serial port. these input (X and Y position) displayed correctly in serial port but on TFT LCD is not correct.
it seems when we use keypad, some negative number remains in position variable and makes shifting effect on other function such as tft.drawNumber and tft.drawString function .
please help me to fix this bug.

Answered by Bodmer

Nov 4, 2022

The problem is that the text datum is being changed whenever the redBtn() and greenBtn() functions are called. The default is top left datum and this is over-ridden. The setTextDatum is a "global" function so changes the position of text subsequently drawn on the screen.

Here are updated functions that restores the datum to the same setting as when the function was called. If you use these functions then I think your sketch will behave as you expect.

//-------------- ON/OFF Draw redBtn -------------------
void redBtn()
{
      // Fetch current text datum so it can be restored
      uint8_t datum = tft.getTextDatum();

      tft.fillRoundRect(REDBUTTON_X, FRAME_Y, REDBUTTON_W, REDBUTTON_H,…

View full answer

Bodmer · 2022-11-04T00:15:35Z

Bodmer
Nov 4, 2022
Maintainer

Provide an example sketch that demonstrates the problem.

2 replies

llmpowerll Nov 4, 2022
Author

Thanks Bodmer to your fast reply.
I attach the code here.

llmpowerll Nov 4, 2022
Author

`

/*MCU ESP32 LCD = ILI9341 2.8" inch XPT2046 IC resistive touch
when using ON/OFF key and kepad they
effect on tft.drawnumber & tft.drawString & tft.println function
this effect makes unwanted shift up and left to above function
*/

#include "FS.h"
#include "SPI.h"
#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();
#define CALIBRATION_FILE "/TouchCalData1"
#define REPEAT_CAL false
//-------Font Config ----------
#define LABEL2_FONT &FreeSansBold12pt7b
//--- ardware Pin config-------
#define TFT_CS 15
#define TFT_DC 2
#define TFT_RST 4
#define TOUCH_CS 22
///---- new color definition -----
#define New_Green 0x2dc8
#define New_Gray 0x8c71
#define New_Blue 0x1084
#define New_Blue_1 0x96df
//-------- Base of ON/OFF -------
#define FRAME_X 170
#define FRAME_Y 30
#define FRAME_W 60
#define FRAME_H 30
//------- require shift to create key frame by loop methode------
#define Frame_Shift_1 51 // space between any key in Y Axis
//------- Next key limitation in Y Axis loop -------------------
#define FRAME_Y_1 81
//---------Red zone size in drawing ON/OFF Key------------------
#define REDBUTTON_X FRAME_X
#define REDBUTTON_Y FRAME_Y
#define REDBUTTON_W (FRAME_W/2)
#define REDBUTTON_H FRAME_H
//---------Green zone size in drawing ON/OFF Key---------------
#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)
#define GREENBUTTON_Y FRAME_Y
#define GREENBUTTON_W (FRAME_W/2)
#define GREENBUTTON_H FRAME_H
//--------- Key identification ------------
bool SwitchOn = false;
int Sp =90;
int Te =36;
int page=0;
TFT_eSPI_Button key[9];
//-------------------------------------------------------------
void setup() {
Serial.begin(115200);
tft.init();
tft.setRotation(0);
touch_calibrate();
//--------------------------------
}

void loop() {

   while (page==0)
    {
      DrawMainPage();
      page=1;
    }//end of while page==0



  while (page==1)   
    {

      
       //-------------------  Scan First key manualy -------------------
      uint16_t t_x = 0, t_y = 0; 
      bool pressed = tft.getTouch(&t_x, &t_y);
      uint8_t b = 0;
      if (pressed && key[0].contains(t_x, t_y)) 
        {
          key[0].press(true);  
          } else 
          
            {
             key[0].press(false);  // tell the button it is NOT pressed
            }
              // Check if any key has changed state
              if (key[0].justReleased()) key[0].drawButton();   
              if (key[0].justPressed()) 
                {
                  key[0].drawButton(true);  // draw invert
                // Action of First key ---------
                  page=2;
                  delay(10); // UI debouncing
                }      
                

     }//end of while page==1




        //-------------Second Page creation(Drawing) -----------------------
  while (page==2) 
  {
      
      DrawSettingPage();
      delay(500); // UI debouncing perevent pressed setting button effect on next page          
      page=3;
  
  }//end while page==3

        //------------------------- key scaning segment ---------------

  while(page==3)
  {


    // Start ON / OFF KEY* when add to project shift effect apeear---------------------
    uint16_t x, y;
    if (tft.getTouch(&x, &y))
    {

      if (SwitchOn)
      {
        Serial.println(SwitchOn);      
        if ((x > REDBUTTON_X) && (x < (REDBUTTON_X + REDBUTTON_W))) {
        if ((y > REDBUTTON_Y) && (y <= (REDBUTTON_Y + REDBUTTON_H))) {
        Serial.println("Red btn hit");
        redBtn();
      }
   }
  }      
      
  
    else //Record is off (SwitchOn == false)
    {
      if ((x > GREENBUTTON_X) && (x < (GREENBUTTON_X + GREENBUTTON_W))) 
      {
        if ((y > GREENBUTTON_Y) && (y <= (GREENBUTTON_Y + GREENBUTTON_H))) 
        {
          Serial.println("Green btn hit");
          greenBtn();
        }
      }
    }
  
Serial.println(SwitchOn);
    }   //end of ON/OFF Key* ---------------------------------    
      



  //-------------- 8 key scaning ------------------------      
  uint16_t t_x = 0, t_y = 0; // To store the touch coordinates
  bool pressed = tft.getTouch(&t_x, &t_y);

  //------Check if any of 1 to 8 key touched coordinates---------
  for (uint8_t b = 1; b < 9; b++) 
  {
    if (pressed && key[b].contains(t_x, t_y)) 
    {
      key[b].press(true);  // tell the button it is pressed
    } else 
      {
      key[b].press(false);  // tell the button it is NOT pressed
      }
  }

  
  
  //------Check if any of 1 to 8 key has changed state-----------
  for (uint8_t b = 1; b < 9; b++) {
    if (key[b].justReleased()) key[b].drawButton();    
    if (key[b].justPressed()) 
    {
       key[b].drawButton(true);  // draw invert

       
      //-------- 8 key action here---------*********************
       if (b == 1) 
       {        
        // no task set for this key
       }   
      //------- Sp + key action ------------------
      if (b == 2)
       {
            
      tft.fillRect(108,191,26,18,TFT_BLACK); 
      if (Sp< 99) Sp++;  
      tft.setTextColor(TFT_WHITE);
      tft.drawNumber(Sp, 121, 202,4);
       }
      //------ Sp - key action ------------------
      if (b == 3) 
      {
      tft.fillRect(108,191,26,18,TFT_BLACK); 
      if (Sp> 75) Sp--;  
      tft.setTextColor(TFT_WHITE);
      tft.drawNumber(Sp, 121, 202,4);
      }
      //------ te + keyaction -----------------
      if (b == 4) 
      {
      tft.fillRect(108,242,26,18,TFT_BLACK); 
      if (Te< 42) Te++;  
      tft.setTextColor(TFT_WHITE);
      tft.drawNumber(Te, 121, 253,4);  
      }
      //------ te - key action -----------------
      if (b == 5) 
      {
      tft.fillRect(108,242,26,18,TFT_BLACK);
      if (Te> 24) Te--;  
      tft.setTextColor(TFT_WHITE);
      tft.drawNumber(Te, 121, 253,4);
      }
      //----- About key action ------------------ 
      if (b == 6) {
      page=5;
      }
      //---- Back key action -------------------      
      if (b == 7)
      {                       
      page=0;// go to Draw main page Exception                         
      }
      //----- de key action ------------------
      if (b ==8) 
      {
          // no task set for this key
      }
         //----------end of 8 key action  ***************************
         

    }//end of draw invert
   }//end of for b<8      
  }// end while(page==3)    




  //----------------  About us Page -------------------------
  while(page==5)
  {
    DrawAboutPage();
    delay(2000);//display for 2 second and come back to page 2
    page=2;       
  }             


   
    
     
  }///end loop (main)



    //---------- Draw-Key S1 fist page ----------------

void drawKeypad()
{
tft.setFreeFont(&FreeSansBold12pt7b);key[0].initButton(&tft,120,293,230,46,TFT_DARKGREY,New_Blue,TFT_WHITE,"S1",1);
key[0].drawButton();
}

//-------------- ON/OFF Draw redBtn -------------------
void redBtn()
{

  tft.fillRoundRect(REDBUTTON_X, FRAME_Y, REDBUTTON_W, REDBUTTON_H,7, TFT_BLACK);
  tft.fillRoundRect(GREENBUTTON_X, FRAME_Y, GREENBUTTON_W, GREENBUTTON_H,7, New_Green);  
  drawFrame();
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(1);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W / 2), FRAME_Y + (GREENBUTTON_H / 2),2);
  SwitchOn = false;

}
//------------ ON/OFF Draw greenBtn ------------------
void greenBtn()
{

tft.fillRoundRect(GREENBUTTON_X, FRAME_Y, GREENBUTTON_W, GREENBUTTON_H,7, TFT_BLACK);
tft.fillRoundRect(REDBUTTON_X, FRAME_Y, REDBUTTON_W, REDBUTTON_H,7, TFT_DARKGREY);
drawFrame();
tft.setTextColor(TFT_WHITE);
tft.setTextSize(1);
tft.setTextDatum(MC_DATUM);
tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W / 2) + 1, FRAME_Y + (REDBUTTON_H / 2),2);
SwitchOn = true;

}

//---------------- Frame Draw -----------------------
void drawFrame()
{
for ( uint8_t col = FRAME_Y ; col <= FRAME_Y_1 ; col = col + Frame_Shift_1)
{
tft.drawRoundRect(FRAME_X, col, FRAME_W, FRAME_H, 5,TFT_DARKGREY);
}

}

void drawKeypad_1() // Creat 8 key
{

  tft.setFreeFont(&FreeSans9pt7b);
    
  key[1].initButton(&tft,200,147,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"K1",1);// no action defined
  key[1].drawButton();
  
  key[2].initButton(&tft,200,198,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"+",1); // increament key
  key[2].drawButton();

  key[3].initButton(&tft,40,198,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"-",1);// decreament key
  key[3].drawButton(); 

  key[4].initButton(&tft,200,249,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"+",1);// increament key
  key[4].drawButton();

  key[5].initButton(&tft,40,249,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"-",1);// decreament key
  key[5].drawButton();

  key[6].initButton(&tft,200,300,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"K6",1);
  key[6].drawButton();

  key[7].initButton(&tft,40,300,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"Back",1);
  key[7].drawButton();

  key[8].initButton(&tft,120,300,FRAME_W,FRAME_H,TFT_DARKGREY,New_Blue,New_Gray,"K8",1);//no action defined
  key[8].drawButton();

}

void DrawMainPage ()
{
delay(500);
tft.fillScreen(TFT_BLACK);
tft.setTextColor(TFT_WHITE);
drawKeypad();// Draw S1 key
tft.setTextColor(New_Green);//
tft.drawString("TEST X=0 Y=0",0,0,4);//
}

//----------- Drawing Setting Page -----------------------------

void DrawSettingPage()
{

  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(New_Green);
  tft.drawString("TEST2 x=0,y=0",0,0,4); 
  //--------------- SP & Te ----------------------------------     
  tft.setTextColor(TFT_WHITE);//new Green color
  tft.drawNumber(Sp, 107, 189,4);//(str, poX, poY, font modeland size);
  tft.drawNumber(Te, 107, 240,4);//(str, poX, poY, font modeland size);
  redBtn(); // draw ON/OFF key       
  drawKeypad_1();// Draw 8 key

}

void DrawAboutPage()
{
tft.fillScreen(TFT_BLACK);
tft.setTextColor(TFT_WHITE);
tft.drawString("Location x=0 , y=0",0,0,2);
tft.drawString("Location x=0 , y=30",0,30,2);
}

//---------- Touch Calibraion -----------
void touch_calibrate()
{
uint16_t calData[5];
uint8_t calDataOK = 0;

// check file system exists
if (!SPIFFS.begin()) {
Serial.println("Formating file system");
SPIFFS.format();
SPIFFS.begin();
}

// check if calibration file exists and size is correct
if (SPIFFS.exists(CALIBRATION_FILE)) {
if (REPEAT_CAL)
{
// Delete if we want to re-calibrate
SPIFFS.remove(CALIBRATION_FILE);
}
else
{
File f = SPIFFS.open(CALIBRATION_FILE, "r");
if (f) {
if (f.readBytes((char *)calData, 14) == 14)
calDataOK = 1;
f.close();
}
}
}

if (calDataOK && !REPEAT_CAL) {
// calibration data valid
tft.setTouch(calData);
} else {
// data not valid so recalibrate
tft.fillScreen(TFT_BLACK);
tft.setCursor(20, 0);
tft.setTextFont(2);
tft.setTextSize(1);
tft.setTextColor(TFT_WHITE, TFT_BLACK);

tft.println("Touch corners as indicated");

tft.setTextFont(1);
tft.println();

if (REPEAT_CAL) {
  tft.setTextColor(TFT_RED, TFT_BLACK);
  tft.println("Set REPEAT_CAL to false to stop this running again!");
}

tft.calibrateTouch(calData, TFT_MAGENTA, TFT_BLACK, 15);

tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.println("Calibration complete!");

// store data
File f = SPIFFS.open(CALIBRATION_FILE, "w");
if (f) {
  f.write((const unsigned char *)calData, 14);
  f.close();
}

}
}

`

after program above code :
photo after Boot "test x=0 y=0" is ok and correct. (in cod and LCD both location is x=0 and y=0 )

by only press "S1" key go to next page
again "test2 x=0 y=0" is ok and correct. (in cod and LCD both location is x=0 and y=0 )

now only Press "Back" key
x and y location shift up and left and they effected by keypad function (they should be x=0 and y=0)
photo of the problem

again I press "S1" key and every number and string shift up and left (Unwanted change on x and y occurred )

Pressing "K6" shift string left and up (Unwanted change on x and y occurred). they should be on x=0 and y=0 etc. but unwanted shift occurred

llmpowerll · 2022-11-04T16:19:11Z

llmpowerll
Nov 4, 2022
Author

above source code file (Arduino IDE format .ino ) attached here
sketch_Shifting_Bug_Exm_nov4a.ino.txt

0 replies

Bodmer · 2022-11-04T18:55:47Z

Bodmer
Nov 4, 2022
Maintainer

The problem is that the text datum is being changed whenever the redBtn() and greenBtn() functions are called. The default is top left datum and this is over-ridden. The setTextDatum is a "global" function so changes the position of text subsequently drawn on the screen.

Here are updated functions that restores the datum to the same setting as when the function was called. If you use these functions then I think your sketch will behave as you expect.

//-------------- ON/OFF Draw redBtn -------------------
void redBtn()
{
      // Fetch current text datum so it can be restored
      uint8_t datum = tft.getTextDatum();

      tft.fillRoundRect(REDBUTTON_X, FRAME_Y, REDBUTTON_W, REDBUTTON_H,7, TFT_BLACK);
      tft.fillRoundRect(GREENBUTTON_X, FRAME_Y, GREENBUTTON_W, GREENBUTTON_H,7, New_Green);  
      drawFrame();
      tft.setTextColor(TFT_WHITE);
      tft.setTextSize(1);
      tft.setTextDatum(MC_DATUM); // Change text datum for this redBtn function
      tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W / 2), FRAME_Y + (GREENBUTTON_H / 2),2);
      SwitchOn = false;

      // Restore text datum
      tft.setTextDatum(datum);
}
//------------  ON/OFF Draw greenBtn ------------------
void greenBtn()
{
    // Fetch current text datum so it can be restored
    uint8_t datum = tft.getTextDatum();

    tft.fillRoundRect(GREENBUTTON_X, FRAME_Y, GREENBUTTON_W, GREENBUTTON_H,7, TFT_BLACK);
    tft.fillRoundRect(REDBUTTON_X, FRAME_Y, REDBUTTON_W, REDBUTTON_H,7, TFT_DARKGREY);
    drawFrame();
    tft.setTextColor(TFT_WHITE);
    tft.setTextSize(1);
    tft.setTextDatum(MC_DATUM); // Change text datum for this greenBtn function
    tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W / 2) + 1, FRAME_Y + (REDBUTTON_H / 2),2);
    SwitchOn = true;

    // Restore text datum
    tft.setTextDatum(datum);
}

1 reply

llmpowerll Nov 5, 2022
Author

Thanks for your quick and clear response.
I add your suggestion to cod. program it again and your suggestion solved the problem.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Solved: using keypad makes unexpected shift in position of tft.drawNumber & tft.drawString (left and up) #2132

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Solved: using keypad makes unexpected shift in position of tft.drawNumber & tft.drawString (left and up) #2132

Uh oh!

llmpowerll Nov 3, 2022

Replies: 3 comments · 3 replies

Uh oh!

Bodmer Nov 4, 2022 Maintainer

Uh oh!

llmpowerll Nov 4, 2022 Author

Uh oh!

llmpowerll Nov 4, 2022 Author

Uh oh!

llmpowerll Nov 4, 2022 Author

Uh oh!

Bodmer Nov 4, 2022 Maintainer

Uh oh!

llmpowerll Nov 5, 2022 Author

llmpowerll
Nov 3, 2022

Replies: 3 comments 3 replies

Bodmer
Nov 4, 2022
Maintainer

llmpowerll Nov 4, 2022
Author

llmpowerll Nov 4, 2022
Author

llmpowerll
Nov 4, 2022
Author

Bodmer
Nov 4, 2022
Maintainer

llmpowerll Nov 5, 2022
Author