SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - TM1637 4-Digit 7-Segment Display

This tutorial teaches you how to use the ESP32 with the TM1637 4-digit 7-segment display module. It covers the following topics:

Connecting the 4-digit 7-segment display to the ESP32
Programming the ESP32 to display information on the 4-digit 7-segment display.

In this tutorial, we will be using a 4-digit 7-segment display module with a colon separator. If you wish to display float numbers, please refer to the 74HC595 4-digit 7-segment Display Module tutorial.

Hardware Used In This Tutorial

1	×	ESP-WROOM-32 Dev Module
1	×	USB Cable Type-C
1	×	TM1637 4-digit 7-segment Display
1	×	Breadboard
1	×	Jumper Wires
1	×	(Optional) 5V 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 TM1637 4-digit 7-segment Display

A 4-digit 7-segment display is commonly used for clock, timer and counter, displaying temperature... However it usually requires 12 connections. The TM1637 module simplifies this by needing only 4 connections: 2 for power and 2 for controlling the segments.

A TM1637 module generally consists of four 7-segment LEDs and one of the following options:

A colon-shaped LED in the middle: It is ideal for displaying time in hours and minutes, or minutes and seconds, or scores of two teams.
Four dot-shaped LEDs for each digit: It is ideal for displaying the temperature or any decimal value.

The TM1637 4-Digit 7-Segment Display Pinout

TM1637 4-digit 7-segment display module has four pins:

CLK pin: is a clock input pin which should be connected to any digital pin on ESP32.
DIO pin: is a Data I/O pin which should be connected to any digital pin on ESP32.
VCC pin: is used to supply power to the module and should be connected to the 3.3V to 5V power supply.
GND pin: is a ground pin which should be connected to the ground of ESP32.

Wiring Diagram

In order to connect a TM1637 to an ESP32, four wires are required: two for power and two for controlling the display. The module can be powered by the 5-volt output of the ESP32. The CLK and DIO pins should be connected to any digital pins of the Arduino; for instance, pins 2 and 3. If different pins are used, the pin numbers in the code must be altered.

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 TM1637 4-digit 7-segment Display, we need to install TM1637Display library by Avishay Orpaz. Follow the below steps to install the library:

Click to the Libraries icon on the left bar of the Arduino IDE.
Search “TM1637”, then find the TM1637Display library by Avishay Orpaz
Click Install button.

Arduino TM1637 4-digit 7-segment display library

How To Program For TM1637 4-digit 7-segment using ESP32

Include the library

#include <TM1637Display.h>

Specify the ESP32 pins that are linked to the CLK and DIO of the display module. For instance, D9 and D10.

#define CLK 22 // The ESP32 pin GPIO22 connected to CLK #define DIO 23 // The ESP32 pin GPIO23 connected to DIO

Create a TM1637Display object.

TM1637Display display = TM1637Display(CLK, DIO);

Then you can show numbers, numbers with decimals, numbers with negative signs, or letters. In the case of letters, you need to specify the letter form. Let's look at each one separately.
Displaying numbers: see the examples below, '_' in the following description stands for a digit that is not displayed in practice:

display.showNumberDec(-12); // displayed _-12 display.showNumberDec(-999); // displayed -999 display.showNumberDec(42); // displayed __42 display.showNumberDec(42, false); // displayed __42 display.showNumberDec(42, false, 2, 0); // displayed 42__ => display 2 digit at position 0 display.showNumberDec(42, true); // displayed 0042 => zero padding display.showNumberDec(14, false, 2, 1); // displayed _14_ display.showNumberDec(-5, false, 3, 0); // displayed _-5_ display.showNumberDec(1234); // displayed 1234

Show the number with a colon or dot:

// displayed 15:30 in the colon-separated module, or 15.30 in the colon-separated module display.showNumberDecEx(1530, 0b11100000, false, 4, 0);

You can find additional information regarding the functions at the end of this tutorial.

ESP32 Code

