JayCar Arduino 2.8″ UNO Module

We’ve solved a tough little challenge. You’ve bought a new touch screen from Jaycar and it doesn’t work, or you don’t know what is going on?

Well, I struggled and couldn’t get the screen working on this device either, using a small Arduino Starter Kit from JayCar, and the 2.8″ UNO Module XC4630. 240×320 Touchscreen LCD.

This video helped point us in the right direction, but it still didn’t explain everything.

If you’ve bought the starter kit, you’ll know that the documentation is terrible for beginners. There’s so much implied knowledge. As for the screen, the Jaycar device documentation pointed to a Github repository with the correct code, however the definitions needed to be changed for this specific problem, and therefore weren’t straight forward either. See these instructions.

On a side note, Jaycar also have a GitHub repository for their Duinotech Starter kit as well.

So, the biggest question of what we need to do to get this screen working is to install the MCUFriend Library.

We then need to edit some of the files it downloaded. If you’re on a Mac, then the library was probably installed to “~/Documents/Arduino/libraries/MCUFRIEND_kbv/”.
You need to open the “MCUFRIEND_kbv.cpp” file and modify the code.

Make sure that the following (at a minimum) is uncommented:

#define SUPPORT_8347D //HX8347-D, HX8347-G, HX8347-I, HX8367-A +520 bytes, 0.27s

I’ve also been working on some sketches (code) where original “GRAPHICSTEXT_KBV” code didn’t work is because there is only 32k of memory available on the device and all of the libraries take up space that is required. After removing excess header definitions, and various extra code the program ran.

According to the documentation for the TFT screen, the 8230 is required, but then the device reports as 8347D, so both are included.

On doing test, the serial console states:

Serial took 0ms to start 
ID = 0x9595

In the code, 0x9595 is HX8347-I and so we need to enable: 
"#define SUPPORT_8347D"

To get the TFT Screen working in the button demo program, you must first run the calibration program.

After playing with this set up, I discovered that the standard Arduino UNO wasn’t going to be good enough, as it only has 32k of memory.

For me, I need to have a lot more memory, so I went and got an Arduino (Elegoo) MEGA (clone device).

This did solve my issue for getting a larger memory (256k), but upon using the MEGA with my screen, the SD card reader basically didn’t work.

I searched all over the internet and tried multiple things, until I came across this website.

In short, to the the Jaycar Duinotech Arduino compatible 2.5″ LCD Touch Screen Display working on a mac, you need to do the following things…

Go to the adafruit github page and download the MASTER SD package zip file.

When the Arduino app is installed to the default Application folder, you need to ‘Right click’ on the Arduino icon and choose “Show Package Contents”.

If you have version 1 of the Arduino app: Navigate to /Applications/Arduino.app/Contents/Java/libraries/

Arduino Version 2, the Libraries live in difference places:
On a Mac, it live here: /Users/{Username}/Library/Arduino15/libraries/SD/
(As per this document for locations)

You now need to rename that SD folder to SD.original, and move it out of the libraries folder.

With that SD-MASTER.zip file that you just downloaded, extract it to the libraries folder as shown above.

As per this site mentioned, you will now need to do 3 edits:

Comment out #define USE_SPI_LIB from both Sd2Card.h and Sd2Card.cpp. (reference here).

For SD/utility/Sd2card.cpp

Comment out #define USE_SPI_LIB

For SD/utility/Sd2card.h

Comment out #define USE_SPI_LIB 
Change 
#define MEGA_SOFT_SPI 0 
to
#define MEGA_SOFT_SPI 1

Now, when you try and access your micro SD card, you just have to change the SD SS to 10.

On this Jaycar TFT board it’s labelled as:
SD_SS
SD_DI
SD_DO
SD_SCK

Some other Common names for these as well are:
SD_SS, SD_CS, SS_PIN
SD_DI
SD_DO
SD_SCK

In short, if you just plug in the Jaycar board, just change your CS value to 10, (instead of 53 as per many MEGA projects may call for).

If you have a few small BMP files on your SD card (320×240) and run this code (sketch as per the example called “showBMP_kbv_Uno”), it should cycle the images:

// MCUFRIEND UNO shields have microSD on pins 10, 11, 12, 13
// The official <SD.h> library only works on the hardware SPI pins
// e.g. 11, 12, 13 on a Uno  (or STM32 Nucleo)
//
// copy all your BMP files to the root directory on the microSD with your PC
// (or another directory)

#include <SPI.h>            // f.k. for Arduino-1.5.2
//#define USE_SDFAT
#include <SD.h>             // Use the official SD library on hardware pins

#include <Adafruit_GFX.h>   // Hardware-specific library
#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;

