Arduino Nano ESP32 - TM1637 4-Digit 7-Segment Display

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

Arduino Nano ESP32 TM1637 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 Preparation

1×Arduino Nano ESP32
1×USB Cable Type-C
1×TM1637 4-digit 7-segment Display
1×Breadboard
1×Jumper Wires
1×(Optional) 5V Power Adapter for Arduino Nano ESP32
1×(Recommended) Screw Terminal Expansion Board for Arduino Nano
1×(Recommended) Breakout Expansion Board for Arduino Nano
1×(Recommended) Power Splitter For Arduino Nano 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 the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables.

Overview of 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 Arduino Nano ESP32.
  • DIO pin: is a Data I/O pin which should be connected to any digital pin on Arduino Nano 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 Arduino Nano ESP32.
TM1637 module pinout

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 Arduino Nano 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.

The wiring diagram between Arduino Nano ESP32 and TM1637 Module

This image is created using Fritzing. Click to enlarge image

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:

  • Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of 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 Arduino Nano ESP32

  • Include the library
#include <TM1637Display.h>
  • Specify the Arduino Nano ESP32 pins that are linked to the CLK and DIO of the display module. For instance, D9 and D10.
#define CLK D9 // The Arduino Nano ESP32 pin connected to the CLK pin of 7-segment module #define DIO D10 // The Arduino Nano ESP32 pin connected to the DIO pin of 7-segment module
  • 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.

Arduino Nano ESP32 Code

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-tm1637-4-digit-7-segment-display */ #include <TM1637Display.h> // define the connections pins #define CLK D9 // The Arduino Nano ESP32 pin connected to the CLK pin of 7-segment module #define DIO D10 // The Arduino Nano ESP32 pin connected to the DIO pin of 7-segment module // 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(); }

Detailed Instructions

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

To get started with Arduino Nano ESP32, follow these steps:

  • If you are new to Arduino Nano ESP32, refer to the tutorial on how to set up the environment for Arduino Nano ESP32 in the Arduino IDE.
  • Wire the components according to the provided diagram.
  • Connect the Arduino Nano ESP32 board to your computer using a USB cable.
  • Launch the Arduino IDE on your computer.
  • Select the Arduino Nano ESP32 board and its corresponding COM port.* Copy the above code and paste it to Arduino IDE.
  • Compile and upload code to Arduino Nano ESP32 board by clicking Upload button on Arduino IDE
Arduino IDE Upload Code
  • Check out the states of the 7-segment display.

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.

※ OUR MESSAGES

  • As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
  • 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!