St7789 TFT 240x240 with esp8266 wemos d1 mini

Other Hardware Displays
1

hi. i have been having issues with my Wemos d1 mini wired correctly to a 1.3" st7789 240x240 ips display. everything's been going fine so far(able to use all functions of tft_eSPI) I've been following this tutorial so far:hackster io st7789
my issue is that I'm trying to move a simple 20x20 filled rectangle across the image. if you understand TFT displays then you will know that they do not refresh and therefore the square will appear to be smeared out across the screen. to avoid this smear effect, I've made some code that should redraw the area of the background image being covered by the square( this sounds complex, seeing the code might help ) in theory the code should work but when uploaded to the esp8266 wemos d1 mini, the board simply resets itself then throws up errors in serial monitor. my code is below, please attempt to help or provide a different way of moving my 20x20 square across my image, thanks :grin:

#include "bitmap.h" //(Bitmap generated with LCD Image Converter) [lcd-image-converter download | SourceForge.net](https://sourceforge.net/projects/lcd-image-converter/)
TFT_eSPI tft = TFT_eSPI(); // Invoke library

void setup(void) {
Serial.begin(115200);
Serial.print("ST7789 TFT Bitmap Test");

tft.begin(); // initialize a ST7789 chip
tft.setSwapBytes(true); // Swap the byte order for pushImage() - corrects endianness

tft.fillScreen(TFT_BLACK);
tft.pushImage(0,0,240,240,mercy);
}
int y = 1;
void loop() {
y = y+1;
tft.fillRect(0,y,20,20,TFT_BLUE);
int maths = y*240;
tft.fillRect(0,y,20,1,mercy[maths]);
delay(200);
}```
2

What are you trying to do?

void loop() {
    y = y+1;
    tft.fillRect(0,y,20,20,TFT_BLUE); // 20x20 BLUE square
    int maths = y*240;             //calculate position of LHS of y'th row
    uint16_t color = mercy[maths]; //color of LH pixel
    tft.fillRect(0,y,20,1, color); //draw a short horiz line with that color
    delay(200);
}

Since we don't know what your mercy image looks like, we don't know what colors will be "smeared" across the LH 20 pixels.
Note that y will never stop increasing until it gets to the 2147483648'th loop. i.e. after a few days.

3

mercy image(same image from linked hackster io tutorial)

the color smeared is the color of the square as it travels down across the image. im trying to move a small square across an image, without it leaving a trail of itself. a known way of doing this is to draw the background, draw the square at x position, increment x by one then repeat depending on how far you want the square to travel. im not using this method as you notice a flicker on the screen as the esp8266 redraws a fairly large image. my method is to only draw the single row of pixels behind the blue square, rather than the whole background.

well noticed, I will implement this in the final code

background.h (450.3 KB)

thanks for replying :+1:

4

You want to re-draw a 20x1 bitmap. Not draw a single colour horiz line.

#include <TFT_eSPI.h>
#include "background.h" //(Bitmap generated with LCD Image Converter) [lcd-image-converter download | SourceForge.net](https://sourceforge.net/projects/lcd-image-converter/)

TFT_eSPI tft = TFT_eSPI(); // Invoke library

void setup(void) {
    Serial.begin(115200);
    Serial.print("ST7789 TFT Bitmap Test");

    tft.begin(); // initialize a ST7789 chip
    tft.setSwapBytes(true); // Swap the byte order for pushImage() - corrects endianness

    tft.fillScreen(TFT_BLACK);
    tft.pushImage(0, 0, 240, 240, mercy);
}
int y = 1;
void loop() {
    y = y + 1;
    if (y >= 240) y = 0;;
    tft.fillRect(0, y, 20, 20, TFT_BLUE);
    int maths = y * 240;
    tft.pushImage(0, y, 20, 1, &mercy[maths]);
    delay(200);
}

Adjust your y values to display how you want. Note that you can start at a different x position.

1 Like
5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.