Introduction: ESP32 Touch Camera

By

This is an idea about ESP32 and TFT screen, we can combine them to realize the function of a drawing board let us draw, and plug in the SD card to realize the function of digital photo frame to display beautiful photos. Now, we add a camera on this basis, and realize a simple digital camera, which can take pictures through the camera and save it in the SD card.

we integrate all modules and interfaces on the board, and achieve the above three functions by downloading programs to the board.

This board has many features:

  • Integrated ESP32 2.4G WiFi and Bluetooth.
  • Micro SD card slot on board.
  • OV2640 is a 1/4 inch CMOS UXGA (1632*1232) image sensor manufactured by OmniVision.
  • LCD 3.5 inch Amorphous-TFT-LCD (Thin Film Transistor Liquid Crystal Display)

Supplies

hardware:

  • ESP32 Touch Camera

（ESP32 3.5" TFT Touch(Resistive) with Camera：https://www.makerfabs.com/esp32-3.5-inch-tft-touch...

ESP32 3.5" TFT Touch(Capacitive) with Camera：https://www.makerfabs.com/esp32-3.5-inch-tft-touch-capacitive-with-camera.html ）

  • Micro SD card
  • Type-C USB cable

software:

  • Arduino IDE

Step 1: Connection

This is a complete circuit board, only need to plug in the SD card and power supply cable to use.

Step 2: Software Setup

Step 3: Code

We did some experiments with both screens and wrote two kinds of codes.Modify the code based on the touch screen that use the resistive screen to remove the NS2009 comment and the capacitive screen to remove the FT6236 comment before loading the code.

//Choice your touch IC
#define ESP32_SDA 26
#define ESP32_SCL 27

//#define NS2009_TOUCH
#define FT6236_TOUCH
  • Drawing

You can get the code from here:

https://github.com/Makerfabs/Project_Touch-Screen-Camera/tree/master/touch_draw_v2

1.Modify the button color

    SPI_ON_TFT;
    tft.begin();
    tft.fillScreen(ILI9488_BLACK);
    tft.fillRect(0, 0, 80, 40, ILI9488_RED);
    tft.fillRect(80, 0, 80, 40, ILI9488_GREEN);
    tft.fillRect(160, 0, 80, 40, ILI9488_BLUE);
    tft.fillRect(240, 0, 80, 40, ILI9488_YELLOW);
    SPI_OFF_TFT;

2.Modify the pen color

if (0 < pos[0] && pos[0] < 80)
        {
            draw_color = ILI9488_RED;
        }
        else if (80 < pos[0] && pos[0] < 160)
        {
            draw_color = ILI9488_GREEN;
        }

        else if (160 < pos[0] && pos[0] < 240)
        {
            draw_color = ILI9488_BLUE;
        }
        else if (240 < pos[0] && pos[0] < 320)
        {
            draw_color = ILI9488_YELLOW;
        }
  • Digital photo frame

You can get the code from here:

https://github.com/Makerfabs/Project_Touch-Screen-Camra/tree/master/SD2TFT

1.Fill in the picture name in the SD card

String img_file[5] =
    {
        "/1.bmp",
        "/2.bmp",
        "/3.bmp",
        "/4.bmp",
        "/5.bmp"};

2.Display image

int print_img(fs::FS &fs, String filename)<br>
  • Take photos

You can get the code from here:

https://github.com/Makerfabs/Project_Touch-Screen-Camra/tree/master/Camera_v2

1.Data transmission

TFT<--SPI--> ESP32 
SD<--SPI--> ESP32 
CAMERA--> ESP32--SPI-->SD

2.Data transcoding

    void *ptrVal = NULL;
    ptrVal = heap_caps_malloc(ARRAY_LENGTH, MALLOC_CAP_SPIRAM);
    uint8_t *rgb = (uint8_t *)ptrVal;
    fmt2rgb888(fb->buf, fb->len, PIXFORMAT_RGB565, rgb);
    save_image(SD, rgb);
    show_log(0);
    heap_caps_free(ptrVal);
    rgb = NULL;

Step 4: Show