Diplay a RGB Bitmap on TFT Shield without SD

Hello everybody.

Sorry for my English.

I'm looking for a program that displays a color picture on a MCUFRIENDS TFT Shield without SD card. I've looked for many examples but no one works. I have a UNO R3 and a 2.4 TFT shield.

Hellllllllllp!

Difficult or even impossible, because there is too less FlashROM for the picture or the decompression procedures on the Uno.

Oliver

A 240x320 BMP is 230kB (262144 colours) A 240x320 BMP is 80kB (256 colours) A 240x320 JPG is 10kB with reasonable compression. A JPG needs 4kB of SRAM to decode

You would need a Zero or Due to store a single BMP in Flash memory. You can decode JPG with Mega, Zero, Due, ... You can store multiple JPG images on Mega, Zero, Due, ...

2.4 inch Shields have microSD sockets. You can store 1000s BMP on SD. You can render them with a Uno. microSD cards are cheap.

David.

Yes i succeed displaying a bitmap yesterday with this code.

#include <MCUFRIEND_kbv.h>

MCUFRIEND_kbv tft;

extern const uint16_t PROGMEM t030rs[1665];

#define BLACK 0x0000
#define WHITE 0xFFFF
#define RED   0xF800
#define BLUE  0x001F

void setup()
{
    // put your setup code here, to run once:
    Serial.begin(9600);
    uint16_t ID = tft.readID();
    Serial.println(ID, HEX);
    tft.begin(ID);
    tft.fillScreen(WHITE);
    //tft.drawRGBBitmap(10, 10, t030rs, 45, 37);
    tft.setRotation(1);
}

void loop() 
{
    
    tft.drawRGBBitmap(10, 10, t030rs, 45, 37);
    delay(2000);
    tft.fillScreen(WHITE);
    tft.drawRGBBitmap(100, 100, t030rs, 45, 37);
    delay(2000);
    tft.fillScreen(WHITE);
    tft.drawRGBBitmap(200, 200, t030rs, 45, 37);
    delay(2000);
    tft.fillScreen(WHITE);
}

See also the attached file.

But now i’d like to scroll the bitmap on the screen according to the following code that makes scroll a text.

#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;

#include <fonts/FreeSans9pt7b.h>
#include <fonts/FreeSans12pt7b.h>
#include <fonts/FreeSans18pt7b.h>
#include <fonts/FreeSans24pt7b.h>

#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

void setup()
{
    uint16_t ID = tft.readID();
    tft.begin(ID);
    tft.setRotation(1);
}

void scrolltext(int x, int y, const char *s, uint8_t dw = 1, const GFXfont *f = NULL, int sz = 1)
{
    int16_t x1, y1, wid = tft.width(), inview = 1;
    uint16_t w, h;
    tft.setFont(f);
    tft.setTextColor(YELLOW, BLACK);
    tft.setTextSize(sz);
    tft.setTextWrap(false);
    tft.getTextBounds((char*)s, x, y, &x1, &y1, &w, &h);
    //    w = strlen(s) * 6 * sz;

    for (int steps = wid + w; steps >= 0; steps -= dw) {
        x = steps - w;
        if (f != NULL) {
            inview = wid - x;
            if (inview > wid) inview = wid;
            if (inview > w) inview = w;
            tft.fillRect(x > 0 ? x : 0, y1, inview + dw, h, BLACK);
        }
        x -= dw;
        tft.setCursor(x, y);
        tft.print(s);
        if (f == NULL) tft.print("  "); //rubout trailing chars
        delay(5);
    }
}


void loop()
{
    tft.fillScreen(BLACK);
    tft.setTextColor(WHITE);
    tft.setFont(NULL);   //System Font
    tft.setTextSize(1);
    tft.setCursor(0, 0);
    tft.println("Here are some scrolling examples");
    tft.println("System Font can be drawn in rubout mode");
    scrolltext(0, 30, "Default 100 pixels/s.  System Font.  sz = 1", 1, NULL, 1);
    scrolltext(0, 30, "David Prentice is a jolly good chap.  1000 pixels/s.  System Font",
               10, NULL, 1);
    scrolltext(0, 30, "200 pixels/s. System. sz=2", 2, NULL, 2);
    scrolltext(0, 30, "200 pixels/s. System. sz=3", 2, NULL, 3);
    scrolltext(0, 30, "500 pixels/s. System. sz=4", 5, NULL, 4);
    scrolltext(0, 30, "Saturday 30 September 2017", 2, NULL, 3);
    scrolltext(0, 60, "Saturday 30 September 2017", 10, NULL, 3);
    tft.setTextColor(WHITE);
    tft.setFont(&FreeSans9pt7b);   //Free Font
    tft.setTextSize(1);
    tft.setCursor(0, 40);
    tft.println("Free Fonts look nicer, only transparent");
    tft.println("re-painting background for rubout is nasty");

    scrolltext(0, 100, "200 pixels/s. FreeSans9pt7b. sz=1", 2, &FreeSans9pt7b, 1);
    scrolltext(0, 100, "Saturday 30 September 2017", 5, &FreeSans12pt7b);
    scrolltext(0, 200, "David", 10, &FreeSans18pt7b);
    delay(2000);
}

Hope you’ve understood me.

Bitmap_Display.zip (4.59 KB)

scrolling_text.zip (1.26 KB)

There are several ways of moving a small image on a screen.

  1. redraw a bitmap in the new position
  2. redraw the background stripe that holds the old image.
  3. read the screen, redraw in the new position.

None of these methods are practical with “big” images.

All GFX programs have access to drawRGBBitmap(). e.g. all Adafruit, Bodmer, Marek, …

Many TFT libraries have pushColors() or similar. e.g. MCUFRIEND_kbv

If you want the icon to scroll out of view, life is more complicated with pushColors() i.e. you have to seek to the correct row in the image and just push the smaller number of pixels in the cut-down width.

David.

Edit. Updated the attachment. Added option for smooth scroll in from left and out at right of screen.

scrollBitmap.zip (5.17 KB)

Thank you very much for your help David.

It was very kind of yours to help me.