|  **银杏科技有限公司旗下技术文档发布平台**  ||||
|技术支持电话|**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** ，它是在当前值上绘制的矩形（或圆形）。它使用所有矩形（如样式属性和填充）使其大于圆环或矩形背景的宽度。

{{ :icore4t:icore4t_rtt_lvgl_19_1.gif?direct |}}

<code c>
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);   /* 设置位置 */
}
</code>

==== 二、类型 ====

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

{{ :icore4t:icore4t_rtt_lvgl_19_2.gif?direct |}}

<code c>
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);        /* 设置位置 */
}
</code>

==== 三、设置颜色 ====

使用一下方法，用户可以手动设置颜色选择器的色调、饱和度、值。
  * **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** 长按将显示下一个模式。

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

{{ :icore4t:icore4t_rtt_lvgl_19_3.gif?direct |}}

<code c>
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); /* 设置位置 */
}

</code>