美观！！大气！！！ LVGL『Color picker颜色选择器控件』介绍

原创专注于无线通信的蓬勃 2021-02-26 07:51

【TI资料】专为高压系统设计的新型MCU 【TI资料】基于新型C29内核的MCU技术资料

一. LVGL GUI颜色选择器控件的概念

顾名思义，拾色器允许选择颜色。可以依次选择颜色的色相，饱和度和值。小部件具有两种形式：圆形（圆盘）和矩形。在这两种形式中，长按对象，颜色选择器将更改为颜色的下一个参数（色相，饱和度或值）。此外，双击将重置当前参数。

二. LVGL GUI颜色选择器小部件和样式

拾色器的主要部分称为 LV_CPICKER_PART_BG 。以圆形形式，它使用 scale_width 设置圆的宽度，并使用 pad_inner 在圆和内部预览圆之间填充。在矩形模式下，半径可以用于在矩形上应用半径。
该对象具有称为的虚拟部分 LV_CPICKER_PART_KNOB ，它是在当前值上绘制的矩形（或圆形）。它使用所有矩形（如样式属性和填充）使其大于圆形或矩形背景的宽度。

三. LVGL GUI颜色选择器控件的使用

1. 类型(Type)

可以通过以下方式更改颜色选择器的类型 lv_cpicker_set_type(cpicker, LV_CPICKER_TYPE_RECT/DISC),我们来创建三个颜色选择器，一个是默认的，一个设置为LV_CPICKER_TYPE_RECT，一个设置为LV_CPICKER_TYPE_DISC，代码如下：

void lvgl_cpicker_type_test(void)
{

    lv_obj_t* cpicker1 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker1, 200, 200);
    lv_obj_set_pos(cpicker1, 100, 100);

    lv_obj_t* cpicker2 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker2, 200, 200);
    lv_obj_set_pos(cpicker2, 400, 100);
    lv_cpicker_set_type(cpicker2, LV_CPICKER_TYPE_RECT);

    lv_obj_t* cpicker3 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker3, 200, 200);
    lv_obj_set_pos(cpicker3, 700, 100);
    lv_cpicker_set_type(cpicker3, LV_CPICKER_TYPE_DISC);

}

2. 设定颜色(Set color)

我们只说一个函数lv_cpicker_set_color，直接看代码跟效果

void lvgl_cpicker_set_color_test(void)
{
    lv_obj_t* cpicker1 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker1, 200, 200);
    lv_obj_set_pos(cpicker1, 100, 100);

    lv_obj_t* cpicker2 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker2, 200, 200);
    lv_obj_set_pos(cpicker2, 400, 100);
    lv_cpicker_set_color(cpicker2,LV_COLOR_BLUE);

    lv_obj_t* cpicker3 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker3, 200, 200);
    lv_obj_set_pos(cpicker3, 700, 100);
    lv_cpicker_set_color(cpicker3, LV_COLOR_BLACK);

}

3. 颜色模式(Color mode)

不做说明了

4. 旋钮颜色(Knob color)

选择什么背景就变成什么颜色，直接上代码上图

void lvgl_cpicker_knob_test(void)
{
    lv_obj_t* cpicker1 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker1, 200, 200);
    lv_obj_set_pos(cpicker1, 100, 100);
    lv_cpicker_set_knob_colored(cpicker1, true);
}

5. 事件(Event)

虽然官网说没有特殊事件产生，但是我们仔细想下，如果没有特殊事件，只有点急等，那么岂不是这个控件很鸡肋，奔着彻底研究的想法，自己试了下LV_EVENT_VALUE_CHANGED，果然有产生这个事件，所以这么来看LVGL官网还有很大的改善空间，不过这个我们也理解，毕竟刚兴起的GUI！总有一个过程，我们直接上代码以及效果吧


static void cpicker_event_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        lv_color_t current_color = lv_cpicker_get_color(obj);
        printf("LV_EVENT_VALUE_CHANGED R(%d):G(%d):B(%d)\n", current_color.ch.red, current_color.ch.green, current_color.ch.blue);
    }
}
void lvgl_cpicker_event_test(void)
{
    lv_obj_t* cpicker1 = lv_cpicker_create(lv_scr_act(), NULL);
    lv_obj_set_size(cpicker1, 200, 200);
    lv_obj_set_pos(cpicker1, 100, 100);
    lv_cpicker_set_knob_colored(cpicker1, true);
    lv_obj_set_event_cb(cpicker1, cpicker_event_handler);
}

效果图：