![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-Cheap-Yellow-Display-CYD-Board-BME280-Table-Readings-LVGL-Arduino.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 In this project, we\u2019ll create a table with sensor readings from the BME280 sensor and the LDR on the ESP32 CYD board. We\u2019ll also display the date and time, and your board IP address.<\/p>\n\n\n\n To get an accurate date and time for your timezone, we\u2019ll use the WorldTimeAPI<\/a>. To get the time 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 If you don\u2019t have an internet connection where the ESP32 will operate, you can omit the date and time section or use an RTC module.<\/p>\n\n\n\n We\u2019ll also display a floating button with the refresh icon that when clicked will update the values on the table.<\/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\u2019ll use I2C communication protocol to get data from the BME280 sensor. On the ESP32 CYD board there is an extended IO socket<\/a> that allows you to connect external peripherals. We\u2019ll connect the sensor to the CN1 connector.<\/p>\n\n\n Your board should have come with a little JST connector to access those GPIOs.<\/p>\n\n\n\n We’ll connect SDA to GPIO 27, and SCL to GPIO 22.<\/p>\n\n\n If you\u2019re not familiar with the BME280 sensor, we recommend that you read our getting started guide: ESP32 with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)<\/a><\/p>\n\n\n\n The CYD board should have a built-in LDR (light-dependent resistor) next to the screen and connected to GPIO 34.<\/p>\n\n\n Recommended reading: ESP32 Cheap Yellow Display (CYD) Pinout (ESP32-2432S028R)<\/a>.<\/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 WorldTimeAPI.<\/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 We’ll use the Adafruit BME280 library to get data from the BME280. In the Arduino IDE, go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong>. Search for Adafruit BME280<\/strong> Library on the search box and install the library. Also, install any dependencies that are currently not installed (usually the Adafruit Bus IO and the Adafruit Unified Sensor libraries).<\/p>\n\n\n The following code will create the table and display the sensor readings. 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. You also need to insert your timezone.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let\u2019s see how to get the time from the internet and display all data on a table. Alternatively, you can skip to the Demonstration <\/a>section.<\/p>\n\n\n\n You need to include the lvgl<\/span>, TFT_eSPI<\/span>, and the XPT2046_Touchscreen<\/span> libraries to communicate and display text 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 To use the BME280, we need to include the following libraries.<\/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 timezone in the timezone<\/span> variable at the beginning of the code (list of all available timezones<\/a>).<\/p>\n\n\n\n We need to create an I2C instance on custom I2C pins and an Adafruit_BME280<\/span> object to refer to the sensor.<\/p>\n\n\n\n Related content: ESP32 I2C Communication: Set Pins, Multiple Bus Interfaces and Peripherals (Arduino IDE)<\/a><\/p>\n\n\n\n Our code is prepared to display the temperature in Celsius or Fahrenheit degrees. To choose your desired Unit, you can set the value of the TEMP_CELSIUS<\/span> variable. It is set to 1<\/span> by default to display the temperature in Celsius degrees.<\/p>\n\n\n\n If you want to display in Fahrenheit degrees instead, set it to 0<\/span>.<\/p>\n\n\n\n Create a LVGL table object, so that we can access it 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 The following lines initialize the sensor on the I2C bus created:<\/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 Initialize the touchscreen.<\/p>\n\n\n\n On the touchscreen_read()<\/span> function, we adjust the touchscreen points to calibrate them with the display. You must insert the calibration values on the following lines. Check this tutorial to get the calibration values for your display<\/a>.<\/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 We create two global variables current_date<\/span> and current_time<\/span> at the beginning of the code to save the current date and time.<\/p>\n\n\n\n Create a function called get_date_and_time()<\/span> that makes a request to the WorldTimeAPI and updates the current_date<\/span> and current_time<\/span> variables with the current date and time.<\/p>\n\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-LVGL-Display-BME280-Sensor-Data-Table-Demonstration-Screen-Temp-Hum-Pressure.png?resize=750%2C462&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-LVGL-Display-BME280-Sensor-Data-Table-Demonstration-Screen-Lum-Date-Time.png?resize=750%2C462&quality=100&strip=all&ssl=1\")
<\/figure>\n<\/figure>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
1) Parts Required and Wiring the Circuit<\/h3>\n\n\n\n
\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-Cheap-Yellow-Display-Board-JST-Connector-Connecting-BME280-Sensor.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-Cheap-Yellow-Display-Board-JST-Connector.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-Cheap-Yellow-Display-LDR.jpg?resize=750%2C423&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n2) 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 and BME280 Libraries<\/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\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/Installing-Adafruit-BME280-Sensor-Library-Arduino-IDE.png?resize=290%2C305&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP32 CYD: Display BME280 Sensor Readings on a Table – Arduino Code<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials - https:\/\/RandomNerdTutorials.com\/esp32-cyd-lvgl-display-bme280-data-table\/ | https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl-display-bme280-data-table\/\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\/\/ Install the "XPT2046_Touchscreen" library by Paul Stoffregen to use the Touchscreen - https:\/\/github.com\/PaulStoffregen\/XPT2046_Touchscreen - Note: this library doesn't require further configuration\n#include <XPT2046_Touchscreen.h>\n\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\/\/ Specify the timezone you want to get the time for\nconst char* timezone = "Europe\/Lisbon";\n\n\/\/ Store date and time\nString current_date;\nString current_time;\n\n\/\/ Install Adafruit Unified Sensor and Adafruit BME280 Library\n#include <Wire.h>\n#include <Adafruit_Sensor.h>\n#include <Adafruit_BME280.h>\n#define I2C_SDA 27\n#define I2C_SCL 22\n#define SEALEVELPRESSURE_HPA (1013.25)\nTwoWire I2CBME = TwoWire(0);\nAdafruit_BME280 bme;\n\n\/\/ SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES\n#define TEMP_CELSIUS 1 \n\n#define LDR_PIN 34\n\n\/\/ Touchscreen pins\n#define XPT2046_IRQ 36 \/\/ T_IRQ\n#define XPT2046_MOSI 32 \/\/ T_DIN\n#define XPT2046_MISO 39 \/\/ T_OUT\n#define XPT2046_CLK 25 \/\/ T_CLK\n#define XPT2046_CS 33 \/\/ T_CS\n\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\n\/\/ Touchscreen coordinates: (x, y) and pressure (z)\nint x, y, z;\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\n\/\/ Get the Touchscreen data\nvoid touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {\n \/\/ Checks if Touchscreen was touched, and prints X, Y and Pressure (Z)\n if(touchscreen.tirqTouched() && touchscreen.touched()) {\n \/\/ Get Touchscreen points\n TS_Point p = touchscreen.getPoint();\n\n \/\/ Advanced Touchscreen calibration, LEARN MORE \u00bb https:\/\/RandomNerdTutorials.com\/touchscreen-calibration\/\n float alpha_x, beta_x, alpha_y, beta_y, delta_x, delta_y;\n\n \/\/ REPLACE WITH YOUR OWN CALIBRATION VALUES \u00bb https:\/\/RandomNerdTutorials.com\/touchscreen-calibration\/\n alpha_x = -0.000;\n beta_x = 0.090;\n delta_x = -33.771;\n alpha_y = 0.066;\n beta_y = 0.000;\n delta_y = -14.632;\n\n x = alpha_y * p.x + beta_y * p.y + delta_y;\n \/\/ clamp x between 0 and SCREEN_WIDTH - 1\n x = max(0, x);\n x = min(SCREEN_WIDTH - 1, x);\n\n y = alpha_x * p.x + beta_x * p.y + delta_x;\n \/\/ clamp y between 0 and SCREEN_HEIGHT - 1\n y = max(0, y);\n y = min(SCREEN_HEIGHT - 1, y);\n\n \/\/ Basic Touchscreen calibration points with map function to the correct width and height\n \/\/x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);\n \/\/y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);\n\n z = p.z;\n\n data->state = LV_INDEV_STATE_PRESSED;\n\n \/\/ Set the coordinates\n data->point.x = x;\n data->point.y = y;\n\n \/\/ Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor\n Serial.print("X = ");\n Serial.print(x);\n Serial.print(" | Y = ");\n Serial.print(y);\n Serial.print(" | Pressure = ");\n Serial.print(z);\n Serial.println();\n }\n else {\n data->state = LV_INDEV_STATE_RELEASED;\n }\n}\n\nstatic void float_button_event_cb(lv_event_t * e) {\n update_table_values();\n}\n\nstatic lv_obj_t * table;\nstatic void update_table_values(void) {\n \/\/ Get the latest temperature reading in Celsius or Fahrenheit\n #if TEMP_CELSIUS\n float bme_temp = bme.readTemperature();\n const char degree_symbol[] = "\\u00B0C";\n #else\n float bme_temp = 1.8 * bme.readTemperature() + 32;\n const char degree_symbol[] = "\\u00B0F";\n #endif\n \n String bme_temp_value = String(bme_temp) + degree_symbol;\n String bme_humi_value = String(bme.readHumidity()) + "%";\n String bme_press_value = String(bme.readPressure() \/ 100.0F) + " hPa";\n String ldr_value = String(analogRead(LDR_PIN));\n \n \/\/ Get the time from WorldTimeAPI\n get_date_and_time();\n \/\/Serial.println("Current Date: " + current_date);\n \/\/Serial.println("Current Time: " + current_time);\n\n \/\/ Fill the first column\n lv_table_set_cell_value(table, 0, 0, "Data");\n lv_table_set_cell_value(table, 1, 0, "Temperature");\n lv_table_set_cell_value(table, 2, 0, "Humidity");\n lv_table_set_cell_value(table, 3, 0, "Pressure");\n lv_table_set_cell_value(table, 4, 0, "Luminosity");\n lv_table_set_cell_value(table, 5, 0, "Date");\n lv_table_set_cell_value(table, 6, 0, "Time");\n lv_table_set_cell_value(table, 7, 0, "IP Address");\n\n \/\/ Fill the second column\n lv_table_set_cell_value(table, 0, 1, "Value");\n lv_table_set_cell_value(table, 1, 1, bme_temp_value.c_str());\n lv_table_set_cell_value(table, 2, 1, bme_humi_value.c_str());\n lv_table_set_cell_value(table, 3, 1, bme_press_value.c_str());\n lv_table_set_cell_value(table, 4, 1, ldr_value.c_str());\n lv_table_set_cell_value(table, 5, 1, current_date.c_str());\n lv_table_set_cell_value(table, 6, 1, current_time.c_str());\n lv_table_set_cell_value(table, 7, 1, WiFi.localIP().toString().c_str());\n}\n\nstatic void draw_event_cb(lv_event_t * e) {\n lv_draw_task_t * draw_task = lv_event_get_draw_task(e);\n lv_draw_dsc_base_t * base_dsc = (lv_draw_dsc_base_t*) draw_task->draw_dsc;\n \/\/ If the cells are drawn\n if(base_dsc->part == LV_PART_ITEMS) {\n uint32_t row = base_dsc->id1;\n uint32_t col = base_dsc->id2;\n\n \/\/ Make the texts in the first cell center aligned\n if(row == 0) {\n lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);\n if(label_draw_dsc) {\n label_draw_dsc->align = LV_TEXT_ALIGN_CENTER;\n }\n lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);\n if(fill_draw_dsc) {\n fill_draw_dsc->color = lv_color_mix(lv_palette_main(LV_PALETTE_BLUE), fill_draw_dsc->color, LV_OPA_20);\n fill_draw_dsc->opa = LV_OPA_COVER;\n }\n }\n \/\/ In the first column align the texts to the right\n else if(col == 0) {\n lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);\n if(label_draw_dsc) {\n label_draw_dsc->align = LV_TEXT_ALIGN_RIGHT;\n }\n }\n\n \/\/ Make every 2nd row gray color\n if((row != 0 && row % 2) == 0) {\n lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);\n if(fill_draw_dsc) {\n fill_draw_dsc->color = lv_color_mix(lv_palette_main(LV_PALETTE_GREY), fill_draw_dsc->color, LV_OPA_10);\n fill_draw_dsc->opa = LV_OPA_COVER;\n }\n }\n }\n}\n\nvoid lv_create_main_gui(void) {\n table = lv_table_create(lv_screen_active());\n\n \/\/ Inserts or updates all table values\n update_table_values();\n\n \/\/ Set a smaller height to the table. It will make it scrollable\n lv_obj_set_height(table, 200);\n lv_obj_center(table);\n\n \/\/ Add an event callback to apply some custom drawing\n lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);\n lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);\n\n \/\/ Create floating button\n lv_obj_t * float_button = lv_button_create(lv_screen_active());\n lv_obj_set_size(float_button, 50, 50);\n lv_obj_add_flag(float_button, LV_OBJ_FLAG_FLOATING);\n lv_obj_align(float_button, LV_ALIGN_BOTTOM_RIGHT, -15, -15);\n lv_obj_add_event_cb(float_button, float_button_event_cb, LV_EVENT_CLICKED, NULL);\n lv_obj_set_style_radius(float_button, LV_RADIUS_CIRCLE, 0);\n lv_obj_set_style_bg_image_src(float_button, LV_SYMBOL_REFRESH, 0);\n lv_obj_set_style_text_font(float_button, lv_theme_get_font_large(float_button), 0);\n lv_obj_set_style_bg_color(float_button, lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN);\n}\n\nvoid get_date_and_time() {\n if (WiFi.status() == WL_CONNECTED) {\n HTTPClient http;\n\n \/\/ Construct the API endpoint\n String url = String("http:\/\/worldtimeapi.org\/api\/timezone\/") + timezone;\n\n http.begin(url);\n\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("Time information:");\n \/\/Serial.println(payload);\n \n \/\/ Parse the JSON to extract the time\n JsonDocument doc;\n DeserializationError error = deserializeJson(doc, payload);\n\n if (!error) {\n const char* datetime = doc["datetime"];\n \/\/Serial.println("Datetime: " + String(datetime));\n \n \/\/ Split the datetime into date and time\n String datetimeStr = String(datetime);\n int splitIndex = datetimeStr.indexOf('T');\n current_date = datetimeStr.substring(0, splitIndex);\n current_time = datetimeStr.substring(splitIndex + 1, splitIndex + 9); \/\/ Extract time portion\n\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\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 \/\/ Set analog read resolution\n analogReadResolution(12);\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 I2CBME.begin(I2C_SDA, I2C_SCL, 100000);\n bool status;\n \/\/ Passing a &Wire2 to set custom I2C ports\n status = bme.begin(0x76, &I2CBME);\n if (!status) {\n Serial.println("Could not find a valid BME280 sensor, check wiring!");\n while (1);\n }\n \n \/\/ Start LVGL\n lv_init();\n \/\/ Register print function for debugging\n lv_log_register_print_cb(log_print);\n\n \/\/ Start the SPI for the touchscreen and init the touchscreen\n touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\n touchscreen.begin(touchscreenSPI);\n \/\/ Set the Touchscreen rotation in landscape mode\n \/\/ Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 0: touchscreen.setRotation(0);\n touchscreen.setRotation(2);\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 \/\/ Initialize an LVGL input device object (Touchscreen)\n lv_indev_t * indev = lv_indev_create();\n lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);\n \/\/ Set the callback function to read Touchscreen input\n lv_indev_set_read_cb(indev, touchscreen_read);\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<\/h3>\n\n\n\n
#include <lvgl.h>\n#include <TFT_eSPI.h>\n#include <XPT2046_Touchscreen.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 <Wire.h>\n#include <Adafruit_Sensor.h>\n#include <Adafruit_BME280.h><\/code><\/pre>\n\n\n\nInsert Your Credentials and Timezone<\/h3>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nconst char* timezone = \"Europe\/Lisbon\";<\/code><\/pre>\n\n\n\nDeclaring Other Variables<\/h3>\n\n\n\n
#define I2C_SDA 27\n#define I2C_SCL 22\n#define SEALEVELPRESSURE_HPA (1013.25)\nTwoWire I2CBME = TwoWire(0);\nAdafruit_BME280 bme;<\/code><\/pre>\n\n\n\n#define TEMP_CELSIUS 1<\/code><\/pre>\n\n\n\n#define TEMP_CELSIUS 0<\/code><\/pre>\n\n\n\nstatic lv_obj_t * table;<\/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\nInit BME280<\/h4>\n\n\n\n
I2CBME.begin(I2C_SDA, I2C_SCL, 100000);\nbool status;\n\/\/ Passing a &Wire2 to set custom I2C ports\nstatus = bme.begin(0x76, &I2CBME);\nif (!status) {\n Serial.println(\"Could not find a valid BME280 sensor, check wiring!\");\n while (1);\n} <\/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\nPreparing the Touchscreen<\/h4>\n\n\n\n
\/\/ Start the SPI for the touchscreen and init the touchscreen\ntouchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\ntouchscreen.begin(touchscreenSPI);\n\/\/ Set the Touchscreen rotation in landscape mode\n\/\/ Note: in some displays, the touchscreen might be upside down\n\/\/ so you might need to set the rotation to 0: touchscreen.setRotation(0);\ntouchscreen.setRotation(2);<\/code><\/pre>\n\n\n\nTouchscreen Calibration<\/h3>\n\n\n\n
\/\/ REPLACE WITH YOUR OWN CALIBRATION VALUES \u00bb https:\/\/RandomNerdTutorials.com\/touchscreen-calibration\/\nalpha_x = -0.000;\nbeta_x = 0.090;\ndelta_x = -33.771;\nalpha_y = 0.066;\nbeta_y = 0.000;\ndelta_y = -14.632;<\/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_date_and_time()<\/h3>\n\n\n\n
String current_date;\nString current_time;<\/code><\/pre>\n\n\n\nvoid get_date_and_time() {\n if (WiFi.status() == WL_CONNECTED) {\n HTTPClient http;\n\n \/\/ Construct the API endpoint\n String url = String(\"http:\/\/worldtimeapi.org\/api\/timezone\/\") + timezone;\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(\"Time 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[\"datetime\"]; \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 current_time = datetime_str.substring(splitIndex + 1, splitIndex + 9); \/\/ Extract time portion\n hour = current_time.substring(0, 2).toInt();\n minute = current_time.substring(3, 5).toInt();\n second = current_time.substring(6, 8).toInt();\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 sync_time_date = true;\n }\n http.end(); \/\/ Close connection\n } else {\n Serial.println(\"Not connected to Wi-Fi\");\n }\n}<\/code><\/pre>\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\/09\/ESP32-CYD-BME280-Sensor-Data-Table-Demonstration-Testing.jpg?resize=750%2C463&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-BME280-Sensor-Data-Table-Demonstration-Refresh-Update-Values.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/ESP32-CYD-BME280-Sensor-Data-Table-Demonstration-LDR-Sensor.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n