ESP32 Project #5: Display (Hello World ?!)

Hi! I’m back. On this project, I’ll show you how to display Hello World on I2C LCD. Let’s start!

  • 16×2 I2C LCD display
  • ESP32 Board
  • Breadboard
  • Jumper wires (I used male to male and female to male)
  • USB cable
randomnerdtutorials

Or: (LCD — ESP32)

  • GND — GND
  • VCC — VIN
  • SDA — GPIO 21
  • SCL — GPIO 22

I followed this schema from randomnerdtutorials.com like this:

Click here to install the library. Then, unzip the zip file and rename the folder LiquidCrystal_I2C-master to LiquidCrystal_I2C. Move the folder to the Arduino IDE installation libraries folder. Lastly, re-open the Arduino IDE.

After installing the library, verify and upload this sketch to find the I2C address.

/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/

#include <Wire.h>

void setup() {
Wire.begin();
Serial.begin(115200);
Serial.println("\nI2C Scanner");
}

void loop() {
byte error, address;
int nDevices;
Serial.println("Scanning...");
nDevices = 0;
for(address = 1; address < 127; address++ ) {
Wire.beginTransmission(address);
error = Wire.endTransmission();
if (error == 0) {
Serial.print("I2C device found at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
nDevices++;
}
else if (error==4) {
Serial.print("Unknow error at address 0x");
if (address<16) {
Serial.print("0");
}
Serial.println(address,HEX);
}
}
if (nDevices == 0) {
Serial.println("No I2C devices found\n");
}
else {
Serial.println("done\n");
}
delay(5000);
}

I found some difficulties wiring the ESP32 and LCD. It was hard to put the ESP32 on the breadboard. I tried to connect it to my laptop then this appeared.

Unknown USB Device needs more power than the port can supply

What? I’ll try to fix that by changing the wire to female to female and it worked!

I realized that earlier I put the GND on the other side. I fixed the wiring and opened the serial monitor.

I2C found!

Open the serial monitor at 115200 baud and I found the address 0x27.

I put the 0x27 in LiquidCrystal_I2C lcd(0x27, …). This sketch is from the unzipped folder. I verified and uploaded this sketch and …

/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/

#include <LiquidCrystal_I2C.h>

// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;

// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);

void setup(){
// initialize LCD
lcd.init();
// turn on LCD backlight
lcd.backlight();
}

void loop(){
// set cursor to first column, first row
lcd.setCursor(0, 0);
// print message
lcd.print("Hello, World!");
delay(1000);
// clears the display to print new message
lcd.clear();
// set cursor to first column, second row
lcd.setCursor(0,1);
lcd.print("Hello, World!");
delay(1000);
lcd.clear();
}

It was so dark that I couldn’t even see the “Hello World”. I read somewhere that I should adjust the contrast so it can be seen. And, it really worked!

It was a bit dark but I could see the “Hello World” on the first and second row by turning on my flashlight.

#include <LiquidCrystal_I2C.h>

// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;

First, include the downloaded library: LiquidCrystal_I2C. Then, set the LCD columns and rows. I used the 16x2 I2C LCD so I put the number on the variable lcdColumns and lcdRows.

LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);

Display the address found (mine at 0x27), number of columns and rows.

void setup(){
// initialize LCD
lcd.init();
// turn on LCD backlight
lcd.backlight();
}

Turn on the LCD by lcd.init() and turn on the LCD backlight to see the characters.

void loop(){
// set cursor to first column, first row
lcd.setCursor(0, 0);
// print message
lcd.print("Hello, World!");
delay(1000);
// clears the display to print new message
lcd.clear();
// set cursor to first column, second row
lcd.setCursor(0,1);
lcd.print("Hello, World!");
delay(1000);
lcd.clear();
}

The columns and rows on this LCD start at 0, so first set cursor to the first column and row. Then, lcd.print(message) will print the message on the LCD. The message will stay for 1 second by adding the delay(1000). After that, lcd.clear() will clear the display. Then, I set the cursor to the first column and second row, so the message will be displayed on the second row. It will also stay for 1 second then disappear. Repeat.

How to display the message longer than 16 characters? Scrolling message.

/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <LiquidCrystal_I2C.h>// set the LCD number of columns and rows
int lcdColumns = 16;
int lcdRows = 2;
// set LCD address, number of columns and rows
// if you don't know your display address, run an I2C scanner sketch
LiquidCrystal_I2C lcd(0x27, lcdColumns, lcdRows);
String messageStatic = "Hello World";
String messageToScroll = "Welcome to ESP32 Project #5 by Chintya :)";
// Function to scroll text
// The function acepts the following arguments:
// row: row number where the text will be displayed
// message: message to scroll
// delayTime: delay between each character shifting
// lcdColumns: number of columns of your LCD
void scrollText(int row, String message, int delayTime, int lcdColumns) {
for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}
message = message + " ";
for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}
}
void setup(){
// initialize LCD
lcd.init();
// turn on LCD backlight
lcd.backlight();
}
void loop(){
// set cursor to first column, first row
lcd.setCursor(0, 0);
// print static message
lcd.print(messageStatic);
// print scrolling message
scrollText(1, messageToScroll, 150, lcdColumns);
}

The difference from the static message is on the procedure scrollText.

void scrollText(int row, String message, int delayTime, int lcdColumns) {
for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}
message = message + " ";
for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}
}

The parameters are row, message, delayTime per character, and column. Use for-loop from the first to last column.

for (int i=0; i < lcdColumns; i++) {
message = " " + message;
}

This will add 16 space characters in the beginning of the message.

for (int pos = 0; pos < message.length(); pos++) {
lcd.setCursor(0, row);
lcd.print(message.substring(pos, pos + lcdColumns));
delay(delayTime);
}

Set cursor to the first column and the row input. Then print the substring from the first character to the last character of the message. (with spaces added)

message.substring(pos, pos + lcdColumns);

This will display the substring from the pos-th character until the (pos + lcdColumns)-th character. lcdColumns = 16, it will be the (pos + 16)-th character. The scrolling message will be like this:

Welcome to ESP32 Project#5 by Chintya

I followed the tutorial from randomnerdtutorials but still had problems because I didn’t follow the exact wiring. I changed the wiring and the jumper wires to female to female and finally it worked. I learned about the I2C LCD especially the code (static and scolling message).

Thanks for reading and stay tune for the next projects!

Learner || Product and UX enthusiast