![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-Cheap-Yellow-Display-Temperature-DS18B20.png?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 display the temperature from the DS18B20 sensor<\/a> on the ESP32 CYD screen. The temperature will be displayed on a text label and represented on a curved gauge (arc).<\/p>\n\n\n\n The temperature text will be displayed in different colors depending on the following ranges:<\/p>\n\n\n\n If you don’t have a DS18B20 sensor, you can use a BME280<\/a>, a DHT22, <\/a>or any other sensor<\/a> (that requires a maximum of two GPIOs to connect)… Or you can use random values to test the project.<\/p>\n\n\n\n With this tutorial, you’ll learn how to use LVGL to:<\/p>\n\n\n\n Before proceeding, make sure you follow the next prerequisites. You must follow all steps, otherwise, your project will not work.<\/strong><\/p>\n\n\n\n For this project, you need the following parts<\/p>\n\n\n\n We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed. Follow the next tutorial:<\/p>\n\n\n\n The ESP32-2432S028R<\/a> development board has become known in the maker community as the \u201cCheap Yellow Display<\/em>\u201d or CYD for short. This development board, whose main chip is an ESP32-WROOM-32 module, comes with a 2.8-inch TFT touchscreen LCD, a microSD card interface, an RGB LED, and all the required circuitry to program and apply power to the board.<\/p>\n\n\n If this is your first time using the ESP32 Cheap Yellow Display, make sure to follow our getting started guide:<\/p>\n\n\n\n LVGL<\/a> (Light and Versatile Graphics Library) is a free and open-source graphics library that provides a wide range of easy-to-use graphical elements for your microcontroller projects that require a graphical user interface (GUI).<\/p>\n\n\n Follow the next tutorial to install and configure the required libraries to use LVGL for the ESP32 Cheap Yellow Display using Arduino IDE.<\/p>\n\n\n\n In this tutorial, we’ll use the DS18B20 sensor to get temperature readings. Follow the next tutorial to get familiar with the sensor and install the required libraries.<\/p>\n\n\n\n You’ll need to install the \u201cOneWire<\/strong>\u201d library by Paul Stoffregen and “DallasTemperature<\/strong>” library by Miles Burton.<\/p>\n\n\n\n We\u2019ll use OneWire communication protocol to get data from the DS18B20 sensor. This communication protocol only requires one GPIO to connect with a microcontroller.<\/p>\n\n\n\n On the Cheap Yellow Display, there is an extended IO socket that allows you to connect external peripherals. We\u2019ll connect the sensor to the CN1 connector, and we’ll use GPIO 27.<\/p>\n\n\n Your board should have come with a little JST connector to access those GPIOs. You can check the diagram below to see how to connect the sensor to the board.<\/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 get the temperature from the DS18B20 sensor and display it on a text label and curved gauge on the screen. The text color will vary depending on the temperature value.<\/p>\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-Cheap-Yellow-Display-LVGL-DS18B20-Demonstration-Temperature-Min-f.png?resize=750%2C460&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-Cheap-Yellow-Display-LVGL-DS18B20-Demonstration-Temperature-Max-f.png?resize=750%2C460&quality=100&strip=all&ssl=1\")
<\/figure>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-Cheap-Yellow-Display-LVGL-DS18B20-Demonstration-Temperature-Medium-f.png?resize=750%2C460&quality=100&strip=all&ssl=1\")
<\/figure>\n<\/figure>\n\n\n\n\n
\n
Prerequisites<\/h2>\n\n\n\n
1) Parts Required<\/h3>\n\n\n\n
\n
2) Install ESP32 Boards in Arduino IDE<\/h3>\n\n\n
![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/arduino-ide-2.jpg?resize=204%2C204&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
3) Get familiar with the ESP32 Cheap Yellow Display<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-front.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
4) Install TFT and LVGL Libraries<\/h3>\n\n\n\n
![\"LVGL](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/08\/LVGL-new-logo.png?resize=622%2C194&quality=100&strip=all&ssl=1\"){kind=logo}
<\/figure><\/div>\n\n\n\n
5) Install DS18B20 Libraries<\/h3>\n\n\n\n
\n
Wiring the DS18B20 Temperature Sensor to the ESP32 CYD Board<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CYD-Extended-IO-pins.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Wiring](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/DS18B20_ESP32_CYD_circuit.png?resize=748%2C651&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-TFT-Cheap-Yellow-Display-LVGL-DS18B20-Circuit-Wiring-1.jpg?resize=750%2C423&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDisplaying Temperature on ESP32 CYD using LVGL – Arduino Code<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials\n CYD Project Details: https:\/\/RandomNerdTutorials.com\/esp32-cyd-lvgl-temperature-ds18b20\/\n TFT Project Details: https:\/\/RandomNerdTutorials.com\/esp32-lvgl-ds18b20-tempreature-tft-display\/\n \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. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n\/\/ *** YOU MUST USE THE lv_conf.h AND User_Setup.h FILES PROVIDED IN THE NEXT LINKS IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/ \n\/\/ Install the "lvgl" library version 9.2 by kisvegabor to interface with the TFT Display - https:\/\/lvgl.io\/ - IMPORTANT: lv_conf.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials\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 - IMPORTANT: User_Setup.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials\n#include <TFT_eSPI.h>\n\n\/\/ Install OneWire and DallasTemperature libraries\n#include <OneWire.h>\n#include <DallasTemperature.h>\n\n\/\/ GPIO where the DS18B20 is connected to\nconst int oneWireBus = 27; \n\n\/\/ Setup a oneWire instance to communicate with any OneWire devices\nOneWire oneWire(oneWireBus);\n\n\/\/ Pass our oneWire reference to Dallas Temperature sensor \nDallasTemperature sensors(&oneWire);\n\n\/\/ SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES\n#define TEMP_CELSIUS 1 \n\n#if TEMP_CELSIUS\n #define TEMP_ARC_MIN -20\n #define TEMP_ARC_MAX 40\n#else\n #define TEMP_ARC_MIN -4\n #define TEMP_ARC_MAX 104\n#endif\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\n#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];\n\n\/\/ If logging is enabled, it will inform the user about what is happening in the library\nvoid log_print(lv_log_level_t level, const char * buf) {\n LV_UNUSED(level);\n Serial.println(buf);\n Serial.flush();\n}\n\nlv_obj_t * arc;\n\n\/\/ Set the temperature value in the arc and text label\nstatic void set_temp(void * text_label_temp_value, int32_t v) {\n sensors.requestTemperatures();\n \/\/ Get the latest temperature reading in Celsius or Fahrenheit\n #if TEMP_CELSIUS\n float ds18b20_temp = sensors.getTempCByIndex(0);\n if(ds18b20_temp <= 10.0) {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_BLUE), 0);\n }\n else if (ds18b20_temp > 10.0 && ds18b20_temp <= 29.0) {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_GREEN), 0);\n }\n else {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_RED), 0);\n }\n const char degree_symbol[] = "\\u00B0C";\n #else\n float ds18b20_temp = sensors.getTempFByIndex(0);\n if(ds18b20_temp <= 50.0) {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_BLUE), 0);\n }\n else if (ds18b20_temp > 50.0 && ds18b20_temp <= 84.2) {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_GREEN), 0);\n }\n else {\n lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_RED), 0);\n }\n const char degree_symbol[] = "\\u00B0F";\n #endif\n\n lv_arc_set_value(arc, map(int(ds18b20_temp), TEMP_ARC_MIN, TEMP_ARC_MAX, 0, 100));\n\n String ds18b20_temp_text = String(ds18b20_temp) + degree_symbol;\n lv_label_set_text((lv_obj_t*) text_label_temp_value, ds18b20_temp_text.c_str());\n Serial.print("Temperature: ");\n Serial.println(ds18b20_temp_text);\n}\n\nvoid lv_create_main_gui(void) {\n \/\/ Create an Arc\n arc = lv_arc_create(lv_screen_active());\n lv_obj_set_size(arc, 210, 210);\n lv_arc_set_rotation(arc, 135);\n lv_arc_set_bg_angles(arc, 0, 270);\n lv_obj_set_style_arc_color(arc, lv_color_hex(0x666666), LV_PART_INDICATOR);\n lv_obj_set_style_bg_color(arc, lv_color_hex(0x333333), LV_PART_KNOB);\n lv_obj_align(arc, LV_ALIGN_CENTER, 0, 10);\n\n \/\/ Create a text label in font size 32 to display the latest temperature reading\n lv_obj_t * text_label_temp_value = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_temp_value, "--.--");\n lv_obj_align(text_label_temp_value, LV_ALIGN_CENTER, 0, 10);\n static lv_style_t style_temp;\n lv_style_init(&style_temp);\n lv_style_set_text_font(&style_temp, &lv_font_montserrat_32);\n lv_obj_add_style(text_label_temp_value, &style_temp, 0);\n\n \/\/ Create an animation to update with the latest temperature value every 10 seconds\n lv_anim_t a_temp;\n lv_anim_init(&a_temp);\n lv_anim_set_exec_cb(&a_temp, set_temp);\n lv_anim_set_duration(&a_temp, 1000000);\n lv_anim_set_playback_duration(&a_temp, 1000000);\n lv_anim_set_var(&a_temp, text_label_temp_value);\n lv_anim_set_values(&a_temp, 0, 100);\n lv_anim_set_repeat_count(&a_temp, LV_ANIM_REPEAT_INFINITE);\n lv_anim_start(&a_temp);\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 \/\/ Start the DS18B20 sensor\n sensors.begin();\n \n \/\/ Start LVGL\n lv_init();\n \/\/ Register print function for debugging\n lv_log_register_print_cb(log_print);\n\n \/\/ Create a display object\n lv_display_t * disp;\n \/\/ Initialize the TFT display using the TFT_eSPI library\n disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));\n lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);\n \n \/\/ Function to draw the GUI\n lv_create_main_gui();\n}\n\nvoid loop() {\n lv_task_handler(); \/\/ let the GUI do its work\n lv_tick_inc(5); \/\/ tell LVGL how much time has passed\n delay(5); \/\/ let this time pass\n}\n<\/code><\/pre>\n\t
![\"LVGL](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/LVGL_object_alignment.png?resize=760%2C419&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n