In this guide, you’ll learn how to create a responsive table using LVGL. We’ll display temperature, humidity, and pressure from the BME280 sensor, and luminosity from the LDR on the display. We’ll also display the timestamp associated with the readings (date and time). The ESP32 will be programmed using Arduino IDE.
New to the ESP32 Cheap Yellow Display? Start here: Getting Started with ESP32 Cheap Yellow Display Board – CYD (ESP32-2432S028R).
Project Overview
In this project, we’ll create a table with sensor readings from the BME280 sensor and the LDR on the ESP32 CYD board. We’ll also display the date and time, and your board IP address.
To get an accurate date and time for your timezone, we’ll use the WorldTimeAPI. 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.
If you don’t have an internet connection where the ESP32 will operate, you can omit the date and time section or use an RTC module.
We’ll also display a floating button with the refresh icon that when clicked will update the values on the table.
Prerequisites
Before proceeding, make sure you follow the next prerequisites. You must follow all steps, otherwise, your project will not work.
1) Parts Required and Wiring the Circuit
For this project, you need the following parts:
We’ll use I2C communication protocol to get data from the BME280 sensor. On the ESP32 CYD board there is an extended IO socket that allows you to connect external peripherals. We’ll connect the sensor to the CN1 connector.
Your board should have come with a little JST connector to access those GPIOs.
We’ll connect SDA to GPIO 27, and SCL to GPIO 22.
If you’re 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)
The CYD board should have a built-in LDR (light-dependent resistor) next to the screen and connected to GPIO 34.
Recommended reading: ESP32 Cheap Yellow Display (CYD) Pinout (ESP32-2432S028R).
2) Install ESP32 Boards in Arduino IDE
We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed. Follow the next tutorial:
3) Get familiar with the ESP32 Cheap Yellow Display
The ESP32-2432S028R development board has become known in the maker community as the “Cheap Yellow Display” 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.
If this is your first time using the ESP32 Cheap Yellow Display, make sure to follow our getting started guide:
4) Install TFT and LVGL Libraries
LVGL (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).
Follow the next tutorial to install and configure the required libraries to use LVGL for the ESP32 Cheap Yellow Display using Arduino IDE.
5) Install ArduinoJson and BME280 Libraries
For this project, you need to install the ArduinoJSON library to handle the JSON response when you make a request to the WorldTimeAPI.
In the Arduino IDE, go to Sketch > Include Library > Manage Libraries. Search for ArduinoJSON and install the library by Benoit Blanchon. We’re using version 7.0.4. We recommend using the same version.
We’ll use the Adafruit BME280 library to get data from the BME280. In the Arduino IDE, go to Sketch > Include Library > Manage Libraries. Search for Adafruit BME280 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).
ESP32 CYD: Display BME280 Sensor Readings on a Table – Arduino Code
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.
How Does the Code Work?
Let’s see how to get the time from the internet and display all data on a table. Alternatively, you can skip to the Demonstration section.
Including Libraries
You need to include the lvgl, TFT_eSPI, and the XPT2046_Touchscreen libraries to communicate and display text on the screen.
#include <lvgl.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>You need to include the WiFi, HTTPClient, and the ArduinoJson libraries to make HTTP requests and handle JSON data.
#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>To use the BME280, we need to include the following libraries.
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>Insert Your Credentials and Timezone
In the following lines, you must insert your network credentials so that the ESP32 can connect to your router.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Set your timezone in the timezone variable at the beginning of the code (list of all available timezones).
const char* timezone = "Europe/Lisbon";Declaring Other Variables
We need to create an I2C instance on custom I2C pins and an Adafruit_BME280 object to refer to the sensor.
#define I2C_SDA 27
#define I2C_SCL 22
#define SEALEVELPRESSURE_HPA (1013.25)
TwoWire I2CBME = TwoWire(0);
Adafruit_BME280 bme;Related content: ESP32 I2C Communication: Set Pins, Multiple Bus Interfaces and Peripherals (Arduino IDE)
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 variable. It is set to 1 by default to display the temperature in Celsius degrees.
#define TEMP_CELSIUS 1If you want to display in Fahrenheit degrees instead, set it to 0.
#define TEMP_CELSIUS 0Create a LVGL table object, so that we can access it inside all functions later on.
static lv_obj_t * table;setup()
In the setup(), include the following lines for debugging. These will print the version of LVGL that you’re using. You must be using version 9.
String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
Serial.begin(115200);
Serial.println(LVGL_Arduino);Connect to the Internet
To connect the ESP32 to the internet we use the following code.
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.print("Connecting");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.print("\nConnected to Wi-Fi network with IP Address: ");
Serial.println(WiFi.localIP());Init BME280
The following lines initialize the sensor on the I2C bus created:
I2CBME.begin(I2C_SDA, I2C_SCL, 100000);
bool status;
// Passing a &Wire2 to set custom I2C ports
status = bme.begin(0x76, &I2CBME);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
} Initialize the LVGL Library
Initialize the LVGL Library by calling the lv_init() function in the setup().
// Start LVGL
lv_init();Register Debugging Function
Register your log_print() function declared previously as a function associated with debugging LVGL.
// Register print function for debugging
lv_log_register_print_cb(log_print);Preparing the Touchscreen
Initialize the touchscreen.
// Start the SPI for the touchscreen and init the touchscreen
touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
touchscreen.begin(touchscreenSPI);
// Set the Touchscreen rotation in landscape mode
// Note: in some displays, the touchscreen might be upside down
// so you might need to set the rotation to 0: touchscreen.setRotation(0);
touchscreen.setRotation(2);Touchscreen Calibration
On the touchscreen_read() 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.
// REPLACE WITH YOUR OWN CALIBRATION VALUES » https://RandomNerdTutorials.com/touchscreen-calibration/
alpha_x = -0.000;
beta_x = 0.090;
delta_x = -33.771;
alpha_y = 0.066;
beta_y = 0.000;
delta_y = -14.632;Create a Display Object
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 with the screen width, screen height, and drawing buffer defined earlier.
// Create a display object
lv_display_t * disp;
// Initialize the TFT display using the TFT_eSPI library
disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);Drawing the GUI
The LVGL library works asynchronously. You must call the function to draw on the display in the setup(). 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’t need to check for any events in the loop().
Throughout most of our examples, the function that will draw to the screen will be called lv_create_main_gui(). Then, inside that function, we’ll add the instructions to build the interface.
// Function to draw the GUI
lv_create_main_gui();get_date_and_time()
We create two global variables current_date and current_time at the beginning of the code to save the current date and time.
String current_date;
String current_time;Create a function called get_date_and_time() that makes a request to the WorldTimeAPI and updates the current_date and current_time variables with the current date and time.
void get_date_and_time() {
if (WiFi.status() == WL_CONNECTED) {
HTTPClient http;
// Construct the API endpoint
String url = String("http://worldtimeapi.org/api/timezone/") + timezone;
http.begin(url);
int httpCode = http.GET(); // Make the GET request
if (httpCode > 0) {
// Check for the response
if (httpCode == HTTP_CODE_OK) {
String payload = http.getString();
//Serial.println("Time information:");
//Serial.println(payload);
// Parse the JSON to extract the time
JsonDocument doc;
DeserializationError error = deserializeJson(doc, payload);
if (!error) {
const char* datetime = doc["datetime"];
// Split the datetime into date and time
String datetime_str = String(datetime);
int splitIndex = datetime_str.indexOf('T');
current_date = datetime_str.substring(0, splitIndex);
current_time = datetime_str.substring(splitIndex + 1, splitIndex + 9); // Extract time portion
hour = current_time.substring(0, 2).toInt();
minute = current_time.substring(3, 5).toInt();
second = current_time.substring(6, 8).toInt();
} else {
Serial.print("deserializeJson() failed: ");
Serial.println(error.c_str());
}
}
} else {
Serial.printf("GET request failed, error: %s\n", http.errorToString(httpCode).c_str());
sync_time_date = true;
}
http.end(); // Close connection
} else {
Serial.println("Not connected to Wi-Fi");
}
}We won’t cover how HTTP requests work. If you want to learn more, you can check the following tutorial: ESP32 HTTP GET with Arduino IDE.
Preparing the GUI
We create the table inside the lv_create_main_gui() function.
void lv_create_main_gui(void) {We can create a table object using the lv_table_create() function as follows.
table = lv_table_create(lv_screen_active());Next, we write a function called update_table_values() that fills the table with the readings. We’ll take a look at that function in just a moment.
update_table_values();Set the table height and center it on the screen.
// Set a smaller height to the table. It will make it scrollable
lv_obj_set_height(table, 200);
lv_obj_center(table); Add a callback and a flag to the table. Those will allow us to draw the table with a specific style (different colors for the headers and alternating grey and white rows).
// Add an event callback to apply some custom drawing
lv_obj_add_event_cb(table, draw_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
lv_obj_add_flag(table, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);Creating the Floating Button
Still, inside the lv_create_main_gui() function, we create the floating button. This is a regular button, but it’s circular and with a specific style.
// Create floating button
lv_obj_t * float_button = lv_button_create(lv_screen_active());
lv_obj_set_size(float_button, 50, 50);
lv_obj_add_flag(float_button, LV_OBJ_FLAG_FLOATING);
lv_obj_align(float_button, LV_ALIGN_BOTTOM_RIGHT, -15, -15);
lv_obj_add_event_cb(float_button, float_button_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_set_style_radius(float_button, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_bg_image_src(float_button, LV_SYMBOL_REFRESH, 0);
lv_obj_set_style_text_font(float_button, lv_theme_get_font_large(float_button), 0);
lv_obj_set_style_bg_color(float_button, lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN);The button when clicked will trigger the float_button_event_cb function.
lv_obj_add_event_cb(float_button, float_button_event_cb, LV_EVENT_CLICKED, NULL);To add the refresh symbol to the button, we use the lv_obj_set_style_bg_image_src() function. To add the refresh symbol we need to use LV_SYMBOL_REFRESH.
lv_obj_set_style_bg_image_src(float_button, LV_SYMBOL_REFRESH, 0);Adding Data to the Table
In the update_table_values() is where we’ll add some data to the table.
static void update_table_values(void) {This function is called when we create the GUI in the lv_create_main_gui() function, and when you click the button on the float_button_event_cb() function.
First, we start by getting readings from the BME280 sensor as well as luminosity from the LDR.
// Get the latest temperature reading in Celsius or Fahrenheit
#if TEMP_CELSIUS
float bme_temp = bme.readTemperature();
const char degree_symbol[] = "\u00B0C";
#else
float bme_temp = 1.8 * bme.readTemperature() + 32;
const char degree_symbol[] = "\u00B0F";
#endif
String bme_temp_value = String(bme_temp) + degree_symbol;
String bme_humi_value = String(bme.readHumidity()) + "%";
String bme_press_value = String(bme.readPressure() / 100.0F) + " hPa";
String ldr_value = String(analogRead(LDR_PIN));The readings are saved on the bme_temp_value, bme_humi_value, bme_pres_value and ldr_value variables. We update the time variables by calling the get_date_and_time() function that we’ve seen previously.
// Get the time from WorldTimeAPI
get_date_and_time();After getting all the data, we can finally start adding rows to the table. For that, we can use the lv_table_set_cell_value() function. This function accepts as argument the table you’re referring to, the row number, the column number, and the data you want to display.
The following lines fill the first column.
// Fill the first column
lv_table_set_cell_value(table, 0, 0, "Data");
lv_table_set_cell_value(table, 1, 0, "Temperature");
lv_table_set_cell_value(table, 2, 0, "Humidity");
lv_table_set_cell_value(table, 3, 0, "Pressure");
lv_table_set_cell_value(table, 4, 0, "Luminosity");
lv_table_set_cell_value(table, 5, 0, "Date");
lv_table_set_cell_value(table, 6, 0, "Time");
lv_table_set_cell_value(table, 7, 0, "IP Address");Finally, we fill the second column with the values from the sensors, the date and time, and the ESP32 IP address.
// Fill the second column
lv_table_set_cell_value(table, 0, 1, "Value");
lv_table_set_cell_value(table, 1, 1, bme_temp_value.c_str());
lv_table_set_cell_value(table, 2, 1, bme_humi_value.c_str());
lv_table_set_cell_value(table, 3, 1, bme_press_value.c_str());
lv_table_set_cell_value(table, 4, 1, ldr_value.c_str());
lv_table_set_cell_value(table, 5, 1, current_date.c_str());
lv_table_set_cell_value(table, 6, 1, current_time.c_str());
lv_table_set_cell_value(table, 7, 1, WiFi.localIP().toString().c_str());loop()
In the loop(), you can add any other tasks that you need your ESP32 to do like in any regular Arduino sketch.
void loop() {
lv_task_handler(); // let the GUI do its work
lv_tick_inc(5); // tell LVGL how much time has passed
delay(5); // let this time pass
}Demonstration
Upload the code to your board. Go to Tools > Board and select ESP32 > ESP32 Dev Module. Then, select the right COM port in Tools > Port.
If you see an Error like this: “Sketch too big” during the uploading process, in Arduino IDE go to Tools > Partition scheme > choose anything that has more than 1.4MB APP, for example: “Huge APP (3MB No OTA/1MB SPIFFS“.
Finally, click the upload button.
After a few seconds, it will display the current data on the screen as shown in the picture below.
To update the data on the table, you just need to click on the refresh button.
You can cover the LDR with your finger to see the luminosity values changing.
Note: on many CYD boards, the LDR will not work as expected without modifying the internal circuit. So, if you’re only getting 0 that’s “normal”.
The table is scrollable. You can scroll down to check the date and time of the last update.
Troubleshooting
If you are experiencing issues opening the WorldTimeAPI website or if your HTTP request is failing to retrieve time, you can change the following line 252.
String url = String("http://worldtimeapi.org/api/timezone/") + timezone;From their domain name (worldtimeapi.org) to their IP address as follows:
String url = String("http://213.188.196.246/api/timezone/") + timezone;Wrapping Up
In this tutorial, you learned to display sensor data on a responsive table on the Cheap Yellow Display (CYD) board using the LVGL library.
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:
Other guides you might like reading:
- Getting Started with ESP32 Cheap Yellow Display Board – CYD (ESP32-2432S028R)
- ESP32 Touchscreen On/Off Button – Cheap Yellow Display (ESP32-2432S028R)
- ESP32 Cheap Yellow Display (CYD) Pinout (ESP32-2432S028R)
- LVGL with ESP32 Cheap Yellow Display Board (ESP32-2432S028R)
To learn more about the ESP32, make sure to take a look at our resources:
Hi, I would love to do this project. But I keep getting this error code. I can’t seem to get past it. Or find the correct zip file. Any help would be Great!!!
In file included from C:\Users\Aaron\AppData\Local\Temp.arduinoIDE-unsaved2024915-26032-1dvjlgf.gt9i\sketch_oct15a\sketch_oct15a.ino:15:
C:\Users\Aaron\AppData\Local\Temp.arduinoIDE-unsaved2024915-26032-1dvjlgf.gt9i\sketch_oct15a/lvgl.h:21:10: fatal error: src/lv_init.h: No such file or directory
21 | #include “src/lv_init.h”
| ^~~~~~~~~~~~~~~
compilation terminated.
exit status 1
Compilation error: src/lv_init.h: No such file or directory
Hi.
Please double-check the tutorial of the installation of the library.
Double-check your folders and files.
Regards,
Sara
Some of the WorldTimeAPI links do not work for me??
What links?
Can you be more specific?
Hello David!
Troubleshooting
If you are experiecing issues opening the WorldTimeAPI website or if your HTTP request is failing to retrieve time, you can change the following line 252.
String url = String(“http://worldtimeapi.org/api/timezone/”) + timezone;
From their domain name (worldtimeapi.org) to their IP address as follows:
String url = String(“http://213.188.196.246/api/timezone/”) + timezone;
I hope this helps!
Hi Rui. I could not get any response from WorldTimeAPI, not even using their ip address. I also tried both urls in the browser but there is no response from their site.
I changed the get_date_and_time code to use the ESP32 internal RTC using time.h and NTP. It makes for shorter code in the get_date_and_time function.
#include <time.h>
time_t now;
tm tm; //structure to hold the time info
// Store date and time
char current_date[12];
char current_time[10];
// choose the best fitting NTP server pool for your country
#define MY_NTP_SERVER “fr.pool.ntp.org”
// choose your time zone from this list
// https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
#define MY_TZ “CET-1CEST,M3.5.0,M10.5.0/3” //for Europe/Paris
void get_date_and_time() {
time(&now);
localtime_r(&now, &tm);
sprintf(current_date, “%2.d%/%.2d%/%.4d”, tm.tm_mday, tm.tm_mon + 1, tm.tm_year + 1900); // month starts from 0 and year is the number of years from 1900
sprintf(current_time, “%2.d%:%.2d%:%.2d”, tm.tm_hour, tm.tm_min + 1, tm.tm_sec);
}
Void setup() {
configTime(0, 0, MY_NTP_SERVER);
setenv(“TZ”, MY_TZ, 1);
tzset();
}
BR
Phil
Oops. tm.tm_min without the +1!
If you are experiecing issues opening the WorldTimeAPI website or if your HTTP request is failing to retrieve time, you can change the following line 252.
String url = String(“http://worldtimeapi.org/api/timezone/”) + timezone;
From their domain name (worldtimeapi.org) to their IP address as follows:
String url = String(“http://213.188.196.246/api/timezone/”) + timezone;
Can not open this side. tried it with Firefox, Chrome and Avast browser. No answer. Program not complete working for date and time.
All,
I think it’s a problem with worldtimeapi.org website.
From Australia I get varied responses just trying a ping, but after that the WWW site worked too.
May be a traffic or routing problem in the Internet.
Dave
The ping works for me too, but even going to their faq via worldtimeapi.org/pages/faqs returns an error 502 currently unable to handle this request.
The site appears to be broken.
Phil
Hi.
It seems a log of people are having issues with the worldtimeapi.
We’ll update these tutorials with another solution.
We’re currently out of the office. We’ll do that when we come back.
regards,
Sara
Hi, when verifying the sketch I get this error message below, any thoughts why?
Many thanks and love the work that you guys do, thanks,
Arduino: 1.8.19 (Windows 10), Board: “ESP32 Dev Module, Disabled, Disabled, Default 4MB with spiffs (1.2MB APP/1.5MB SPIFFS), 240MHz (WiFi/BT), QIO, 80MHz, 4MB (32Mb), 921600, Core 1, Core 1, None, Disabled, Disabled”
C:\Users\44784\OneDrive\Bryan’s Docs\Arduino\Sketches\ESP32_CYD_with_BME280_sensor\ESP32_CYD_with_BME280_sensor.ino: In function ‘void draw_event_cb(lv_event_t*)’:
ESP32_CYD_with_BME280_sensor:192:46: error: ‘lv_draw_task_get_label_dsc’ was not declared in this scope; did you mean ‘lv_draw_task_state_t’?
192 | lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
| ^~~~~~~~~~~~~~~~~~~~~~~~~~| lv_draw_task_state_t
ESP32_CYD_with_BME280_sensor:196:44: error: ‘lv_draw_task_get_fill_dsc’ was not declared in this scope
196 | lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
| ^~~~~~~~~~~~~~~~~~~~~~~~~
ESP32_CYD_with_BME280_sensor:204:46: error: ‘lv_draw_task_get_label_dsc’ was not declared in this scope; did you mean ‘lv_draw_task_state_t’?
204 | lv_draw_label_dsc_t * label_draw_dsc = lv_draw_task_get_label_dsc(draw_task);
| ^~~~~~~~~~~~~~~~~~~~~~~~~~| lv_draw_task_state_t
ESP32_CYD_with_BME280_sensor:212:44: error: ‘lv_draw_task_get_fill_dsc’ was not declared in this scope
212 | lv_draw_fill_dsc_t * fill_draw_dsc = lv_draw_task_get_fill_dsc(draw_task);
| ^~~~~~~~~~~~~~~~~~~~~~~~~
C:\Users\44784\OneDrive\Bryan’s Docs\Arduino\Sketches\ESP32_CYD_with_BME280_sensor\ESP32_CYD_with_BME280_sensor.ino: In function ‘void get_date_and_time()’:
ESP32_CYD_with_BME280_sensor:249:5: error: ‘HTTPClient’ was not declared in this scope; did you mean ‘HttpClient’?
249 | HTTPClient http;
| ^~~~~~~~~~| HttpClient
ESP32_CYD_with_BME280_sensor:254:5: error: ‘http’ was not declared in this scope
254 | http.begin(url);
| ^~~~
ESP32_CYD_with_BME280_sensor:260:23: error: ‘HTTP_CODE_OK’ was not declared in this scope
260 | if (httpCode == HTTP_CODE_OK) {
| ^~~~~~~~~~~~
Multiple libraries were found for “HttpClient.h”
Used: C:\Users\44784\OneDrive\Bryan’s Docs\Arduino\libraries\HttpClient
Not used: C:\Program Files (x86)\Arduino\libraries\Bridge
Multiple libraries were found for “lvgl.h”
Used: C:\Users\44784\OneDrive\Bryan’s Docs\Arduino\libraries\lvgl
Not used: C:\Users\44784\OneDrive\Bryan’s Docs\Arduino\libraries\arduino_436457
Multiple libraries were found for “WiFi.h”
Used: C:\Users\44784\AppData\Local\Arduino15\packages\esp32\hardware\esp32\3.0.5\libraries\WiFi
Not used: C:\Program Files (x86)\Arduino\libraries\WiFi
exit status 1
‘lv_draw_task_get_label_dsc’ was not declared in this scope; did you mean ‘lv_draw_task_state_t’?
This report would have more information with
“Show verbose output during compilation”
option enabled in File -> Preferences.
Hi.
Please double-check the installation of the libraries.
Regards,
Sara
HI, Ii have this running OK, but I’m only getting ‘0’ for luminosity.
I believe there may some board variations where the resistors need to be changed.
https://github.com/hexeguitar/ESP32_TFT_PIO?tab=readme-ov-file#ldr
Do you know the values of R15/R19 on your board?
Dave
hi Dave,
I’m also getting ‘0’ for luminosity. I’m using this board amazon.com/dp/B0D83RNNXV from DIYmalls
Manufacturer: DIYmalls
ASIN: B0D83RNNXV
Hello
I have a compilation error
Compilation error: invalid use of incomplete type ‘lv_draw_task_t’ {aka ‘struct lv_draw_task_t’}
Line 185
Hi.
Please double-check the installation of the libraries.
Regards,
Sara
I have the same problem. Could you solve it?
After several attempts, following the installation tutorial step by step, I checked the folders and directories, I received this error when compiling:
grpc: error while marshaling: string field contains invalid UTF-8
Compilation error: invalid use of incomplete type ‘lv_draw_task_t’ {aka ‘struct lv_draw_task_t’}
Hi.
I just compiled the code again and it is working as expected.
Please double-check that you have the right configuration files and they are on the right places.
Also, double-check the versions of the libraries you’re using and the board you’re selecting.
Here’s the installation guide: https://randomnerdtutorials.com/lvgl-cheap-yellow-display-esp32-2432s028r/
Regards,
Sara
After uninstalling the Arduino IDE, removing all libraries, and installing the Arduino IDE again and following the guide: https://randomnerdtutorials.com/lvgl-cheap-yellow-display-esp32-2432s028r/ I managed to compile and write the code, however nothing appears on the screen, only this appears on the serial monitor:
16:53:14.006 -> ets Jul 29 2019 12:21:46
16:53:14.006 ->
16:53:14.006 -> rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
16:53:14.006 -> configsip: 0, SPIWP:0xee
16:53:14.006 -> clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
16:53:14.006 -> mode:DIO, clock div:1
16:53:14.006 -> load:0x3fff0030,len:4832
16:53:14.006 -> load:0x40078000,len:16460
16:53:14.006 -> load:0x40080400,len:4
16:53:14.006 -> load:0x40080404,len:3504
16:53:14.006 -> entry 0x400805cc
16:53:14.459 -> LVGL Library Version: 9.2.0
16:53:14.641 -> Connecting.
16:53:15.095 -> Connected to Wi-Fi network with IP Address: 192.168.90.32
16:53:15.133 -> Could not find a valid BME280 sensor, check wiring!
Your BME280 sensor is not connected properly to the board. Please double-check the GPIOs.
Regards,
Sara
The Sketch compiles OK but I then get the following error:
Sketch uses 1356513 bytes (103%) of program storage space. Maximum is 1310720 bytes.
Global variables use 64220 bytes (19%) of dynamic memory, leaving 263460 bytes for local variables. Maximum is 327680 bytes.
Sketch too big; see https://support.arduino.cc/hc/en-us/articles/360013825179 for tips on reducing it.
text section exceeds available space in board
Compilation error: text section exceeds available space in board
Hi
Please read the tutorial.
We have a red big rectangle showing how to upload the code to avoid that error.
Regards,
Sara
How can the time be updated continuously?
WorldTimeApi website is inactive. Is there any other websites to get date and time?
If you are experiencing issues opening the WorldTimeAPI website or if your HTTP request is failing to retrieve time, you can change the following line 252.
String url = String(“http://worldtimeapi.org/api/timezone/”) + timezone;
From their domain name (worldtimeapi.org) to their IP address as follows:
String url = String(“http://213.188.196.246/api/timezone/”) + timezone;
Regards,
Sara
Thank you, but there is still an error “GET request failed, error: connection lost”. Wi-Fi connection is correct.
Thanks Sara but the IP address does not work either. I tried using it directly from the browser and occasionally it gives a response but mainly not.
I replaced the code with an NTP get using NTPClient.
BR
Phil
Hi Sara,
Where can I purchase the JST lead here in the UK?
Thanks
Alan
Hi.
It should have come together when you buy a CYD display.
Regards,
Sara
It didn’t. Where is the best place to buy them separately?
Thanks
Have purchased a JST cable, unfortunately the connector is to big. Can you advice on exact connector I need?
Thanks
Alan
Hi.
I think if you search for this term, you should get the right one (not 100% sure):
“jst connector 4 pins 1.25mm”
I hope this helps.
Regards,
Sara
Thanks Sara
Hi,
I am getting “0” as luminosity. My boards come from Amazon and Banggood. On both boards I can see the LDRs. Can you provide links where I can find solutions, even if replacing electronics components is required.
Thanks for your support.
What I found was here:
https://github.com/hexeguitar/ESP32_TFT_PIO?tab=readme-ov-file#ldr
Dave
Thanks Dave,
I’ll give it a try soon.
Have a nice one,
Serge
The LDR circuit on almost all the CYD boards is incorrect, no matter where the board came from. Along with the components around the built in Audio amp circuit. I will attach the link to show you where the mods to correct these are found.
github.com/witnessmenow/ESP32-Cheap-Yellow-Display/tree/main/Mods
Thanks for sharing.
Regards,
Sara
I get the following error: Line 189
Bibliothek Adafruit BusIO in Version 1.16.2 im Ordner: C:\Users\Tom\Documents\Arduino\libraries\Adafruit_BusIO wird verwendet
exit status 1
Compilation error: invalid use of incomplete type ‘lv_draw_task_t’ {aka ‘struct lv_draw_task_t’}
Sorry too much verbosity. Can anyone help me? It doesn’t compile.
Hi.
Unfortunately, I cannot reproduce this issue.
Take a look at the suggestions in this discussion: https://github.com/lvgl/lvgl/issues/6812
Let me know if you were able to fix this.
Regards,
Sara
Dear Sara,
thank you for reply and the link you sent me. I am not familiar with lvgl. There are 3 suggestions to overcome the problem.
1. Use a different function, but I don’t know wich funktion to substitute.
2. enable LV_USE_PRIVATE_API in lv_conf.h; so I added
#define LV_USE_PRIVATE_API 1
to lv_conf.h and it compiled your scetch.
If there is a better solution, please let me know.
Thank you very much.
Tom
Hello,
I run the code and it compiles fine and uploads to the board. However, I get a blank display and no serial monitor output. I read the tutorial and double checked my steps but don’t seem to find any errors.
Hi.
The issue is probably with the BME280 sensor…
Please double-check the wiring and the I2C address of your sensor.
Regards,
Sara
Sara,
The screen is black how can that be a sensor issue?
fred
Fred,
in the setup() section of the code there is:
// Passing a &Wire2 to set custom I2C ports
status = bme.begin(0x76, &I2CBME);
if (!status) {
Serial.println(“Could not find a valid BME280 sensor, check wiring!”);
while (1);
}
If the BME sensor fails, execution goes into a ‘tight loop’. The statement:
while(1); will always be true and nothing else will happen. The Display will not get initialized and no further serial output will be seen.
Dave
YES it works thank you
fred
same issue here
Can you please create a tutorial explaining how to do this same thing except sending the data to the CYD over MQTT from a separate ESP32 that has the sensor connected to it… as in the case of having an outdoor weather sensor, and having the CYD being indoors displaying the temp/humidity from the outdoor ESP32/sensor? I am using Tasmota for the outdoor ESP32/sensor, so I already have Mosquitto Broker and MQTT topics from Tasmota setup and working…. would really like to have the CYD displaying Time, Date, Outdoor Temp/Humidity, and Indoor Temp/Humidity. This would be a much more useful project for many people. Thank you.
Hi.
Thanks for the suggestion.
I’ll add it to my to-do list.
Regards,
Sara
Is there a possibility of having this project, also log data to the sd card?
Yes.
We’ll do that soon.
Regards,
Rui
Has anyone been able to get the CYD working with a BMP280 sensor?
Yes
Check the BMP280 address. One of my modules had address 0x77 instead of 0x76. You can try changing the address in the software.
What error are you getting?
Hi SI followed your excellent lesson ESP32 CYD with BME280.
The CYD display is very interesting and allows you to view a lot of data.
Two questions:
1- I changed the 252 line but no date appears;
2- Could you also propose a solution with a GPS sensor, perhaps it would also be possible to connect it with Google Maps.
Is it possible? Thanks
Renzo
Hi.
Currently the WoldTimeAPI is not working.
We’ll provide a new solution soon.
W’ere currently out of the office. We’ll fix this issue when we come back.
Regards,
Sara
Greetings. It would probably be better if we used EEZ Studio.
Hi.
We’ll probably take a look into that in the future.
Regards,
Sara
Hey there,
You state in this fantastic article that “Many CYD boards require modifications to the internal circuit for the LDR to function correctly” – an actual problem that I have… (all readings are 0)
Do you have a link to this modification? I’m guessing it involves high precision soldering…
Thanks for any thoughts on this. Love your work!!!
Chris
Hi.
No, unfortunately, I don’t have a guide to fix that.
Regards,
Sara
Chris,
are the readings actually Zero? I recall they were very low, like 47mV before the mod.
Have a look at the mod here: https://github.com/hexeguitar/ESP32_TFT_PIO#1-ldr . The change of resistor from 1M to 100K should multiply the range by 10, but I multiply that by 1000 to graph the output.
Dave
Thanks Dave,
Yes, the results are always zero… I have two boards which both have the same reading. Thanks for posting the modification link though…
Regards, Chris
Hello Sara and Rui. Is there also a sketch for the BMP280 on the CYD? I can’t get pin switching (I2C) to work like with the BME280 version. I need some help with that, a basic sketch or something similar. Thanks in advance.
Bert, does the BMP work? it could be that the CYD pinout is slightly different. Also try a simple i2C scanner to see what addresses are found.
Dave
Hi.
Can you provide more details about what exactly you need help with?
Do you need to use the BMP282 with custom I2C pins?
Regards,
Sara
No the BMP280 with I2C pins.
Greetings
Hi.
For the BMP280, start by installing this library: https://github.com/adafruit/adafruit_bmp280_library
You can check the basic example here: https://github.com/adafruit/Adafruit_BMP280_Library/blob/master/examples/bmp280test/bmp280test.ino
I think that after taking a look at this example, you can easily modify our code to use that sensor. If not, please let me know.
Regards.
Sara