ESP32 - TM1637 4-Digit 7-Segment Display
In this project, we will use an ESP32 to drive a TM1637 4-digit 7-segment display module. The ESP32 offers Wi-Fi, Bluetooth, dual cores, and a generous set of GPIO pins - making it ideal for IoT projects that need a numeric display.
What we will build:
- Wire the TM1637 module to the ESP32.
- Display integers, text, and temperature values.
- Show time in HH:MM format with a blinking colon.
- Control individual digits and brightness levels.
This tutorial shows how to program the ESP32 using the Arduino language (C/C++) via the Arduino IDE. If you’d like to learn how to program the ESP32 with MicroPython, visit this ESP32 MicroPython - TM1637 4-Digit 7-Segment Display tutorial.
Hardware Used In This Tutorial
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links in this section are Amazon affiliate links, meaning we may earn a commission at no additional cost to you if you make a purchase through them. Additionally, some links direct you to products from our own brand, DIYables .
TM1637 Display Module in Detail
The TM1637 chip handles the multiplexing and driving of four 7-segment digits through a simple 2-wire serial protocol. Once digit data is written to the TM1637, it retains the data in internal memory and keeps the display lit without any further input from the microcontroller.
Module features:
- 4 digits with 7 segments and decimal points
- Colon separator between digit 1 and digit 2
- 8 brightness levels
- 2-wire interface (CLK + DIO)
- Operating voltage: 3.3V to 5V
| Function | Pin |
|---|---|
| CLK | Clock signal |
| DIO | Data I/O |
| VCC | 3.3V or 5V |
| GND | Ground |
The TM1637 works at 3.3V, matching the ESP32's logic level. No level shifter is needed.
Wiring Diagram
Connect the TM1637 to the ESP32:
- CLK to GPIO 21
- DIO to GPIO 22
- VCC to 3.3V
- GND to GND
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: The best way to Power ESP32 and sensors/displays.
Library Installation
- Connect the ESP32 board to your computer with a USB cable.
- Open Arduino IDE and select ESP32 Dev Module as the board. Choose the correct port.
- Click the Libraries icon on the left sidebar.
- Search for "DIYables_4Digit7Segment_TM1637" and find the library by DIYables.
- Click Install.
No extra dependencies required - the library is self-contained.
Starting Point
A minimal sketch to get things running:
#include <DIYables_4Digit7Segment_TM1637.h>
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
void setup() {
display.begin();
display.print(1234);
}
void loop() {
}
Pass the GPIO pin numbers for CLK and DIO to the constructor, call begin(), and you are ready to display data.
Let's Build - Integer Display
Shows various integers including negative values and zero-padded numbers.
/*
* 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 <DIYables_4Digit7Segment_TM1637.h>
// Pin configuration - change to match your wiring
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("TM1637 Integer Example");
}
void loop() {
// Display various integers
int numbers[] = {0, 42, 1234, -5, -123, 9999};
int count = sizeof(numbers) / sizeof(numbers[0]);
for (int i = 0; i < count; i++) {
display.print(numbers[i]);
Serial.print("Displaying: ");
Serial.println(numbers[i]);
delay(2000);
}
// Display with zero padding
display.print(42, true); // Shows "0042"
Serial.println("Displaying: 0042 (zero-padded)");
delay(2000);
}
Upload and Test
- Wire the TM1637 module to the ESP32 as described above.
- Connect the ESP32 to your computer via USB.
- Open Arduino IDE, select the board and port, paste the code, and click Upload.
- Open the Serial Monitor to see the output.
The display cycles through 0, 42, 1234, -5, -123, 9999, and zero-padded "0042".
Key Methods
| Method | What It Does | Example |
|---|---|---|
| print(int) | Displays an integer | display.print(1234) |
| print(int, true) | Displays with leading zeros | display.print(42, true) |
| clear() | Clears the display | display.clear() |
Let's Build - Text and Temperature
Displays text strings and formatted temperature with the degree symbol.
/*
* 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 <DIYables_4Digit7Segment_TM1637.h>
// Pin configuration - change to match your wiring
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("TM1637 Text and Degree Example");
}
void loop() {
// Display text strings
const char* texts[] = {"HELP", "Hi", "COOL", "done"};
for (int i = 0; i < 4; i++) {
display.print(texts[i]);
Serial.print("Displaying: ");
Serial.println(texts[i]);
delay(2000);
}
// Display temperature with degree symbol
display.printTemperature(25, 'C'); // Shows "25°C"
Serial.println("Displaying: 25 degrees C");
delay(2000);
display.printTemperature(72, 'F'); // Shows "72°F"
Serial.println("Displaying: 72 degrees F");
delay(2000);
// Display string with degree constant
char buf[5];
buf[0] = '2';
buf[1] = '5';
buf[2] = DIYables_4Digit7Segment_TM1637::DEGREE;
buf[3] = 'C';
buf[4] = '\0';
display.print(buf); // Same as printTemperature(25, 'C')
Serial.println("Displaying: 25 degrees C (via print)");
delay(2000);
}
Upload and Test
- Wire and upload the sketch. Open the Serial Monitor.
Shows "HELP", "Hi", "COOL", "done", then "25°C" and "72°F".
Key Methods
| Method | What It Does | Example |
|---|---|---|
| print(const char*) | Shows text | display.print("HELP") |
| printTemperature(int, char) | Shows temperature | display.printTemperature(25, 'C') |
| DEGREE | Degree character | display.DEGREE |
Let's Build - Time with Blinking Colon
Displays clock-like time with the colon toggling every half second.
/*
* 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 <DIYables_4Digit7Segment_TM1637.h>
// Pin configuration - change to match your wiring
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
int hours = 12;
int minutes = 30;
bool colonOn = true;
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("TM1637 Time Example");
Serial.println("Displaying 12:30 with blinking colon");
}
void loop() {
display.printTime(hours, minutes, colonOn);
delay(500); // Toggle colon every 500ms for blinking effect
colonOn = !colonOn;
}
Upload and Test
- Upload and observe "12:30" with the colon blinking.
Key Methods
| Method | What It Does | Example | |
|---|---|---|---|
| printTime(int, int) | Shows HH | MM | display.printTime(12, 30) |
| printTime(int, int, bool) | Controls colon | display.printTime(12, 30, false) |
Let's Build - Blink Effect
Toggles the display on and off to create a blinking effect.
/*
* 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 <DIYables_4Digit7Segment_TM1637.h>
// Pin configuration - change to match your wiring
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("TM1637 Blink Example");
}
void loop() {
// Blink an integer
display.print(1234);
Serial.println("Blinking: 1234");
for (int i = 0; i < 5; i++) {
display.off();
delay(300);
display.on();
delay(300);
}
delay(1000);
// Blink text
display.print("HELP");
Serial.println("Blinking: HELP");
for (int i = 0; i < 5; i++) {
display.off();
delay(300);
display.on();
delay(300);
}
delay(1000);
}
Upload and Test
- Upload the code. "1234" blinks five times, then "HELP" blinks five times.
Key Methods
| Method | What It Does | Example |
|---|---|---|
| off() | Display off, data stays | display.off() |
| on() | Display back on | display.on() |
| setBrightness(int) | Sets brightness 0-7 | display.setBrightness(4) |
Let's Build - Individual Digit Control
Sets each digit separately with numbers, characters, and the colon.
/*
* 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 <DIYables_4Digit7Segment_TM1637.h>
// Pin configuration - change to match your wiring
#define CLK_PIN 21
#define DIO_PIN 22
DIYables_4Digit7Segment_TM1637 display(CLK_PIN, DIO_PIN);
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("TM1637 Individual Digits Example");
}
void loop() {
// Set individual numbers on each digit position
display.clear();
display.setNumber(0, 1);
display.setNumber(1, 2);
display.setNumber(2, 3);
display.setNumber(3, 4);
Serial.println("Displaying: 1234");
delay(2000);
// Turn colon on
display.setColon(true);
Serial.println("Displaying: 12:34");
delay(2000);
// Turn colon off
display.setColon(false);
Serial.println("Displaying: 1234");
delay(2000);
// Set individual characters
display.clear();
display.setChar(0, 'H');
display.setChar(1, 'E');
display.setChar(2, 'L');
display.setChar(3, 'P');
Serial.println("Displaying: HELP");
delay(2000);
// Mix characters and numbers with colon
display.clear();
display.setChar(0, 'A');
display.setNumber(1, 3);
display.setChar(2, 'b');
display.setNumber(3, 7);
display.setColon(true);
Serial.println("Displaying: A3:b7");
delay(2000);
// Blinking colon effect
display.clear();
display.setNumber(0, 1);
display.setNumber(1, 2);
display.setNumber(2, 3);
display.setNumber(3, 0);
Serial.println("Blinking colon: 12:30");
for (int i = 0; i < 5; i++) {
display.setColon(true);
delay(500);
display.setColon(false);
delay(500);
}
delay(1000);
}
Upload and Test
- Upload and observe the various digit and character combinations.
Key Methods
| Method | What It Does | Example |
|---|---|---|
| setNumber(int, int) | Sets digit 0-9 | display.setNumber(0, 1) |
| setChar(int, char) | Sets character | display.setChar(0, 'H') |
| setColon(bool) | Controls colon | display.setColon(true) |
| setSegments(int, uint8_t) | Raw segment data | display.setSegments(0, 0x76) |
Troubleshooting
- Display stays off - Check wiring. Make sure CLK and DIO go to the correct ESP32 GPIO pins. Verify VCC is connected to 3.3V.
- Wrong characters shown - CLK and DIO are probably swapped. Switch the two wires.
- Too dim - Use setBrightness(7) for maximum brightness.
- Upload fails - Hold the BOOT button on the ESP32 during upload if your board requires it.
Platform Support
The library is built using only Arduino standard APIs and works across all Arduino-compatible platforms including ESP32.