Skip to content

Displaying images on ST7789 IPS module interfaced with ESP8266

by Noor Fatimah I.H September 29, 2022

Watching an image being displayed on your own mini e-gallery sounds like a lot of fun! Thankfully, this is now made possible by the fantastic combo of a broad colour spectrum ST7789 IPS module and a sufficient memory size of the ESP8266. Take a look at what each has to offer:-

  • ST7789 is an IPS display module, 2-inch diagonal, 240×320 resolution, with an embedded ST7789V controller, an in-built 3V3 voltage regulator and supports SPI interfacing. ST7789 can be very conveniently used to draw basic geometric shapes and display coloured text or pictures in portrait/landscape mode.
  • ESP8266 has many things to offer. What we are looking for here is its 4 MB Flash, which makes it even more suitable to store data that gets displayed on the ST7789 IPS module, eliminating the need for an external  Micro SD Memory Card.

Explore more about ESP8266: NodeMCU interfaced with RFID Reader

The basic working principle is that an IPS display is capable of displaying a wide range of colours with a full angle view (lossless colour or brightness front screen view/side screen view). Our chosen display, i.e. ST7789 IPS module, comes with 65k colours and default backlighting.

ESP8266 sends 16-bit RGB565 format data via its MOSI pin to ST7789 every 2 clock cycles. This data contains a 5-bit red value, followed by a 6-bit green value, followed by a 5-bit blue value of a single pixel to be displayed. After the successful reception of data, the embedded ST7789V controller of ST7789 refers to its 65k colours look-up table and maps each pixel on the display in order to re-create the desired geometric shape/text/image on the ST7789 IPS module.

Furthermore, the TFT eSPI library, which is Arduino IDE/ESP8266/ST7789V compatible, is utilised in programming to enhance the speed and reduce lag in the display.

Our aim of this DIY E-Project is to display images in portrait mode, followed by a text indicating the type of each image, namely calligraphy, animated and an HD photo on the ST7789 IPS module. Take a look at the images which have been selected to be displayed:-

E-COMPONENTS

Here is a list of all the required electronic components for this DIY E-Project, along with respective purchase links:-

MODEL

E-COMPONENT

PURCHASE LINK

NodeMCU ESP8266

Buy Now 

ST7789 LCD Colour Display Module

Buy Now

USB data cable

Buy Now 

Power bank

Buy Now 

CIRCUIT DIAGRAM
Circuit Diagram for displaying images on ST7789 IPS screen interfaced with ESP8266
Circuit Diagram for displaying images on ST7789 IPS module interfaced with ESP8266
SCHEMATIC DIAGRAM
Schematic Diagram for displaying images on ST7789 IPS screen interfaced with ESP8266
Schematic Diagram for displaying images on ST7789 IPS module interfaced with ESP8266
PROCEDURE

