![\"ESP32:](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/02\/ESP32-Temperature-Display-TM1637.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThis is a great project to put into practice how to make HTTP requests with the ESP32 and use the TM1637 7-segment display. For in-depth tutorials about these subjects, check the following articles:<\/p>\n\n\n\n
- \n
- ESP32 with TM1637 4-Digit LED 7-Segment Display (Arduino IDE)<\/a><\/li>\n\n\n\n
- ESP32 HTTP POST with Arduino IDE (ThingSpeak and IFTTT.com)<\/a><\/li>\n\n\n\n
- ESP32 HTTP GET with Arduino IDE (OpenWeatherMap.org and ThingSpeak)<\/a><\/li>\n<\/ul>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Before proceeding, make sure you have the Arduino IDE installed and the ESP32 boards. Follow the next tutorial if you haven’t already:<\/p>\n\n\n\n
- \n
- Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
In this project, we\u2019ll display the current temperature for your city on the TM1637 4-Digit 7-Segment display. We\u2019ll get the temperature from the Weather API<\/a>.<\/p>\n\n\n\n
Here\u2019s a quick overview of the steps we need to follow to create this project:<\/p>\n\n\n\n
- \n
- Initialize the display and set its brightness;<\/li>\n\n\n\n
- 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
- Make a request to the WeatherAPI to get temperature for your choosen location.<\/li>\n\n\n\n
- Show the temperature in the display (alternate between temperature in Celsius and in Fahrenheit degrees).<\/li>\n\n\n\n
- Every hour, make a new request to the WeatherAPI to get more recent data.<\/li>\n<\/ol>\n\n\n\n
TM1637 4-Digit LED 7-Segment Display<\/h3>\n\n\n\n
The TM1637 4-Digit LED 7-Segment display<\/a> is a display module that combines four 7-segment digits in a single display that can be controlled via the TM1637 driver. The particular module we’re using here has four digits separated by a colon between the second and third digits. This layout is ideal for creating a digital clock, with the hour on one side of the colon and the minutes on the other.<\/p>\n\n\n
\n![\"TM1637](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWeather API<\/h3>\n\n\n\n
In this project, we’ll display the current temperature for your city on the display. We’ll get the temperature from the Weather API<\/a>.<\/p>\n\n\n\n
This API is free and provides useful information about the weather in almost any location in the world.<\/p>\n\n\n
\n![\"Weather](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-forecaster.jpg?resize=350%2C108&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWe\u2019ll get the temperature for your location and display it on the 7-segment display module.<\/p>\n\n\n\n
Getting Your API Key<\/h4>\n\n\n\n
- \n
- Go to the Weather API website: weatherapi.com\/<\/a><\/li>\n\n\n\n
- Signup to create an account.<\/li>\n\n\n\n
- After verifying your account, login into your account.<\/li>\n\n\n\n
- On your dashboard at 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
\n![\"Weather](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/weather-api-key.png?resize=884%2C247&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCopy the API key to a safe place because you\u2019ll need it later.<\/p>\n\n\n\n
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
https:\/\/api.weatherapi.com\/v1\/current.json?q=YOUR_LOCATION<\/strong>+&key=YOUR_API_KEY<\/strong>'<\/pre>\n\n\n\n
For example, in my case:<\/p>\n\n\n\n
https://api.weatherapi.com\/v1\/current.json?q=Oporto+&key=d1578a064b07453c917164350240106'<\/code><\/pre>\n\n\n\nCopy 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
{
\"location\": {
\"name\": \"Oporto\",
\"region\": \"Porto\",
\"country\": \"Portugal\",
\"lat\": 41.15,
\"lon\": -8.62,
\"tz_id\": \"Europe\/Lisbon\",
\"localtime_epoch\": 1719843562,
\"localtime\": \"2024-07-01 15:19\"
},
\"current\": {
\"last_updated_epoch\": 1719843300,
\"last_updated\": \"2024-07-01 15:15\",
\"temp_c\": 22.3,
\"temp_f\": 72.1,
\"is_day\": 1,
\"condition\": {
\"text\": \"Sunny\",
\"icon\": \"\/\/cdn.weatherapi.com\/weather\/64x64\/day\/113.png\",
\"code\": 1000
},
\"wind_mph\": 10.5,
\"wind_kph\": 16.9,
\"wind_degree\": 310,
\"wind_dir\": \"NW\",
\"pressure_mb\": 1021,
\"pressure_in\": 30.15,
\"precip_mm\": 0,
\"precip_in\": 0,
\"humidity\": 69,
\"cloud\": 0,
\"feelslike_c\": 24.7,
\"feelslike_f\": 76.4,
\"windchill_c\": 21.9,
\"windchill_f\": 71.5,
\"heatindex_c\": 24.6,
\"heatindex_f\": 76.2,
\"dewpoint_c\": 15,
\"dewpoint_f\": 58.9,
\"vis_km\": 10,
\"vis_miles\": 6,
\"uv\": 6,
\"gust_mph\": 15.4,
\"gust_kph\": 24.7
}
}<\/pre>\n\n\n\nFrom this JSON, we can easily get the temperature for your location, either in Celsius or Fahrenheit: temp_c<\/span> and temp_f<\/span>.<\/p>\n\n\n\n
Parts Required<\/h2>\n\n\n\n
For this project, you need the following parts:<\/p>\n\n\n
\n![\"TM1637](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/02\/TM1637-Display-Parts-Required-Clock.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- ESP32 board <\/a>– any model of your choice<\/li>\n\n\n\n
- TM1637 4-Digit 7-Segment Display<\/a><\/li>\n\n\n\n
- Jumper Wires<\/a><\/li>\n<\/ul>\n\n\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nWiring the TM1637 4-Digit 7-Segment Display to the ESP32<\/h2>\n\n\n
\n![\"TM1637](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/TM1637-Display-pins.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWiring the display to the ESP32 is quite simple, as it only requires two digital pins: CLK <\/strong>and DI\/O<\/strong>.<\/p>\n\n\n\n
- TM1637 4-Digit 7-Segment Display<\/a><\/li>\n\n\n\n
- Go to the Weather API website: weatherapi.com\/<\/a><\/li>\n\n\n\n
- ESP32 HTTP POST with Arduino IDE (ThingSpeak and IFTTT.com)<\/a><\/li>\n\n\n\n
![\"TM1637](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637_wiring.png?resize=900%2C713&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-TM1637-library-Arduino-IDE.png?resize=718%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Install-ArduinoJSON-library.jpg?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Get](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/Display-Temperature-from-API-Serial-Monitor-Arduino-IDE.png?resize=666%2C347&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Celsius.jpg?ssl=1\")
<\/figure><\/div>![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP32-TM1637-Display-Temperature-Fahrenheit.jpg?ssl=1\")
<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n