#include <lvgl.h>\n#include <TFT_eSPI.h><\/code><\/pre>\n\n\n\nYou need to include the following libraries to interface with the BME280 sensor.<\/p>\n\n\n\n
#include <Wire.h>\n#include <Adafruit_Sensor.h>\n#include <Adafruit_BME280.h><\/code><\/pre>\n\n\n\nBME280 I2C Pins<\/h3>\n\n\n\n
Set the I2C pins to use the BME280 sensor, create a new I2C bus instance to use those pins, and create an Adafruit_BME280<\/span> object called bme<\/span> to refer to the sensor.<\/p>\n\n\n\n#define I2C_SDA 27\n#define I2C_SCL 22\nTwoWire I2CBME = TwoWire(0);\nAdafruit_BME280 bme;<\/code><\/pre>\n\n\n\nCelsius or Fahrenheit<\/h3>\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#define TEMP_CELSIUS 1 <\/code><\/pre>\n\n\n\nIf you want to display in Fahrenheit degrees instead, set it to 0<\/span>.<\/p>\n\n\n\n#define TEMP_CELSIUS 0<\/code><\/pre>\n\n\n\nNumber of Readings and Scale Variables<\/h3>\n\n\n\n
The data to be displayed on the chart needs to be placed in an array. We\u2019ll display a maximum of 20 readings. These are saved on the bme_last_readings<\/span> array.<\/p>\n\n\n\n#define BME_NUM_READINGS 20\nfloat bme_last_readings[BME_NUM_READINGS] = {-20.0, -20.0, -20.0, -20.0, -20.0,\n-20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0,\n-20.0, -20.0, -20.0, -20.0};<\/code><\/pre>\n\n\n\nWe also create two global variables scale_min_temp<\/span> and scale_max_temp<\/span> that will be used to adjust the scale range.<\/p>\n\n\n\nfloat scale_min_temp;\nfloat scale_max_temp;<\/code><\/pre>\n\n\n\nDefining the Display Width and Height<\/h3>\n\n\n\n
You need to define your display width and height in all your sketches that use LVGL. If you\u2019re using the recommended display, the size is 240×320.<\/p>\n\n\n\n
#define SCREEN_WIDTH 241\n#define SCREEN_HEIGHT 320<\/code><\/pre>\n\n\n\nCreating a Drawing Buffer<\/h3>\n\n\n\n
You need to create a buffer to draw on the display as follows:<\/p>\n\n\n\n
#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];<\/code><\/pre>\n\n\n\nYou should also include this in all LVGL examples.<\/p>\n\n\n\n
Debugging Function<\/h3>\n\n\n\n
For debugging with the LVGL library, you should use the log_print()<\/span> function. It is defined below. Include it in all your sketches before the setup()<\/span>.<\/p>\n\n\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}<\/code><\/pre>\n\n\n\nsetup()<\/h3>\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\nString 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\nInitializing the BME280 sensor<\/h4>\n\n\n\n
In the setup()<\/span>, start by initializing the BME280 sensor.<\/p>\n\n\n\nI2CBME.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
Initialize the LVGL Library by calling the lv_init()<\/span> function in the setup()<\/span>.<\/p>\n\n\n\n\/\/ Start LVGL\nlv_init();<\/code><\/pre>\n\n\n\nRegister Debugging Function<\/h4>\n\n\n\n
Register your log_print()<\/span> function declared previously as a function associated with debugging LVGL.<\/p>\n\n\n\n\/\/ Register print function for debugging\nlv_log_register_print_cb(log_print);<\/code><\/pre>\n\n\n\nGetting BME280 Readings<\/h3>\n\n\n\n
In the setup()<\/span>, we call the get_bme_readings()<\/span> which will get new sensor readings and display them on the chart.<\/p>\n\n\n\nget_bme_readings();<\/code><\/pre>\n\n\n\nThis function is also called every 10 seconds (interval<\/span> variable) in the loop()<\/span> to add a new data point to the chart.<\/p>\n\n\n\nunsigned long currentMillis = millis();\nif (currentMillis - previousMillis >= interval) {\n \/\/ save the last time that chart was updated\n previousMillis = currentMillis;\n get_bme_readings();\n}<\/code><\/pre>\n\n\n\nIn the get_bme_readings()<\/span>, we start by getting a new temperature reading and save it on the bme_temp<\/span> variable (in Celsius or Fahrenheit degrees).<\/p>\n\n\n\n#if TEMP_CELSIUS\n float bme_temp = bme.readTemperature();\n#else\n float bme_temp = 1.8 * bme.readTemperature() + 32;\n#endif<\/code><\/pre>\n\n\n\nEvery time we get a new data point, we\u2019ll reset the scale range (y-axis).<\/p>\n\n\n\n
\/\/ Reset scale range (chart y axis) variables\nscale_min_temp = 120.0;\nscale_max_temp = -20.0;<\/code><\/pre>\n\n\n\nWe add the new temperature value at the end of the array and shift all data points to the left of the array.<\/p>\n\n\n\n
\/\/ Shift values to the left of the array and inserts the latest reading at the end\nfor (int i = 0; i < BME_NUM_READINGS; i++) {\n if(i == (BME_NUM_READINGS-1) && float(bme_temp) < 120.0) {\n bme_last_readings[i] = float(bme_temp); \/\/Inserts the new reading at the end\n }\n else {\n bme_last_readings[i] = float(bme_last_readings[i+1]);\n \/\/ Shift values to the left of the array\n }<\/code><\/pre>\n\n\n\nThe bme_last_readings<\/span> array now contains the data to be displayed on the chart.<\/p>\n\n\n\nWe\u2019ll go through the array and get the maximum and the minimum temperature readings and save them on the scale_max_temp<\/span> and scale_min_temp<\/span> variables so that we can adjust the y-axis later.<\/p>\n\n\n\n\/\/ Get the min\/max value in the array to set the scale range (chart y axis)\nif((float(bme_last_readings[i]) < scale_min_temp) && (float(bme_last_readings[i]) != -20.0 )) {\n scale_min_temp = bme_last_readings[i];\n}\nif((float(bme_last_readings[i]) > scale_max_temp) && (float(bme_last_readings[i]) != -20.0 )) {\n scale_max_temp = bme_last_readings[i];\n}<\/code><\/pre>\n\n\n\nNow that we have our array ready and the maximum and minimum temperature values, we can start drawing the chart. We created a function called lv_draw_chart()<\/span> where we added all the instructions
to draw the chart.<\/p>\n\n\n\nlv_draw_chart();<\/code><\/pre>\n\n\n\nDrawing the Chart<\/h3>\n\n\n\n
In the lv_draw_chart()<\/span> we draw the chart and add all the other widgets to the screen.<\/p>\n\n\n\nWe add a text label at the top with the BME280 Temperature Readings<\/span> text.<\/p>\n\n\n\n\/\/ Create a a text label aligned on top\nlv_obj_t * label = lv_label_create(lv_screen_active());\nlv_label_set_text(label, \"BME280 Temperature Readings\");\nlv_obj_align(label, LV_ALIGN_TOP_MID, 0, 10);<\/code><\/pre>\n\n\n\nNext, we create a container (container_row<\/span>) where we\u2019ll add the chart and the corresponding scale (y-axis) and we set its alignment.<\/p>\n\n\n\n\/\/ Create a container to display the chart and scale\nlv_obj_t * container_row = lv_obj_create(lv_screen_active());\nlv_obj_set_size(container_row, SCREEN_HEIGHT-20, SCREEN_WIDTH-40);\nlv_obj_align(container_row, LV_ALIGN_BOTTOM_MID, 0, -10);\n\/\/ Set the container in a flexbox row layout aligned center\nlv_obj_set_flex_flow(container_row, LV_FLEX_FLOW_ROW);\nlv_obj_set_flex_align(container_row, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);<\/code><\/pre>\n\n\n\nWe create an LVGL chart object using the lv_chart_create()<\/span> function. We pass as argument where we want to place the chart. In this case, we want to place it inside the container_row<\/span>.<\/p>\n\n\n\nlv_obj_t * chart = lv_chart_create(container_row);<\/code><\/pre>\n\n\n\nSet the chart size.<\/p>\n\n\n\n
lv_obj_set_size(chart, SCREEN_HEIGHT-90, SCREEN_WIDTH-70);<\/code><\/pre>\n\n\n\nSet the number of points you want to display simultaneously on the chart.<\/p>\n\n\n\n
lv_chart_set_point_count(chart, BME_NUM_READINGS);<\/code><\/pre>\n\n\n\nAdd an event to the chart so that it displays the pressed point value\u2014that will be handled inside the chart_draw_label_cb()<\/span> callback function.<\/p>\n\n\n\nlv_obj_add_event_cb(chart, chart_draw_label_cb, LV_EVENT_ALL, NULL);<\/code><\/pre>\n\n\n\nAfter creating the chart, we need to create a data series for the chart using the lv_chart_add_series()<\/span>. Pass as argument the chart you\u2019re referring to, the color of the series, and the Y axis.<\/p>\n\n\n\nlv_chart_series_t * chart_series = lv_chart_add_series(chart,\nlv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);<\/code><\/pre>\n\n\n\nAfterward, we add all our points in the array to the chart series.<\/p>\n\n\n\n
for(int i = 0; i < BME_NUM_READINGS; i++) {\n if(float(bme_last_readings[i]) != -20.0) { \/\/ Ignores default array values\n \/\/ Set points in the chart and scale them with an\n \/\/ *100 multiplier to remove the 2 floating-point numbers\n chart_series->y_points[i] = float(bme_last_readings[i]) * 100;\n }\n}<\/code><\/pre>\n\n\n\nSet the chart range taking into account the scale_max_temp<\/span> and scale_min_temp<\/span> values that we got previously.<\/p>\n\n\n\n\/\/ Set the chart range and also scale it with an\n\/\/ *100 multiplier to remove the 2 floating-point numbers\nlv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, int(scale_min_temp-1)*100,\nint(scale_max_temp+1)*100);<\/code><\/pre>\n\n\n\nCall the lv_chart_refresh()<\/span> function to update all values on the chart.<\/p>\n\n\n\nlv_chart_refresh(chart); \/\/ Required to update the chart with the new values<\/code><\/pre>\n\n\n\nCreate a vertical scale for the chart using the lv_scale_create()<\/span> function and place it inside the container_row<\/span> aligned vertically on the right.<\/p>\n\n\n\n\/\/ Create a scale (y axis for the temperature) aligned vertically on the right\nlv_obj_t * scale = lv_scale_create(container_row);\nlv_obj_set_size(scale, 15, SCREEN_WIDTH-90);\nlv_scale_set_mode(scale, LV_SCALE_MODE_VERTICAL_RIGHT);\nlv_scale_set_label_show(scale, true);<\/code><\/pre>\n\n\n\nSet the scale smaller divisions.<\/p>\n\n\n\n
\/\/ Set the scale ticks count\nlv_scale_set_total_tick_count(scale,int(scale_max_temp+2)-int(scale_min_temp-1));\nif((int(scale_max_temp+2) - int(scale_min_temp-1)) < 10) {\n lv_scale_set_major_tick_every(scale, 1); \/\/ set y axis to have 1 tick every 1 degree\n}\nelse {\n lv_scale_set_major_tick_every(scale, 10);\/\/set y axis to have 1 tick every 10 degrees\n}<\/code><\/pre>\n\n\n\nSet the scale style and range.<\/p>\n\n\n\n
\/\/ Set the scale style and range\nlv_obj_set_style_length(scale, 5, LV_PART_ITEMS);\nlv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);\nlv_scale_set_range(scale, int(scale_min_temp-1), int(scale_max_temp+1));<\/code><\/pre>\n\n\n\nDrawing the Chart<\/h3>\n\n\n\n
When you press the chart, it will display a label with the values for the pressed data point.<\/p>\n\n\n\n
lv_obj_add_event_cb(chart, chart_draw_label_cb, LV_EVENT_ALL, NULL);<\/code><\/pre>\n\n\n\nAll of that is handled on the chart_draw_label_cb()<\/span> function.<\/p>\n\n\n\n\/\/ Draw a label on that chart with the value of the pressed point\nstatic void chart_draw_label_cb(lv_event_t * e) {\n lv_event_code_t code = lv_event_get_code(e);\n lv_obj_t * chart = (lv_obj_t*) lv_event_get_target(e);\n if(code == LV_EVENT_VALUE_CHANGED) {\n lv_obj_invalidate(chart);\n }\n if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {\n int32_t * s = (int32_t*)lv_event_get_param(e);\n *s = LV_MAX(*s, 20);\n }\n \/\/ Draw the label on the chart based on the pressed point\n else if(code == LV_EVENT_DRAW_POST_END) {\n int32_t id = lv_chart_get_pressed_point(chart);\n if(id == LV_CHART_POINT_NONE) return;\n LV_LOG_USER(\"Selected point %d\", (int)id);\n lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);\n while(ser) {\n lv_point_t p;\n lv_chart_get_point_pos_by_id(chart, ser, id, &p);\n int32_t * y_array = lv_chart_get_y_array(chart, ser);\n int32_t value = y_array[id];\n char buf[16];\n #if TEMP_CELSIUS\n const char degree_symbol[] = \"\\u00B0C\";\n #else\n const char degree_symbol[] = \"\\u00B0F\";\n #endif\n \/\/ Preparing the label text for the selected data point\n lv_snprintf(buf, sizeof(buf), LV_SYMBOL_DUMMY \" %3.2f %s \", float(bme_last_readings[id]), degree_symbol);\n \/\/ Draw the rectangular label that will display the temperature value\n lv_draw_rect_dsc_t draw_rect_dsc;\n lv_draw_rect_dsc_init(&draw_rect_dsc);\n draw_rect_dsc.bg_color = lv_color_black();\n draw_rect_dsc.bg_opa = LV_OPA_60;\n draw_rect_dsc.radius = 2;\n draw_rect_dsc.bg_image_src = buf;\n draw_rect_dsc.bg_image_recolor = lv_color_white();\n \/\/ Rectangular label size\n lv_area_t a;\n a.x1 = chart->coords.x1 + p.x - 35;\n a.x2 = chart->coords.x1 + p.x + 35;\n a.y1 = chart->coords.y1 + p.y - 30;\n a.y2 = chart->coords.y1 + p.y - 10;\n lv_layer_t * layer = lv_event_get_layer(e);\n lv_draw_rect(layer, &draw_rect_dsc, &a);\n ser = lv_chart_get_series_next(chart, ser);\n }\n }\n else if(code == LV_EVENT_RELEASED) {\n lv_obj_invalidate(chart);\n }\n}<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\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>. Finally, click the upload button.<\/p>\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-TFT-Display-BME280-Line-Chart.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-TFT-Project-Overview-Line-Chart-BME280.png?resize=750%2C432&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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![\"ILI9341](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-display.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Wiring](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Display-Screen-Wiring.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"TFT](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-touchscreen-J1-connection.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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![\"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\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-TFT-LVGL-Display-Temperature-Line-Chart-BME280.jpg?resize=750%2C422&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\/12\/ESP32-TFT-LVGL-Display-Temperature-Line-Chart-BME280-Demonstration.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\/12\/ESP32-CYD-BME280-line-chart-serial-monitor-temperature-demonstration.png?resize=695%2C371&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n