ESP32-C3 Super Mini Wireless Display w/ TFT ST7789 2.0" LCD

Overview

I've started to get really into drawing, and I wanted a fun way to share my pictures that I make with my friends. I decided to code a wireless display that displays any image I upload to a web server onto a TFT display. The cool thing about this is that you can size up the display at anytime as well! My display is 240x320px, but this project can be easily scaled up to your needs.

Step 1: Technology Stack and Flow

I really wanted to get a taste of setting up a project using Google Cloud Platform (GCP), as well as get a bit more into web development. I split up the project into 3 components:

1. A client-side website users can use to upload their image.

2. A server-side webapp that stores 1 image, so that it can post to either the website or the hardware.

3. The ESP32 and TFT display for displaying the image.

All three of these components work together to create the wireless display. The flowchart I used is below!

The server makes use of Google Cloud Storage (GCS) buckets to store the image. It receives an image from the client, and stores it! Whenever the client requests an image (when the website refreshes) the server sends it as a PNG. The server also processes the image from a PNG to a BMP so that the hardware can more easily read the file. So, when the ESP32 requests the image the server sends it as a BMP.

Step 2: The Client

The client is super simple and look terrible as well! The only option you have is to upload PNG file to the website so that the image is stored in the server.

When a file is uploaded, the client sends a POST to the server with the image in the metadata. The server receives it and updates the changes on GCP.

Step 3: The Server

This was a bit more challenging to setup just because I decided to use GCP. I first tested just saving the file to my computer as a PNG, which worked really well! After a bunch of thinking, I decided to make the project into a docker container and run it on Google Cloud Run. It then runs 24/7, and really only has 3 commands.

1. Receive upload from client, update photo on GCS bucket

2. Receive request for PNG image, sends PNG out

3. Receive request for BMP image, sends BMP out

I used Jimp to process the PNG to BMP, and a pretty standard Express server to handle all requests. You can view my code on Github!

Step 4: The Display Hardware

I love hardware, but working with BMPs and bitmaps and server-side stuff all at the same time was really difficult as well for me. Fortunately, I figured a lot of stuff out so if you ever run into these issues you don't have to worry about it!

What I learned about the Adafruit TFT display code from working with it is that it takes in a RGB565 file, not a standard 24-bit BMP file. A usual 24-bit BMP file has 8 bits are reserved for R, G and B each, but for 16bit, it's 5 bits for red, 6 bits for green, and 5 bits for blue (hence RGB565). That means there is a compression between a 24-bit BMP file to a 16-bit BMP file, and everypixel needs to be converted.

I also ran into hardware limitations. The ESP32-C3 only has 4MB of flash memory, and 400kB of SRAM. With WiFi running, I was running very low on both to also display an image. I also kept running into issues with the HTTPClient, as when I tried to do functions such as http.getString() to read the BMP file, nothing would show up!

To solve these issues, I buffered per line on the display, so every 240 pixels. I would read from the server 720bytes (240 pixels, times 3 for the 3-bytes of RGB data), convert each pixel from 24-bit RGB to 16-bit RGB and store it in a uint16_t array that's can store 240 elements. Then, I would display the singular line on y = 0, and repeat for 320 lines!

I also had to store skip the header data for the BMP, so we always skipped the first 54 bytes of the data we received from the server.

The code is also linked, so if you want to take a look, you can!

Step 5: Soldering

I also soldered, but that wasn't too interesting. Make sure to connect every pin, and I recommend putting the backlight on a pin with a DAC so you can send it PWM signals to adjust brightness.

I added a photoresistor as well so that my display could have adaptive brightness, but I think the photoresistor I have sucks because it keeps jumping numbers randomly and was very unreliable. I decided to just not use it in the end.

Step 6: Quick 3D Printed Stand

I quickly modelled a stand on Fusion 360 that's light and looks cute! It just holds the ESP32 in place and the display.

I always have the issue of making the walls like 0.4mm thick and it looking good on CAD, but when I actually put it on Cura it looks absolutely too thin. Make sure your walls are thick enough!

Step 7: Conclusion

This was a really hard project for me. There was a lot of trial and error on all sides software, hardware, and cloud software. I would read documentation, try to replicate it on my side, it would completely fail, and I would have to find new ways to do things that works for me, or find my error and fix it. It took over a week to finish this project, which is longer than I would like, but I'm glad I have what it is now!

I summarized it and made it seem really simple in this guide, but I had lots of frustration dealing with networking, the display, and GCP. I'm quite proud of my work because of that! Please leave an questions or any improvements you think you see in this project :).