基于VScode+PlatformIO+Arduino框架开发0. 硬件0.1 硬件实物ESP32 dev 电阻触摸屏(驱动芯片是ILI9341) esp32 触摸屏0.2 接线图 需要了解，TFT屏幕和触摸是两部分 在本例中，屏幕显示和触摸功能都是采用SPI进行通讯；因此首先短接TFT触摸屏的SDI和CLK，也就是数据从线和时钟线。 对应引脚为：T_DIN与SDI短接；T_CLK与SCK短接； 至于什么不短接SDO与T_DO呢？ 如下图，因为TFT_eSPI的文件中写明了，如果存在其他SPI设备共享MISO接口，TFT屏幕的SDO是不需要连接的。而我们的触摸传感器，是一种SPI设备 image-20230403143041946我直接在屏幕模块上进行了飞线处理，短接了T_DIN与SDI，以及T_CLK与SCK 飞线处理1. 软件1.1 TFT_eSPI库安装TFT_eSPI库选择对应屏幕的驱动首先注释掉User_Setup_Select.h中默认的驱动文件 image-20230403144525071在User_Setup_Select.h文件中找到相对应的驱动有文件，并取消注释 image-20230403144844375进入到选定的驱动头文件，本例中是Setup42_ili9341_ESP32.h。取消TOUCH相关的注释，如下图。 image-20230403145213052在该文件中，定义了每个引脚的引脚号，因此可以按照改文件进行接线。当然，若有必要，可以在此自行修改引脚号。配置好以后，可以先运行TFT_eSPI的示例代码，看TFT屏幕是否运行成功。1.2 LVGL库安装LVGL库把examples和demos文件夹复制到lvgl/src目录下，目录结构如下： image-20230403145749071在lvgl根目录下，复制一份lv_conf_template.h到lvgl根目录，并重命名为lv_conf.h image-20230403145950719打开lv_conf.h文件，修改第15行的# if 0 为 # if 1，以开启后续的代码段。 image-20230403150111013lv_conf.h文件，第27行可以修改颜色深度，默认16也可以。lv_conf.h文件，修改第88行，#define LV_TICK_CUSTOM 1设置为1，开启后续代码段。 image-20230403150258555至此，相关设置应该配置完毕，你可以开始写自己的代码了。如果要跑LVGL官方的demo，还需继续进行设置。1.3 LVGL demos配置LVGL官方提供了多个demo，如图： image-20230403150624882由于前文将demos文件夹进行了移动，放在了src目录下，因为头文件需要修改为：#include  image-20230403151150939在运行相关demo时，不仅需要解除相关注释，同时需要在lv_conf.h中进行配置；以lv_demo_widgets();为例，取消注释后，在lv_conf.h第727行，修改0为1，以开启宏定义； image-20230403150832028若想运行lv_demo_benchmark()，则需要将上述修改还原，并将736行的0修改为1 image-20230403151000524注意：每个demo仅能开启一个，其他无关demo需要注释掉，并在lv_conf.h中设置宏定义为0文章最后附demos的main.cpp运行实际图如下： 65f75dbba0a4b26e916fd994064fa5d1.4 触摸屏幕校准 有时候会出现屏幕触摸位置不准确的情况，此时需要进行屏幕校准。运行TFT_eSPI中的Touch_calibrate示例，按照提示依次点击屏幕四个角，最后会通过串口打印出校准数据，复制到main.cpp中即可；  image-202304031518056051.5 demo示例的代码#include
#include
/*If you want to use the LVGL examples,
make sure to install the lv_examples Arduino library
and uncomment the following line.
#include
*/
#include
/*Change to your screen resolution*/
static const uint16_t screenWidth = 320;
static const uint16_t screenHeight = 240;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];
// TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */
TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
#if LV_USE_LOG != 0
/* Serial debugging */
void my_print(const char * buf)
{
Serial.printf(buf);
Serial.flush();
}
#endif
/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
uint32_t w = ( area->x2 - area->x1 + 1 );
uint32_t h = ( area->y2 - area->y1 + 1 );
tft.startWrite();
tft.setAddrWindow( area->x1, area->y1, w, h );
tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
tft.endWrite();
lv_disp_flush_ready( disp );
}
/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
uint16_t touchX, touchY;
bool touched = tft.getTouch( &touchX, &touchY, 600 );
if( !touched )
{
data->state = LV_INDEV_STATE_REL;
}
else
{
data->state = LV_INDEV_STATE_PR;
/*Set the coordinates*/
data->point.x = touchX;
data->point.y = touchY;
Serial.print( "Data x " );
Serial.println( touchX );
Serial.print( "Data y " );
Serial.println( touchY );
}
}
void setup()
{
Serial.begin( 115200 ); /* prepare for possible serial debug */
String LVGL_Arduino = "Hello Arduino! ";
LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
Serial.println( LVGL_Arduino );
Serial.println( "I am LVGL_Arduino" );
lv_init();
#if LV_USE_LOG != 0
lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif
tft.begin(); /* TFT init */
tft.setRotation( 1 ); /* Landscape orientation, flipped */
/*Set the touchscreen calibration data,
the actual data for your display can be acquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
// uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
uint16_t calData[5] = { 409, 3416, 335, 3321, 7 };
tft.setTouch( calData );
lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );
/*Initialize the display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init( &disp_drv );
/*Change the following line to your display resolution*/
disp_drv.hor_res = screenWidth;
disp_drv.ver_res = screenHeight;
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register( &disp_drv );
/*Initialize the (dummy) input device driver*/
static lv_indev_drv_t indev_drv;
lv_indev_drv_init( &indev_drv );
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = my_touchpad_read;
lv_indev_drv_register( &indev_drv );
#if 0
/* Create simple label */
lv_obj_t *label = lv_label_create( lv_scr_act() );
lv_label_set_text( label, LVGL_Arduino.c_str() );
lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
#else
/* Try an example from the lv_examples Arduino library
make sure to include it as written above.
lv_example_btn_1();
*/
// uncomment one of these demos
lv_demo_widgets(); // OK
// lv_demo_benchmark(); // OK
// lv_demo_keypad_encoder(); // works, but I haven't an encoder
// lv_demo_music(); // NOK
// lv_demo_printer();
// lv_demo_stress(); // seems to be OK
#endif
Serial.println( "Setup done" );
}
void loop()
{
lv_timer_handler(); /* let the GUI do its work */
delay( 5 );
}
|
esp32
触摸屏0.2 接线图 需要了解，TFT屏幕和触摸是两部分 在本例中，屏幕显示和触摸功能都是采用SPI进行通讯；因此首先短接TFT触摸屏的SDI和CLK，也就是数据从线和时钟线。 对应引脚为：T_DIN与SDI短接；T_CLK与SCK短接； 至于什么不短接SDO与T_DO呢？ 如下图，因为TFT_eSPI的文件中写明了，如果存在其他SPI设备共享MISO接口，TFT屏幕的SDO是不需要连接的。而我们的触摸传感器，是一种SPI设备
image-20230403143041946我直接在屏幕模块上进行了飞线处理，短接了T_DIN与SDI，以及T_CLK与SCK
飞线处理1. 软件1.1 TFT_eSPI库安装TFT_eSPI库选择对应屏幕的驱动首先注释掉User_Setup_Select.h中默认的驱动文件
image-20230403144525071在User_Setup_Select.h文件中找到相对应的驱动有文件，并取消注释
image-20230403144844375进入到选定的驱动头文件，本例中是Setup42_ili9341_ESP32.h。取消TOUCH相关的注释，如下图。
image-20230403145213052在该文件中，定义了每个引脚的引脚号，因此可以按照改文件进行接线。当然，若有必要，可以在此自行修改引脚号。配置好以后，可以先运行TFT_eSPI的示例代码，看TFT屏幕是否运行成功。1.2 LVGL库安装LVGL库把examples和demos文件夹复制到lvgl/src目录下，目录结构如下：
image-20230403145749071在lvgl根目录下，复制一份lv_conf_template.h到lvgl根目录，并重命名为lv_conf.h
image-20230403145950719打开lv_conf.h文件，修改第15行的# if 0 为 # if 1，以开启后续的代码段。
image-20230403150111013lv_conf.h文件，第27行可以修改颜色深度，默认16也可以。lv_conf.h文件，修改第88行，#define LV_TICK_CUSTOM 1设置为1，开启后续代码段。
image-20230403150258555至此，相关设置应该配置完毕，你可以开始写自己的代码了。如果要跑LVGL官方的demo，还需继续进行设置。1.3 LVGL demos配置LVGL官方提供了多个demo，如图：
image-20230403150624882由于前文将demos文件夹进行了移动，放在了src目录下，因为头文件需要修改为：#include 
image-20230403151150939在运行相关demo时，不仅需要解除相关注释，同时需要在lv_conf.h中进行配置；以lv_demo_widgets();为例，取消注释后，在lv_conf.h第727行，修改0为1，以开启宏定义；
image-20230403150832028若想运行lv_demo_benchmark()，则需要将上述修改还原，并将736行的0修改为1
image-20230403151000524注意：每个demo仅能开启一个，其他无关demo需要注释掉，并在lv_conf.h中设置宏定义为0文章最后附demos的main.cpp运行实际图如下：
65f75dbba0a4b26e916fd994064fa5d1.4 触摸屏幕校准
image-202304031518056051.5 demo示例的代码#include
#include
/*If you want to use the LVGL examples,
make sure to install the lv_examples Arduino library
and uncomment the following line.
#include
*/
#include
/*Change to your screen resolution*/
static const uint16_t screenWidth = 320;
static const uint16_t screenHeight = 240;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];
// TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */
TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
#if LV_USE_LOG != 0
/* Serial debugging */
void my_print(const char * buf)
{
Serial.printf(buf);
Serial.flush();
}
#endif
/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
uint32_t w = ( area->x2 - area->x1 + 1 );
uint32_t h = ( area->y2 - area->y1 + 1 );
tft.startWrite();
tft.setAddrWindow( area->x1, area->y1, w, h );
tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
tft.endWrite();
lv_disp_flush_ready( disp );
}
/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
uint16_t touchX, touchY;
bool touched = tft.getTouch( &touchX, &touchY, 600 );
if( !touched )
{
data->state = LV_INDEV_STATE_REL;
}
else
{
data->state = LV_INDEV_STATE_PR;
/*Set the coordinates*/
data->point.x = touchX;
data->point.y = touchY;
Serial.print( "Data x " );
Serial.println( touchX );
Serial.print( "Data y " );
Serial.println( touchY );
}
}
void setup()
{
Serial.begin( 115200 ); /* prepare for possible serial debug */
String LVGL_Arduino = "Hello Arduino! ";
LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
Serial.println( LVGL_Arduino );
Serial.println( "I am LVGL_Arduino" );
lv_init();
#if LV_USE_LOG != 0
lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif
tft.begin(); /* TFT init */
tft.setRotation( 1 ); /* Landscape orientation, flipped */
/*Set the touchscreen calibration data,
the actual data for your display can be acquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
// uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
uint16_t calData[5] = { 409, 3416, 335, 3321, 7 };
tft.setTouch( calData );
lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );
/*Initialize the display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init( &disp_drv );
/*Change the following line to your display resolution*/
disp_drv.hor_res = screenWidth;
disp_drv.ver_res = screenHeight;
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register( &disp_drv );
/*Initialize the (dummy) input device driver*/
static lv_indev_drv_t indev_drv;
lv_indev_drv_init( &indev_drv );
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = my_touchpad_read;
lv_indev_drv_register( &indev_drv );
#if 0
/* Create simple label */
lv_obj_t *label = lv_label_create( lv_scr_act() );
lv_label_set_text( label, LVGL_Arduino.c_str() );
lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
#else
/* Try an example from the lv_examples Arduino library
make sure to include it as written above.
lv_example_btn_1();
*/
// uncomment one of these demos
lv_demo_widgets(); // OK
// lv_demo_benchmark(); // OK
// lv_demo_keypad_encoder(); // works, but I haven't an encoder
// lv_demo_music(); // NOK
// lv_demo_printer();
// lv_demo_stress(); // seems to be OK
#endif
Serial.println( "Setup done" );
}
void loop()
{
lv_timer_handler(); /* let the GUI do its work */
delay( 5 );
}