SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP8266 - Ethernet

ESP8266 - TM1637 4-Digit 7-Segment Display

This tutorial instructs you how to use ESP8266 with the 4-digit 7-segment display, TM1637 module. In detail, we will learn:

How to connect 4-digit 7-segment display to ESP8266
How to program ESP8266 to display the information on 4-digit 7-segment display.

ESP8266 NodeMCU 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	×	ESP8266 NodeMCU
1	×	Micro USB Cable
1	×	TM1637 4-digit 7-segment Display
1	×	Jumper Wires
1	×	Breadboard
1	×	(Optional) 5V Power Adapter for ESP8266
1	×	(Optional) Screw Terminal Expansion Board for ESP8266

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 ESP8266.
DIO pin: is a Data I/O pin which should be connected to any digital pin on ESP8266.
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 ESP8266.

Wiring Diagram

In order to connect a TM1637 to an ESP8266, 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 ESP8266. 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

See more in ESP8266's pinout and how to supply power to the ESP8266 and other components.

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 ESP8266

Include the library

#include <TM1637Display.h>

Specify the ESP8266 pins that are linked to the CLK and DIO of the display module. For instance, D2 and D1.

#define CLK D2 #define DIO D1

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.

ESP8266 Code

/* * This ESP8266 NodeMCU code was developed by newbiely.com * * This ESP8266 NodeMCU code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp8266/esp8266-tm1637-4-digit-7-segment-display */ #include <TM1637Display.h> // define the connections pins #define CLK D2 // The ESP8266 pin connected to the CLK pin of TM1637 Display #define DIO D1 // The ESP8266 pin connected to the DIO pin of TM1637 Display // 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 ESP8266 on Arduino IDE, follow these steps:

Check out the how to setup environment for ESP8266 on Arduino IDE tutorial if this is your first time using ESP8266.
Wire the components as shown in the diagram.
Connect the ESP8266 board to your computer using a USB cable.
Open Arduino IDE on your computer.
Choose the correct ESP8266 board, such as (e.g. NodeMCU 1.0 (ESP-12E Module)), and its respective COM port.
Copy the code and open it with Arduino IDE.
Click the Upload button to transfer the code to the ESP8266.
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.

Learn More

ESP8266 - 74HC595 4-Digit 7-Segment Display

※ 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!