#if defined(ESP32)
#define SD_CS     10 // CHANGED FOR THE JAYCAR TFT SCREEN
#else
#define SD_CS     10 // CHANGED FOR THE JAYCAR TFT SCREEN
#endif
#define NAMEMATCH ""        // "" matches any name
//#define NAMEMATCH "tiger"   // *tiger*.bmp
#define PALETTEDEPTH   0     // do not support Palette modes
//#define PALETTEDEPTH   8     // support 256-colour Palette

char namebuf[32] = "/";   //BMP files in root directory
//char namebuf[32] = "/bitmaps/";  //BMP directory e.g. files in /bitmaps/*.bmp

File root;
int pathlen;

void setup()
{
    uint16_t ID;
    Serial.begin(9600);
    Serial.print("Show BMP files on TFT with ID:0x");
    ID = tft.readID();
    Serial.println(ID, HEX);
    if (ID == 0x0D3D3) ID = 0x9481;
    tft.begin(ID);
    tft.fillScreen(0x001F);
    tft.setTextColor(0xFFFF, 0x0000);
    bool good = SD.begin(SD_CS);
    if (!good) {
        Serial.print(F("cannot start SD"));
        while (1);
    }
    root = SD.open(namebuf);
    pathlen = strlen(namebuf);
}

void loop()
{
    char *nm = namebuf + pathlen;
    File f = root.openNextFile();
    uint8_t ret;
    uint32_t start;
    if (f != NULL) {
#ifdef USE_SDFAT
        f.getName(nm, 32 - pathlen);
#else
        strcpy(nm, (char *)f.name());
#endif
        f.close();
        strlwr(nm);
        if (strstr(nm, ".bmp") != NULL && strstr(nm, NAMEMATCH) != NULL) {
            Serial.print(namebuf);
            Serial.print(F(" - "));
            tft.fillScreen(0);
            start = millis();
            ret = showBMP(namebuf, 5, 5);
            switch (ret) {
                case 0:
                    Serial.print(millis() - start);
                    Serial.println(F("ms"));
                    delay(5000);
                    break;
                case 1:
                    Serial.println(F("bad position"));
                    break;
                case 2:
                    Serial.println(F("bad BMP ID"));
                    break;
                case 3:
                    Serial.println(F("wrong number of planes"));
                    break;
                case 4:
                    Serial.println(F("unsupported BMP format"));
                    break;
                case 5:
                    Serial.println(F("unsupported palette"));
                    break;
                default:
                    Serial.println(F("unknown"));
                    break;
            }
        }
    }
    else root.rewindDirectory();
}

#define BMPIMAGEOFFSET 54

#define BUFFPIXEL      20

uint16_t read16(File& f) {
    uint16_t result;         // read little-endian
    f.read((uint8_t*)&result, sizeof(result));
    return result;
}

uint32_t read32(File& f) {
    uint32_t result;
    f.read((uint8_t*)&result, sizeof(result));
    return result;
}

