#3 — The ESP32 with I2C LCD
Display is on the move, baby.
I tell you what, these projects are getting more and more exciting every week. Today, I’m gonna show you how to “mess about” with the LCD screen — backpacked with an I2C module.
LCD with I2C Module
Now you may wonder: why we need the I2C module instead of just using the LCD on its own.
With the I2C module, the wiring becomes really simple. A “regular” LCD has 16 pins and that means we need 16 jumper wires to connect the LCD to the ESP32 board. Serial communication using I2C simplifies this to 4 jumper wires: 1 for ground, 1 for the power source (VCC), 1 for data transfer between master and slave (SDA), and 1 for carrying the clock signal. Additionally, it comes with a built-in potentiometer with which we can adjust the contrast between the background and the characters on the LCD. So we don’t have to buy a separate potentiometer (even though potentiometers are cheap lol)
I’ll be showing 3 different text types that we can display on the LCD: static texts, scrolling texts, and character texts.
1. The Ingredients
I’ll be using my laptop, as per usual, my 38 pin ESP32 board, a breadboard, a MicroUSB to USB cable, a few male-to-female jumper wires, and a 16x2 I2C LCD.
2. Wiring it out
It’s time to wire the ESP32 to the LCD. As the LCD uses I2C module, the wiring is pretty much the same with how I wire the BMP180 sensor (read here). Except now, I’ll be using the ESP32 VIN pin that supplies a 5V power to the LCD. Be careful with the wiring, don’t forget to always check the pinout guide (see the 38 pins ESP32 pinout guide here) and double-check before plugging any power source!
3. Installing the LiquidCrystal_I2C Library
Before coding, I need to install the LiquidCrystal_I2C Library. I’m using the download link from the randomnerdtutorials.com website and put the unzipped folder to the Arduino IDE installation libraries folder. Restart the IDE and it’s good!
4. Getting the LCD address
At this step, I’m not displaying any text to the LCD, but I’m trying to get the LCD address. The address is 8 bits long and written in hexadecimal form. The code to get the address via the serial monitor is as follows:
I plug in the ESP32 board into my computer and uploaded the code. Then open the serial monitor at 115200 baud rate to get the result.
I get my LCD address at 0x3F. This is the address that I’ll be using in my code.
5. Displaying static text
Now, it’s time to display some texts on the LCD. I copied the code from randomnerdtutorials.com:
Basically, the code select where we want the texts to be displayed and then sends a message to the display. The code will display the first message in the first row of the display for 1 second and then display the second message in the display for another second. The first and second messages are both “Hello, World!”. Upload the code to the board (and be patient with uploading, as usual) and then you’ll see the texts on the display.
While compiling, there might be a warning displayed on the IDE. If you happen to encounter the same warning, just ignore it.
6. Displaying scrolling text
Next, I’ll show you how to display scrolling text. With scrolling text, we can display messages longer than 16 characters. The randomnerdtutorials.com website provides a neat code with a function to scroll text, so I’ll be using that.
It will display a static message in the first row and a scrolling message longer than 16 characters in the second row. I displayed an infamous dad joke that roughly translates to: “A delicious sandal” “The answer is Terasi (shrimp paste) sandal” (Did you get it? The sandal vs sambal pun??? 🤣🤣)
7. Displaying character text
To end this project, let’s display a character text. That is any kind of character we can make using the 5x8 tiny pixels in each block of the display. I’m heading to this website to make a heart character and copied the output code.
Rename the byte variable “customChar” into something else (in this case, I rename it as “heart”).
Then, I’ll create the code to display this heart at the first block of the display (that is, setting the cursor of the LCD to 0,0). The code is as follows:
And look at that little heart! So cute :)
