LVGL学习记录：按键
按键按下加一
程序
#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
#define LV_USE_LOG 1
TFT_eSPI tft = TFT_eSPI(); /* TFT instance */
/*Change to your screen resolution*/
static const uint32_t screenWidth = 320;
static const uint32_t screenHeight = 240;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];
#if LV_USE_LOG != 0
/* Serial debugging */
void my_print( lv_log_level_t level, const char * file, uint32_t line, const char * fn_name, const char * dsc )
{
Serial.printf( "%s(%s)@%d->%s\r\n", file, fn_name, line, dsc );
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 );
}
}
static void btn_event_callback(lv_event_t* event)
{
static uint32_t counter = 1;
lv_obj_t* btn = lv_event_get_target(event); //获取事件对象
if (btn != NULL)
{
lv_obj_t* label = lv_obj_get_child(btn, 0); // 获取第一个子对象
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", counter); //设置显示内容
counter++;
}
}
}
void lv_button_click_event_test()
{
lv_obj_t* btn = lv_btn_create(lv_scr_act()); // 创建Button对象
if (btn != NULL)
{
lv_obj_set_size(btn, 100, 50); // 设置对象大小,宽度和高度
lv_obj_set_pos(btn, 110, 100);; // 设置按钮位置，即X和Y坐标
lv_obj_add_event_cb(btn, btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数
lv_obj_t* label = lv_label_create(btn); // 基于Button对象创建Label对象
if (label != NULL)
{
lv_label_set_text(label, "Click me!"); // 设置显示内容
lv_obj_center(label); // 对象居中显示
}
}
}
/*
static void slider_event_callback(lv_event_t* event)
{
lv_obj_t * slider = lv_event_get_target(event);
if (slider != NULL)
{
lv_obj_t* label = (lv_obj_t* )lv_event_get_user_data(event);
if (label != NULL)
{
// 刷新label对象的文本
lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 设置对齐，label对象在slider对象上方中间位置
}
}
}
void lv_slider_test()
{
lv_obj_t * slider = lv_slider_create(lv_scr_act()); // 创建滑块对象
if (slider != NULL)
{
lv_obj_set_width(slider, 200); // 设置slider的宽度
lv_obj_center(slider); // 对样显示在屏幕中央
lv_slider_set_range(slider, 10, 200); // 设置滑块值的变化范围10-200
lv_obj_t* label = lv_label_create(lv_scr_act()); // 创建一个标签，用于显示滑块的滑动值
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", lv_slider_get_min_value(slider)); // 标签默认显示滑块的最小值
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 标签对象放在slider对象的上方中间位置
// 添加滑块值变化事件和事件回调函数，并将label对象最为事件的user_data
lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, (void *)label);
}
}
}
*/
void setup()
{
Serial.begin( 115200 ); /* prepare for possible serial debug */
Serial.println( "Hello Arduino! (V8.0.X)" );
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 aquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
uint16_t calData[5] = { 442, 3414, 336, 3425, 3 };
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, "Hello Arduino! (V8.0.X)" );
lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
#else
lv_button_click_event_test();
// lv_slider_test();
/* 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 */
lv_tick_inc(5);
delay(5);
} 其中主要的设置有以下几个
分别是设置大小，设置按键的位置
lv_obj_set_size(btn, 100, 50); // 设置对象大小,宽度和高度
lv_obj_set_pos(btn, 110, 100);; // 设置按钮位置，即X和Y坐标效果
按下一次数值加一
修改按键颜色
#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
#define LV_USE_LOG 1
TFT_eSPI tft = TFT_eSPI(); /* TFT instance */
/*Change to your screen resolution*/
static const uint32_t screenWidth = 320;
static const uint32_t screenHeight = 240;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];
static lv_style_t style_btn;
#if LV_USE_LOG != 0
/* Serial debugging */
void my_print( lv_log_level_t level, const char * file, uint32_t line, const char * fn_name, const char * dsc )
{
Serial.printf( "%s(%s)@%d->%s\r\n", file, fn_name, line, dsc );
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 );
}
}
static void btn_event_callback(lv_event_t* event)
{
static uint32_t counter = 1;
lv_obj_t* btn = lv_event_get_target(event); //获取事件对象
if (btn != NULL)
{
lv_obj_t* label = lv_obj_get_child(btn, 0); // 获取第一个子对象
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", counter); //设置显示内容
counter++;
}
}
}
void lv_button_click_event_test()
{
lv_obj_t* btn = lv_btn_create(lv_scr_act()); // 创建Button对象
if (btn != NULL)
{
lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT); // 给按钮对象添加默认样式
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_RED)); // 样式背景色为红色
lv_obj_set_size(btn, 100, 50); // 设置对象大小,宽度和高度
lv_obj_set_pos(btn, 110, 100);; // 设置按钮位置，即X和Y坐标
lv_obj_add_event_cb(btn, btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数
lv_obj_t* label = lv_label_create(btn); // 基于Button对象创建Label对象
if (label != NULL)
{
lv_label_set_text(label, "Click me!"); // 设置显示内容
lv_obj_center(label); // 对象居中显示
}
}
}
/*
static void slider_event_callback(lv_event_t* event)
{
lv_obj_t * slider = lv_event_get_target(event);
if (slider != NULL)
{
lv_obj_t* label = (lv_obj_t* )lv_event_get_user_data(event);
if (label != NULL)
{
// 刷新label对象的文本
lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 设置对齐，label对象在slider对象上方中间位置
}
}
}
void lv_slider_test()
{
lv_obj_t * slider = lv_slider_create(lv_scr_act()); // 创建滑块对象
if (slider != NULL)
{
lv_obj_set_width(slider, 200); // 设置slider的宽度
lv_obj_center(slider); // 对样显示在屏幕中央
lv_slider_set_range(slider, 0, 1024); // 设置滑块值的变化范围0-1024
lv_obj_t* label = lv_label_create(lv_scr_act()); // 创建一个标签，用于显示滑块的滑动值
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", lv_slider_get_min_value(slider)); // 标签默认显示滑块的最小值
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 标签对象放在slider对象的上方中间位置
// 添加滑块值变化事件和事件回调函数，并将label对象最为事件的user_data
lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, (void *)label);
}
}
}*/
void setup()
{
Serial.begin( 115200 ); /* prepare for possible serial debug */
Serial.println( "Hello Arduino! (V8.0.X)" );
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 aquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
uint16_t calData[5] = { 442, 3414, 336, 3425, 3 };
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, "Hello Arduino! (V8.0.X)" );
lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
#else
lv_button_click_event_test();
// lv_slider_test();
/* 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 */
lv_tick_inc(5);
delay(5);
} 效果
也可以调为其他颜色
主要是这二句
lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT); // 给按钮对象添加默认样式
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_YELLOW)); // 样式背景色为黄色
颜色名称如下：
-
LV_PALETTE_RED -
LV_PALETTE_PINK -
LV_PALETTE_PURPLE -
LV_PALETTE_DEEP_PURPLE -
LV_PALETTE_INDIGO -
LV_PALETTE_BLUE -
LV_PALETTE_LIGHT_BLUE -
LV_PALETTE_CYAN -
LV_PALETTE_TEAL -
LV_PALETTE_GREEN -
LV_PALETTE_LIGHT_GREEN -
LV_PALETTE_LIME -
LV_PALETTE_YELLOW -
LV_PALETTE_AMBER -
LV_PALETTE_ORANGE -
LV_PALETTE_DEEP_ORANGE -
LV_PALETTE_BROWN -
LV_PALETTE_BLUE_GREY -
LV_PALETTE_GREY
设置为圆角矩阵
代码
#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
#define LV_USE_LOG 1
TFT_eSPI tft = TFT_eSPI(); /* TFT instance */
/*Change to your screen resolution*/
static const uint32_t screenWidth = 320;
static const uint32_t screenHeight = 240;
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];
static lv_style_t style_btn;
#if LV_USE_LOG != 0
/* Serial debugging */
void my_print( lv_log_level_t level, const char * file, uint32_t line, const char * fn_name, const char * dsc )
{
Serial.printf( "%s(%s)@%d->%s\r\n", file, fn_name, line, dsc );
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 );
}
}
static void btn_event_callback(lv_event_t* event)
{
static uint32_t counter = 1;
lv_obj_t* btn = lv_event_get_target(event); //获取事件对象
if (btn != NULL)
{
lv_obj_t* label = lv_obj_get_child(btn, 0); // 获取第一个子对象
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", counter); //设置显示内容
counter++;
}
}
}
void lv_button_click_event_test()
{
/*lv_obj_t* label = NULL;
lv_style_reset(&style_btn); // 重置按钮样式
lv_style_init(&style_btn); // 初始化按钮样式
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_RED)); // 样式背景色为红色*/
lv_obj_t* btn = lv_btn_create(lv_scr_act()); // 创建Button对象
if (btn != NULL)
{
lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT); // 给按钮对象添加默认样式
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_YELLOW)); // 样式背景色为黄色
lv_obj_set_style_radius(btn, LV_RADIUS_CIRCLE, 0); // 添加按钮对象的圆角弧度样
lv_obj_set_size(btn, 100, 50); // 设置对象大小,宽度和高度
lv_obj_set_pos(btn, 110, 100);; // 设置按钮位置，即X和Y坐标
lv_obj_add_event_cb(btn, btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数
lv_obj_t* label = lv_label_create(btn); // 基于Button对象创建Label对象
if (label != NULL)
{
lv_label_set_text(label, "Click me!"); // 设置显示内容
lv_obj_center(label); // 对象居中显示
}
}
}
/*
static void slider_event_callback(lv_event_t* event)
{
lv_obj_t * slider = lv_event_get_target(event);
if (slider != NULL)
{
lv_obj_t* label = (lv_obj_t* )lv_event_get_user_data(event);
if (label != NULL)
{
// 刷新label对象的文本
lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 设置对齐，label对象在slider对象上方中间位置
}
}
}
void lv_slider_test()
{
lv_obj_t * slider = lv_slider_create(lv_scr_act()); // 创建滑块对象
if (slider != NULL)
{
lv_obj_set_width(slider, 200); // 设置slider的宽度
lv_obj_center(slider); // 对样显示在屏幕中央
lv_slider_set_range(slider, 0, 1024); // 设置滑块值的变化范围0-1024
lv_obj_t* label = lv_label_create(lv_scr_act()); // 创建一个标签，用于显示滑块的滑动值
if (label != NULL)
{
lv_label_set_text_fmt(label, "%d", lv_slider_get_min_value(slider)); // 标签默认显示滑块的最小值
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); // 标签对象放在slider对象的上方中间位置
// 添加滑块值变化事件和事件回调函数，并将label对象最为事件的user_data
lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, (void *)label);
}
}
}*/
void setup()
{
Serial.begin( 115200 ); /* prepare for possible serial debug */
Serial.println( "Hello Arduino! (V8.0.X)" );
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 aquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
uint16_t calData[5] = { 442, 3414, 336, 3425, 3 };
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, "Hello Arduino! (V8.0.X)" );
lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
#else
lv_button_click_event_test();
// lv_slider_test();
/* 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 */
lv_tick_inc(5);
delay(5);
} 其中主要是这一句
lv_obj_set_style_radius(btn, LV_RADIUS_CIRCLE, 0); // 添加按钮对象的圆角弧度样
效果