These are some of the step-by-step guidelines to be followed for this DIY E-Project:

  1. Install the latest Arduino IDE.
  2. Install the ESP8266 library in the Arduino IDE.
  3. Download the modified TFT_eSPI library .ZIP file from here →TFT_eSPI (Note: Kindly download the TFT_eSPI library from here itself as its User_Setup.h file has been updated to get assured results as per this DIY E-Project. Else, you can download the TFT_eSPI library .ZIP file from the link https://github.com/maditnerd/st7789_bitmap and make your modifications manually.)
  4. In Arduino IDE, go to Sketch→Include Library→Add .ZIP Library and install the modified TFT_eSPI  library in Arduino IDE.
  5. Make hardware connections as per the above circuit and schematic diagrams.
  6. Connect the ESP8266 to your Laptop/PC via USB data cable. In Arduino IDE, go to Tools and select Board as NodeMCU 1.0 (ESP-12E Module) and COM port accordingly.
  7. Download the folder containing the sketch and images header files from here → Display_images_on_ST7789_IPS_module_sketch . Make sure to save all the image header files in the same folder as your sketch. (Note: kindly download the folder from here itself to get assured results as per this DIY E-Project. Else follow the instructions as mentioned in the link https://www.hackster.io/usini/display-images-on-a-st7789-screen-fbb0d7 .)
  8. Upload the “Displaying Images on ST7789 IPS module sketch” from the programming section below to NodeMCU.
  9. Optionally, after the completion of the program upload, you can plug off the USB data cable connected from the ESP8266 to the Laptop/PC and again connect it from the ESP8266 to a Power bank.
PROGRAMMING

SKETCH 1: Displaying Images on ST7789 IPS module sketch

/*
 *Display images on ST7789 IPS module
 *Made by www.wiztaqnia.com
 *Modified date: 29/09/2022
 *Typical pin layout used:
 * ---------------------------------------------
 * Signal               ST7789 IPS    ESP8266
 *                      Module        Interface
 *                      Pin           Pin
 * ---------------------------------------------
 * VCC(3.3V)            VCC           3V3
 * GND(Ground)          GND           GND
 * SDA(Serial Data)     DIN           D7(MOSI)
 * SLK(Serial Clock)    CLK           D5(SCLK)
 * CS(Chip Select)      CS            D8(CS)
 * DC(Data/Command)     DC            D0
 * RST(Reset)           RST           D1
 * BL(Backlight)        BL            D2
  */

#include <TFT_eSPI.h>
#include "Not_all_heros_wear_capes_lettering.h" //Image 1
#include "Metaverse.h"                          //Image 2
#include "Flower_pot_with_flowers.h"            //Image 3
TFT_eSPI ipsdisp= TFT_eSPI();           

void setup() {
 Serial.begin(115200);        //Initialise UART Communication with 115200 bits/s Baud Rate
 ipsdisp.begin();             //Initialise SPI Bus
 ipsdisp.init();              //Initialise ST7789
 ipsdisp.setRotation(2);      //Value 1 means landscape mode; Value 2 means portrait mode
 ipsdisp.setSwapBytes(true);  //Swap the byte order for pushImage() - corrects endianness
 ipsdisp.fillScreen(TFT_WHITE); 
}

void loop() {
 ipsdisp.pushImage(0,0,240,320,image1);    //ipsdisp.pushImage(x1,y1,x2,y2,array of image 1 containing 16-bit RGB565 data of each pixel) 
 ipsdisp.setCursor(0,295,4);               //ipsdisp.setCurser(x axis,y axis,text font style i.e. 1/2/4/6)
 ipsdisp.setTextColor(TFT_CYAN,TFT_BLACK); //ipsdisp.setTextColor(text color,text background color)
 ipsdisp.println(F("IMG TYP:Calligraphy  "));
 delay(10000);
 ipsdisp.pushImage(0,0,240,320,image2);    //ipsdisp.pushImage(x1,y1,x2,y2,array of image 2 containing 16-bit RGB565 data of each pixel) 
 ipsdisp.setCursor(0, 295,4);              //ipsdisp.setCurser(x axis,y axis,text font style i.e. 1/2/4/6)
 ipsdisp.setTextColor(TFT_CYAN,TFT_BLACK); //ipsdisp.setTextColor(text color,text background color)
 ipsdisp.println(F("IMG TYP:Animated     "));
 delay(10000); 
 ipsdisp.pushImage(0,0,240,320,image3);    //ipsdisp.pushImage(x1,y1,x2,y2,array of image 3 containing 16-bit RGB565 data of each pixel) 
 ipsdisp.setCursor(0,295,4);               //ipsdisp.setCurser(x axis,y axis,text font style i.e. 1/2/4/6)
 ipsdisp.setTextColor(TFT_CYAN,TFT_BLACK); //ipsdisp.setTextColor(text color,text background color)
 ipsdisp.println(F("IMG TYP:HD Photo     "));
 delay(10000);  
}
OUTPUT
video
play-sharp-fill

This post was inspired by https://www.hackster.io/usini/display-images-on-a-st7789-screen-fbb0d7

References:

Noor Fatimah I.H
Latest posts by Noor Fatimah I.H (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments (24)

You actually make it appear really easy together with your
presentation however I to find this topic
to be really something which I believe I would never understand.
It sort of feels too complex and extremely broad for me.
I am looking ahead to your next post, I will attempt to get the hang of
it!

I’m glad that you found this article interesting. You are absolutely right that technology can be overwhelming at times, but when presented with lots of colours and visualizations, it can be much more engaging and fun. I hope that you find the next post more helpful and easier to follow. Thank you for reading and stay tuned for more!

I like the helpful info you supply for your articles.
I will bookmark your weblog and test again here regularly.
I am relatively sure I’ll learn a lot of new stuff right here!
Best of luck for the next!

Thank you for your kind words! I feel more motivated to bring you better article next for enthusiastic readers like yourself. Keep checking back for more updates. Happy discovering!

I don’t know whether it’s just me or if everybody else
experiencing issues with your blog. It appears as if some
of the text in your posts are running off the screen. Can somebody else please provide feedback and let me know if this is happening to them as well?
This may be a problem with my internet browser because I’ve had this
happen previously. Thanks

Feel free to visit my page :: discuss

Hi there! very cool web site! Beautiful! Superb! I will bookmark your site and take the
feeds additionally? I am glad to find numerous helpful information here in the publish, we’d like develop extra techniques
on this regard, thank you for sharing.

my web-site; yy777 online casino

Hi there colleagues, how is everything, and what you wish
for to say about this post, in my view its really remarkable designed for
me.

Here is my blog post – link đăng nhập fun88

I am really inspired with your writing skills and also with the layout for
your blog. Is that this a paid topic or did you customize it your self?
Anyway stay up the nice high quality writing, it is uncommon to see
a great weblog like this one nowadays.

Here is my web-site – zincbet เครดิตฟรี

Hey! This is kind of off topic but I need some advice from
an established blog. Is it very hard to set up your own blog?
I’m not very techincal but I can figure things out pretty quick.
I’m thinking about setting up my own but I’m not sure where to begin. Do you have any tips or suggestions?

With thanks,

my blog post; u31 เครดิตฟรี 58

Thank you for your words of appreciation for my blog! If you are interested in referring any material from Wiztaqnia®, please follow the Content Attribution Guide. Also, consider subscribing to my email newsletter to stay updated on new blog posts.

I appreciate you bringing this matter to my attention, and I apologize for any inconvenience. If you continue to experience issues, feel free to reach out again, and I’ll be happy to assist further! 

Your encouragement means a lot to me. It’s rare to find a web reader like you who recognizes and appreciates genuine effort. The topic is not paid; it’s an clear expression of my interests and expertise. As for customization, yes, I’ve designed the blog to align with my brand and vision.

I can totally relate to you. Starting a blog can feel overwhelming at first. Begin by exploring what you are good at and figuring out your niche. I suggest staying consistent and focusing on building your web presence, catering to the audience within your niche. Once you have the passion, you will learn to carve your own path, regardless of technical skills.

I’m delighted that you found the post remarkable!

Great delivery. Outstanding arguments. Keep up the
amazing work.

Review my web site: เครดิตฟรี gif

Very soon this website will be famous amid all blogging and site-building people, due to it’s fastidious articles

My web-site: YES8

Hi there! This post could not be written any better!
Reading through this post reminds me of my previous room mate!
He always kept talking about this. I will forward this page to him.
Fairly certain he will have a good read. Many thanks for sharing!

Review my web page – which states allow online casino gambling

magnificent put up, very informative. I wonder why the other
specialists of this sector do not realize this. You must continue your writing.
I’m confident, you’ve a great readers’ base already!

Take a look at my web page :: discuss

Hey I am so excited I found your webpage, I really found you by error, while I was searching on Aol for something else, Regardless I am here
now and would just like to say cheers for a incredible
post and a all round exciting blog (I also love the theme/design), I don’t have time to read through it all at
the minute but I have book-marked it and
also added your RSS feeds, so when I have time I will be back to read more, Please
do keep up the awesome job.

Here is my blog; 4 kings online casino

Thank you for your kind words! Your feedback is valuable to me. Don’t forget to check out other popular posts on my website. I’d love to hear your thoughts on those too!

I absolutely love your blog and find a lot of your post’s to be exactly I’m looking for.
Do you offer guest writers to write content for you?

I wouldn’t mind composing a post or elazborating on a few of
the subjects you write related to here. Again, awesome
web log!

Have a look at my website :: https://Chooserightcasino.Widezone.net/

Thankyou for you interest in my blog. Regarding guest writing, I’m open to it. Please reach out with your ideas or topics you’d like to write about. I’d love to collaborate!

Hi are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any coding expertise to make your own blog? Any help would be really appreciated!

Hello! I use WordPress.org for my blog, which gives me great customization options but requires purchasing a domain and hosting separately, along with some coding knowledge. If coding isn’t your thing, consider WordPress.com; it’s a managed service that handles hosting and maintenance, though it offers fewer features. Let me know if you have any questions. Happy blogging!

🍪⚙️