{"id":187031,"date":"2026-01-29T15:26:55","date_gmt":"2026-01-29T15:26:55","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=187031"},"modified":"2026-01-29T15:51:17","modified_gmt":"2026-01-29T15:51:17","slug":"esp32-tm1637-4-digit-7-segment-display-arduino","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/","title":{"rendered":"ESP32 with TM1637 4-Digit LED 7-Segment Display (Arduino IDE)"},"content":{"rendered":"\n<p>This is a guide on how to interface the TM1637 4-Digit LED 7-Segment display with the ESP32 programmed with Arduino IDE. You&#8217;ll learn how to wire the display to the ESP32 and how to write characters. As an example, we&#8217;ll show you how to build a digital clock and a temperature display.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 with TM1637 4-Digit LED 7-Segment Display Arduino IDE\" class=\"wp-image-187231\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?w=1920&amp;quality=100&amp;strip=all&amp;ssl=1 1920w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?resize=1536%2C864&amp;quality=100&amp;strip=all&amp;ssl=1 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p><strong>Table of Contents<\/strong><\/p>\n\n\n\n<p>In this tutorial, we&#8217;ll cover the following topics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#intro-TM1637\" title=\"\">Introducing the TM1637 4-Digit LED 7-Segment Display<\/a><\/li>\n\n\n\n<li><a href=\"#TM1637-wiring\" title=\"\">Wiring the TM1637 4-Digit 7-Segment Display to the ESP32<\/a><\/li>\n\n\n\n<li><a href=\"#Installing the TM1637 Library\" title=\"\">Installing the TM1637 Library<\/a><\/li>\n\n\n\n<li><a href=\"#basic-functions\" title=\"\">Testing the TM1637 Display (Basic Functions)<\/a><\/li>\n\n\n\n<li><a href=\"#project-examples\" title=\"\">Practical Examples with the TM1637 Display<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#digital-clock\" title=\"\">ESP32 Digital Clock with the TM1637 Display (with timezone adjustment and DST)<\/a><\/li>\n\n\n\n<li><a href=\"#temperature-display\" title=\"\">ESP32 Temperature Display (TM1637) from Weather API<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"intro-TM1637\">Introducing the TM1637 4-Digit LED 7-Segment Display<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/makeradvisor.com\/tools\/tm1637-4-digit-7-segment-display\/\" target=\"_blank\" rel=\"noopener\" title=\"\">TM1637 4-Digit LED 7-Segment display<\/a> is a display module that combines four 7-segment digits on a single display that can be controlled via the TM1637 driver. The particular module we&#8217;re using here has four digits separated by a colon between the second and third digits.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"TM1637 4-Digit 7-Segment Display\" class=\"wp-image-187306\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>There are similar modules with dots between the digits.<\/p>\n\n\n\n<p>There are also similar modules with six 7-segment digits. These require a different library from the one we&#8217;ll use in this tutorial.<\/p>\n\n\n\n<p><strong>Note:<\/strong> I tried to use my six 7-segment display module, but it seems that there are many of those displays that come faulty by default. I couldn&#8217;t make mine work. So, this tutorial will be <em><span style=\"text-decoration: underline;\">only<\/span><\/em> about the one with four digits with a colon in the middle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where to Buy?<\/h3>\n\n\n\n<p>You can check our Maker Advisor Tools page to compare the TM1637 4-Digit 7-Segment Display module price in different stores:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/tm1637-4-digit-7-segment-display\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>TM1637 4-Digit 7-Segment Display<\/strong><\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"TM1637-wiring\">Wiring the TM1637 4-Digit 7-Segment Display to the ESP32<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display-pins.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"TM1637 Display Module Pins CLK DIO VCC GND\" class=\"wp-image-187430\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display-pins.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display-pins.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>Wiring the display to the ESP32 is quite simple, as it only requires two digital pins: <strong>CLK <\/strong>and <strong>DI\/O<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>TM1637 Display<\/strong><\/td><td><strong>ESP32<\/strong><\/td><\/tr><tr><td>CLK<\/td><td>Any digital pin (for example: <span class=\"rnthl rntclblue\">GPIO 19<\/span>)*<\/td><\/tr><tr><td>DIO<\/td><td>Any digital pin (for example: <span class=\"rnthl rntclgreen\">GPIO 18<\/span>)*<\/td><\/tr><tr><td>VCC<\/td><td><span class=\"rnthl rntcred\">VIN<\/span><\/td><\/tr><tr><td>GND<\/td><td><span class=\"rnthl rntcblack\">GND<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>* you can use any other suitable GPIOs. Check the ESP32 Pinout Guide:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\">ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-s3-devkitc-pinout-guide\/\">ESP32-S3 DevKitC Pinout Reference Guide: GPIOs Explained<\/a><\/li>\n<\/ul>\n\n\n\n<p>We&#8217;ll connect the CLK pin to <span class=\"rnthl rntclblue\">GPIO 19<\/span>, and the DIO pin to <span class=\"rnthl rntclgreen\">GPIO 18<\/span>, but you can use another combination of pins.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"713\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637_wiring.png?resize=900%2C713&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"TM1637 Display - Wiring to the ESP32\" class=\"wp-image-187083\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637_wiring.png?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637_wiring.png?resize=300%2C238&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637_wiring.png?resize=768%2C608&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"TM1637-library\">Installing the TM1637 Library<\/h2>\n\n\n\n<p>There are several libraries to interface the TM1637 display with the ESP32. We&#8217;ll use the <strong><a href=\"https:\/\/github.com\/avishorp\/TM1637\" target=\"_blank\" rel=\"noopener\" title=\"\">TM1637.h library by avishorp<\/a><\/strong> (even though it hasn&#8217;t been updated for several years, it still works well, and it&#8217;s very easy to use).<\/p>\n\n\n\n<p>You can install the library via the Arduino IDE library Manager. Search for <strong>TM1637 <\/strong>and install the library by avishorp.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-TM1637-library-Arduino-IDE.png?resize=718%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install TM1637 Library in Arduino IDE\" class=\"wp-image-187084\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-TM1637-library-Arduino-IDE.png?w=718&amp;quality=100&amp;strip=all&amp;ssl=1 718w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-TM1637-library-Arduino-IDE.png?resize=300%2C245&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"basic-functions\">Testing the TM1637 Display (Basic Functions)<\/h2>\n\n\n\n<p>The following code is the one provided by the library to test the display. You&#8217;ll figure out if your display is working properly and see how to implement the basic functions to initialize, control the display, and write characters.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/\n  Based on the TM1637Display library example: https:\/\/github.com\/avishorp\/TM1637\/blob\/master\/examples\/TM1637Test\/TM1637Test.ino\n*\/\n#include &lt;Arduino.h&gt;\n#include &lt;TM1637Display.h&gt;\n\n\/\/ Module connection pins (Digital Pins)\n#define CLK 19\n#define DIO 18\n\n\/\/ The amount of time (in milliseconds) between tests\n#define TEST_DELAY   2000\n\nconst uint8_t SEG_DONE[] = {\n\tSEG_B | SEG_C | SEG_D | SEG_E | SEG_G,           \/\/ d\n\tSEG_A | SEG_B | SEG_C | SEG_D | SEG_E | SEG_F,   \/\/ O\n\tSEG_C | SEG_E | SEG_G,                           \/\/ n\n\tSEG_A | SEG_D | SEG_E | SEG_F | SEG_G            \/\/ E\n\t};\n\nTM1637Display display(CLK, DIO);\n\nvoid setup()\n{\n}\n\nvoid loop()\n{\n  int k;\n  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };\n  uint8_t blank[] = { 0x00, 0x00, 0x00, 0x00 };\n  display.setBrightness(0x0f);\n\n  \/\/ All segments on\n  display.setSegments(data);\n  delay(TEST_DELAY);\n\n  display.showNumberDecEx(1230, 0b01000000);\n  delay(10000);\n\n  \/\/ Selectively set different digits\n  data[0] = display.encodeDigit(7);\n  data[1] = display.encodeDigit(6);\n  data[2] = display.encodeDigit(5);\n  data[3] = display.encodeDigit(9);\n  display.setSegments(data);\n  delay(TEST_DELAY);\n\n  \/*\n  for(k = 3; k &gt;= 0; k--) {\n\tdisplay.setSegments(data, 1, k);\n\tdelay(TEST_DELAY);\n\t}\n  *\/\n\n  display.clear();\n  display.setSegments(data+2, 2, 2);\n  delay(TEST_DELAY);\n\n  display.clear();\n  display.setSegments(data+2, 2, 1);\n  delay(TEST_DELAY);\n\n  display.clear();\n  display.setSegments(data+1, 3, 1);\n  delay(TEST_DELAY);\n\n\n  \/\/ Show decimal numbers with\/without leading zeros\n  display.showNumberDec(0, false); \/\/ Expect: ___0\n  delay(TEST_DELAY);\n  display.showNumberDec(0, true);  \/\/ Expect: 0000\n  delay(TEST_DELAY);\n\tdisplay.showNumberDec(1, false); \/\/ Expect: ___1\n\tdelay(TEST_DELAY);\n  display.showNumberDec(1, true);  \/\/ Expect: 0001\n  delay(TEST_DELAY);\n  display.showNumberDec(301, false); \/\/ Expect: _301\n  delay(TEST_DELAY);\n  display.showNumberDec(301, true); \/\/ Expect: 0301\n  delay(TEST_DELAY);\n  display.clear();\n  display.showNumberDec(14, false, 2, 1); \/\/ Expect: _14_\n  delay(TEST_DELAY);\n  display.clear();\n  display.showNumberDec(4, true, 2, 2);  \/\/ Expect: 04__\n  delay(TEST_DELAY);\n  display.showNumberDec(-1, false);  \/\/ Expect: __-1\n  delay(TEST_DELAY);\n  display.showNumberDec(-12);        \/\/ Expect: _-12\n  delay(TEST_DELAY);\n  display.showNumberDec(-999);       \/\/ Expect: -999\n  delay(TEST_DELAY);\n  display.clear();\n  display.showNumberDec(-5, false, 3, 0); \/\/ Expect: _-5_\n  delay(TEST_DELAY);\n  display.showNumberHexEx(0xf1af);        \/\/ Expect: f1Af\n  delay(TEST_DELAY);\n  display.showNumberHexEx(0x2c);          \/\/ Expect: __2C\n  delay(TEST_DELAY);\n  display.showNumberHexEx(0xd1, 0, true); \/\/ Expect: 00d1\n  delay(TEST_DELAY);\n  display.clear();\n  display.showNumberHexEx(0xd1, 0, true, 2); \/\/ Expect: d1__\n  delay(TEST_DELAY);\n\n  \n\t\/\/ Run through all the dots\n\tfor(k=0; k &lt;= 4; k++) {\n\t\tdisplay.showNumberDecEx(0, (0x80 &gt;&gt; k), true);\n\t\tdelay(TEST_DELAY);\n\t}\n\n  \/\/ Brightness Test\n  for(k = 0; k &lt; 4; k++)\n\tdata[k] = 0xff;\n  for(k = 0; k &lt; 7; k++) {\n    display.setBrightness(k);\n    display.setSegments(data);\n    delay(TEST_DELAY);\n  }\n  \n  \/\/ On\/Off test\n  for(k = 0; k &lt; 4; k++) {\n    display.setBrightness(7, false);  \/\/ Turn off\n    display.setSegments(data);\n    delay(TEST_DELAY);\n    display.setBrightness(7, true); \/\/ Turn on\n    display.setSegments(data);\n    delay(TEST_DELAY);  \n  }\n\n  \/\/ Done!\n  display.setSegments(SEG_DONE);\n\n  while(1);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_TM1637_Testing_Display.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Let&#8217;s take a look at some of the relevant functions used in this example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialize the Display<\/h3>\n\n\n\n<p>To initialize the display, you just need to create a <span class=\"rnthl rntliteral\">TM1637Display<\/span> instance with the pins you&#8217;re using to connect the module to your ESP32.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>TM1637Display display(CLK, DIO);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Set the Display Brightness<\/h3>\n\n\n\n<p>To set the brightness of the display, you can use the <span class=\"rnthl rntliteral\">setBrightness()<\/span> method on the <span class=\"rnthl rntliteral\">display<\/span> object. You can pass one or two arguments to this function.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void setBrightness(uint8_t brightness, bool on = true);<\/code><\/pre>\n\n\n\n<p>The first is a number between 0 (min brightness) and 7 (max brightness), and the second argument sets the display on (<span class=\"rnthl rntliteral\">true<\/span>) or off (<span class=\"rnthl rntliteral\">false<\/span>).<\/p>\n\n\n\n<p>In the code, this function is tested in the following snippet.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Brightness Test\nfor(k = 0; k &lt; 4; k++)\n  data&#091;k] = 0xff;\nfor(k = 0; k &lt; 7; k++) {\n  display.setBrightness(k);\n  display.setSegments(data);\n  delay(TEST_DELAY);\n}\n  \n\/\/ On\/Off test\nfor(k = 0; k &lt; 4; k++) {\n  display.setBrightness(7, false);  \/\/ Turn off\n  display.setSegments(data);\n  delay(TEST_DELAY);\n  display.setBrightness(7, true); \/\/ Turn on\n  display.setSegments(data);\n  delay(TEST_DELAY);  \n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Set Segments<\/h3>\n\n\n\n<p>The TM1637 display comes with four 7-segment display digits. You can manually control individual segments of each digit with the <span class=\"rnthl rntliteral\">setSegments()<\/span> function using an array of bytes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void setSegments(const uint8_t segments&#091;], uint8_t length = 4, uint8_t pos = 0);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span class=\"rnthl rntliteral\">segments<\/span>: an array of bytes that defines which segments are ON for a digit. Each bit in the byte corresponds to one LED segment;<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">length<\/span>: how many digits to update (0 to 4) &#8211; this parameter is optional;<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">pos<\/span>: start position (<span class=\"rnthl rntliteral\">0<\/span> &#8211; leftmost, <span class=\"rnthl rntliteral\">3<\/span> &#8211; rightmost) &#8211; the default is 0. This parameter is also optional.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"144\" height=\"259\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/7-segment-display-labeled.png?resize=144%2C259&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"7-segment display\" class=\"wp-image-187096\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">How the Segments are Encoded<\/h4>\n\n\n\n<p>Each segment corresponds to a bit in the byte. Take a look at the following table:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>segment<\/strong><\/td><td><strong>bit<\/strong><\/td><\/tr><tr><td>A<\/td><td>0<\/td><\/tr><tr><td>B<\/td><td>1<\/td><\/tr><tr><td>C<\/td><td>2<\/td><\/tr><tr><td>D<\/td><td>3<\/td><\/tr><tr><td>E<\/td><td>4<\/td><\/tr><tr><td>F<\/td><td>5<\/td><\/tr><tr><td>G<\/td><td>6<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Bit 1 turns a segment ON, and bit 0 turns a segment off.<\/p>\n\n\n\n<p>For example, to turn on segments A, B, and C, you&#8217;d have a byte like <span class=\"rnthl rntliteral\">0b0000111<\/span>.<\/p>\n\n\n\n<p>The byte starts with the G and ends with the A. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span class=\"rnthl rntliteral\">0b0000110<\/span> turns segments <strong>C<\/strong> and <strong>B<\/strong> on.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Display Specific Numbers or Characters<\/h4>\n\n\n\n<p>To display a specific number, you need to use the correct combination of segments:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>0<\/strong>: a, b, c, d, e, f<\/li>\n\n\n\n<li><strong>1<\/strong>: b, c<\/li>\n\n\n\n<li><strong>2<\/strong>: a, b, g, e, d<\/li>\n\n\n\n<li><strong>3<\/strong>: a, b, g, c, d<\/li>\n\n\n\n<li><strong>4<\/strong>: f, g, b, c<\/li>\n\n\n\n<li><strong>5<\/strong>: a, f, g, c, d<\/li>\n\n\n\n<li><strong>6<\/strong>: a, f, g, e, d, c<\/li>\n\n\n\n<li><strong>7<\/strong>: a, b, c<\/li>\n\n\n\n<li><strong>8<\/strong>: a, b, c, d, e, f, g<\/li>\n\n\n\n<li><strong>9<\/strong>: a, b, c, d, f, g<\/li>\n<\/ul>\n\n\n\n<p>With this, you can also display other characters, not only numbers.<\/p>\n\n\n\n<p>For example, to manually encode 0123 in the display, you would need an array of bytes like so:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>uint8_t segments&#091;] = {\n  0b0111111, \/\/ 0 \u2014 all segments except G\n  0b0000110, \/\/ 1 \u2014 segments B and C\n  0b1011011, \/\/ 2\n  0b1001111  \/\/ 3\n};<\/code><\/pre>\n\n\n\n<p>For example, to test this function, you can use the following code:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#include &lt;Arduino.h&gt;\n#include &lt;TM1637Display.h&gt;\n\n#define CLK 19\n#define DIO 18\nTM1637Display display(CLK, DIO);\n\nvoid setup() {\n  display.setBrightness(7); \n\n  \/\/ Custom segments (one byte per digit)\n  uint8_t segments[] = {\n    0b0111111, \/\/ 0 \u2014 all segments except G\n    0b0000110, \/\/ 1 \u2014 segments B and C\n    0b1011011, \/\/ 2\n    0b1001111  \/\/ 3\n  };\n\n  display.setSegments(segments);\n}\n\nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_TM1637_Segments.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display a Decimal Number<\/h3>\n\n\n\n<p>To display a decimal number, you can use the <span class=\"rnthl rntliteral\">showNumberDec()<\/span> function on the <span class=\"rnthl rntliteral\">display<\/span> object.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void showNumberDec(int num, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);<\/code><\/pre>\n\n\n\n<p>This function accepts the following parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span class=\"rnthl rntliteral\">num<\/span>: the number to be shown<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">leading_zero<\/span>: when <span class=\"rnthl rntliteral\">true<\/span>, leading zeros are displayed. Otherwise, unnecessary digits are blank.<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">length<\/span>: the number of digits to set. The user must ensure that the number to be shown fits the number of digits requested (for example, if two digits are to be displayed, the number must be between 0 to 99)<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">pos<\/span>: the position of the most significant digit (<span class=\"rnthl rntliteral\">0<\/span> &#8211; leftmost, <span class=\"rnthl rntliteral\">3<\/span> &#8211; rightmost)<\/li>\n<\/ul>\n\n\n\n<p>There are several use case examples of this function in the code. The comments show what each command will display.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.showNumberDec(0, false); \/\/ Expect: ___0\ndelay(TEST_DELAY);\ndisplay.showNumberDec(0, true);  \/\/ Expect: 0000\ndelay(TEST_DELAY);\ndisplay.showNumberDec(1, false); \/\/ Expect: ___1\ndelay(TEST_DELAY);\ndisplay.showNumberDec(1, true);  \/\/ Expect: 0001\ndelay(TEST_DELAY);\ndisplay.showNumberDec(301, false); \/\/ Expect: _301\ndelay(TEST_DELAY);\ndisplay.showNumberDec(301, true); \/\/ Expect: 0301\ndelay(TEST_DELAY);\ndisplay.clear();\ndisplay.showNumberDec(14, false, 2, 1); \/\/ Expect: _14_\ndelay(TEST_DELAY);\ndisplay.clear();\ndisplay.showNumberDec(4, true, 2, 2);  \/\/ Expect: 04__\ndelay(TEST_DELAY);\ndisplay.showNumberDec(-1, false);  \/\/ Expect: __-1\ndelay(TEST_DELAY);\ndisplay.showNumberDec(-12);        \/\/ Expect: _-12\ndelay(TEST_DELAY);\ndisplay.showNumberDec(-999);       \/\/ Expect: -999\ndelay(TEST_DELAY);\ndisplay.clear();\ndisplay.showNumberDec(-5, false, 3, 0); \/\/ Expect: _-5_\ndelay(TEST_DELAY);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Display a Decimal Number with a Colon\/Dot<\/h3>\n\n\n\n<p>There is another function that allows you to display a decimal number and control whether the colon or dot (depending on the display) is on or off. That&#8217;s the <span class=\"rnthl rntliteral\">showNumberDecEx()<\/span> function. Here are the parameters accepted:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void showNumberDecEx(uint16_t num, uint8_t dots = 0, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);<\/code><\/pre>\n\n\n\n<p>It is similar to the previous <span class=\"rnthl rntliteral\">showNumberDec()<\/span> function, but the second argument allows us to enable or disable the colon\/dot.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span class=\"rnthl rntliteral\">num<\/span>: the number to be shown<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">dots<\/span>: dot\/colon enable &#8211; see below how it works<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">leading_zero<\/span>: when <span class=\"rnthl rntliteral\">true<\/span>, leading zeros are displayed. Otherwise, unnecessary digits are blank.<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">length<\/span>: the number of digits to set. The user must ensure that the number to be shown fits the number of digits requested (for example, if two digits are to be displayed, the number must be between 0 to 99)<\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">pos<\/span>: the position of the most significant digit (<span class=\"rnthl rntliteral\">0<\/span> &#8211; leftmost, <span class=\"rnthl rntliteral\">3<\/span> &#8211; rightmost)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Colon\/dot control<\/h4>\n\n\n\n<p>The second argument of the <span class=\"rnthl rntliteral\">showNumberDecEx()<\/span> function is a bitmask, with each bit corresponding to a dot between the digits (or colon mark, as implemented by each module).<\/p>\n\n\n\n<p>For example, for displays with dots between each digit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>0.000  &gt; (<span class=\"rnthl rntliteral\">0b10000000<\/span>)<\/li>\n\n\n\n<li>00.00 &gt; (<span class=\"rnthl rntliteral\">0b01000000<\/span>)<\/li>\n\n\n\n<li>000.0 &gt; (<span class=\"rnthl rntliteral\">0b00100000<\/span>)<\/li>\n\n\n\n<li>0.0.0.0 &gt; (<span class=\"rnthl rntliteral\">0b11100000<\/span>)<\/li>\n<\/ul>\n\n\n\n<p>In our case, it&#8217;s a display with just a colon. So, to display the colon, we can pass the following binary as a second argument:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>00:00 &gt; (<span class=\"rnthl rntliteral\">0b01000000<\/span>)<\/li>\n<\/ul>\n\n\n\n<p>Finally, here&#8217;s an example for displays with dots and colons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>0.0:0.0 &gt; (<span class=\"rnthl rntliteral\">0b11100000<\/span>)<\/li>\n<\/ul>\n\n\n\n<p>For example, to display <span class=\"rnthl rntliteral\">12:30<\/span>, you would call:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.showNumberDecEx(1230, 0b01000000);<\/code><\/pre>\n\n\n\n<p>In the code, this is where the function is used:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Run through all the dots\nfor(k=0; k &lt;= 4; k++) {\n  display.showNumberDecEx(0, (0x80 &gt;&gt; k), true);\n  delay(TEST_DELAY);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Demonstration<\/h3>\n\n\n\n<p>Upload the code to the board. It will display a series of digits, characters, and segments on the display to test the library functions.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 with TME1637 Display Testing\" class=\"wp-image-187307\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<div class=\"wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular\"><div class=\"\"><div class=\"tiled-gallery__gallery\"><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:50.00000%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo.jpg?strip=info&#038;w=600&#038;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo.jpg?strip=info&#038;w=750&#038;ssl=1 750w\" alt=\"ESP32 with TME1637 Display Testing\" data-height=\"422\" data-id=\"187309\" data-link=\"https:\/\/randomnerdtutorials.com\/?attachment_id=187309#main\" data-url=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo.jpg\" data-width=\"750\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo.jpg?ssl=1\" data-amp-layout=\"responsive\"\/><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:50.00000%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo-2.jpg?strip=info&#038;w=600&#038;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo-2.jpg?strip=info&#038;w=750&#038;ssl=1 750w\" alt=\"ESP32 with TME1637 Display Testing\" data-height=\"422\" data-id=\"187308\" data-link=\"https:\/\/randomnerdtutorials.com\/?attachment_id=187308#main\" data-url=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo-2.jpg\" data-width=\"750\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Testing-demo-2.jpg?ssl=1\" data-amp-layout=\"responsive\"\/><\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<p>If the example doesn&#8217;t work, double-check the wiring and the power supply.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"project-examples\">Practical Examples with the TM1637 Display<\/h2>\n\n\n\n<p>Now that you know the basic functions to control the display, we&#8217;ll show you two practical examples that you can test with the TM1637 Display and the ESP32:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#digital-clock\" title=\"\">ESP32 Digital Clock with the TM1637 Display (with timezone adjustment and DST)<\/a><\/li>\n\n\n\n<li><a href=\"#temperature-display\" title=\"\">ESP32 Temperature Display (TM1637) \u2014 with temperature from WeatherAPI<\/a><\/li>\n<\/ul>\n\n\n\n<p>These two projects only require the ESP32 and the display. No extra hardware is needed, as all the information will be requested from the internet using the <a href=\"https:\/\/randomnerdtutorials.com\/esp32-useful-wi-fi-functions-arduino\/\" title=\"\">ESP32&#8217;s Wi-Fi capabilities<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"digital-clock\">ESP32 Digital Clock with the TM1637 Display (with timezone adjustment and DST)<\/h2>\n\n\n\n<p>The layout of the TM1637 4-Digit 7-Segment display with a colon between the second and the third characters is ideal for creating a digital clock, with the hour on one side of the colon and the minutes on the other side.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 TM1637 Digital Internet Clock\" class=\"wp-image-187314\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>We&#8217;ll get the time for your timezone using NTP (network time protocol) with adjustment for daylight saving time.<\/p>\n\n\n\n<p>To learn more about getting time&nbsp;with the ESP32 for your timezone and consider daylight saving time (if that\u2019s the case), you can read the following in-depth guide:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-ntp-timezones-daylight-saving\/\" title=\"\">ESP32 NTP Time \u2013 Setting Up Timezones and Daylight Saving Time<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Project Overview<\/h3>\n\n\n\n<p>Here&#8217;s a quick overview of the steps to create this project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Initialize the display;<\/li>\n\n\n\n<li>Initialize Wi-Fi and connect the ESP32 to your local network so that it can get data from the internet;<\/li>\n\n\n\n<li>Initialize time for your specified timezone (takes into account daylight saving time);<\/li>\n\n\n\n<li>Show the time on the display (blink the colon between the numbers every second).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Code &#8211; TM1637 Digital Clock<\/h3>\n\n\n\n<p>You can upload the following code to your ESP32 board. You need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Insert your SSID and password;<\/li>\n\n\n\n<li>Insert your timezone string. A list can be found on <a href=\"https:\/\/github.com\/nayarsystems\/posix_tz_db\/blob\/master\/zones.csv\" target=\"_blank\" rel=\"noopener\" title=\"\">nayarsystems github&#8217;s<\/a>.<\/li>\n<\/ul>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#include &lt;WiFi.h&gt;\n#include &quot;time.h&quot;\n#include &lt;TM1637Display.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ TM1637 pins\n#define CLK 19\n#define DIO 18\n\nTM1637Display display(CLK, DIO);\n\n\/\/ Timezone (Lisbon \/ Portugal)\n\/\/ Change if needed - See list of timezones strings: https:\/\/github.com\/nayarsystems\/posix_tz_db\/blob\/master\/zones.csv\nconst char* TZ_INFO = &quot;WET0WEST,M3.5.0\/1,M10.5.0&quot;;\n\n\/\/ Init Wifi\nvoid initWiFi() {\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi..&quot;);\n  }\n}\n\n\/\/ Initialize Time with the specified timezone\nvoid initTime() {\n  configTime(0, 0, &quot;pool.ntp.org&quot;);\n  setenv(&quot;TZ&quot;, TZ_INFO, 1);\n  tzset();\n}\n\n\/\/ display the time on the screen\nvoid displayTime() {\n\n  \/\/ blinking colon\n  static bool colon = false;\n  colon = !colon;\n\n  \/\/ get the current time\n  struct tm timeinfo;\n  if (!getLocalTime(&amp;timeinfo)) {\n    return;\n  }\n\n  int hours   = timeinfo.tm_hour;   \/\/ get hours (0\u201323)\n  int minutes = timeinfo.tm_min;    \/\/ get minutes (0\u201359)\n\n  \/\/ move hours to the left two digits\n  int hourPart = hours * 100;\n\n  \/\/ combine hours and minutes into HHMM\n  int value = hourPart + minutes;\n\n  \/\/ control the colon (for blinking colon)\n  uint8_t colonMask;\n  if (colon == true) {\n    colonMask = 0b01000000;   \/\/ turn colon ON\n  } else {\n    colonMask = 0;            \/\/ turn colon OFF\n  }\n\n  display.showNumberDecEx(\n    value,\n    colonMask,   \/\/ blink colon\n    true         \/\/ leading zeros\n  );\n}\n\nvoid setup() {\n  Serial.begin(115200);\n\n  display.setBrightness(7);\n  display.clear();\n\n  initWiFi();\n  initTime();\n}\n\nvoid loop() {\n  displayTime();\n  delay(1000);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_TM1637_Digital_Clock.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How Does the Code Work?<\/h3>\n\n\n\n<p>Let&#8217;s take a quick look at the code to see how it works.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Include Libraries<\/h4>\n\n\n\n<p>Start by including the required libraries.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;WiFi.h&gt;\n#include \"time.h\"\n#include &lt;TM1637Display.h&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Network Credentials<\/h4>\n\n\n\n<p>Insert your network credentials on the following lines.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize the Display<\/h4>\n\n\n\n<p>Set the TM1637 pins and create an instance for the display called <span class=\"rnthl rntliteral\">display<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ TM1637 pins\n#define CLK 19\n#define DIO 18\n\nTM1637Display display(CLK, DIO);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Timezone<\/h4>\n\n\n\n<p>Insert your timezone string in the following line. You can find a <a href=\"https:\/\/github.com\/nayarsystems\/posix_tz_db\/blob\/master\/zones.csv\" target=\"_blank\" rel=\"noopener\" title=\"\">list of timezone strings here<\/a>. In my case, my timezone is Lisbon\/Portugal, so it will look as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* TZ_INFO = \"WET0WEST,M3.5.0\/1,M10.5.0\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize Wi-Fi<\/h4>\n\n\n\n<p>The following function initializes Wi-Fi and connects the ESP32 to your local network. This will be called later on in the <span class=\"rnthl rntliteral\">setup()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Init Wifi\nvoid initWiFi() {\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(\"Connecting to WiFi..\");\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group rntbox rntclblue\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>You can learn more about the ESP32 Wi-Fi function in the following tutorial:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-useful-wi-fi-functions-arduino\/\">ESP32 Useful Wi-Fi Library Functions (Arduino IDE)<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize Time<\/h4>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">initTime()<\/span> function initializes NTP time and adjusts it to your timezone\u2014notice the <span class=\"rnthl rntliteral\">setenv()<\/span> and <span class=\"rnthl rntliteral\">tzset()<\/span> functions.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Initialize Time with the specified timezone\nvoid initTime() {\n  configTime(0, 0, \"pool.ntp.org\");\n  setenv(\"TZ\", TZ_INFO, 1);\n  tzset();\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group rntbox rntclblue\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>To learn more about getting the date and time with timezone adjustment, check out this tutorial:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-ntp-timezones-daylight-saving\/\">ESP32 NTP Time \u2013 Setting Up Timezones and Daylight Saving Time<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">displayTime()<\/span> function will display the date and time on the screen.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void displayTime() {<\/code><\/pre>\n\n\n\n<p>We have a boolean variable called <span class=\"rnthl rntliteral\">colon<\/span> to determine whether the colon is showing up or not (to create the blinking effect).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ blinking colon\nstatic bool colon = false;\ncolon = !colon;<\/code><\/pre>\n\n\n\n<p>We get the current time and save it in the <span class=\"rnthl rntliteral\">timeinfo<\/span> structure.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ get the current time\nstruct tm timeinfo;\nif (!getLocalTime(&amp;timeinfo)) {\n  return;\n}<\/code><\/pre>\n\n\n\n<p>Then, we can get the hour and minutes as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int hours   = timeinfo.tm_hour;   \/\/ get hours (0\u201323)\nint minutes = timeinfo.tm_min;    \/\/ get minutes (0\u201359)<\/code><\/pre>\n\n\n\n<p>Now, to display the numbers on the screen, we need to combine the date and time in a single number with four digits that will be split in the middle by the colon.<\/p>\n\n\n\n<p>We can do that by multiplying the hour by 100 and then adding the minutes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ move hours to the left two digits\nint hourPart = hours * 100;\n\n\/\/ combine hours and minutes into HHMM\nint value = hourPart + minutes;<\/code><\/pre>\n\n\n\n<p>For example, imagine the hour is 12 and the minutes are 30. We want to get 12:30. So, we need to get the 1230 number and display the colon in the middle.<\/p>\n\n\n\n<p>12*100+30 will give the desired 1230. This number is saved in the <span class=\"rnthl rntliteral\">value<\/span> variable.<\/p>\n\n\n\n<p>Finally, we adjust the bitmask to display the colon depending on whether it is time to display the colon.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ control the colon (for blinking colon)\nuint8_t colonMask;\nif (colon == true) {\n  colonMask = 0b01000000;   \/\/ turn colon ON\n} else {\n  colonMask = 0;            \/\/ turn colon OFF\n}<\/code><\/pre>\n\n\n\n<p>We can use the <span class=\"rnthl rntliteral\">showNumberDecEx()<\/span> to display the time on the screen. Pass as an argument the value, the bit mask for the colon, and whether we have leading zeros.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.showNumberDecEx(\n  value,\n  colonMask,   \/\/ blink colon\n  true         \/\/ leading zeros\n);<\/code><\/pre>\n\n\n\n<p>Now that we have all the essential functions declared, it is easy to set up our code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">setup()<\/h4>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span> initialize the Serial Monitor, set the display brightness, initialize Wi-Fi, and time.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void setup() {\n  Serial.begin(115200);\n\n  display.setBrightness(7);\n  display.clear();\n\n  initWiFi();\n  initTime();\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">loop()<\/h4>\n\n\n\n<p>Finally, in the <span class=\"rnthl rntliteral\">loop(),<\/span> you just need to call the <span class=\"rnthl rntliteral\">displayTime()<\/span> function to display the time on the 4-digit 7-segment display module.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void loop() {\n  displayTime();\n  delay(1000);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Demonstration<\/h3>\n\n\n\n<p>After inserting your network credentials and your timezone information, you can upload the code to the ESP32.<\/p>\n\n\n\n<p>It should start displaying the current time for your timezone.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock-2.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 TM1637 Digital Internet Clock\" class=\"wp-image-187315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock-2.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Digital-Internet-Clock-2.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>The colon should be blinking every second to resemble those old digital clocks.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"temperature-display\">ESP32 Temperature Display (TM1637) from Weather API<\/h2>\n\n\n\n<p>In this project, we&#8217;ll display the current temperature for your city on the display. We&#8217;ll get the temperature from the <a href=\"https:\/\/www.weatherapi.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Weather API<\/a>.<\/p>\n\n\n\n<p>This API is free and provides useful information about the weather in almost any location in the world.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"108\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-forecaster.jpg?resize=350%2C108&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Weather forecaster example\" class=\"wp-image-159901\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-forecaster.jpg?w=350&amp;quality=100&amp;strip=all&amp;ssl=1 350w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-forecaster.jpg?resize=300%2C93&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/figure><\/div>\n\n\n<p>We\u2019ll get the temperature for your location and display it on the 7-segment display module.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Getting Your API Key<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Weather API website: <a href=\"https:\/\/www.weatherapi.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">weatherapi.com\/<\/a><\/li>\n\n\n\n<li>Signup to create an account.<\/li>\n\n\n\n<li>After verifying your account, login into your account.<\/li>\n\n\n\n<li>On your dashboard at <a href=\"https:\/\/www.weatherapi.com\/my\/\" target=\"_blank\" rel=\"noopener\" title=\"\">weatherapi.com\/my\/<\/a> , you\u2019ll find your API key (even though it says the trial will end, you can continue using your API key freely).<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"247\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-api-key.png?resize=884%2C247&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Weather API Key\" class=\"wp-image-159899\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-api-key.png?w=884&amp;quality=100&amp;strip=all&amp;ssl=1 884w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-api-key.png?resize=300%2C84&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-api-key.png?resize=768%2C215&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/figure><\/div>\n\n\n<p>Copy the API key to a safe place because you\u2019ll need it later.<\/p>\n\n\n\n<p>To pull information on the weather in your chosen location, enter the following URL in your web browser, but insert your location and API key in the right places:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">https:\/\/api.weatherapi.com\/v1\/current.json?q=<strong>YOUR_LOCATION<\/strong>+&amp;key=<strong>YOUR_API_KEY<\/strong>'<\/pre>\n\n\n\n<p>For example, in my case:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;api.weatherapi.com\/v1\/current.json?q=Oporto+&amp;key=d1578a064b07453c917164350240106'<\/code><\/pre>\n\n\n\n<p>Copy your URL and paste it into your browser, and the API will return information corresponding to your local weather. For example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted language-c\">{<br>  \"location\": {<br>    \"name\": \"Oporto\",<br>    \"region\": \"Porto\",<br>    \"country\": \"Portugal\",<br>    \"lat\": 41.15,<br>    \"lon\": -8.62,<br>    \"tz_id\": \"Europe\/Lisbon\",<br>    \"localtime_epoch\": 1719843562,<br>    \"localtime\": \"2024-07-01 15:19\"<br>  },<br>  \"current\": {<br>    \"last_updated_epoch\": 1719843300,<br>    \"last_updated\": \"2024-07-01 15:15\",<br>    \"temp_c\": 22.3,<br>    \"temp_f\": 72.1,<br>    \"is_day\": 1,<br>    \"condition\": {<br>      \"text\": \"Sunny\",<br>      \"icon\": \"\/\/cdn.weatherapi.com\/weather\/64x64\/day\/113.png\",<br>      \"code\": 1000<br>    },<br>    \"wind_mph\": 10.5,<br>    \"wind_kph\": 16.9,<br>    \"wind_degree\": 310,<br>    \"wind_dir\": \"NW\",<br>    \"pressure_mb\": 1021,<br>    \"pressure_in\": 30.15,<br>    \"precip_mm\": 0,<br>    \"precip_in\": 0,<br>    \"humidity\": 69,<br>    \"cloud\": 0,<br>    \"feelslike_c\": 24.7,<br>    \"feelslike_f\": 76.4,<br>    \"windchill_c\": 21.9,<br>    \"windchill_f\": 71.5,<br>    \"heatindex_c\": 24.6,<br>    \"heatindex_f\": 76.2,<br>    \"dewpoint_c\": 15,<br>    \"dewpoint_f\": 58.9,<br>    \"vis_km\": 10,<br>    \"vis_miles\": 6,<br>    \"uv\": 6,<br>    \"gust_mph\": 15.4,<br>    \"gust_kph\": 24.7<br>  }<br>}<\/pre>\n\n\n\n<p>From this JSON, we can easily get the temperature for your location, either in Celsius or Fahrenheit: <span class=\"rnthl rntliteral\">temp_c<\/span> and <span class=\"rnthl rntliteral\">temp_f<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installing Libraries<\/h3>\n\n\n\n<p>For this example, you need to install the <strong>ArduinoJSON library by bblanchon<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"586\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-ArduinoJSON-library.jpg?resize=666%2C586&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ArduinoJSON library Arduino IDE\" class=\"wp-image-187148\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-ArduinoJSON-library.jpg?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-ArduinoJSON-library.jpg?resize=300%2C264&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Code &#8211; TM1637 Temperature Display<\/h3>\n\n\n\n<p>You can upload the following code to your board. You need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>insert your SSID and password;<\/li>\n\n\n\n<li>insert your WeatherAPI API key;<\/li>\n\n\n\n<li>insert the city where you want to get the temperature for.<\/li>\n<\/ul>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n#include &lt;WiFi.h&gt;\n#include &lt;HTTPClient.h&gt;\n#include &lt;ArduinoJson.h&gt;\n#include &lt;TM1637Display.h&gt;\n\n\/\/ Wi-Fi credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\nconst char* api_key = &quot;REPLACE_WITH_YOUR_WeatherAPI_API_Key&quot;;\nconst char* location = &quot;Oporto&quot;;  \/\/ &quot;q&quot; Parameter documentation for location: https:\/\/www.weatherapi.com\/docs\/#intro-request\n\n\/\/ Request URL\nString url = &quot;https:\/\/api.weatherapi.com\/v1\/current.json?q=&quot; + String(location) + &quot;&amp;key=&quot; + String(api_key);\n\n\/\/ TM1637 pins\n#define CLK 19\n#define DIO 18\n\nTM1637Display display(CLK, DIO);\n\n\/\/ Create the \u00b0C Symbol\nconst uint8_t Celsius[] = {\n  SEG_A | SEG_B | SEG_F | SEG_G,  \/\/ Circle\n  SEG_A | SEG_D | SEG_E | SEG_F   \/\/ C\n};\n\n\/\/ Create the \u00b0F Symbol\nconst uint8_t Fahrenheit[] = {\n  SEG_A | SEG_B | SEG_F | SEG_G,  \/\/ Circle\n  SEG_F | SEG_E | SEG_A | SEG_G   \/\/ F\n};\n\n\/\/ Global variables for temperatures and timers\nfloat currentTempC = 9999;  \/\/ Initial error value\nfloat currentTempF = 9999;  \/\/ Initial error value\nunsigned long lastFetchTime = 0;\nconst unsigned long fetchInterval = 3600000UL;  \/\/ 1 hour in milliseconds\n\n\/\/ Init Wifi\nvoid initWiFi() {\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi..&quot;);\n  }\n  Serial.println(&quot;Connection successful&quot;);\n  Serial.print(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n}\n\nbool updateTemperatures() {\n  HTTPClient http;\n  http.begin(url);\n\n  int httpCode = http.GET();\n\n  if (httpCode == HTTP_CODE_OK) {  \/\/ Check for 200 specifically\n    String payload = http.getString();\n    Serial.print(payload);\n\n    \/\/ Parse JSON\n    StaticJsonDocument&lt;1024&gt; doc; \/\/ Adjust size if needed based on response\n    DeserializationError error = deserializeJson(doc, payload);\n\n    if (error) {\n      Serial.print(&quot;JSON parsing failed: &quot;);\n      Serial.println(error.c_str());\n      http.end();\n      return false;\n    }\n\n    \/\/ Get both temperatures\n    currentTempC = doc[&quot;current&quot;][&quot;temp_c&quot;];\n    currentTempF = doc[&quot;current&quot;][&quot;temp_f&quot;];\n    http.end();\n    return true;\n  } else {\n    Serial.print(&quot;Error during request: &quot;);\n    Serial.println(httpCode);\n    http.end();\n    return false;\n  }\n}\n\nvoid setup() {\n  Serial.begin(115200);\n  delay(1000); \/\/ Give time for Serial to initialize\n\n  \/\/ Connect to Wi-Fi\n  initWiFi();\n\n  display.setBrightness(7);  \/\/ Set the display brightness (0-7)\n\n  \/\/ Initial fetch\n  if (updateTemperatures()) {\n    lastFetchTime = millis();\n  }\n}\n\nvoid loop() {\n  \/\/ Check if it's time to fetch new data\n  if (millis() - lastFetchTime &gt;= fetchInterval) {\n    if (updateTemperatures()) {\n      lastFetchTime = millis();\n    } else {\n      \/\/ If failed, try again next loop \n      Serial.println(&quot;Fetch failed, keeping old values.&quot;);\n    }\n  }\n\n  \/\/ Show Celsius\n  Serial.print(&quot;Temperature in Celsius: &quot;);\n  Serial.println(currentTempC, 2);\n  \n  int roundedTempC = round(currentTempC);\n  display.showNumberDec(roundedTempC, false, 2, 0);\n  display.setSegments(Celsius, 2, 2);\n\n  delay(5000);\n\n  \/\/ Show Fahrenheit\n  Serial.print(&quot;Temperature in Fahrenheit: &quot;);\n  Serial.println(currentTempF, 2);\n\n  int roundedTempF = round(currentTempF);\n  display.showNumberDec(roundedTempF, false, 2, 0);\n  display.setSegments(Fahrenheit, 2, 2);\n\n  delay(5000);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP32\/ESP32_TM1637_Temperature_Display.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How Does the Code Work?<\/h3>\n\n\n\n<p>Let&#8217;s take a quick look at the relevant parts of the code for this tutorial.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Including Libraries<\/h4>\n\n\n\n<p>We start by including the required libraries.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;WiFi.h&gt;\n#include &lt;HTTPClient.h&gt;\n#include &lt;ArduinoJson.h&gt;\n#include &lt;TM1637Display.h&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Network Credentials<\/h4>\n\n\n\n<p>Insert your network credentials in the following lines.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Weather API<\/h4>\n\n\n\n<p>Insert your WeatherAPI key and the location you want to get data for.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* api_key = \"REPLACE_WITH_YOUR_API_KEY\";\nconst char* location = \"REPLACE_WITH_YOUR_LOCATION\";<\/code><\/pre>\n\n\n\n<p>This is the request URL that will return the weather data.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String url = \"https:\/\/api.weatherapi.com\/v1\/current.json?q=\" + String(location) + \"&amp;key=\" + String(api_key);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">TM1637 Display<\/h4>\n\n\n\n<p>Set the pins that are controlling the display and initialize an instance of the display called <span class=\"rnthl rntliteral\">display<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ TM1637 pins\n#define CLK 19\n#define DIO 18\n\nTM1637Display display(CLK, DIO);<\/code><\/pre>\n\n\n\n<p>Create an array with the required segments to create the \u00baC and \u00baF symbols.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Create the \u00b0C Symbol\nconst uint8_t Celsius&#091;] = {\n  SEG_A | SEG_B | SEG_F | SEG_G,  \/\/ Circle\n  SEG_A | SEG_D | SEG_E | SEG_F   \/\/ C\n};\n\n\/\/ Create the \u00b0F Symbol\nconst uint8_t Fahrenheit&#091;] = {\n  SEG_A | SEG_B | SEG_F | SEG_G,  \/\/ Circle\n  SEG_F | SEG_E | SEG_A | SEG_G   \/\/ F\n};<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">SEG_A<\/span>, <span class=\"rnthl rntliteral\">SEG_B<\/span>, and so on are references to their specific bytes (these are defined in the library <em>.h<\/em> file).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Global variables<\/h4>\n\n\n\n<p>Create global variables to store the temperature in Celsius and Fahrenheit.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>float currentTempC = 9999;  \/\/ Initial error value\nfloat currentTempF = 9999;  \/\/ Initial error value<\/code><\/pre>\n\n\n\n<p>And auxiliar variables to count the time to make a request to the API every hour.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>unsigned long lastFetchTime = 0;\nconst unsigned long fetchInterval = 3600000UL;  \/\/ 1 hour in milliseconds<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize Wi-Fi<\/h4>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">initWiFi()<\/span> function will initialize Wi-Fi and connect to your network using the inserted credentials.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Init Wifi\nvoid initWiFi() {\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(\"Connecting to WiFi..\");\n  }\n  Serial.println(\"Connection successful\");\n  Serial.print(\"IP address: \");\n  Serial.println(WiFi.localIP());\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Get\/Update the Temperatures<\/h4>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">updateTemperatures()<\/span> function makes a request to the WeatherAPI request URL.<\/p>\n\n\n\n<p>The request returns a bunch of weather data as we&#8217;ve seen previously. We print all data to the Serial Monitor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>bool updateTemperatures() {\nHTTPClient http;\nhttp.begin(url);\n\nint httpCode = http.GET();\n\nif (httpCode == HTTP_CODE_OK) {  \/\/ Check for 200 specifically\n  String payload = http.getString();\n  Serial.print(payload);<\/code><\/pre>\n\n\n\n<p>Then, we only save the data we&#8217;re interested in. In this case, the temperature in Celsius and Fahrenheit. We save them in the <span class=\"rnthl rntliteral\">currentTempC<\/span> and <span class=\"rnthl rntliteral\">currentTempF<\/span> variables.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>currentTempC = doc&#091;\"current\"]&#091;\"temp_c\"];\ncurrentTempF = doc&#091;\"current\"]&#091;\"temp_f\"];<\/code><\/pre>\n\n\n\n<p>If everything goes well with the request, the function returns <span class=\"rnthl rntliteral\">true<\/span>. Otherwise, it returns <span class=\"rnthl rntliteral\">false<\/span>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">setup()<\/h4>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, we initialize the Serial Monitor, connect to Wi-Fi, and set the display brightness.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void setup() {\n  Serial.begin(115200);\n  delay(1000); \/\/ Give time for Serial to initialize\n\n  \/\/ Connect to Wi-Fi\n  initWiFi();\n\n  display.setBrightness(7);  \/\/ Set the display brightness (0-7)<\/code><\/pre>\n\n\n\n<p>Then, we make our first request to the API to get the current temperatures when the code first runs. From that time on, we also start counting the time to check later in the <span class=\"rnthl rntliteral\">loop()<\/span> if it&#8217;s time to make another request.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Initial fetch\nif (updateTemperatures()) {\n  lastFetchTime = millis();\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">loop()<\/h4>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">loop()<\/span>, we&#8217;re constantly checking when it&#8217;s time to get new values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Check if it's time to fetch new data\nif (millis() - lastFetchTime &gt;= fetchInterval) {\n  if (updateTemperatures()) {\n    lastFetchTime = millis();\n  } else {\n    \/\/ If failed, try again next loop \n    Serial.println(\"Fetch failed, keeping old values.\");\n  }\n}<\/code><\/pre>\n\n\n\n<p>Then, in the display, we&#8217;re alternating between showing the temperature in Celsius and in Fahrenheit every five seconds.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Show Celsius\nSerial.print(\"Temperature in Celsius: \");\nSerial.println(currentTempC, 2);\n  \nint roundedTempC = round(currentTempC);\ndisplay.showNumberDec(roundedTempC, false, 2, 0);\ndisplay.setSegments(Celsius, 2, 2);\n\ndelay(5000);\n\n\/\/ Show Fahrenheit\nSerial.print(\"Temperature in Fahrenheit: \");\nSerial.println(currentTempF, 2);\n\nint roundedTempF = round(currentTempF);\ndisplay.showNumberDec(roundedTempF, false, 2, 0);\ndisplay.setSegments(Fahrenheit, 2, 2);\n\ndelay(5000);<\/code><\/pre>\n\n\n\n<p>Since the temperature values come as float variables, we need to convert them to integers. To do that, we use the <span class=\"rnthl rntliteral\">round()<\/span> function to round the number. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int roundedTempC = round(currentTempC);<\/code><\/pre>\n\n\n\n<p>Then, we simply call the <span class=\"rnthl rntliteral\">showNumberDec()<\/span> function to display the values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.showNumberDec(roundedTempC, false, 2, 0);<\/code><\/pre>\n\n\n\n<p>Then, call the <span class=\"rnthl rntliteral\">setSegments()<\/span> function to display the \u00baC and \u00baF Units.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setSegments(Celsius, 2, 2);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>Upload the code to your ESP32 board. Don&#8217;t forget to insert your SSID and password in the code, as well as the API key, and your location.<\/p>\n\n\n\n<p>You should get a successful message on the Serial Monitor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"347\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Display-Temperature-from-API-Serial-Monitor-Arduino-IDE.png?resize=666%2C347&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Get Temperature from API - ESP32 - Serial Monitor\" class=\"wp-image-187317\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Display-Temperature-from-API-Serial-Monitor-Arduino-IDE.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Display-Temperature-from-API-Serial-Monitor-Arduino-IDE.png?resize=300%2C156&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p>And the temperature in Celsius and Fahrenheit degrees will show up alternating on the display.<\/p>\n\n\n\n<div class=\"wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular\"><div class=\"\"><div class=\"tiled-gallery__gallery\"><div class=\"tiled-gallery__row\"><div class=\"tiled-gallery__col\" style=\"flex-basis:50.00000%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Celsius.jpg?strip=info&#038;w=600&#038;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Celsius.jpg?strip=info&#038;w=750&#038;ssl=1 750w\" alt=\"ESP32 with TM1637 Display - Show temperature in Celsius\" data-height=\"422\" data-id=\"187319\" data-link=\"https:\/\/randomnerdtutorials.com\/?attachment_id=187319#main\" data-url=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Celsius.jpg\" data-width=\"750\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Celsius.jpg?ssl=1\" data-amp-layout=\"responsive\"\/><\/figure><\/div><div class=\"tiled-gallery__col\" style=\"flex-basis:50.00000%\"><figure class=\"tiled-gallery__item\"><img decoding=\"async\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Fahrenheit.jpg?strip=info&#038;w=600&#038;ssl=1 600w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Fahrenheit.jpg?strip=info&#038;w=750&#038;ssl=1 750w\" alt=\"ESP32 with TM1637 Display - Show temperature in Fahrenheit\" data-height=\"422\" data-id=\"187320\" data-link=\"https:\/\/randomnerdtutorials.com\/?attachment_id=187320#main\" data-url=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Fahrenheit.jpg\" data-width=\"750\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Fahrenheit.jpg?ssl=1\" data-amp-layout=\"responsive\"\/><\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>This was a comprehensive guide on how to interface the TM1637 4-digit 7-segment display with the ESP32. It can be quite useful to display temperature, the time, or other information.<\/p>\n\n\n\n<p>The specific format of display we have, with a colon in the middle, might be especially useful to create a digital clock or to display a timer.<\/p>\n\n\n\n<p>We hope you&#8217;ve found this guide useful. We have guides for other displays that might be helpful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-ssd1306-oled-display-arduino-ide\/\">ESP32 <strong>OLED Display<\/strong> with Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-i2c-lcd-arduino-ide\/\">How to Use <strong>I2C LCD<\/strong> with ESP32 on Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/cheap-yellow-display-esp32-2432s028r\/\">Getting Started with ESP32 <strong>Cheap Yellow Display<\/strong> Board \u2013 CYD (ESP32-2432S028R)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-tft-touchscreen-display-2-8-ili9341-arduino\/\">ESP32: <strong>TFT LCD Touchscreen Display<\/strong> \u2013 2.8 inch ILI9341 240\u00d7320 (Arduino IDE)<\/a><\/li>\n<\/ul>\n\n\n\n<p>To learn more about the ESP32, make sure to check out our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (eBook)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">All our ESP32 Projects and Guides<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guide on how to interface the TM1637 4-Digit LED 7-Segment display with the ESP32 programmed with Arduino IDE. You&#8217;ll learn how to wire the display to the &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32 with TM1637 4-Digit LED 7-Segment Display (Arduino IDE)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-tm1637-4-digit-7-segment-display-arduino\/#more-187031\" aria-label=\"Read more about ESP32 with TM1637 4-Digit LED 7-Segment Display (Arduino IDE)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":187231,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,281,277,299,264],"tags":[],"class_list":["post-187031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32","category-esp32-project","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display.jpg?fit=1920%2C1080&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/187031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=187031"}],"version-history":[{"count":36,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/187031\/revisions"}],"predecessor-version":[{"id":188063,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/187031\/revisions\/188063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/187231"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=187031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=187031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=187031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}