![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/ESP32-CYD-Touchscreen-Calibration.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNote:<\/strong> this procedure was tested with the ESP32 Cheap Yellow Display (ESP32-2432S028R)<\/a> and the 2.8 inch ILI9341 TFT LCD Touchscreen<\/a>, but can be applied to different touchscreen displays with a few modifications in the sketches.<\/p>\n\n\n\n Most of the time, your touchscreen might not be precisely calibrated by default and that\u2019s normal.<\/p>\n\n\n\n Usually, the x and y axis are deviated just a few pixels and that won\u2019t be noticeable when using larger widgets like big buttons for example. However, when more precision is required, like when using a keyboard with smaller keys, the calibration is a critical aspect.<\/p>\n\n\n In this Unit, we\u2019ll show you how to calibrate your touchscreen using the methodology described in the following paper:<\/p>\n\n\n\n The Arduino sketch we\u2019ll use was adapted from the code developed by one of our readers, Robert Fleming<\/em>. You can check his original work<\/a>.<\/p>\n\n\n\n Calibrating the touchscreen involves determining the values of six different coefficients that will then be used in calibration equations to determine the real value of the (x,y) coordinates.<\/p>\n\n\n\n Before proceeding, make sure you follow the next prerequisites.<\/p>\n\n\n\n New to the ESP32 CYD Board?<\/strong> Get Started here with the ESP32 Cheap Yellow Display<\/a>.<\/p>\n\n\n\n 1) <\/strong>We’ll use the LVGL Library<\/strong> for the calibration procedure. Make sure you set up the LVGL<\/strong>, TFT_eSPI <\/strong>and XPT2046_Touchscreen<\/strong> libraries properly as explained in one of the following tutorials:<\/p>\n\n\n\n 2)<\/strong> To calculate and determine the values of the calibration coefficients, you’ll need to install the BasicLinearAlgebra<\/strong> library.<\/p>\n\n\n\n In the Arduino IDE, go to Sketch<\/strong> > Library<\/strong> > Include Libraries<\/strong>. Search for BasicLinearAlgebra<\/strong> and install the library by Tom Stewart. We tested the sketch using the library version 5.1.<\/p>\n\n\n Run the following code on your board.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Open the Serial Monitor.<\/p>\n\n\n\n After running that sketch, you should use a stylus (the one that came with the display) to tap repeatedly and as precisely as possible on the center of each of the six ‘+<\/strong>‘ signs that are displayed one at a time after the initial text display.<\/p>\n\n\n Stop tapping when the ‘+<\/strong>‘ sign disappears, and watch for another one to appear, for a total of six appearances of the ‘+<\/strong>‘ sign.<\/p>\n\n\n\n After the sketch processes the resistive touchscreen samples you create with your taps, it will display six ‘+<\/strong>‘ symbols where it asked you to tap and six ‘\u00d7<\/strong>‘s where it thinks you tapped, after the calibration procedure.<\/p>\n\n\n If the crosses are well aligned, you can proceed. Otherwise, reset the ESP32 and repeat the same procedure (try to be as precise as possible so that the calibration goes successfully).<\/p>\n\n\n\n After this procedure, your coefficient values will be displayed in the Serial Monitor.<\/p>\n\n\n Save those values because you\u2019ll need them later in all your sketches that use the touchscreen and that need to be calibrated.<\/p>\n\n\n\n Now let’s test the touchscreen using the calibration equations. Before running the code, make sure you modify the code to use the coefficients you got in the previous test.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Basically, you need to take a look at the touchscreen_read()<\/span> function.<\/p>\n\n\n\n You need to insert your coefficient values in the following variables, before uploading the code to your board.<\/p>\n\n\n\n Then, the code uses the equations described in the paper to calibrate the touchscreen.<\/p>\n\n\n\n Now, you should get calibrated X and Y values when you touch the screen.<\/p>\n\n\n In summary\u2026<\/strong><\/p>\n\n\n\n Use this touchscreen_read() function in all your projects with your own coefficients values so that you always have a calibrated touchscreen using values that are specific for your board.<\/p>\n\n\n\n If you don\u2019t have to worry about writing your coefficient values in every sketch, you can save the values on the ESP32 permanently using the Preferences library. Then, on each example, load the values from Preferences at the start of the code. The example developed by Robert Fleming uses this approach, you can check it out here<\/a>.<\/p>\n\n\n\n We hope you found this article useful to calibrate your ESP32 Cheap Yellow Display Touchscreen. The same technique can be applied to any other touchscreen with a few modifications in the code.<\/p>\n\n\n\n Special thanks to Robert Fleming<\/u> for providing the original calibration sketch.<\/p>\n\n\n\n More tutorials using the ESP32 Cheap Yellow Display:<\/p>\n\n\n\n To learn more about creating GUIs using the ESP32, check out our eBook:<\/p>\n\n\n\nQuick Overview<\/h2>\n\n\n\n
![\"Calibrating](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/uncalibrated-touchscreen.png?resize=474%2C330&quality=100&strip=all&ssl=1\")
The Calibration Method<\/h3>\n\n\n\n
\n
Prerequisites<\/h2>\n\n\n\n
\n
![\"installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/installing-basiclinearalgebra-library-Arduino-IDE.png?resize=447%2C351&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe Calibration Sketch<\/h2>\n\n\n\n
\/* \n Example created by Robert (Chip) Fleming for touchscreen calibration (https:\/\/github.com\/CF20852\/ESP32-2432S028-Touchscreen-Calibration)\n Rui Santos & Sara Santos - Random Nerd Tutorials - https:\/\/RandomNerdTutorials.com\/touchscreen-calibration\/\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.2 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 the Basic Linear Algebra library for TI appnote Equation 7 calculations\n#include <BasicLinearAlgebra.h>\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\nunsigned long delay_start = 0;\n#define DELAY_1S 1000\n#define DELAY_5S 5000\n\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\nString s;\n\nint ts_points[6][2];\n\n\/* define the screen points where touch samples will be taken *\/\nconst int scr_points[6][2] = { {13, 11}, {20, 220}, {167, 60}, {155, 180}, {300, 13}, {295, 225} };\n\nstruct point {\n int x;\n int y;\n};\n\n\/* pS is a screen point; pT is a resistive touchscreen point *\/\nstruct point aS = {scr_points[0][0], scr_points[0][1] };\nstruct point bS = {scr_points[1][0], scr_points[1][1] };\nstruct point cS = {scr_points[2][0], scr_points[2][1] };\nstruct point dS = {scr_points[3][0], scr_points[3][1] };\nstruct point eS = {scr_points[4][0], scr_points[4][1] };\nstruct point fS = {scr_points[5][0], scr_points[5][1] };\n\nstruct point aT;\nstruct point bT;\nstruct point cT;\nstruct point dT;\nstruct point eT;\nstruct point fT;\n\n\/* coefficients for transforming the X and Y coordinates of the resistive touchscreen\n to display coordinates... the ones with the "pref_" prefix are retrieved from NVS *\/\nfloat alphaX, betaX, deltaX, alphaY, betaY, deltaY;\nfloat pref_alphaX, pref_betaX, pref_deltaX, pref_alphaY, pref_betaY, pref_deltaY;\n\n#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];\n\n\/\/ If logging is enabled, it will inform the user about what is happening in the library\nvoid log_print(lv_log_level_t level, const char * buf) {\n LV_UNUSED(level);\n Serial.println(buf);\n Serial.flush();\n}\n\n\/\/ Declare function to get the Raw Touchscreen data\nvoid touchscreen_read_pts(bool, bool, int, int);\n\n\/* Declare function to display a user instruction upon startup *\/\nvoid lv_display_instruction(void);\n\n\/* Declare function to display crosshair at indexed point *\/\nvoid display_crosshair(int);\n\n\/* Declare function to display crosshairs at given coordinates *\/\nvoid display_crosshairs(int, int);\n\n\/* Declare function to display 'X's at given coordinates *\/\nvoid display_xs(int, int);\n\n\/* Declare function to compute the resistive touchscreen coordinates to display coordinates conversion coefficients *\/\nvoid ts_calibration (\n const point, const point,\n\tconst point, const point,\n\tconst point, const point,\n const point, const point,\n\tconst point, const point,\n\tconst point, const point);\n\nvoid gather_cal_data(void) {\n \/\/Function to draw the crosshairs and collect data\n bool reset, finished;\n int x_avg, y_avg;\n\n for (int i = 0; i < 6; i++) {\n lv_obj_clean(lv_scr_act());\n \/\/lv_draw_cross(i);\n display_crosshair(i);\n\n reset = true;\n x_avg = 0;\n y_avg = 0;\n \n touchscreen_read_pts(reset, &finished, &x_avg, &y_avg);\n\n reset = false;\n while (!finished) {\n touchscreen_read_pts(reset, &finished, &x_avg, &y_avg);\n\n \/* found out the hard way that if I don't do this, the screen doesn't update *\/\n lv_task_handler();\n lv_tick_inc(10);\n delay(10);\n }\n\n lv_obj_clean(lv_scr_act());\n lv_task_handler();\n lv_tick_inc(10);\n delay(10);\n\n ts_points[i][0] = x_avg;\n ts_points[i][1] = y_avg;\n\n String s = String("x_avg = " + String(x_avg) + " y_avg = " + String(y_avg) );\n Serial.println(s);\n delay(1500);\n }\n}\n\nvoid compute_transformation_coefficients(void) {\n \/* finished collecting data, now compute correction coefficients *\/\n \/* first initialize the function call parameters *\/\n aT = { ts_points[0][0], ts_points[0][1] };\n bT = { ts_points[1][0], ts_points[1][1] };\n cT = { ts_points[2][0], ts_points[2][1] };\n dT = { ts_points[3][0], ts_points[3][1] };\n eT = { ts_points[4][0], ts_points[4][1] };\n fT = { ts_points[5][0], ts_points[5][1] };\n\n \/* compute the resisitve touchscreen to display coordinates conversion coefficients *\/\n ts_calibration(aS, aT, bS, bT, cS, cT, dS, dT, eS, eT, fS, fT);\n}\n\nvoid check_calibration_results(void) {\n int x_touch, y_touch, x_scr, y_scr, error;\n\n \/* if we did our job well, the screen points computed below should match\n aS, bS, and cS defined near the top *\/\n for (int i = 0; i < 6; i++) {\n \/* define some touch points and translate them to screen points *\/\n x_touch = ts_points[i][0];\n y_touch = ts_points[i][1];\n\n \/* here's the magic equation that uses the magic coefficients *\/\n \/* use it to convert resistive touchscreen points to display points *\/\n x_scr = alphaX * x_touch + betaX * y_touch + deltaX;\n y_scr = alphaY * x_touch + betaY * y_touch + deltaY;\n\n display_crosshairs(scr_points[i][0], scr_points[i][1]);\n display_xs(x_scr, y_scr);\n\n s = String("x_touch = " + String(x_touch) + " y_touch = " + String(y_touch) );\n Serial.println(s);\n\n s = String("x_scr = " + String(x_scr) + " y_scr = " + String(y_scr) );\n Serial.println(s);\n\n error = (int) sqrt( sq(x_scr - scr_points[i][0]) + sq(y_scr - scr_points[i][1]) );\n s = String("error = " + String(error) );\n Serial.println(s);\n Serial.println();\n }\n\n Serial.println("******************************************************************");\n Serial.println("******************************************************************");\n Serial.println("USE THE FOLLOWING COEFFICIENT VALUES TO CALIBRATE YOUR TOUCHSCREEN");\n s = String("Computed X: alpha_x = " + String(alphaX, 3) + ", beta_x = " + String(betaX, 3) + ", delta_x = " + String(deltaX, 3) );\n Serial.println(s);\n s = String("Computed Y: alpha_y = " + String(-alphaY, 3) + ", beta_y = " + String(-betaY, 3) + ", delta_y = " + String(SCREEN_WIDTH-deltaY, 3) );\n Serial.println(s);\n Serial.println("******************************************************************");\n Serial.println("******************************************************************");\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 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 lv_display_instruction();\n delay_start = millis();\n while ((millis() - delay_start) < DELAY_5S) {\n lv_task_handler();\n lv_tick_inc(10);\n delay(10); \n } \n\n \/* display crosshairs and have the user tap on them until enough samples are gathered *\/;\n gather_cal_data();\n\n \/* crunch the numbers to compute the touchscreen to display coordinate transformation equation coefficients *\/\n compute_transformation_coefficients();\n\n \/* display stored correction data and display generated vs measured screen points *\/\n check_calibration_results();\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 \n\/* Function to read a number of points from the resistive touchscreen as the user taps\n a stylus on displayed crosshairs. Once the samples have been collected, they are\n filtered to remove outliers and then averaged and the average x & y are returned to the caller. *\/\nvoid touchscreen_read_pts(bool reset, bool *finished, int *x_avg, int *y_avg) {\n \/* nr_samples = samples taken; good_samples = samples used, samples = array of 100 samples *\/\n static int i, nr_samples, good_samples;\n static uint32_t samples[100][2];\n\n \/* coordinates to shift and rotate touch screen coordinates to display coordinates *\/\n static float mean_x, mean_y, filt_mean_x, filt_mean_y, stdev_x, stdev_y;\n\n \/* caller resets the sample run at each new displayed crosshair *\/\n if (reset) {\n nr_samples = 0;\n *x_avg = 0;\n *y_avg = 0;\n *finished = false;\n }\n \/\/ Checks if Touchscreen was touched, and prints X, Y\n if(touchscreen.tirqTouched() && touchscreen.touched()) {\n \/\/ Get Touchscreen points\n TS_Point p = touchscreen.getPoint();\n samples[nr_samples][0] = p.x;\n samples[nr_samples][1] = p.y;\n \n s = String("x, y = " + String(samples[nr_samples][0]) + ", " + String(samples[nr_samples][1]) );\n Serial.println(s);\n\n nr_samples++;\n\n \/* first compute the x & y averages of all the samples *\/\n if (nr_samples >= 100) {\n mean_x = 0;\n mean_y = 0;\n for (i = 0; i < 100; i++) {\n mean_x += (float)samples[i][0];\n mean_y += (float)samples[i][1];\n }\n mean_x = mean_x \/ (float)nr_samples;\n mean_y = mean_y \/ (float)nr_samples;\n s = String("Unfiltered values: mean_x = " + String(mean_x) + ", mean_y = " + String(mean_y));\n Serial.println(s);\n\n \/* now compute the x & y standard deviations of all the samples *\/\n stdev_x = 0;\n stdev_y = 0;\n for (i = 0; i < 100; i++) {\n stdev_x += sq((float)samples[i][0] - mean_x);\n stdev_y += sq((float)samples[i][1] - mean_y);\n }\n stdev_x = sqrt(stdev_x \/ (float)nr_samples);\n stdev_y = sqrt(stdev_y \/ (float)nr_samples);\n\n s = String("stdev_x = " + String(stdev_x) + ", stdev_y = " + String(stdev_y));\n Serial.println(s); \n\n \/* now average the samples that are less than one standard deviation from the mean *\/\n \/* this filtering is called "outlier rejection," and is included because outliers were observed in testing *\/\n good_samples = 0;\n filt_mean_x = 0;\n filt_mean_y = 0;\n for (i = 0; i < 100; i++) {\n if ((abs((float)samples[i][0] - mean_x) < stdev_x) && (abs((float)samples[i][1] - mean_y) < stdev_y)) {\n filt_mean_x += (float)samples[i][0];\n filt_mean_y += (float)samples[i][1];\n good_samples++;\n } \n }\n\n s = String("Good samples = " + String(good_samples));\n Serial.println(s); \n\n filt_mean_x = filt_mean_x \/ (float)good_samples;\n filt_mean_y = filt_mean_y \/ (float)good_samples;\n s = String("Filtered values: filt_mean_x = " + String(filt_mean_x) + ", filt_mean_y = " + String(filt_mean_y));\n Serial.println(s);\n Serial.println();\n\n *x_avg = (int)mean_x;\n *y_avg = (int)mean_y;\n\n *finished = true;\n }\n }\n else {\n \/\/ nada\n }\n}\n\n\/* Function to display a user instruction on startup *\/\nvoid lv_display_instruction(void) {\n \/\/ Create a text label aligned center: https:\/\/docs.lvgl.io\/master\/widgets\/label.html\n lv_obj_t * text_label = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label, "Tap each crosshair until it disappears.");\n lv_obj_align(text_label, LV_ALIGN_CENTER, 0, 0);\n \/\/ Set font type and font size. More information: https:\/\/docs.lvgl.io\/master\/overview\/font.html\n static lv_style_t style_text_label;\n lv_style_init(&style_text_label);\n lv_style_set_text_font(&style_text_label, &lv_font_montserrat_14);\n lv_obj_add_style(text_label, &style_text_label, 0);\n}\n\n\/* function to display crosshair at given index of coordinates array *\/\nvoid display_crosshair(int cross_nr) {\n\n static lv_point_precise_t h_line_points[] = { {0, 0}, {10, 0} };\n static lv_point_precise_t v_line_points[] = { {0, 0}, {0, 10} };\n\n static lv_style_t style_line;\n lv_style_init(&style_line);\n lv_style_set_line_width(&style_line, 2);\n lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_RED));\n lv_style_set_line_rounded(&style_line, true);\n\n \/\/ Create crosshair lines\n lv_obj_t* crosshair_h = lv_line_create(lv_screen_active());\n lv_obj_t* crosshair_v = lv_line_create(lv_screen_active());\n\n lv_line_set_points(crosshair_h, h_line_points, 2); \/\/ Set the coordinates for the crosshair_h line\n lv_obj_add_style(crosshair_h, &style_line, 0);\n\n lv_line_set_points(crosshair_v, v_line_points, 2); \/\/ Set the coordinates for the crosshair_h line\n lv_obj_add_style(crosshair_v, &style_line, 0);\n\n lv_obj_set_pos(crosshair_h, scr_points[cross_nr][0] - 5, scr_points[cross_nr][1]);\n lv_obj_set_pos(crosshair_v, scr_points[cross_nr][0], scr_points[cross_nr][1] - 5);\n}\n\n\/* function to display crosshairs at given coordinates *\/\nvoid display_crosshairs(int x, int y) {\n\n static lv_point_precise_t h_line_points[] = { {0, 0}, {10, 0} };\n static lv_point_precise_t v_line_points[] = { {0, 0}, {0, 10} };\n\n static lv_style_t style_line;\n lv_style_init(&style_line);\n lv_style_set_line_width(&style_line, 2);\n lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_BLUE));\n lv_style_set_line_rounded(&style_line, true);\n\n \/\/ Create crosshair lines\n lv_obj_t* crosshair_h = lv_line_create(lv_screen_active());\n lv_obj_t* crosshair_v = lv_line_create(lv_screen_active());\n\n lv_line_set_points(crosshair_h, h_line_points, 2); \/\/ Set the coordinates for the crosshair_h line\n lv_obj_add_style(crosshair_h, &style_line, 0);\n\n lv_line_set_points(crosshair_v, v_line_points, 2); \/\/ Set the coordinates for the crosshair_h line\n lv_obj_add_style(crosshair_v, &style_line, 0);\n\n lv_obj_set_pos(crosshair_h, x - 5, y);\n lv_obj_set_pos(crosshair_v, x, y - 5);\n}\n\n\/* function to display 'X's at given coordinates *\/\nvoid display_xs(int x, int y) {\n\n static lv_point_precise_t u_line_points[] = { {0, 0}, {10, 10} }; \/\/upsloping\n static lv_point_precise_t d_line_points[] = { {0, 10}, {10, 0} }; \/\/downsloping\n\n static lv_style_t style_line;\n lv_style_init(&style_line);\n lv_style_set_line_width(&style_line, 2);\n lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_RED));\n lv_style_set_line_rounded(&style_line, true);\n\n \/\/ Create crosshair lines\n lv_obj_t* x_u = lv_line_create(lv_screen_active());\n lv_obj_t* x_d = lv_line_create(lv_screen_active());\n\n lv_line_set_points(x_u, u_line_points, 2); \/\/ Set the coordinates for the upsloping line\n lv_obj_add_style(x_u, &style_line, 0);\n\n lv_line_set_points(x_d, d_line_points, 2); \/\/ Set the coordinates for the downsloping line\n lv_obj_add_style(x_d, &style_line, 0);\n\n lv_obj_set_pos(x_u, x - 5, y - 5);\n lv_obj_set_pos(x_d, x - 5, y - 5);\n}\n\n\/* function to compute the transformation equation coefficients from resistive touchscreen\n coordinates to display coordinates...\n This was based on the Texas Instruments appnote at:\n https:\/\/www.ti.com\/lit\/an\/slyt277\/slyt277.pdf\n It implements Equation 7 of that appnote, which computes a least-squares set of coefficients. *\/\nvoid ts_calibration (\n\tconst point aS, const point aT,\n\tconst point bS, const point bT,\n\tconst point cS, const point cT,\n const point dS, const point dT,\n\tconst point eS, const point eT,\n\tconst point fS, const point fT) {\n\n\tbool defined;\n\tuint16_t screenWidth, screenHeight;\n\n BLA::Matrix<6, 3> A;\n BLA::Matrix<3, 6> transA;\n BLA::Matrix<6> X;\n BLA::Matrix<6> Y;\n BLA::Matrix<3, 3> B;\n BLA::Matrix<3, 6> C;\n BLA::Matrix<3> X_coeff;\n BLA::Matrix<3> Y_coeff;\n\n s = String("aS = " + String(aS.x) + ", " + String(aS.y));\n Serial.println(s);\n s = String("bS = " + String(bS.x) + ", " + String(bS.y));\n Serial.println(s);\n s = String("cS = " + String(cS.x) + ", " + String(cS.y));\n Serial.println(s);\n s = String("dS = " + String(dS.x) + ", " + String(dS.y));\n Serial.println(s);\n s = String("eS = " + String(eS.x) + ", " + String(eS.y));\n Serial.println(s);\n s = String("fS = " + String(fS.x) + ", " + String(fS.y));\n Serial.println(s);\n\n s = String("aT = " + String(aT.x) + ", " + String(aT.y));\n Serial.println(s);\n s = String("bT = " + String(bT.x) + ", " + String(bT.y));\n Serial.println(s);\n s = String("cT = " + String(cT.x) + ", " + String(cT.y));\n Serial.println(s);\n s = String("eT = " + String(dT.x) + ", " + String(dT.y));\n Serial.println(s);\n s = String("eT = " + String(eT.x) + ", " + String(eT.y));\n Serial.println(s);\n s = String("fT = " + String(fT.x) + ", " + String(fT.y));\n Serial.println(s);\n Serial.println();\n\n struct f_point {\n float x;\n float y;\n };\n\n struct f_point faS, fbS, fcS, fdS, feS, ffS, faT, fbT, fcT, fdT, feT, ffT;\n\n faS.x = (float)aS.x; fbS.x = (float)bS.x; fcS.x = (float)cS.x, fdS.x = (float)dS.x; feS.x = (float)eS.x; ffS.x = (float)fS.x;\n faS.y = (float)aS.y; fbS.y = (float)bS.y; fcS.y = (float)cS.y; fdS.y = (float)dS.y; feS.y = (float)eS.y; ffS.y = (float)fS.y;\n\n faT.x = (float)aT.x; fbT.x = (float)bT.x; fcT.x = (float)cT.x; fdT.x = (float)dT.x; feT.x = (float)eT.x; ffT.x = (float)fT.x;\n faT.y = (float)aT.y; fbT.y = (float)bT.y; fcT.y = (float)cT.y; fdT.y = (float)dT.y; feT.y = (float)eT.y; ffT.y = (float)fT.y;\n\n A = { faT.x, faT.y, 1,\n fbT.x, fbT.y, 1,\n fcT.x, fcT.y, 1,\n fdT.x, fdT.y, 1,\n feT.x, feT.y, 1, \n ffT.x, ffT.y, 1 };\n\n X = { faS.x,\n fbS.x,\n fcS.x,\n fdS.x,\n feS.x,\n ffS.x };\n\n Y = { faS.y,\n fbS.y,\n fcS.y,\n fdS.y,\n feS.y,\n ffS.y };\n\n \/* Now compute [AtA]^-1 * AtA * X and [AtA]^-1 * AtA * Y *\/\n Serial.print ("A = ");\n Serial.println(A);\n\n transA = ~A;\n Serial.print ("transA = ");\n Serial.println(transA);\n\n B = transA * A;\n Serial.print ("Before inversion, B = ");\n Serial.println(B);\n\n if (!Invert(B) ) {\n Serial.println("Singular matrix in computation of inverse of B = transA*A!");\n }\n Serial.print ("After inversion, B = ");\n Serial.println(B);\n\n C = B * transA;\n Serial.print ("C = ");\n Serial.println(C);\n\n X_coeff = C * X;\n Y_coeff = C * Y;\n\n \/* transfer the X and Y coefficients to the Greek-letter variables\n Note that BLA requires round brackets while MatrixMath requires square ones *\/\n alphaX = X_coeff(0); betaX = X_coeff(1); deltaX = X_coeff(2);\n alphaY = Y_coeff(0); betaY = Y_coeff(1); deltaY = Y_coeff(2);\n\n Serial.println();\n}\n<\/code><\/pre>\n\tGetting Your Calibration Coefficients<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/ESP32-CYD-Cheap-Yellow-Display-Touchscreen-Calibration.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\/07\/touchscreen-calibration-example.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\/07\/ESP32-CYD-touchscreen-calibration-values-serial-monitor.png?resize=666%2C251&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTesting the Touchscreen (Calibrated)<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details: https:\/\/RandomNerdTutorials.com\/touchscreen-calibration\/\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\n\/* Install the "lvgl" library version 9.2 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\/\/ Touchscreen pins\n#define XPT2046_IRQ 36 \/\/ T_IRQ\n#define XPT2046_MOSI 32 \/\/ T_DIN\n#define XPT2046_MISO 39 \/\/ T_OUT\n#define XPT2046_CLK 25 \/\/ T_CLK\n#define XPT2046_CS 33 \/\/ T_CS\n\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\n\/\/ Touchscreen coordinates: (x, y) and pressure (z)\nint x, y, z;\n\n#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];\n\n\/\/ If logging is enabled, it will inform the user about what is happening in the library\nvoid log_print(lv_log_level_t level, const char * buf) {\n LV_UNUSED(level);\n Serial.println(buf);\n Serial.flush();\n}\n\nstatic lv_obj_t * text_label_touch;\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 \/\/ Print the coordinates on the screen\n String touch_data = "X = " + String(x) + "\\nY = " + String(y) + "\\nZ = " + String(z);\n lv_label_set_text(text_label_touch, touch_data.c_str());\n }\n else {\n data->state = LV_INDEV_STATE_RELEASED;\n }\n}\n\n\nvoid lv_create_main_gui(void) {\n \/\/ Create a text label aligned center: https:\/\/docs.lvgl.io\/master\/widgets\/label.html\n text_label_touch = lv_label_create(lv_screen_active());\n lv_label_set_text(text_label_touch, "Touch screen to test");\n lv_obj_align(text_label_touch, LV_ALIGN_CENTER, 0, 0);\n\n \/\/ Set font type and size. More information: https:\/\/docs.lvgl.io\/master\/overview\/font.html\n static lv_style_t style_text_label;\n lv_style_init(&style_text_label);\n lv_style_set_text_font(&style_text_label, &lv_font_montserrat_18);\n lv_obj_add_style(text_label_touch, &style_text_label, 0); \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 LVGL\n lv_init();\n \/\/ Register print function for debugging\n lv_log_register_print_cb(log_print);\n\n \/\/ Start the SPI for the touchscreen and init the touchscreen\n touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\n touchscreen.begin(touchscreenSPI);\n \/\/ Set the Touchscreen rotation in landscape mode\n \/\/ Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 0: touchscreen.setRotation(0);\n touchscreen.setRotation(2);\n\n \/\/ Create a display object\n lv_display_t * disp;\n \/\/ Initialize the TFT display using the TFT_eSPI library\n disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));\n lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);\n \n \/\/ Initialize an LVGL input device object (Touchscreen)\n lv_indev_t * indev = lv_indev_create();\n lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);\n \/\/ Set the callback function to read Touchscreen input\n lv_indev_set_read_cb(indev, touchscreen_read);\n\n \/\/ Function to draw the GUI with switches\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\tThe Touchscreen Read Function<\/h3>\n\n\n\n
\/\/ Get the Touchscreen data\nvoid touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {\n\n \/\/ Checks if Touchscreen was touched, and prints X, Y and Pressure (Z)\n if(touchscreen.tirqTouched() && touchscreen.touched()) {\n\n \/\/ Get Touchscreen points\n TS_Point p = touchscreen.getPoint();\n\n \/\/ Advanced Touchscreen calibration, LEARN MORE\n float alpha_x, beta_x, alpha_y, beta_y, delta_x, delta_y;\n\n \/\/ REPLACE WITH YOUR OWN CALIBRATION VALUES\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 \/\/Print the coordinates on the screen (delete when using with other examples)\n String touch_data = \"X = \" + String(x) + \"nY = \" + String(y) + \"nZ = \" + String(z);\n lv_label_set_text(text_label_touch, touch_data.c_str());\n\n }\n else {\n data->state = LV_INDEV_STATE_RELEASED;\n }\n}<\/code><\/pre>\n\n\n\nInsert Your Coefficient Values<\/h4>\n\n\n\n
\/\/ REPLACE WITH YOUR OWN CALIBRATION VALUES \u00bb \nalpha_x = -0.000;\nbeta_x = 0.090;\ndelta_x = -33.771;\nalpha_y = 0.066;\nbeta_y = 0.000;\ndelta_y = -14.632;<\/code><\/pre>\n\n\n\nx = alpha_y * p.x + beta_y * p.y + delta_y;\n\/\/ clamp x between 0 and SCREEN_WIDTH - 1\nx = max(0, x);\nx = min(SCREEN_WIDTH - 1, x);\n\ny = alpha_x * p.x + beta_x * p.y + delta_x;\n\/\/ clamp y between 0 and SCREEN_HEIGHT - 1\ny = max(0, y);\ny = min(SCREEN_HEIGHT - 1, y);<\/code><\/pre>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/ESP32-Cheap-Yellow-Display-Testing-Calibrated-Touchscreen.jpg?resize=900%2C508&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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 \/\/ Advanced Touchscreen calibration \n float alpha_x, beta_x, alpha_y, beta_y, delta_x, delta_y;\n \/\/ REPLACE WITH YOUR OWN CALIBRATION VALUES \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 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 z = p.z;\n\n data->state = LV_INDEV_STATE_PRESSED;\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}<\/code><\/pre>\n\n\n\nTaking it Further – Using the Preferences<\/em> Library<\/h2>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
\n