Project 5 : Display
Hello everyone!
Welcome to the fifth chapter of me trying to learn how to use ESP32. In this part, I’ll show you how I experimented with SSD1306 OLED display and PWM signals to dim LED lights.
In this part, I’ll show you how I experimented with OLED display.
Necessary components
ESP32+Breadboard
In this project I used ESP32 DevKit V1, but you can use any kind of ESP32. It’s better to have your ESP32 secured on a breadboard to make the arrangement easier to do.
Micro USB Cable
This cable will be used as a connector between our device and the ESP32.
Laptop/PC
Use the device of your choice, in this project I used my laptop which is Asus TUF Gaming A15. Make sure the device’s already set up. If it’s not yet been set up, click here for a tutorial on setting up your device.
Male-to-Male Jumper cable (4 pcs)
In this project I used the male-to-male jumper cable because I secured the ESP32 on the breadboard. But you can use female-to-female jumper cable to connect the sensor directly to the ESP32. If so, you won’t need the breadboard.
OLED Display
Here I’m using a 0.96 inch Yellow Blue OLED (128 x 64) with 4 pins and I2C communication protocol.
Arrangements on the breadboard
Here, I followed this schematic below from randomnerdtutorials.com. Then I connected my micro USB cable to the ESP32, and here is my final arrangement on the breadboard.
Code the program
After the arrangements in the circuit is completed, open the Arduino IDE.
Install the SSD1306 OLED module on the Arduino IDE by going to Sketch > Include Library > Manage Libraries…
A new window will pop up, then search Adafruit SSD1306 then install the module.
Then search Adafruit GFX Library, scroll to the bottom, then install the module. Then click close on the bottom of the window.
After the setup is done, go to File > Examples > Adafruit SSD1306 > ssd1306_128x64_i2c
A new window will pop up, then go to the part where it defines the OLED_RESET and SCREEN_ADDRESS. Change the OLED_RESET to -1 and the SCREEN_ADDRESS to 0x3C as shown in the picture below.
Compile the code and wait until it says ‘Done compiling’.
Before uploading the code, don’t forget to make sure that the ESP32 is connected. Also make sure the Arduino IDE is set on the right board and port on the Tools menu.
Then click on the right arrow icon next to the tick icon to upload the code to the ESP32 and wait until it’s done uploading.
Now the result should show as the video attached below.
I tried making a different variation by utilizing the font library and making certain part of the text scroll by utilizing the OLED memory map. Here’s the code:
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSansBoldOblique9pt7b.h>
#include <Fonts/FreeSans9pt7b.h>#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);void setup() {
Serial.begin(115200);if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
}void loop() {
display.clearDisplay();
display.setTextColor(WHITE);
display.setCursor(0,15);
display.setFont(&FreeSansBoldOblique9pt7b);
display.setTextSize(1);
display.println("DONE");
display.setFont(&FreeSans9pt7b);
display.setTextSize(1);
display.println("is better than");
display.setFont(&FreeSansBoldOblique9pt7b);
display.setTextSize(1);
display.println("PERFECT");
display.display();
delay(100);
display.startscrollright(0x00, 0x02); //making page 0-2 scroll right
delay(4600);
display.startscrollleft(0x05, 0x07); //making page 5-7 scroll left
delay(6400);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x02); //making page 0-2 scroll left
delay(4600);
display.startscrollright(0x05, 0x07); //making page 5-7 scroll right
delay(6400);
display.stopscroll();
delay(1000);
}
And the result :
In this part, I’m going to show you how I generated PWM signals to dim LED lights using the LED PWM controller of ESP32.
Necessary Components
ESP32 + breadboard
4 LED lights
4 330 Ohms resistors
5 male-to-male jumper cables
Micro USB cable
Laptop/PC with Arduino IDE
The arrangement made on the breadboard
Here I used GPIO19 for blue LED, GPIO 21 for green LED, GPIO 22 for red LED, and GPIO 23 for yellow LED. I connected the negative leg of the LED light to a resistor that connects to the negative side of the board. The positive leg of the LED light then connected to the GPIO pins with a jumper cable. The last jumper cable was used to connect the GND pin to the negative side of the breadboard. Then finally connect the ESP32 tp the device used with a micro USB cable. Here is my final circuit without the micro USB cable attached.
Code the program
After the arrangements in the circuit is completed, open the Arduino IDE. Make a new file and save the file where ever you like it.
This is the code I used :
// the number of the LED pin
const int blue = 19;
const int green = 21;
const int red = 22;
const int yellow = 23;// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int ledChannel2 = 1;
const int resolution = 8;
void setup(){
// configure LED PWM functionalitites
ledcSetup(ledChannel, freq, resolution);
// attach the channel to the GPIO to be controlled
ledcAttachPin(blue, ledChannel);
ledcAttachPin(green, ledChannel2);
ledcAttachPin(red, ledChannel);
ledcAttachPin(yellow, ledChannel2);
}
void loop(){
// increase the LED brightness
for(int dutyCycle = 0; dutyCycle <= 255; dutyCycle++){
// changing the LED brightness with PWM
ledcWrite(ledChannel, dutyCycle);
delay(15);
}// decrease the LED brightness
for(int dutyCycle = 255; dutyCycle >= 0; dutyCycle--){
// changing the LED brightness with PWM
ledcWrite(ledChannel, dutyCycle);
delay(15);
}// increase the LED brightness
for(int dutyCycle = 0; dutyCycle <= 255; dutyCycle++){
// changing the LED brightness with PWM
ledcWrite(ledChannel2, dutyCycle);
delay(15);
}// decrease the LED brightness
for(int dutyCycle = 255; dutyCycle >= 0; dutyCycle--){
// changing the LED brightness with PWM
ledcWrite(ledChannel2, dutyCycle);
delay(15);
}// increase the LED brightness
for(int dutyCycle = 0; dutyCycle <= 255; dutyCycle++){
// changing the LED brightness with PWM
ledcWrite(ledChannel, dutyCycle);
ledcWrite(ledChannel2, dutyCycle);
delay(15);
}// decrease the LED brightness
for(int dutyCycle = 255; dutyCycle >= 0; dutyCycle--){
// changing the LED brightness with PWM
ledcWrite(ledChannel, dutyCycle);
ledcWrite(ledChannel2, dutyCycle);
delay(15);
}
}
Compile the code and wait until it says ‘Done compiling’.
Before uploading the code, don’t forget to make sure that the ESP32 is connected. Also make sure the Arduino IDE is set on the right board and port on the Tools menu.
Then click on the right arrow icon next to the tick icon to upload the code to the ESP32 and wait until it’s done uploading.
Now the result should show as the video below.
I didn’t face any significant struggles when doing this project, just when I didn’t know that the OLED_RESET and SCREEN_ADDRESS in the sample code should be changed accordingly. I had fun experimenting with the OLED display and I was satisfied with how it turned out.
This is the end of the tutorial and I hope this helps!
See you in my next projects!