/* * 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-tm1637-4-digit-7-segment-display */ #include <TM1637Display.h> #define CLK 22 // The ESP32 pin GPIO22 connected to CLK #define DIO 23 // The ESP32 pin GPIO23 connected to DIO // create a display object of type TM1637Display TM1637Display display = TM1637Display(CLK, DIO); // an array that sets individual segments per digit to display the word "dOnE" const uint8_t done[] = { SEG_B | SEG_C | SEG_D | SEG_E | SEG_G, // d SEG_A | SEG_B | SEG_C | SEG_D | SEG_E | SEG_F, // O SEG_C | SEG_E | SEG_G, // n SEG_A | SEG_D | SEG_E | SEG_F | SEG_G // E }; // degree celsius symbol const uint8_t celsius[] = { SEG_A | SEG_B | SEG_F | SEG_G, // Degree symbol SEG_A | SEG_D | SEG_E | SEG_F // C }; void setup() { display.clear(); display.setBrightness(7); // set the brightness to 7 (0:dimmest, 7:brightest) } void loop() { // show counter 0-9 int i; for (i = 0; i < 10; i++) { display.showNumberDec(i); delay(500); display.clear(); } display.showNumberDec(-91); // displayed _-91 delay(2000); display.clear(); display.showNumberDec(-109); // displayed -109 delay(2000); display.clear(); display.showNumberDec(21, false); // displayed __21 delay(2000); display.clear(); display.showNumberDec(21, true); // displayed 0021 delay(2000); display.clear(); display.showNumberDec(28, false, 2, 1); // displayed _28_ delay(2000); display.clear(); display.showNumberDec(-9, false, 3, 0); // displayed _-9_ delay(2000); display.clear(); // displayed 15:30 display.showNumberDecEx(1530, 0b11100000, false, 4, 0); delay(2000); display.clear(); // displayed 23°C int temperature = 23; // or read from temperature sensor display.showNumberDec(temperature, false, 2, 0); display.setSegments(celsius, 2, 2); delay(2000); display.clear(); // displayed letters: dOnE display.setSegments(done); delay(2000); display.clear(); }

Quick Instructions

To get started with ESP32 on Arduino IDE, follow these steps:

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 paste it to Arduino IDE.
Compile and upload code to ESP32 board by clicking Upload button on Arduino IDE

Observe the states of the 7-segment display.

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.

Function References

Below are the references for:

display.clear()
display.showNumberDec()
display.showNumberDecEx()
display.setSegments()
display.setBrightness()

display.clear()

Description

This function clears the display. It turns all LEDs off.

display.showNumberDec()

Description

The 7-segment display is utilized to show a decimal number. This function is used for that purpose.

Syntax

void showNumberDec(int num, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);

Parameter

num: is the value to be shown on the 7-segment display, ranging from -9999 to 9999.
leading_zero: an optional parameter with a default value of false, determines whether leading zeros should be displayed.
length, another optional parameter with a default value of 4, sets the number of digits to be displayed.
pos: also an optional parameter with a default value of 0, sets the position of the most significant digit.

Please be aware that the function will not show anything if the number is outside the range or if the length value is more than 4.

showNumberDecEx()

Description

This function is an upgrade of showNumberDec(), providing more control over the display of a decimal number on the 7-segment display. It has the capability to individually control the dot or colon segments of each digit.

Syntax

void showNumberDecEx(int num, uint8_t dots, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);

Parameter

num1: This is the number to be displayed on the 7-segment display. It should be within the range of -9999 to 9999.
dots: This parameter is used to specify which segments of the display should be turned on as dots. Each bit of the value corresponds to a digit on the display. Possible values are:

0b10000000 for displaying the first dot (0.000)
0b01000000 for displaying the second dot (00.00), or the colon (00:00), It depends on the module type.
0b00100000 for displaying the third dot (000.0)

leading_zero: This is an optional parameter with a default value of false. If it is set to true, leading zeros will be shown.
length: This is an optional parameter with a default value of 4. It determines the number of digits to be displayed on the 7-segment display.
pos: This is an optional parameter with a default value of 0. It sets the position of the most significant digit of the number.

For example, If you use display.showNumberDecEx(1530, 0b01000000), it will show:

The number 15:30 on the 7-segment display if the module has a colon-shaped LED.
The number 15.30 on the 7-segment display if the module has dot-shaped LEDs.

Please be aware that the function will not display anything if the number is outside of the range or if the value of length is more than 4.

setSegments()

Description

The function enables one to directly set the segments of the 7-segment display. It can be used to show letters, special characters, or to switch off all LED segments.

Syntax

void setSegments(const uint8_t segments[], uint8_t length = 4, uint8_t pos = 0);

Parameter

segments: This parameter sets the segments of the 7-segment display, which is an array of bytes. Each byte represents the segments of each digit and each segment is represented by a bit in the byte.
length: This is an optional parameter with a default value of 4. It determines the number of digits to be displayed on the 7-segment display.
pos: This is an optional parameter with a default value of 0. It specifies the position of the most significant digit of the number.

This function is beneficial when you need to show characters or symbols that are not available on the standard 7-segment display. You can create any pattern you desire by setting the segments directly.

Please be aware that the function will not display anything if the number is out of range or the value of length is greater than 4.

setBrightness()

Description

The 7-segment display's brightness can be adjusted using this function.

Syntax

void setBrightness(uint8_t brightness, bool on = true);

Parameter

brightness: This parameter adjusts the luminosity of the 7-segment display. The value should be between 0 and 7, with a higher number producing a brighter display.
on: This is an optional parameter, with a default value of true. It is used to switch the display on or off. If set to false, the display will be deactivated.

Learn More

ESP32 - 74HC595 4-Digit 7-Segment Display

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
If this tutorial is useful for you, please support us to make more tutorials.
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!