uint8_t showBMP(char *nm, int x, int y)
{
    File bmpFile;
    int bmpWidth, bmpHeight;    // W+H in pixels
    uint8_t bmpDepth;           // Bit depth (currently must be 24, 16, 8, 4, 1)
    uint32_t bmpImageoffset;    // Start of image data in file
    uint32_t rowSize;           // Not always = bmpWidth; may have padding
    uint8_t sdbuffer[3 * BUFFPIXEL];    // pixel in buffer (R+G+B per pixel)
    uint16_t lcdbuffer[(1 << PALETTEDEPTH) + BUFFPIXEL], *palette = NULL;
    uint8_t bitmask, bitshift;
    boolean flip = true;        // BMP is stored bottom-to-top
    int w, h, row, col, lcdbufsiz = (1 << PALETTEDEPTH) + BUFFPIXEL, buffidx;
    uint32_t pos;               // seek position
    boolean is565 = false;      //

    uint16_t bmpID;
    uint16_t n;                 // blocks read
    uint8_t ret;

    if ((x >= tft.width()) || (y >= tft.height()))
        return 1;               // off screen

    bmpFile = SD.open(nm);      // Parse BMP header
    bmpID = read16(bmpFile);    // BMP signature
    (void) read32(bmpFile);     // Read & ignore file size
    (void) read32(bmpFile);     // Read & ignore creator bytes
    bmpImageoffset = read32(bmpFile);       // Start of image data
    (void) read32(bmpFile);     // Read & ignore DIB header size
    bmpWidth = read32(bmpFile);
    bmpHeight = read32(bmpFile);
    n = read16(bmpFile);        // # planes -- must be '1'
    bmpDepth = read16(bmpFile); // bits per pixel
    pos = read32(bmpFile);      // format
    if (bmpID != 0x4D42) ret = 2; // bad ID
    else if (n != 1) ret = 3;   // too many planes
    else if (pos != 0 && pos != 3) ret = 4; // format: 0 = uncompressed, 3 = 565
    else if (bmpDepth < 16 && bmpDepth > PALETTEDEPTH) ret = 5; // palette 
    else {
        bool first = true;
        is565 = (pos == 3);               // ?already in 16-bit format
        // BMP rows are padded (if needed) to 4-byte boundary
        rowSize = (bmpWidth * bmpDepth / 8 + 3) & ~3;
        if (bmpHeight < 0) {              // If negative, image is in top-down order.
            bmpHeight = -bmpHeight;
            flip = false;
        }

        w = bmpWidth;
        h = bmpHeight;
        if ((x + w) >= tft.width())       // Crop area to be loaded
            w = tft.width() - x;
        if ((y + h) >= tft.height())      //
            h = tft.height() - y;

        if (bmpDepth <= PALETTEDEPTH) {   // these modes have separate palette
            //bmpFile.seek(BMPIMAGEOFFSET); //palette is always @ 54
            bmpFile.seek(bmpImageoffset - (4<<bmpDepth)); //54 for regular, diff for colorsimportant
            bitmask = 0xFF;
            if (bmpDepth < 8)
                bitmask >>= bmpDepth;
            bitshift = 8 - bmpDepth;
            n = 1 << bmpDepth;
            lcdbufsiz -= n;
            palette = lcdbuffer + lcdbufsiz;
            for (col = 0; col < n; col++) {
                pos = read32(bmpFile);    //map palette to 5-6-5
                palette[col] = ((pos & 0x0000F8) >> 3) | ((pos & 0x00FC00) >> 5) | ((pos & 0xF80000) >> 8);
            }
        }

        // Set TFT address window to clipped image bounds
        tft.setAddrWindow(x, y, x + w - 1, y + h - 1);
        for (row = 0; row < h; row++) { // For each scanline...
            // Seek to start of scan line.  It might seem labor-
            // intensive to be doing this on every line, but this
            // method covers a lot of gritty details like cropping
            // and scanline padding.  Also, the seek only takes
            // place if the file position actually needs to change
            // (avoids a lot of cluster math in SD library).
            uint8_t r, g, b, *sdptr;
            int lcdidx, lcdleft;
            if (flip)   // Bitmap is stored bottom-to-top order (normal BMP)
                pos = bmpImageoffset + (bmpHeight - 1 - row) * rowSize;
            else        // Bitmap is stored top-to-bottom
                pos = bmpImageoffset + row * rowSize;
            if (bmpFile.position() != pos) { // Need seek?
                bmpFile.seek(pos);
                buffidx = sizeof(sdbuffer); // Force buffer reload
            }

            for (col = 0; col < w; ) {  //pixels in row
                lcdleft = w - col;
                if (lcdleft > lcdbufsiz) lcdleft = lcdbufsiz;
                for (lcdidx = 0; lcdidx < lcdleft; lcdidx++) { // buffer at a time
                    uint16_t color;
                    // Time to read more pixel data?
                    if (buffidx >= sizeof(sdbuffer)) { // Indeed
                        bmpFile.read(sdbuffer, sizeof(sdbuffer));
                        buffidx = 0; // Set index to beginning
                        r = 0;
                    }
                    switch (bmpDepth) {          // Convert pixel from BMP to TFT format
                        case 32:
                        case 24:
                            b = sdbuffer[buffidx++];
                            g = sdbuffer[buffidx++];
                            r = sdbuffer[buffidx++];
                            if (bmpDepth == 32) buffidx++; //ignore ALPHA
                            color = tft.color565(r, g, b);
                            break;
                        case 16:
                            b = sdbuffer[buffidx++];
                            r = sdbuffer[buffidx++];
                            if (is565)
                                color = (r << 8) | (b);
                            else
                                color = (r << 9) | ((b & 0xE0) << 1) | (b & 0x1F);
                            break;
                        case 1:
                        case 4:
                        case 8:
                            if (r == 0)
                                b = sdbuffer[buffidx++], r = 8;
                            color = palette[(b >> bitshift) & bitmask];
                            r -= bmpDepth;
                            b <<= bmpDepth;
                            break;
                    }
                    lcdbuffer[lcdidx] = color;

                }
                tft.pushColors(lcdbuffer, lcdidx, first);
                first = false;
                col += lcdidx;
            }           // end cols
        }               // end rows
        tft.setAddrWindow(0, 0, tft.width() - 1, tft.height() - 1); //restore full screen
        ret = 0;        // good render
    }
    bmpFile.close();
    return (ret);
}