![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-Cheap-Yellow-Display-BME280-Chart.jpg?resize=1024%2C576&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 draw a line chart with the temperature from the BME280 sensor on the ESP32 CYD screen. Here’s the main features:<\/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 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, 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 Learn more about the CYD Pinout: ESP32 Cheap Yellow Display (CYD) Pinout (ESP32-2432S028R)<\/a>.<\/p>\n\n\n\n The following code will create the chart with values from the BME280 sensor.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let\u2019s take a look at how to get temperature from the BME280 sensor and add the current reading to the line chart. Alternatively, you can skip to the Demonstration <\/a>section.<\/p>\n\n\n\n In all your sketches, you need to include the lvgl.h<\/span> and the TFT_eSPI.h<\/span> libraries to display on the screen.<\/p>\n\n\n\n You need to include the following libraries to interface with the BME280 sensor.<\/p>\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 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 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 We 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\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 You need to create a buffer to draw on the display as follows:<\/p>\n\n\n\n You should also include this in all LVGL examples.<\/p>\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 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 In the setup()<\/span>, start by initializing the BME280 sensor.<\/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 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\n This 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\n In 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 Every time we get a new data point, we\u2019ll reset the scale range (y-axis).<\/p>\n\n\n\n We 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 The bme_last_readings<\/span> array now contains the data to be displayed on the chart.<\/p>\n\n\n\n We\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 Now 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 In the lv_draw_chart()<\/span> we draw the chart and add all the other widgets to the screen.<\/p>\n\n\n\n We add a text label at the top with the BME280 Temperature Readings<\/span> text.<\/p>\n\n\n\n Next, 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 We 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\n Set the chart size.<\/p>\n\n\n\n Set the number of points you want to display simultaneously on the chart.<\/p>\n\n\n\n Add 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\n After 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\n Afterward, we add all our points in the array to the chart series.<\/p>\n\n\n\n Set 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 Call the lv_chart_refresh()<\/span> function to update all values on the chart.<\/p>\n\n\n\n Create 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 Set the scale smaller divisions.<\/p>\n\n\n\n Set the scale style and range.<\/p>\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 All of that is handled on the chart_draw_label_cb()<\/span> function.<\/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>. Finally, click the upload button.<\/p>\n\n\n After uploading the code, it will display the chart with one point. Wait 10 seconds to get a second point, 10 seconds more for the third point, and so on.<\/p>\n\n\n Wait until you have the chart filled with the 20 data points. A new value is added every 10 seconds\u2014the chart is automatically updated.<\/p>\n\n\n You can press on a specific data point to check its precise value.<\/p>\n\n\n\n The serial monitor displays the latest temperature reading as well as the minimum and maximum values from the array.<\/p>\n\n\n In this tutorial, you learned to display sensor data on a line chart with the Cheap Yellow display screen 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 <\/p>\n","protected":false},"excerpt":{"rendered":" In this guide, you’ll learn how to display temperature from the BME280 sensor on an ESP32 Cheap Yellow Display (CYD) using LVGL (Light Versatile Graphics Library). You\u2019ll learn how to … <\/p>\nProject Overview<\/h2>\n\n\n\n
\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-CYD-Project-Overview-Line-Chart-BME280.png?resize=750%2C452&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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 BME280 Libraries<\/h3>\n\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\nDisplaying Temperature Line Chart on ESP32 CYD using LVGL – Arduino Code<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials - https:\/\/RandomNerdTutorials.com\/esp32-cyd-lvgl-line-chart\/ | https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl-line-chart\/\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\/\/ 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\nTwoWire I2CBME = TwoWire(0);\nAdafruit_BME280 bme;\n\n\/\/ SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES\n#define TEMP_CELSIUS 1\n#define BME_NUM_READINGS 20\nfloat bme_last_readings[BME_NUM_READINGS] = {-20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0, -20.0};\nfloat scale_min_temp;\nfloat scale_max_temp;\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\/\/ Generally, you should use "unsigned long" for variables that hold time\nunsigned long previousMillis = 0; \/\/ will store last time the chart was updated\n\/\/ Interval at which the chart will be updated (milliseconds) 10000 milliseconds = 10 seconds\nconst long interval = 10000;\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\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\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\n LV_LOG_USER("Selected point %d", (int)id);\n\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\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\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\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}\n\n\/\/ Draw chart\nvoid lv_draw_chart(void) {\n \/\/ Clear screen\n lv_obj_clean(lv_scr_act());\n\n \/\/ Create a a text label aligned on top\n lv_obj_t * label = lv_label_create(lv_screen_active());\n lv_label_set_text(label, "BME280 Temperature Readings");\n lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 10);\n\n \/\/ Create a container to display the chart and scale\n lv_obj_t * container_row = lv_obj_create(lv_screen_active());\n lv_obj_set_size(container_row, SCREEN_HEIGHT-20, SCREEN_WIDTH-40);\n lv_obj_align(container_row, LV_ALIGN_BOTTOM_MID, 0, -10);\n \/\/ Set the container in a flexbox row layout aligned center\n lv_obj_set_flex_flow(container_row, LV_FLEX_FLOW_ROW);\n lv_obj_set_flex_align(container_row, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);\n\n \/\/ Create a chart\n lv_obj_t * chart = lv_chart_create(container_row);\n lv_obj_set_size(chart, SCREEN_HEIGHT-90, SCREEN_WIDTH-70);\n lv_chart_set_point_count(chart, BME_NUM_READINGS);\n lv_obj_add_event_cb(chart, chart_draw_label_cb, LV_EVENT_ALL, NULL);\n lv_obj_refresh_ext_draw_size(chart);\n\n \/\/ Add a data series\n lv_chart_series_t * chart_series = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);\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 *100 multiplier to remove the 2 floating-point numbers\n chart_series->y_points[i] = float(bme_last_readings[i]) * 100;\n }\n }\n \/\/ Set the chart range and also scale it with an *100 multiplier to remove the 2 floating-point numbers\n lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, int(scale_min_temp-1)*100, int(scale_max_temp+1)*100);\n lv_chart_refresh(chart); \/\/ Required to update the chart with the new values\n\n \/\/ Create a scale (y axis for the temperature) aligned vertically on the right\n lv_obj_t * scale = lv_scale_create(container_row);\n lv_obj_set_size(scale, 15, SCREEN_WIDTH-90);\n lv_scale_set_mode(scale, LV_SCALE_MODE_VERTICAL_RIGHT);\n lv_scale_set_label_show(scale, true);\n \/\/ Set the scale ticks count \n lv_scale_set_total_tick_count(scale, int(scale_max_temp+2) - int(scale_min_temp-1));\n if((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 }\n else {\n lv_scale_set_major_tick_every(scale, 10); \/\/ set y axis to have 1 tick every 10 degrees\n }\n \/\/ Set the scale style and range\n lv_obj_set_style_length(scale, 5, LV_PART_ITEMS);\n lv_obj_set_style_length(scale, 10, LV_PART_INDICATOR);\n lv_scale_set_range(scale, int(scale_min_temp-1), int(scale_max_temp+1));\n}\n\n\/\/ Get the latest BME readings\nvoid get_bme_readings(void) {\n #if TEMP_CELSIUS\n float bme_temp = bme.readTemperature();\n #else\n float bme_temp = 1.8 * bme.readTemperature() + 32; \n #endif\n \n \/\/ Reset scale range (chart y axis) variables\n scale_min_temp = 120.0;\n scale_max_temp = -20.0;\n\n \/\/ Shift values to the left of the array and inserts the latest reading at the end\n for (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]); \/\/ Shift values to the left of the array\n }\n \/\/ Get the min\/max value in the array to set the scale range (chart y axis)\n if((float(bme_last_readings[i]) < scale_min_temp) && (float(bme_last_readings[i]) != -20.0 )) {\n scale_min_temp = bme_last_readings[i];\n }\n if((float(bme_last_readings[i]) > scale_max_temp) && (float(bme_last_readings[i]) != -20.0 )) {\n scale_max_temp = bme_last_readings[i];\n }\n }\n Serial.print("Min temp: ");\n Serial.println(float(scale_min_temp));\n Serial.print("Max temp: ");\n Serial.println(float(scale_max_temp));\n Serial.print("BME last reading: ");\n Serial.println(float(bme_last_readings[BME_NUM_READINGS-1]));\n lv_draw_chart();\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 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 get_bme_readings();\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 unsigned long currentMillis = millis();\n if (currentMillis - previousMillis >= interval) {\n \/\/ save the last time that chart was updated\n previousMillis = currentMillis;\n get_bme_readings(); \n }\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><\/code><\/pre>\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
#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
#define TEMP_CELSIUS 1 <\/code><\/pre>\n\n\n\n#define TEMP_CELSIUS 0<\/code><\/pre>\n\n\n\nNumber of Readings and Scale Variables<\/h3>\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\nfloat scale_min_temp;\nfloat scale_max_temp;<\/code><\/pre>\n\n\n\nDefining the Display Width and Height<\/h3>\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
#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\nDebugging Function<\/h3>\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
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\nInitializing the BME280 sensor<\/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\nGetting BME280 Readings<\/h3>\n\n\n\n
get_bme_readings();<\/code><\/pre>\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\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\n\/\/ Reset scale range (chart y axis) variables\nscale_min_temp = 120.0;\nscale_max_temp = -20.0;<\/code><\/pre>\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\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\n
to draw the chart.<\/p>\n\n\n\nlv_draw_chart();<\/code><\/pre>\n\n\n\nDrawing the Chart<\/h3>\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\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\nlv_obj_t * chart = lv_chart_create(container_row);<\/code><\/pre>\n\n\n\nlv_obj_set_size(chart, SCREEN_HEIGHT-90, SCREEN_WIDTH-70);<\/code><\/pre>\n\n\n\nlv_chart_set_point_count(chart, BME_NUM_READINGS);<\/code><\/pre>\n\n\n\nlv_obj_add_event_cb(chart, chart_draw_label_cb, LV_EVENT_ALL, NULL);<\/code><\/pre>\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\nfor(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\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\nlv_chart_refresh(chart); \/\/ Required to update the chart with the new values<\/code><\/pre>\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\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\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
lv_obj_add_event_cb(chart, chart_draw_label_cb, LV_EVENT_ALL, NULL);<\/code><\/pre>\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
![\"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-CYD-LVGL-Display-Temperature-Line-Chart-BME280.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-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\nWrapping Up<\/h2>\n\n\n\n
\n
\n
\n