TFT_eSPI library

[last updated: 2024-07-12]
WT32-SC01 display
https://doc-tft-espi.readthedocs.io/
-----

Editing in process ...

Assuming setup:
tft.init();
---------------------------------------------------
Drawing shapes:
- tft.drawRect(start-x, start-y, length, width, color);
- tft.fillRect(start-x, start-y, length, width, color);
- tft.fillRoundRect(start-x, start-y, width, height, corner-radius, color);
- tft.drawLine(start-x, start-y, end-x, end-y, color);
  draws a single pixel line
  Easiest way to draw a thicker line is to increment start and stop x (or y, but not both), and draw another line.
- Text:
  - tft.println(text);
    Do these first...
    tft.setCursor(x-pos, y-pos);
    tft.setTextSize(5);
  - Best guess as to a simple procedure:
    Find a font file, often a .h file
    Put it in your libraries/fonts folder
    #include it into your sketch
    select it in your sketch with ...
  - Fonts:
    - This worked:
    - some unknown things:
      - perhaps basic fonts get specified in the TFT config files ?
        Indeed, the Setup.h file includes these lines:
        #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_GFXFF // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
        
        Not sure how to "activate" or select them ...
      - "smooth" = anti-aliased fonts ?
    - what is SPIFFS ?
    - ...
    - Font Links:
---------------------------------------------------
Sprites:
- ... are pages or portions of pages
  that are created in advance,
  then instantly switched on when needed,
  avoiding the need to wait for the drawing process.
- setup/initialize:
  - in globals: create two sprite objects, named "spr_main" and "spr_popup", with pointers to "tft" object
    // the pointer is used by pushSprite() to push it onto the TFT
    TFT_eSprite spr01 = TFT_eSprite(&tft);
    TFT_eSprite spr02 = TFT_eSprite(&tft);
  - in setup: create sprites and define their parameters:
    spr01.createSprite(WIDTH, HEIGHT);
    spr01.setTextWrap(true);
    spr01.setCursor(0, 0);
    spr01.print("something here...");
    spr01.pushSprite(0, 0);
    
    spr02.createSprite(50, 50);
    spr02.fillScreen(TFT_TRANSPARENT);
    spr02.fillTriangle(25, 0, 0, 49, 49, 49, TFT_RED);
    spr02.pushSprite(20, 20, TFT_TRANSPARENT);
    
    delay(1000);
    spr02.fillScreen(TFT_TRANSPARENT); // not sure what this does ...
- draw shapes or lines inside the sprite:
  - spr01.drawRect(5, 5, 20, 20, 0x001F);
  - spr01.drawString("Sprite", WIDTH / 2, HEIGHT / 2, 4); ???
  - not sure what this code does ...
    // Draw some text with Middle Centre datum
    spr.setTextDatum(MC_DATUM);
    spr.drawString("Sprite", WIDTH / 2, HEIGHT / 2, 4);
    // Now push the sprite to the TFT at position 0,0 on screen
    spr.pushSprite(-40, -40);
    spr.pushSprite(tft.width() / 2 - WIDTH / 2, tft.height() / 2 - HEIGHT / 2);
    spr.pushSprite(tft.width() - WIDTH + 40, tft.height() - HEIGHT + 40);
- Draw text inside a sprite:
  // Draw some text with Middle Centre datum
  spr.setTextDatum(MC_DATUM);
  spr.drawString("Sprite", WIDTH / 2, HEIGHT / 2, 4);
- Misc snippets:
  // misc code snippets for sprites:
  //
  // static LGFX_Sprite sprite(&lcd); // in globals
  // sprite.createSprite(65, 65); // in setup
  // sprite.drawRect(0, 0, 65, 65, 0xFFFF);
  // sprite.pushSprite(&lcd, 0, 64);
  // sprite.deleteSprite();
  
  -----------------------
- Sprite Links:
---------------------------------------------------
Colors:
- Colors in TFT are represented in "5:6:5" format: 5 bits of red, 6 bits of green, and 5 bits of blue
  - Usu. represented as 4 hex-chars, for example 0xFFFF would be black, and 0x0000 = white.
  - 4 hex-chars = 16 total bits of data (5 + 6 + 5).
  - a color in 5:6:5 format is constructed by taking
    the "top" ie. most significant 5 bits of the red portion of an RGB format color,
    concatenating with the top 6 bits of the green portion of an RGB color,
    concatenating with the top 5 bits of the blue portion of an RGB color,
    then converting the resulting 16 bits back into 4 hex chars.
  - "pure" red would be 0xF800, green is 0x0DE0, blue is 0x001F
