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

Chintya Wijaya

6 min readFeb 28, 2021

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

Parts and components

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

Schema

Or: (LCD — ESP32)

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

I followed this schema from randomnerdtutorials.com like this:

Installing the LiquidCrystal_I2C library

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.

Finding the I2C address

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);          
}

Experience

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.

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

Simple sketch example to display “Hello World”

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.

Code Explained

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

Scrolling Message

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.

scrollText Explained

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:

Final say

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!