Displaying images on ST7789 IPS module interfaced with ESP8266

Output

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 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, 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 5-bit red value followed by 6-bit green value, followed by 5-bit bits 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, 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 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:-

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 ESP8266 library in 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_Settup.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 ESP8266 to the Laptop/PC and again connect it from ESP8266 to a Power bank.
PROGRAMMING

SKETCH 1: Displaying Images on ST7789 IPS module sketch

/*
 *Display images on ST7789 IPS module sketch
 *Made by 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 Comunication with 115200 bits/s Baud Rate
 ipsdisp.begin();             //Initiatise SPI Bus
 ipsdisp.init();              //Initialise ST7789
 ipsdisp.setRotation(2);      //Value 1 means landescape mode; Value 2 means potrait 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 containting 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 containting 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 containting 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:

For exclusive insights, tips and answers, please visit  Wiztaqnia Forum.

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

22 thoughts on “Displaying images on ST7789 IPS module interfaced with ESP8266”

  1. 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!

  2. 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!

  3. 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!

  4. 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!

  5. 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

  6. 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

  11. 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! 

  12. 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.

  13. 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.

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

    My web-site: YES8

  18. 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

  19. 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

  20. 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!

  22. 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!

Leave a Reply

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

IoT based Indoor Air Quality ENS160 Monitor
IoT based Indoor Air Quality ENS160 Monitor
Read More
Testing Scoppy Pico Smart Oscilloscope
Testing Scoppy Pico Smart Oscilloscope with 5 electronic circuits
Read More