Текст поверх изображения

Песочница. Раздел для новичков
1

IMG_20240428_025133
IMG_20240428_0251331920×3415 550 KB

Модуль ESP32.
Вывожу данные с датчиков на дисплей, предварительно загрузив случайную картинку в формате JPEG с SD карты.
Конвертирую изображение из JPEG в массив для библиотеки TFT_ESPI с помощью библиотеки JPEGDecoder.
Вывожу текст на изображении с помощью функции:

TFT.drawString(String(MH_Z19.getCO2()) + " ppm", 350, 20, FONT4);

Цифры накладываются друг на друга и становится не понятно, что написано.

Как мне очистить предыдущие цифры и нарисовать новые?

  1. Вариант с фоном цифр мне не нравится, так как картинку на фоне становится не видно (Например фон у цифр чёрный и мы в последующем с помощью TFT.setTextPadding закрашиваем эти цифры и поверх рисуем новые).
  2. Обновлять картинку, затем снова рисовать цифры(тоже не вариант, экран начинает мерцать, при обновлении изображения, выглядит не красиво)
    Хотел бы спросить у мастеров, что они посоветуют?
2

Перерисовывать фоновую картинку по частям , только там где есть цифры .

3

А как мне получить эту часть изображения, не нарезая её заранее в Фотошопе?

4

Почитать документацию к библиотеке может ли она вытаскивать часть изображения, если нет - читать что такое растровые изображения, самостоятельно написать обработку кусочков фона под текстом.

5

Писать функцию вывода спрайта по фоновому изображению - умение брать цвета пикселей из двух разных массивов, а не одного. По идее очевидная вещь для библиотек, на практике их нет.
ролик 1 (1)
VID_20230304_064812
VID_20230302_183811

6

Видите ли, никакого “очистить” для дисплея нет. “Старое” изображение при прорисовке нового затирается безвозвратно и никакого способа восстановить его не существует.
Так что единственное, что можно сделать с дисплеем - рисовать на нем заново.
Ну а дальше уже зависит от Вашей фантазии - как можно организовать процедуру рисования, чтобы исключить мерцание.
Не следует только надеяться, что тот функционал, который нужен конкретно Вам, будет присутствовать в библиотеке общего пользования. Так что - писать недостающий функционал самому, ручками.

7

Можно пример Вашего кода, что у Вас используется в гифках?

8

Весь код не влезет, там 418 строк (это игра). Вот функция для спрайта, ниже фрагмент горения факелов из первой гифки.

//функция вывода спрайта и его стирания по фоновой фотокартинке размером w*h,x,y - положение спрайта на экране w1,h1 - размер спрайта (*bitmap - массив фона,*bitmap_- массив спрайта,true-нарисовать спрайт,false-затереть фоном)  
void drawFoto_spr(int x,int y, const uint8_t *bitmap,int w,int h,const uint8_t *bitmap_,int w1,int h1,bool SPR) {
if(x<0||x+w1>128||y<0||y+h1>160){return;} 
 tft.setAddrWindow(x,y,x+w1-1,y+h1-1);
 SPI.beginTransaction(SPISettings(40000000, MSBFIRST, SPI_MODE0));
  digitalWrite(TFT_DC, HIGH);
  digitalWrite(TFT_CS, LOW); 
 for(int j=0; j<h; j++) {
    for(int i=0; i<2*w; i=i+2) {
      if(i>=2*x&&i<2*(x+w1)&&j>=y&&j<y+h1){
        if(bitmap_[(i-2*x)+1+(j-y)*2*w1]==bitmap_[1]&&bitmap_[(i-2*x)+(j-y)*2*w1]==bitmap_[0]){//условие определения фонового цвета по цвету первого пикселя массива
         SPI.transfer(bitmap[i+1+j*2*w]);SPI.transfer(bitmap[i+j*2*w]);
        }
        else{
        if(SPR) {SPI.transfer(bitmap_[(i-2*x)+1+(j-y)*2*w1]);SPI.transfer(bitmap_[(i-2*x)+(j-y)*2*w1]);}
        else{SPI.transfer(bitmap[i+1+j*2*w]);SPI.transfer(bitmap[i+j*2*w]);} 
        }
      }  
   }
  }
  digitalWrite(TFT_CS, HIGH);
  SPI.endTransaction();
 ///  
}

///горение факелов
if(millis()-Y_pl>100){
Y_pl=millis();FL_pl++;if(FL_pl>3){FL_pl=0;}
if(FL_pl==0){
drawFoto_spr(56,24,fon,128,160,plamia_1,32,12,true);
drawFoto_spr(55,124,fon,128,160,plamia_3,32,12,false);     
}
if(FL_pl==1){
drawFoto_spr(56,24,fon,128,160,plamia_1,32,12,false);
drawFoto_spr(55,124,fon,128,160,plamia_3,32,12,true);  
}
if(FL_pl==2){
drawFoto_spr(56,24,fon,128,160,plamia_2,32,12,true);
drawFoto_spr(55,124,fon,128,160,plamia_4,32,12,false);  
}
if(FL_pl==3){
drawFoto_spr(56,24,fon,128,160,plamia_2,32,12,false);
drawFoto_spr(55,124,fon,128,160,plamia_4,32,12,true);  
}
 }
9

Кстати, не обязательно двигать спрайт по фону, можно фон менять под спрайтом, относительно медленно, сменяя спрайт.
VID_20231111_192059