用户工具

站点工具


icore4tlvgl_19
银杏科技有限公司旗下技术文档发布平台
技术支持电话0379-69926675-801
技术支持邮件Gingko@vip.163.com
版本 日期 作者 修改内容
V1.0 2020-12-12 yang 初次建立

实验十九:lv_cpicker颜色选择器

一、颜色选择器

顾名思义,颜色选择器可以通过点击来选择颜色。可以依次选择颜色的色调、饱和度和值。

颜色选择器具有两种形式:圆环(圆盘)和矩形。在这两种形式中,长按对象,颜色选择器将更改为颜色的下一个参数(色调,饱和度或值)。双击将重置当前参数(默认为红色)。

颜色选择器的主要部分称为 LV_CPICKER_PART_BG 。它使用 scale_width 设置圆环的宽度,并使用 pad_inner 设置圆环和内部预览圆之间的填充距离。在矩形模式下,radius(半径)可以用于在矩形上应用半径。

该对象具有称为的虚拟部分 LV_CPICKER_PART_KNOB ,它是在当前值上绘制的矩形(或圆形)。它使用所有矩形(如样式属性和填充)使其大于圆环或矩形背景的宽度。

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                 /* 初始化lvgl2rtt */                
	lv_obj_t * cpicker = lv_cpicker_create(lv_scr_act(), NULL);/* 创建颜色选择器 */
	lv_obj_set_size(cpicker, 200, 200);                   /* 设置尺寸 */
	lv_obj_align(cpicker, NULL, LV_ALIGN_CENTER, 0, 0);   /* 设置位置 */
}

二、类型

可以通过 lv_cpicker_set_type(cpicker, LV_CPICKER_TYPE_RECT/DISC) 更改颜色选择器的类型,默认类型为圆环 LV_CPICKER_TYPE_DISC

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                      /* 初始化lvgl2rtt */
	lv_obj_t * cpicker = lv_cpicker_create(lv_scr_act(), NULL);/* 创建颜色选择器 */
lv_cpicker_set_type(cpicker, LV_CPICKER_TYPE_RECT);                /* 设置类型为矩形 */
	lv_obj_set_size(cpicker, 200, 50);                         /* 设置尺寸 */
	lv_obj_align(cpicker, NULL, LV_ALIGN_CENTER, 0, 0);        /* 设置位置 */
}

三、设置颜色

使用一下方法,用户可以手动设置颜色选择器的色调、饱和度、值。

  • lv_cpicker_set_hue/saturation/value(cpicker, x) 设置色调。
  • lv_cpicker_set_hsv(cpicker, hsv) 设置饱和度。
  • lv_cpicker_set_color(cpicker, rgb) 设置颜色值。

四、颜色模式

默认情况下长按控件可以更改当前颜色模式,不过,用户也可以使用函数 lv_cpicker_set_color_mode(cpicker,,LV_CPICKER_COLOR_MODE_HUE/ SATURATION/ VALUE) 选择当前的色彩模式。

若不想改变颜色模式,可以使用方法 lv_cpicker_set_color_mode_fixed(cpicker, true) 来固定颜色模式。

五、旋钮颜色

若使能 lv_cpicker_set_knob_colored(cpicker, true) ,则旋钮背景色将自动更新为颜色选择器所选颜色。

六、事件

颜色选择器仅支持通用事件,键值如下:

  • LV_KEY_UP,LV_KEY_RIGHT 将当前参数的值增加 1。
  • LV_KEY_DOWN,LV_KEY_LEFT 将当前参数减 1。
  • LV_KEY_ENTER 长按将显示下一个模式。

通过双击可以重置当前参数。

lv_obj_t * labelr;                                            /* 定义标签 */
lv_obj_t * labelg; 
lv_obj_t * labelb; 
lv_obj_t * labeltxt; 
lv_obj_t * cpicker;                                           /* 定义颜色选择器 */
unsigned char r,g,b,temp;                                     /* 定义变量 */
static void event_handler(lv_obj_t * obj, lv_event_t event) { /* 回调函数 */
	if(event == LV_EVENT_VALUE_CHANGED) {                 /* 按键状态切换的话 */
		lv_color_t color = lv_cpicker_get_color(cpicker);/* 获取当前选择的颜色 */
		temp = color.ch.red & 0x07;                   /* RGB565转RGB888 */
		r = color.ch.red << 3 | temp;
		temp = color.ch.green & 0x03;
		g = color.ch.green << 2 | temp;
		temp = color.ch.blue & 0x07;
		b = color.ch.blue << 3 | temp;
		lv_label_set_text_fmt(labelr, "red: %d",r);   /* 更新标签内容 */
		lv_label_set_text_fmt(labelg, "green: %d",g); 
		lv_label_set_text_fmt(labelb, "blue: %d",b);  /* 更新labeltxt标签字体颜色 */
		if(r == 0)lv_label_set_text_fmt(labeltxt, "#0%x%x%x color#",r,g,b);
		else if(g == 0)lv_label_set_text_fmt(labeltxt, "#%x0%x%x color#",r,g,b);
		else lv_label_set_text_fmt(labeltxt, "#%x%x%x0 color#",r,g,b);
}	}
void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                 /* 初始化lvgl2rtt */
	cpicker = lv_cpicker_create(lv_scr_act(), NULL);      /* 创建颜色选择器 */
	lv_obj_set_size(cpicker, 100, 100);                   /* 设置尺寸 */
	lv_obj_align(cpicker, NULL, LV_ALIGN_CENTER, 0, 0);   /* 设置位置 */
	lv_cpicker_set_type(cpicker, LV_CPICKER_TYPE_DISC);   /* 设为圆形 */
	lv_obj_set_event_cb(cpicker, event_handler);          /* 绑定回调函数 */
 
	labelr = lv_label_create(lv_scr_act(), NULL);         /* 创建标签 */
	lv_label_set_text(labelr, "red: 255");                /* 设置标签默认内容 */
	lv_obj_align(labelr, NULL, LV_ALIGN_IN_RIGHT_MID, -70, -30); /* 设置位置 */
	labelg = lv_label_create(lv_scr_act(), NULL);         /* 创建标签 */
	lv_label_set_text(labelg, "green: 0");                /* 设置标签默认内容 */
	lv_obj_align(labelg, NULL, LV_ALIGN_IN_RIGHT_MID, -70, 0); /* 设置位置 */
	labelb = lv_label_create(lv_scr_act(), NULL);         /* 创建标签 */
	lv_label_set_text(labelb, "blue: 0");                 /* 设置标签默认内容 */
	lv_obj_align(labelb, NULL, LV_ALIGN_IN_RIGHT_MID, -70, 30); /* 设置位置 */
	labeltxt = lv_label_create(lv_scr_act(), NULL);       /* 创建标签 */
	lv_label_set_recolor(labeltxt, true);                 /* 重着色使能 */
	lv_label_set_text(labeltxt, "#ff0000 color#");        /* 设置标签默认内容 */
	lv_obj_align(labeltxt, cpicker, LV_ALIGN_OUT_BOTTOM_MID, 0, 20); /* 设置位置 */
}
icore4tlvgl_19.txt · 最后更改: 2022/04/01 11:14 由 sean