![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/ESP32-CYD-Cheap-Yellow-Display-LVGL-Weather-Station-Description-Temperature-Humidity.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNew to the ESP32 Cheap Yellow Display?<\/strong> Start here: Getting Started with ESP32 Cheap Yellow Display Board \u2013 CYD (ESP32-2432S028R)<\/a>.<\/p>\n\n\n\n We\u2019ll display the current weather description, temperature, humidity, and date on the ESP32 CYD board. The weather description will also be identified with an image.<\/p>\n\n\n\n To get an accurate weather description for your location, we\u2019ll use the free Open-Meteo<\/a> API. To get the data from the API, the ESP32 needs to connect to the internet, so you need to have a router in your surroundings so that the ESP32 can connect to it.<\/p>\n\n\n\n Before proceeding, make sure you follow the next prerequisites. You must follow all steps, otherwise, your project will not work.<\/strong><\/p>\n\n\n\n For this project, you need the following parts<\/p>\n\n\n\n We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed. Follow the next tutorial:<\/p>\n\n\n\n The ESP32-2432S028R<\/a> development board has become known in the maker community as the \u201cCheap Yellow Display<\/em>\u201d or CYD for short. This development board, whose main chip is an ESP32-WROOM-32 module, comes with a 2.8-inch TFT touchscreen LCD, a microSD card interface, an RGB LED, and all the required circuitry to program and apply power to the board.<\/p>\n\n\n If this is your first time using the ESP32 Cheap Yellow Display, make sure to follow our getting started guide:<\/p>\n\n\n\n LVGL<\/a> (Light and Versatile Graphics Library) is a free and open-source graphics library that provides a wide range of easy-to-use graphical elements for your microcontroller projects that require a graphical user interface (GUI).<\/p>\n\n\n Follow the next tutorial to install and configure the required libraries to use LVGL for the ESP32 Cheap Yellow Display using Arduino IDE.<\/p>\n\n\n\n For this project, you need to install the ArduinoJSON library to handle the JSON response when you make a request to the open-meteo API.<\/p>\n\n\n\n In the Arduino IDE, go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong>. Search for ArduinoJSON <\/strong>and install the library by Benoit Blanchon<\/em>. We\u2019re using version 7.0.4. We recommend using the same version.<\/p>\n\n\n To load custom images using LVGL, you need to create an extra file called weather_images.h<\/em> that must be placed inside the sketch folder. We already prepared that file for you. In order to load the custom images for this weather station project, you need to download the next file.<\/p>\n\n\n\n Important:<\/strong> the weather_images.h<\/em> file should be placed next to the .ino<\/em> file in the sketch folder of your project.<\/p>\n\n\n Your Arduino IDE should have two tabs:<\/p>\n\n\n If you want to learn more about loading images using LVGL, we recommend reading our Guide ESP32 CYD with LVGL: Display Image on the Screen<\/a><\/p>\n\n\n\n The following code will create some text labels with the weather description, temperature, humidity, current date, and last updated time. It will also load an image to illustrate the current weather description.<\/p>\n\n\n\n Before uploading the code to your board, you need to insert your network credentials so that the ESP32 can connect to the internet to get the time and date. You also need to insert your latitude, longitude, location, and timezone.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let\u2019s take a look at how to get current weather data from the API and update the screen with the current values. Alternatively, you can skip to the Demonstration <\/a>section.<\/p>\n\n\n\n You need to include the lvgl.h<\/span> and the TFT_eSPI.h<\/span> libraries to draw the GUI on the screen.<\/p>\n\n\n\n You need to include the WiFi<\/span>, HTTPClient<\/span>, and the ArduinoJson<\/span> libraries to make HTTP requests and handle JSON data.<\/p>\n\n\n\n Include the weather_images.h<\/span> file that contains all the data to draw the weather images.<\/p>\n\n\n\n In the following lines, you must insert your network credentials so that the ESP32 can connect to your router.<\/p>\n\n\n\n Set your latitude<\/span>, longitude<\/span> and location<\/span> in these three variables:<\/p>\n\n\n\n Set your timezone in the timezone<\/span> variable at the beginning of the code (list of all available timezones<\/a>).<\/p>\n\n\n\n Create some auxiliary variables to hold the weather data and other values.<\/p>\n\n\n\n By default, we\u2019ll display the temperature values in Celsius degrees. If you want to display the temperature readings in Fahrenheit degrees, change TEMP_CELSIUS<\/span> variable to 0<\/span>.<\/p>\n\n\n\n We create some global LVGL objects, so that we can access them inside all functions later on.<\/p>\n\n\n\n In the setup()<\/span>, include the following lines for debugging. These will print the version of LVGL that you\u2019re using. You must be using version 9.<\/p>\n\n\n\n To connect the ESP32 to the internet we use the following code.<\/p>\n\n\n\n Initialize the LVGL Library by calling the lv_init()<\/span> function in the setup()<\/span>.<\/p>\n\n\n\n Register your log_print()<\/span> function declared previously as a function associated with debugging LVGL.<\/p>\n\n\n\n To write to the display, you must create a display object first. You need to do this in all your LVGL sketches. The following lines will create an LVGL display object called disp<\/span> with the screen width, screen height, and drawing buffer defined earlier.<\/p>\n\n\n\n The LVGL library works asynchronously. You must call the function to draw on the display in the setup()<\/span>. Then, everything works with events and callbacks. The code will always be listening for events in the background. When something happens, it will run the callback function associated with the event. You don\u2019t need to check for any events in the loop()<\/span>.<\/p>\n\n\n\n Throughout most of our examples, the function that will draw to the screen will be called lv_create_main_gui()<\/span>. Then, inside that function, we\u2019ll add the instructions to build the interface.<\/p>\n\n\n\n When we initialize the screen, we call the get_weather_data()<\/span> function to get the latest weather data from the Open-Meteo API. Then, we store the values in some auxiliary variables that will be used to display them on the screen.<\/p>\n\n\n\n The get_weather_description()<\/span> function receives the weather code from the Open-Meteo API and it assigns the correct weather description and corresponding image to illustrate the current weather.<\/p>\n\n\n\n Before drawing the main GUI, we start by declaring all the images to illustrate the weather description.<\/p>\n\n\n\n Then, we call the weather API to get the latest data and store the values in the auxiliary variables.<\/p>\n\n\n\n We create an image and set it to the left side of the display.<\/p>\n\n\n\n To create a text label, we can call the LVGL function lv_label_create()<\/span> and pass as argument where we want to display the text. We want to add it to the current screen (lv_screen_active()<\/span>).<\/p>\n\n\n\n After creating the text label, we can set its text by using the lv_label_set_text()<\/span> function that accepts as arguments the text label we\u2019re referring to and the text we want to add to that label. In our case, we\u2019re setting it to the current date.<\/p>\n\n\n\n The following lines align the text label. You can use the lv_obj_align()<\/span> function. Pass as arguments, the LVGL object, the alignment and x and y offsets in pixels.<\/p>\n\n\n\n Then, we can set the font type and size using the lv_style_set_text_font()<\/span> function. We pass as argument the style object we\u2019re referring to and the font type.<\/p>\n\n\n\n For the text_label_date<\/span> we’re also setting a custom text teal color:<\/p>\n\n\n\n A similar procedure is applied to all other labels (temperature, humidity, description, time, and location).<\/p>\n\n\n\n To update the data on the screen, we can create an LVGL timer that will run a specific function periodically. In this case, we\u2019ll update it every 10 minutes. Create an LVGL timer called timer<\/span> and assign the timer_cb<\/span> callback function.<\/p>\n\n\n\n The timer_cb<\/span> function runs every 10 minutes. Each time the callback function runs, we get the latest weather data from the API and update the GUI.<\/p>\n\n\n\n Finally, we set all the text labels to the current data returned from the API:<\/p>\n\n\n\n In the loop()<\/span>, you can add any other tasks that you need your ESP32 to do like in any regular Arduino sketch. In our case, we won\u2019t add any tasks to the loop()<\/span>, but to keep LVGL running and detecting events, you always need to add the following lines to your loop()<\/span>.<\/p>\n\n\n\n Upload the code to your board. Go to Tools <\/strong>> Board <\/strong>and select ESP32 <\/strong>> ESP32 Dev Module<\/strong>. Then, select the right COM port in Tools <\/strong>> Port<\/strong>.<\/p>\n\n\n\n If you see an Error like this: “Sketch too big” during the uploading process, in Arduino IDE go to Tools <\/strong>> Partition scheme<\/strong> > choose anything that has more than 1.4MB APP, for example: “Huge APP (3MB No OTA\/1MB SPIFFS<\/strong>“.<\/p>\n\n\n Finally, click the upload button.<\/p>\n\n\n After a few seconds, the weather info will be displayed on the screen as shown in the picture below.<\/p>\n\n\n In this tutorial, you’ve created a simple weather station with your Cheap Yellow Display (CYD) board using the LVGL library.<\/p>\n\n\n\n We hope you found this tutorial useful. We’re preparing more guides about this board, so stay tuned. If you would like to learn more about creating graphical user interfaces using the LVGL library with the ESP32, check out our latest eBook:<\/p>\n\n\n\n Other guides you might like reading:<\/p>\n\n\n\n To learn more about the ESP32, make sure to take a look at our resources:<\/p>\n\n\n\n In this project, you’ll learn how to turn your ESP32 Cheap Yellow Display (CYD) board into a weather station that displays weather description, temperature, humidity, and date using LVGL (Light … <\/p>\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/ESP32-TFT-LVGL-Weather-Station-Description-Demonstration-Touchscreen-Partly-Cloudy.png?resize=750%2C453&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/ESP32-TFT-LVGL-Weather-Station-Description-Demonstration-Touchscreen-Clear-Sky.png?resize=750%2C453&quality=100&strip=all&ssl=1\")
<\/figure>\n<\/figure>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
1) Parts Required<\/h3>\n\n\n\n
\n
2) Install ESP32 Boards in Arduino IDE<\/h3>\n\n\n
![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/arduino-ide-2.jpg?resize=204%2C204&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
3) Get familiar with the ESP32 Cheap Yellow Display<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-front.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
4) Install TFT and LVGL Libraries<\/h3>\n\n\n\n
![\"LVGL](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/LVGL-new-logo.png?resize=622%2C194&quality=100&strip=all&ssl=1\"){kind=logo}
<\/figure><\/div>\n\n\n\n
5) Install ArduinoJson Library<\/h3>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/install-arduinojsonlibrary-arduino-ide-2.png?resize=749%2C514&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP32 CYD Weather Station – weather_images.h<\/em> file<\/h2>\n\n\n\n
\n
![\"LVGL](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/LVGL-Load-Image-Arduino-Code-example-folder-weather-images-file.png?resize=367%2C232&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/Arduino-IDE-tabs-LVGL-Load-Image-Arduino-Code-example-folder-weather-images-file.png?resize=439%2C134&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP32 CYD Weather Station – Arduino Code<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials - https:\/\/RandomNerdTutorials.com\/esp32-cyd-lvgl-weather-station\/ | https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl-weather-station\/\n THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:\n 1) ESP32-2432S028R 2.8 inch 240\u00d7320 also known as the Cheap Yellow Display (CYD): https:\/\/makeradvisor.com\/tools\/cyd-cheap-yellow-display-esp32-2432s028r\/\n SET UP INSTRUCTIONS: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/\n 2) REGULAR ESP32 Dev Board + 2.8 inch 240x320 TFT Display: https:\/\/makeradvisor.com\/tools\/2-8-inch-ili9341-tft-240x320\/ and https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\n SET UP INSTRUCTIONS: https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/\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\n\/* Install the "lvgl" library version 9.X by kisvegabor to interface with the TFT Display - https:\/\/lvgl.io\/\n *** IMPORTANT: lv_conf.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials ***\n *** YOU MUST USE THE lv_conf.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***\n FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/ *\/\n#include <lvgl.h>\n\n\/* Install the "TFT_eSPI" library by Bodmer to interface with the TFT Display - https:\/\/github.com\/Bodmer\/TFT_eSPI\n *** IMPORTANT: User_Setup.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials ***\n *** YOU MUST USE THE User_Setup.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***\n FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/ *\/\n#include <TFT_eSPI.h>\n\n#include "weather_images.h"\n#include <WiFi.h>\n#include <HTTPClient.h>\n#include <ArduinoJson.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Replace with the latitude and longitude to where you want to get the weather\nString latitude = "41.14961";\nString longitude = "-8.61099";\n\/\/ Enter your location\nString location = "Porto";\n\/\/ Type the timezone you want to get the time for\nString timezone = "Europe\/Lisbon";\n\n\/\/ Store date and time\nString current_date;\nString last_weather_update;\nString temperature;\nString humidity;\nint is_day;\nint weather_code = 0;\nString weather_description;\n\n\/\/ SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES\n#define TEMP_CELSIUS 1\n\n#if TEMP_CELSIUS\n String temperature_unit = "";\n const char degree_symbol[] = "\\u00B0C";\n#else\n String temperature_unit = "&temperature_unit=fahrenheit";\n const char degree_symbol[] = "\\u00B0F";\n#endif\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\n#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];\n\n\/\/ If logging is enabled, it will inform the user about what is happening in the library\nvoid log_print(lv_log_level_t level, const char * buf) {\n LV_UNUSED(level);\n Serial.println(buf);\n Serial.flush();\n}\n\nstatic lv_obj_t * weather_image;\nstatic lv_obj_t * text_label_date;\nstatic lv_obj_t * text_label_temperature;\nstatic lv_obj_t * text_label_humidity;\nstatic lv_obj_t * text_label_weather_description;\nstatic lv_obj_t * text_label_time_location;\n\nstatic void timer_cb(lv_timer_t * timer){\n LV_UNUSED(timer);\n get_weather_data();\n get_weather_description(weather_code);\n lv_label_set_text(text_label_date, current_date.c_str());\n lv_label_set_text(text_label_temperature, String(" " + temperature + degree_symbol).c_str());\n lv_label_set_text(text_label_humidity, String(" " + humidity + "%").c_str());\n lv_label_set_text(text_label_weather_description, weather_description.c_str());\n lv_label_set_text(text_label_time_location, String("Last Update: " + last_weather_update + " | " + location).c_str());\n}\n\nvoid lv_create_main_gui(void) {\n LV_IMAGE_DECLARE(image_weather_sun);\n LV_IMAGE_DECLARE(image_weather_cloud);\n LV_IMAGE_DECLARE(image_weather_rain);\n LV_IMAGE_DECLARE(image_weather_thunder);\n LV_IMAGE_DECLARE(image_weather_snow);\n LV_IMAGE_DECLARE(image_weather_night);\n LV_IMAGE_DECLARE(image_weather_temperature);\n LV_IMAGE_DECLARE(image_weather_humidity);\n\n \/\/ Get the weather data from open-meteo.com API\n get_weather_data();\n\n weather_image = lv_image_create(lv_screen_active());\n lv_obj_align(weather_image, LV_ALIGN_CENTER, -80, -20);\n \n get_weather_description(weather_code);\n\n text_label_date = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_date, current_date.c_str());\n lv_obj_align(text_label_date, LV_ALIGN_CENTER, 70, -70);\n lv_obj_set_style_text_font((lv_obj_t*) text_label_date, &lv_font_montserrat_26, 0);\n lv_obj_set_style_text_color((lv_obj_t*) text_label_date, lv_palette_main(LV_PALETTE_TEAL), 0);\n\n lv_obj_t * weather_image_temperature = lv_image_create(lv_screen_active());\n lv_image_set_src(weather_image_temperature, &image_weather_temperature);\n lv_obj_align(weather_image_temperature, LV_ALIGN_CENTER, 30, -25);\n text_label_temperature = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_temperature, String(" " + temperature + degree_symbol).c_str());\n lv_obj_align(text_label_temperature, LV_ALIGN_CENTER, 70, -25);\n lv_obj_set_style_text_font((lv_obj_t*) text_label_temperature, &lv_font_montserrat_22, 0);\n\n lv_obj_t * weather_image_humidity = lv_image_create(lv_screen_active());\n lv_image_set_src(weather_image_humidity, &image_weather_humidity);\n lv_obj_align(weather_image_humidity, LV_ALIGN_CENTER, 30, 20);\n text_label_humidity = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_humidity, String(" " + humidity + "%").c_str());\n lv_obj_align(text_label_humidity, LV_ALIGN_CENTER, 70, 20);\n lv_obj_set_style_text_font((lv_obj_t*) text_label_humidity, &lv_font_montserrat_22, 0);\n\n text_label_weather_description = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_weather_description, weather_description.c_str());\n lv_obj_align(text_label_weather_description, LV_ALIGN_BOTTOM_MID, 0, -40);\n lv_obj_set_style_text_font((lv_obj_t*) text_label_weather_description, &lv_font_montserrat_18, 0);\n\n \/\/ Create a text label for the time and timezone aligned center in the bottom of the screen\n text_label_time_location = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_time_location, String("Last Update: " + last_weather_update + " | " + location).c_str());\n lv_obj_align(text_label_time_location, LV_ALIGN_BOTTOM_MID, 0, -10);\n lv_obj_set_style_text_font((lv_obj_t*) text_label_time_location, &lv_font_montserrat_12, 0);\n lv_obj_set_style_text_color((lv_obj_t*) text_label_time_location, lv_palette_main(LV_PALETTE_GREY), 0);\n\n lv_timer_t * timer = lv_timer_create(timer_cb, 600000, NULL);\n lv_timer_ready(timer);\n}\n\n\/*\n WMO Weather interpretation codes (WW)- Code\tDescription\n 0\tClear sky\n 1, 2, 3\tMainly clear, partly cloudy, and overcast\n 45, 48\tFog and depositing rime fog\n 51, 53, 55\tDrizzle: Light, moderate, and dense intensity\n 56, 57\tFreezing Drizzle: Light and dense intensity\n 61, 63, 65\tRain: Slight, moderate and heavy intensity\n 66, 67\tFreezing Rain: Light and heavy intensity\n 71, 73, 75\tSnow fall: Slight, moderate, and heavy intensity\n 77\tSnow grains\n 80, 81, 82\tRain showers: Slight, moderate, and violent\n 85, 86\tSnow showers slight and heavy\n 95 *\tThunderstorm: Slight or moderate\n 96, 99 *\tThunderstorm with slight and heavy hail\n*\/\nvoid get_weather_description(int code) {\n switch (code) {\n case 0:\n if(is_day==1) { lv_image_set_src(weather_image, &image_weather_sun); }\n else { lv_image_set_src(weather_image, &image_weather_night); }\n weather_description = "CLEAR SKY";\n break;\n case 1: \n if(is_day==1) { lv_image_set_src(weather_image, &image_weather_sun); }\n else { lv_image_set_src(weather_image, &image_weather_night); }\n weather_description = "MAINLY CLEAR";\n break;\n case 2: \n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = "PARTLY CLOUDY";\n break;\n case 3:\n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = "OVERCAST";\n break;\n case 45:\n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = "FOG";\n break;\n case 48:\n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = "DEPOSITING RIME FOG";\n break;\n case 51:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "DRIZZLE LIGHT INTENSITY";\n break;\n case 53:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "DRIZZLE MODERATE INTENSITY";\n break;\n case 55:\n lv_image_set_src(weather_image, &image_weather_rain); \n weather_description = "DRIZZLE DENSE INTENSITY";\n break;\n case 56:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "FREEZING DRIZZLE LIGHT";\n break;\n case 57:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "FREEZING DRIZZLE DENSE";\n break;\n case 61:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN SLIGHT INTENSITY";\n break;\n case 63:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN MODERATE INTENSITY";\n break;\n case 65:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN HEAVY INTENSITY";\n break;\n case 66:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "FREEZING RAIN LIGHT INTENSITY";\n break;\n case 67:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "FREEZING RAIN HEAVY INTENSITY";\n break;\n case 71:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW FALL SLIGHT INTENSITY";\n break;\n case 73:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW FALL MODERATE INTENSITY";\n break;\n case 75:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW FALL HEAVY INTENSITY";\n break;\n case 77:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW GRAINS";\n break;\n case 80:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN SHOWERS SLIGHT";\n break;\n case 81:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN SHOWERS MODERATE";\n break;\n case 82:\n lv_image_set_src(weather_image, &image_weather_rain);\n weather_description = "RAIN SHOWERS VIOLENT";\n break;\n case 85:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW SHOWERS SLIGHT";\n break;\n case 86:\n lv_image_set_src(weather_image, &image_weather_snow);\n weather_description = "SNOW SHOWERS HEAVY";\n break;\n case 95:\n lv_image_set_src(weather_image, &image_weather_thunder);\n weather_description = "THUNDERSTORM";\n break;\n case 96:\n lv_image_set_src(weather_image, &image_weather_thunder);\n weather_description = "THUNDERSTORM SLIGHT HAIL";\n break;\n case 99:\n lv_image_set_src(weather_image, &image_weather_thunder);\n weather_description = "THUNDERSTORM HEAVY HAIL";\n break;\n default: \n weather_description = "UNKNOWN WEATHER CODE";\n break;\n }\n}\n\nvoid get_weather_data() {\n if (WiFi.status() == WL_CONNECTED) {\n HTTPClient http;\n \/\/ Construct the API endpoint\n String url = String("http:\/\/api.open-meteo.com\/v1\/forecast?latitude=" + latitude + "&longitude=" + longitude + "¤t=temperature_2m,relative_humidity_2m,is_day,precipitation,rain,weather_code" + temperature_unit + "&timezone=" + timezone + "&forecast_days=1");\n http.begin(url);\n int httpCode = http.GET(); \/\/ Make the GET request\n\n if (httpCode > 0) {\n \/\/ Check for the response\n if (httpCode == HTTP_CODE_OK) {\n String payload = http.getString();\n \/\/Serial.println("Request information:");\n \/\/Serial.println(payload);\n \/\/ Parse the JSON to extract the time\n JsonDocument doc;\n DeserializationError error = deserializeJson(doc, payload);\n if (!error) {\n const char* datetime = doc["current"]["time"];\n temperature = String(doc["current"]["temperature_2m"]);\n humidity = String(doc["current"]["relative_humidity_2m"]);\n is_day = String(doc["current"]["is_day"]).toInt();\n weather_code = String(doc["current"]["weather_code"]).toInt();\n \/*Serial.println(temperature);\n Serial.println(humidity);\n Serial.println(is_day);\n Serial.println(weather_code);\n Serial.println(String(timezone));*\/\n \/\/ Split the datetime into date and time\n String datetime_str = String(datetime);\n int splitIndex = datetime_str.indexOf('T');\n current_date = datetime_str.substring(0, splitIndex);\n last_weather_update = datetime_str.substring(splitIndex + 1, splitIndex + 9); \/\/ Extract time portion\n } else {\n Serial.print("deserializeJson() failed: ");\n Serial.println(error.c_str());\n }\n }\n else {\n Serial.println("Failed");\n }\n } else {\n Serial.printf("GET request failed, error: %s\\n", http.errorToString(httpCode).c_str());\n }\n http.end(); \/\/ Close connection\n } else {\n Serial.println("Not connected to Wi-Fi");\n }\n}\n\nvoid setup() {\n String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();\n Serial.begin(115200);\n Serial.println(LVGL_Arduino);\n\n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n Serial.print("Connecting");\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.print("\\nConnected to Wi-Fi network with IP Address: ");\n Serial.println(WiFi.localIP());\n \n \/\/ Start LVGL\n lv_init();\n \/\/ Register print function for debugging\n lv_log_register_print_cb(log_print);\n\n \/\/ Create a display object\n lv_display_t * disp;\n \/\/ Initialize the TFT display using the TFT_eSPI library\n disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));\n lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);\n \n \/\/ Function to draw the GUI\n lv_create_main_gui();\n}\n\nvoid loop() {\n lv_task_handler(); \/\/ let the GUI do its work\n lv_tick_inc(5); \/\/ tell LVGL how much time has passed\n delay(5); \/\/ let this time pass\n}\n<\/code><\/pre>\n\tHow Does the Code Work?<\/h2>\n\n\n\n
Including Libraries and Images<\/h3>\n\n\n\n
#include <lvgl.h>\n#include <TFT_eSPI.h><\/code><\/pre>\n\n\n\n#include <WiFi.h>\n#include <HTTPClient.h>\n#include <ArduinoJson.h><\/code><\/pre>\n\n\n\n#include \"weather_images.h\"<\/code><\/pre>\n\n\n\nInsert Your Details<\/h3>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nString latitude = \"\";\nString longitude = \"\";\nString location = \"\"; \/\/ Example: Porto<\/code><\/pre>\n\n\n\nconst char* timezone = \"REPLACE_WITH_YOUR_TIMEZONE\"; \/\/ Example: Europe\/Lisbon<\/code><\/pre>\n\n\n\nDeclaring Other Variables<\/h3>\n\n\n\n
String current_date;\nString last_weather_update;\nString temperature;\nString humidity;\nint is_day;\nint weather_code = 0;\nString weather_description;<\/code><\/pre>\n\n\n\nTemperature in Celsius or Fahrenheit<\/h3>\n\n\n\n
\/\/ SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES\n#define TEMP_CELSIUS 1\n\n#if TEMP_CELSIUS\n String temperature_unit = \"\";\n const char degree_symbol[] = \"\\u00B0C\";\n#else\n String temperature_unit = \"&temperature_unit=fahrenheit\";\n const char degree_symbol[] = \"\\u00B0F\";\n#endif<\/code><\/pre>\n\n\n\nGlobal LVGL Objects<\/h3>\n\n\n\n
static lv_obj_t * weather_image;\nstatic lv_obj_t * text_label_date;\nstatic lv_obj_t * text_label_temperature;\nstatic lv_obj_t * text_label_humidity;\nstatic lv_obj_t * text_label_weather_description;\nstatic lv_obj_t * text_label_time_location;<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
String LVGL_Arduino = String(\"LVGL Library Version: \") + lv_version_major() + \".\" + lv_version_minor() + \".\" + lv_version_patch();\nSerial.begin(115200);\nSerial.println(LVGL_Arduino);<\/code><\/pre>\n\n\n\nConnect to the Internet<\/h4>\n\n\n\n
\/\/ Connect to Wi-Fi\nWiFi.begin(ssid, password);\nSerial.print(\"Connecting\");\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\nSerial.print(\"\\nConnected to Wi-Fi network with IP Address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nInitialize the LVGL Library<\/h4>\n\n\n\n
\/\/ Start LVGL\nlv_init();<\/code><\/pre>\n\n\n\nRegister Debugging Function<\/h4>\n\n\n\n
\/\/ Register print function for debugging\nlv_log_register_print_cb(log_print);<\/code><\/pre>\n\n\n\nCreate a Display Object<\/h4>\n\n\n\n
\/\/ Create a display object\nlv_display_t * disp;\n\/\/ Initialize the TFT display using the TFT_eSPI library\ndisp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));\nlv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);<\/code><\/pre>\n\n\n\nDrawing the GUI<\/h4>\n\n\n\n
\/\/ Function to draw the GUI\nlv_create_main_gui();<\/code><\/pre>\n\n\n\nget_weather_data()<\/h3>\n\n\n\n
void get_weather_data() {\n if (WiFi.status() == WL_CONNECTED) {\n HTTPClient http;\n \/\/ Construct the API endpoint\n String url = String(\"http:\/\/api.open-meteo.com\/v1\/forecast?latitude=\" + latitude + \"&longitude=\" + longitude + \"¤t=temperature_2m,relative_humidity_2m,is_day,precipitation,rain,weather_code\" + temperature_unit + \"&timezone=\" + timezone + \"&forecast_days=1\");\n http.begin(url);\n int httpCode = http.GET(); \/\/ Make the GET request\n\n if (httpCode > 0) {\n \/\/ Check for the response\n if (httpCode == HTTP_CODE_OK) {\n String payload = http.getString();\n \/\/Serial.println(\"Request information:\");\n \/\/Serial.println(payload);\n \/\/ Parse the JSON to extract the time\n JsonDocument doc;\n DeserializationError error = deserializeJson(doc, payload);\n if (!error) {\n const char* datetime = doc[\"current\"][\"time\"];\n temperature = String(doc[\"current\"][\"temperature_2m\"]);\n humidity = String(doc[\"current\"][\"relative_humidity_2m\"]);\n is_day = String(doc[\"current\"][\"is_day\"]).toInt();\n weather_code = String(doc[\"current\"][\"weather_code\"]).toInt();\n \/\/ Split the datetime into date and time\n String datetime_str = String(datetime);\n int splitIndex = datetime_str.indexOf('T');\n current_date = datetime_str.substring(0, splitIndex);\n last_weather_update = datetime_str.substring(splitIndex + 1, splitIndex + 9); \/\/ Extract time portion\n } else {\n Serial.print(\"deserializeJson() failed: \");\n Serial.println(error.c_str());\n }\n }\n } else {\n Serial.printf(\"GET request failed, error: %s\\n\", http.errorToString(httpCode).c_str());\n }\n http.end(); \/\/ Close connection\n } else {\n Serial.println(\"Not connected to Wi-Fi\");\n }\n}<\/code><\/pre>\n\n\n\nget_weather_description(int code)<\/h3>\n\n\n\n
void get_weather_description(int code) {\n switch (code) {\n case 0:\n if(is_day==1) { lv_image_set_src(weather_image, &image_weather_sun); }\n else { lv_image_set_src(weather_image, &image_weather_night); }\n weather_description = \"CLEAR SKY\";\n break;\n case 1: \n if(is_day==1) { lv_image_set_src(weather_image, &image_weather_sun); }\n else { lv_image_set_src(weather_image, &image_weather_night); }\n weather_description = \"MAINLY CLEAR\";\n break;\n case 2: \n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = \"PARTLY CLOUDY\";\n break;\n case 3:\n lv_image_set_src(weather_image, &image_weather_cloud);\n weather_description = \"OVERCAST\";\n break;\n\n(...)<\/code><\/pre>\n\n\n\nPreparing the GUI<\/h3>\n\n\n\n
void lv_create_main_gui(void) {\n LV_IMAGE_DECLARE(image_weather_sun);\n LV_IMAGE_DECLARE(image_weather_cloud);\n LV_IMAGE_DECLARE(image_weather_rain);\n LV_IMAGE_DECLARE(image_weather_thunder);\n LV_IMAGE_DECLARE(image_weather_snow);\n LV_IMAGE_DECLARE(image_weather_night);\n LV_IMAGE_DECLARE(image_weather_temperature);\n LV_IMAGE_DECLARE(image_weather_humidity);\n(...)<\/code><\/pre>\n\n\n\nGet the latest weather data<\/h4>\n\n\n\n
get_weather_data();<\/code><\/pre>\n\n\n\nLoad the weather image<\/h4>\n\n\n\n
weather_image = lv_image_create(lv_screen_active());\nlv_obj_align(weather_image, LV_ALIGN_CENTER, -80, -20);\n \nget_weather_description(weather_code);<\/code><\/pre>\n\n\n\nText Labels<\/h4>\n\n\n\n
text_label_date = lv_label_create(lv_screen_active());<\/code><\/pre>\n\n\n\nlv_label_set_text(text_label_date, current_date.c_str());<\/code><\/pre>\n\n\n\nlv_obj_align(text_label_date, LV_ALIGN_CENTER, 70, -70);<\/code><\/pre>\n\n\n\nlv_obj_set_style_text_font((lv_obj_t*) text_label_date, &lv_font_montserrat_26, 0);<\/code><\/pre>\n\n\n\nlv_obj_set_style_text_color((lv_obj_t*) text_label_date, lv_palette_main(LV_PALETTE_TEAL), 0);<\/code><\/pre>\n\n\n\nlv_obj_t * weather_image_temperature = lv_image_create(lv_screen_active());\nlv_image_set_src(weather_image_temperature, &image_weather_temperature);\nlv_obj_align(weather_image_temperature, LV_ALIGN_CENTER, 30, -25);\ntext_label_temperature = lv_label_create(lv_screen_active());\nlv_label_set_text(text_label_temperature, String(\" \" + temperature + degree_symbol).c_str());\nlv_obj_align(text_label_temperature, LV_ALIGN_CENTER, 70, -25);\nlv_obj_set_style_text_font((lv_obj_t*) text_label_temperature, &lv_font_montserrat_22, 0);\n\nlv_obj_t * weather_image_humidity = lv_image_create(lv_screen_active());\nlv_image_set_src(weather_image_humidity, &image_weather_humidity);\nlv_obj_align(weather_image_humidity, LV_ALIGN_CENTER, 30, 20);\ntext_label_humidity = lv_label_create(lv_screen_active());\nlv_label_set_text(text_label_humidity, String(\" \" + humidity + \"%\").c_str());\nlv_obj_align(text_label_humidity, LV_ALIGN_CENTER, 70, 20);\nlv_obj_set_style_text_font((lv_obj_t*) text_label_humidity, &lv_font_montserrat_22, 0);\n\ntext_label_weather_description = lv_label_create(lv_screen_active());\nlv_label_set_text(text_label_weather_description, weather_description.c_str());\nlv_obj_align(text_label_weather_description, LV_ALIGN_BOTTOM_MID, 0, -40);\nlv_obj_set_style_text_font((lv_obj_t*) text_label_weather_description, &lv_font_montserrat_18, 0);\n\n\/\/ Create a text label for the time and timezone aligned center in the bottom of the screen\ntext_label_time_location = lv_label_create(lv_screen_active());\nlv_label_set_text(text_label_time_location, String(\"Last Update: \" + last_weather_update + \" | \" + location).c_str());\nlv_obj_align(text_label_time_location, LV_ALIGN_BOTTOM_MID, 0, -10);\nlv_obj_set_style_text_font((lv_obj_t*) text_label_time_location, &lv_font_montserrat_12, 0);\nlv_obj_set_style_text_color((lv_obj_t*) text_label_time_location, lv_palette_main(LV_PALETTE_GREY), 0);<\/code><\/pre>\n\n\n\nTimer<\/h4>\n\n\n\n
lv_timer_t * timer = lv_timer_create(timer_cb, 600000, NULL);\nlv_timer_ready(timer);;<\/code><\/pre>\n\n\n\nTimer Callback Function<\/h3>\n\n\n\n
static void timer_cb(lv_timer_t * timer){\n LV_UNUSED(timer);\n get_weather_data();\n get_weather_description(weather_code);\n \n(...)<\/code><\/pre>\n\n\n\nlv_label_set_text(text_label_date, current_date.c_str());\nlv_label_set_text(text_label_temperature, String(\" \" + temperature + degree_symbol).c_str());\nlv_label_set_text(text_label_humidity, String(\" \" + humidity + \"%\").c_str());\nlv_label_set_text(text_label_weather_description, weather_description.c_str());\nlv_label_set_text(text_label_time_location, String(\"Last Update: \" + last_weather_update + \" | \" + location).c_str());<\/code><\/pre>\n\n\n\nloop()<\/h3>\n\n\n\n
void loop() {\n lv_task_handler(); \/\/ let the GUI do its work\n lv_tick_inc(5); \/\/ tell LVGL how much time has passed\n delay(5); \/\/ let this time pass\n}<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"Select](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/Select-Huge-App-Partion-Scheme-Arduino-IDE-Tools-Menu.png?resize=768%2C817&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-ide-2-upload-button.png?resize=36%2C39&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/ESP32-CYD-Cheap-Yellow-Display-LVGL-Weather-Station-Description-Temperature-Humidity-Demonstration-Screen.jpg?resize=750%2C424&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n
\n
\n