差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- icore4tlvgl_19 [2020/12/19 09:33]
zgf 创建
+++ icore4tlvgl_19 [2022/04/01 11:14] (当前版本)
sean
@@ 行 2: / 行 2: @@
 |技术支持电话|**0379-69926675-801**|||
 |技术支持邮件|Gingko@vip.163.com|||
-|技术论坛|http://www.eeschool.org|||
 ^  版本  ^  日期  ^  作者  ^  修改内容  ^
-|  V1.0  |  2020-12-6  |  yang  |  初次建立  |
+|  V1.0  |  2020-12-12  |  yang  |  初次建立  |
-===== 实验十六：lv_spinner缓冲标志 =====
+===== 实验十九：lv_cpicker颜色选择器 =====
+==== 一、颜色选择器 ====
-{{ :icore4t:icore4t_rtt_lvgl_16_1.gif?direct |}}
+顾名思义，颜色选择器可以通过点击来选择颜色。可以依次选择颜色的色调、饱和度和值。
+颜色选择器具有两种形式：圆环（圆盘）和矩形。在这两种形式中，长按对象，颜色选择器将更改为颜色的下一个参数（色调，饱和度或值）。双击将重置当前参数（默认为红色）。
+颜色选择器的主要部分称为 **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>

用户工具

站点工具

差别

页面工具