- tft.fillScreen(); - one parameter, color
- Colors Links:
  https://rgbcolorpicker.com/565
---------------------------------------------------
Touch Screen:
- #define TOUCH_CS PIN_D2 // Chip select pin (T_CS) of touch screen
- touchscreen driver: FT6336U I2C interface
- #include <SPI.h> //This is the generic SPI library of the ESP32
  #include <TFT_eSPI.h> //This is our lcd library
  //Here we create our TFT_eSPI object and name it tft
  TFT_eSPI tft = TFT_eSPI();
- clever technique:
  struct RoundedSquare {
  int xStart;
  int yStart;
  int width;
  int height;
  byte cornerRadius;
  uint_16t color;
  };
- We could read the raw output of the screen, but some debouncing and smoothing can improve your experience by a mile. Luckily, the TFT_eSPI library does all the hard work for us. The function tft.getTouch(&t_x, &t_y) returns false if the touch is invalid. If the touch is valid, it stores the coordinates at our t_x and t_y coordinates.
  To keep things simple, we will continuously poll our screen to check if our majestic fingers are pressing down on the device. But we want to keep the loop function tidy, so I'm going to wrap the logic in a new function called checkTouched().
  
  cpp
  //It's a void function since we don't return anything
  //This function will mainly excecute the logic for the touch handling
  void checkTouched(){
  //Remember this function returns false if the touch is invalid
  //C++ asserts something as true if it's not 0. So with a valid press
  //This statement will assert to true
  if(tft.getTouch(&t_x, &t_y){
  
  }
  }
  
  void loop(){
  checkTouched();
  }
- class TFT_eSPI' has no member named 'getTouch'
  #define TOUCH_CS PIN_D0 // Chip select pin (T_CS) of touch screen
  https://github.com/Bodmer/TFT_eSPI/blob/master/User_Setup.h#L97
  #define TFT_CS PIN_D8 // Chip select control pin D8
  
  For the touch screen to work with ESP32 you must un-comment the line below in the “User_Setup.h” file.
  
  Run the diagnostic sketch Read_User_Setup and check the compiler is picking up your settings by looking at the Serial Monitor output. Note that touch only works with SPI displays and XPT2046 touch controllers. In other cases an alternative touch library can be used.
  
  Display driver = 7796
  Display width = 320
  Display height = 480
  
  MOSI = GPIO 23
  MISO = GPIO 19
  SCK = GPIO 18
  TFT_CS = GPIO 15
  TFT_DC = GPIO 2
  TFT_RST = GPIO 4
  TOUCH_CS = GPIO 0
  
  Run the diagnostic sketch Read_User_Setup and check the compiler is picking up your settings.
- void checkTouched(){
  if(tft.getTouched(&t_x, &t_y){
  //Here we check if the touch is contained within our imaginary box
  if(t_x > btnA.xStart && t_x < btnA.xStart + width && t_y > btnA.yStart && t_y < btnA.yStart + height){
  connector.send(btnA.command);
  }
  }
  }
  ---------------------------------------
- TouchScreen Links:
  - https://www.youtube.com/watch?v=O5lA4ij50B4 ... worthless ... another 8ms ...
  - https://www.youtube.com/watch?v=CLVfV247lP4 ... worthless ... tutorial for using 8ms ...
  - https://www.youtube.com/watch?v=PSFec_qY_go ... maybe ...
    https://www.eeweb.com/getting-to-know-thesli-wt32-sc01-touch-screen-disp... ... worthless ...
    https://www.instructables.com/Energy-Monitor-Using-API-Calls-on-a-ESP32-... ... mostly worthless ...
    https://forum.core-electronics.com.au/t/help-with-programming-wt32-sc01-... ... mostly worthless ...
    https://randomnerdtutorials.com/vs-code-platformio-ide-esp32-esp8266-ard... ... maybe ... how to install Visual VS Studo (or whatever) on Ubuntu ...
---------------------------------------------------

eof

Main Menu

Main menu

Site Menu

You are here