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:

ESP32 74HC595 4-digit 7-segment display

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×(Optional) 9V Power Adapter for ESP32
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.
74HC595 module pinout

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
Vin5V
27SCLK
26RCLK
25DIO

If you are using different pins, make sure to modify the pin numbers in the code accordingly.

ESP32 74HC595 Module wiring diagram

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.
ESP32 74HC595 4-digit 7-segment display library

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.

※ OUR MESSAGES