Ads by esp32io.com
ESP32 - 74HC595 4-Digit 7-Segment Display
This tutorial guides you on using an ESP32 to control a 74HC595 4-digit 7-segment display module. It covers the following topics:
- Connecting ESP32 to the 74HC595 4-digit 7-segment display module
- Programming ESP32 to display integer numbers on the module
- Programming ESP32 to display float numbers on the module
- Programming ESP32 to display numbers and characters on the module.
This tutorial will utilize a 4-dot 4-digit 7-segment display module capable of displaying float values. If you need to display a colon separator, please refer to the TM1637 4-digit 7-segment Display Module
Hardware Used In This Tutorial
| 1 | × | ESP-WROOM-32 Dev Module | |
| 1 | × | USB Cable Type-C | |
| 1 | × | 74HC595 4-digit 7-segment Display | |
| 1 | × | Breadboard | |
| 1 | × | Jumper Wires | |
| 1 | × | (Recommended) Screw Terminal Expansion Board for ESP32 |
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: some of these links are affiliate links. We may earn a commission on your purchase at no extra cost to you. We appreciate it.
Introduction to 74HC595 4-digit 7-segment Display
An ideal module for displaying temperature or any float value is the 74HC595 4-digit 7-segment display. This module typically includes four 7-segment LEDs, four dot-shaped LEDs, and two 74HC595 drivers for each digit.
Pinout
The 74HC595 4-digit 7-segment display module includes 5 pins:
- SCLK pin: is a clock input pin. Connect to any digital pin on ESP32.
- RCLK pin: is a clock input pin. Connect to any digital pin on ESP32.
- DIO pin: is a Data I/O pin. Connect to any digital pin on ESP32.
- VCC pin: supplies power to the module. Connect it to the 3.3V to 5V power supply.
- GND pin: is a ground pin.
Wiring Diagram
The table below shown the wiring between ESP32 pins and a 74HC595 4-digit 7-segment display pins:
| ESP32 | 74HC595 7-segment display |
|---|---|
| Vin | 5V |
| 27 | SCLK |
| 26 | RCLK |
| 25 | DIO |
If you are using different pins, make sure to modify the pin numbers in the code accordingly.
This image is created using Fritzing. Click to enlarge image
If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.
Library Installation
To program easily for 74HC595 4-digit 7-segment Display, we need to install DIYables_4Digit7Segment_74HC595 library by DIYables.io. Follow the below steps to install the library:
- Click to the Libraries icon on the left bar of the Arduino IDE.
- Search “DIYables_4Digit7Segment_74HC595”, then find the DIYables_4Digit7Segment_74HC595 library by DIYables.io
- Click Install button.
You can also see this library on Github
How To Program For 74HC595 4-digit 7-segment using ESP32
- Include the library
#include <DIYables_4Digit7Segment_74HC595.h>
- Define ESP32's pins that connects to SCLK, RCLK and DIO of the display module. For example, pin D7, D6 and D5
#define SCLK 27 // The ESP32 pin GPIO27 connected to SCLK
#define RCLK 26 // The ESP32 pin GPIO26 connected to RCLK
#define DIO 25 // The ESP32 pin GPIO25 connected to DIO
- Create a display object of type DIYables_4Digit7Segment_74HC595
DIYables_4Digit7Segment_74HC595 display = DIYables_4Digit7Segment_74HC595(CLK, DIO);
- Then you can display the integer numbers with the zero-padding option, supporting the negative number:
display.printInt(-13, false); // you can display a value from -999 to 9999
- You can display the float numbers with the decimal place, zero-padding options, supporting the negative number:
display.printFloat(-9.2, 1, false);
- You can also display number, decimal point, character digit-by-digit by using lower-level functions:
// display 9.3°C
display.clear();
display.setNumber(1, 9); // set 9 at the 1st digit
display.setDot(1); // set . at the 1st digit
display.setNumber(2, 3); // set 3 at the 2nd digit
display.setChar(3, SegChars::DEGREE); // set ° at the 3rd digit
display.setChar(4, SegChars::C); // set C at the 3rd digit
display.show(); // show on the display
- Because the 74HC595 4-digit 7-segment module uses the multiplexing technique to control individual segments and LEDs, ESP32 code MUST:
- Call display.show() function in the main loop
- Not use delay() function in the main loop
You can see more detail in the the library reference
ESP32 Code - Display Integer
/*
* This ESP32 code is created by esp32io.com
*
* This ESP32 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h> // DIYables_4Digit7Segment_74HC595 library
#define SCLK 27 // The ESP32 pin GPIO27 connected to SCLK
#define RCLK 26 // The ESP32 pin GPIO26 connected to RCLK
#define DIO 25 // The ESP32 pin GPIO25 connected to DIO
DIYables_4Digit7Segment_74HC595 display(SCLK, RCLK, DIO);
void setup() {
Serial.begin(9600);
display.printInt(-13, false); // you can display a value from -999 to 9999
//display.printInt(-132, false);
//display.printInt(9132, false);
//display.printInt(132, false);
//display.printInt(32, false);
//display.printInt(2, false);
//display.printInt(2, true);
}
void loop() {
display.loop(); // MUST call the display.loop() function in loop()
// DO SOMETHING HERE
// NOTE: do NOT use the delay() function in loop because it affects to the multiplexing
}
Quick Instructions
- If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
- Do the wiring as above image.
- Connect the ESP32 board to your PC via a micro USB cable
- Open Arduino IDE on your PC.
- Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
- Copy the above code and open with ESP32 IDE
- Click Upload button on ESP32 IDE to upload code to ESP32
- See the states of the 7-segment display
ESP32 Code - Display Float
/*
* This ESP32 code is created by esp32io.com
*
* This ESP32 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h> // DIYables_4Digit7Segment_74HC595 library
#define SCLK 27 // The ESP32 pin GPIO27 connected to SCLK
#define RCLK 26 // The ESP32 pin GPIO26 connected to RCLK
#define DIO 25 // The ESP32 pin GPIO25 connected to DIO
DIYables_4Digit7Segment_74HC595 display(SCLK, RCLK, DIO);
void setup() {
Serial.begin(9600);
display.printFloat(-9.2, 1, false);
//display.printFloat(-92.4, 1, false);
//display.printFloat(-9.24, 2, false);
//display.printFloat(192.4, 1, false);
//display.printFloat(19.24, 2, false);
//display.printFloat(1.924, 3, false);
}
void loop() {
display.loop(); // MUST call the display.loop() function in loop()
// DO SOMETHING HERE
// NOTE: do NOT use the delay() function in loop because it affects to the multiplexing
}
ESP32 Code - Display Temperature
/*
* This ESP32 code is created by esp32io.com
*
* This ESP32 code is released in the public domain
*
* For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h> // DIYables_4Digit7Segment_74HC595 library
#define SCLK 27 // The ESP32 pin GPIO27 connected to SCLK
#define RCLK 26 // The ESP32 pin GPIO26 connected to RCLK
#define DIO 25 // The ESP32 pin GPIO25 connected to DIO
DIYables_4Digit7Segment_74HC595 display(SCLK, RCLK, DIO);
void setup() {
Serial.begin(9600);
// display 9.3°C by controlling digit by digit
display.clear();
display.setNumber(1, 9); // set 9 at the 1st digit
display.setDot(1); // set . at the 1st digit
display.setNumber(2, 3); // set 3 at the 2nd digit
display.setChar(3, SegChars::DEGREE); // set ° at the 3rd digit
display.setChar(4, SegChars::C); // set C at the 3rd digit
display.show(); // show on the display
}
void loop() {
display.loop(); // MUST call the display.loop() function in loop()
// DO SOMETHING HERE
// NOTE: do NOT use the delay() function in loop because it affects to the multiplexing
}
Video Tutorial
Making video is a time-consuming work. If the video tutorial is necessary for your learning, please let us know by subscribing to our YouTube channel , If the demand for video is high, we will make the video tutorial.