LVGL V8之color selector

继续学习使用LVGL V8，这一篇使用textarea和keyboard等控件实现一个color seletor
还是通过codeblock来模拟代码的运行，代码如下：

#ifndef _LV_GUI_COLOR_SELECTOR_H
#define _LV_GUI_COLOR_SELECTOR_H

#ifdef __cplusplus
extern "C" {
#endif

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include "lvgl/lvgl.h"


// 颜色选择器
void lv_gui_color_selector_display();


#ifdef __cplusplus
} /* extern "C" */
#endif

#endif

#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include "lvgl/lvgl.h"
#include "lv_gui_color_seletor.h"

// user_data
typedef struct btn_usr_data
{
    lv_obj_t * obj_label_val;
    lv_obj_t * obj_canvas;
    lv_obj_t * obj_ta_red;
    lv_obj_t * obj_ta_green;
    lv_obj_t * obj_ta_blue;
}btn_usr_data_t;


// 文本框事件回调
static void text_area_event_callback(lv_event_t * event)
{
    if (event == NULL)
    {
        printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_event_code_t code = lv_event_get_code(event);
    lv_obj_t * ta = lv_event_get_target(event);
    lv_obj_t * kb = lv_event_get_user_data(event);

    if (code == LV_EVENT_FOCUSED)
    {
        if (lv_indev_get_type(lv_indev_get_act()) != LV_INDEV_TYPE_KEYPAD)
        {
            if (ta != NULL && kb != NULL)
            {
                lv_keyboard_set_textarea(kb, ta);
                lv_obj_set_style_max_height(kb, LV_HOR_RES * 2 / 3, 0);
                lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
                lv_obj_scroll_to_view_recursive(ta, LV_ANIM_OFF);
            }
        }
    }
    else if(code == LV_EVENT_DEFOCUSED)
    {
         if (ta != NULL && kb != NULL)
         {
            lv_keyboard_set_textarea(kb, NULL);
            lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
            lv_indev_reset(NULL, ta);
         }
    }
    else if(code == LV_EVENT_READY || code == LV_EVENT_CANCEL)
    {
        if (ta != NULL && kb != NULL)
        {
            lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
            lv_obj_clear_state(ta, LV_STATE_FOCUSED);
            lv_indev_reset(NULL, ta);   // To forget the last clicked object to make it focusable again
        }
    }
}

// 按键回调函数
static void btn_event_callback(lv_event_t * event)
{
    if (event == NULL)
    {
        printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_event_code_t code = lv_event_get_code(event);
    if (code == LV_EVENT_CLICKED)
    {
        btn_usr_data_t * data = (btn_usr_data_t *)lv_event_get_user_data(event);
        if (data == NULL)
        {
            return;
        }

        if ((data->obj_ta_red == NULL) || (data->obj_ta_green == NULL) || (data->obj_ta_blue == NULL))
        {
            return ;
        }

        unsigned int red = 0, green = 0, blue = 0;
        char * r = lv_textarea_get_text(data->obj_ta_red);
        char * g = lv_textarea_get_text(data->obj_ta_green);
        char * b = lv_textarea_get_text(data->obj_ta_blue);
        if (r != NULL && g != NULL && b != NULL)
        {
            red = atoi(r);
            green = atoi(g);
            blue = atoi(b);

            if (red > 255)
            {
                red = 255;
            }

            if (green > 255)
            {
                green = 255;
            }

            if (blue > 255)
            {
                blue = 255;
            }

            printf("red:%d, green:%d, blue:%d\n", red, green, blue);
            lv_color_t color = lv_color_make(red, green, blue);

            if (data->obj_label_val != NULL)
            {
                lv_label_set_text_fmt(data->obj_label_val, "value:#%02X%02X%02X", color.ch.red, color.ch.green, color.ch.blue);
            }

            if (data->obj_canvas != NULL)
            {
                lv_obj_set_style_bg_color(data->obj_canvas, color, 0); // 设置样式背景颜色
            }
        }
    }
}


// 颜色选择器
void lv_gui_color_selector_display()
{
    // 先绘制一个白色的背景
    lv_obj_t * obj_background = lv_obj_create(lv_scr_act());
    if (obj_background == NULL)
    {
        printf("[%s:%d] obj_background create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_obj_set_size(obj_background, LV_PCT(100), LV_PCT(100));
    lv_obj_set_style_border_width(obj_background, 0, 0); //边框宽度
    lv_obj_set_style_radius(obj_background, 0, 0); //圆角大小
    lv_obj_set_style_bg_color(obj_background, lv_color_hex(0xFFFFFF), 0);//背景颜色, 褐色
    lv_obj_set_style_pad_all(obj_background, 0, 0); // 内部间隙
    lv_obj_set_style_bg_opa(obj_background, LV_OPA_100, 0);//透明度50%
    //lv_obj_align(obj_background, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_align(obj_background, LV_ALIGN_CENTER, 0, 0); // 设置对齐方式

    // 创建键盘控件
    lv_obj_t * obj_keyboard = lv_keyboard_create(lv_scr_act());
    if (obj_keyboard == NULL)
    {
        printf("[%s:%d] obj_keyboard create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_keyboard_set_mode(obj_keyboard, LV_KEYBOARD_MODE_NUMBER); // 设置键盘样式为数字模式
    lv_obj_add_flag(obj_keyboard, LV_OBJ_FLAG_HIDDEN); // 隐藏键盘控件

    //创建文本输入框Red
    lv_obj_t * obj_ta_red = lv_textarea_create(obj_background);
    if (obj_ta_red == NULL)
    {
        printf("[%s:%d] obj_ta_red create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_textarea_set_one_line(obj_ta_red, true); // 设置文本输入框为1行
    lv_textarea_set_text_selection(obj_ta_red, true); // 设置文本框可选中
    lv_textarea_set_accepted_chars(obj_ta_red, "0123456789"); // 设置文本输入框可输入的字符
    lv_textarea_set_max_length(obj_ta_red, 3); // 设置文本输入框可输入的字符最大长度
    lv_textarea_set_placeholder_text(obj_ta_red, "Red(0-255)");
    lv_obj_set_style_radius(obj_ta_red, 0, 0); //圆角大小
    lv_obj_set_style_text_font(obj_ta_red, (const lv_font_t *)&lv_font_montserrat_20, 0); //文本字体大小
    lv_obj_set_size(obj_ta_red, 150, 50);
    lv_obj_align(obj_ta_red, LV_ALIGN_TOP_LEFT, 10, 0);
    lv_obj_add_event_cb(obj_ta_red, text_area_event_callback, LV_EVENT_ALL, obj_keyboard); //文本框事件处理

    //创建文本输入框Green
    lv_obj_t * obj_ta_green = lv_textarea_create(obj_background);
    if (obj_ta_green == NULL)
    {
        printf("[%s:%d] obj_ta_green create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_textarea_set_one_line(obj_ta_green, true); // 设置文本输入框为1行
    lv_textarea_set_accepted_chars(obj_ta_green, "0123456789"); // 设置文本输入框可输入的字符
    lv_textarea_set_max_length(obj_ta_green, 3); // 设置文本输入框可输入的字符最大长度
    lv_textarea_set_placeholder_text(obj_ta_green, "Green(0-255)");
    lv_textarea_set_text_selection(obj_ta_green, true); // 设置文本框可选中
    lv_obj_set_style_radius(obj_ta_green, 0, 0); //圆角大小
    lv_obj_set_style_text_font(obj_ta_green, (const lv_font_t *)&lv_font_montserrat_20, 0); //文本字体大小
    lv_obj_set_size(obj_ta_green, 150, 50);
    lv_obj_align(obj_ta_green, LV_ALIGN_TOP_LEFT, 170, 0);
    lv_obj_add_event_cb(obj_ta_green, text_area_event_callback, LV_EVENT_ALL, obj_keyboard); //文本框事件处理

    //创建文本输入框
    lv_obj_t * obj_ta_blue = lv_textarea_create(obj_background);
    if (obj_ta_blue == NULL)
    {
        printf("[%s:%d] obj_ta_blue create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_textarea_set_one_line(obj_ta_blue, true); // 设置文本输入框为1行
    lv_textarea_set_text_selection(obj_ta_blue, true); // 设置文本框可选中
    lv_textarea_set_accepted_chars(obj_ta_blue, "0123456789"); // 设置文本输入框可输入的字符
    lv_textarea_set_max_length(obj_ta_blue, 3); // 设置文本输入框可输入的字符最大长度
    lv_textarea_set_placeholder_text(obj_ta_blue, "Blue(0-255)");
    lv_obj_set_style_radius(obj_ta_blue, 0, 0); //圆角大小
    lv_obj_set_size(obj_ta_blue, 150, 50);
    lv_obj_align(obj_ta_blue, LV_ALIGN_TOP_LEFT, 330, 0);
    lv_obj_set_style_text_font(obj_ta_blue, (const lv_font_t *)&lv_font_montserrat_20, 0); // 文本字体大小
    lv_obj_add_event_cb(obj_ta_blue, text_area_event_callback, LV_EVENT_ALL, obj_keyboard); //文本框事件处理

    // 添加一个label，显示rgb值
    lv_obj_t * obj_label_val = lv_label_create(obj_background);
    if (obj_label_val == NULL)
    {
        printf("[%s:%d] obj_label_val create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_obj_set_style_text_font(obj_label_val, (const lv_font_t *)&lv_font_montserrat_20, 0); // 文本字体大小
    lv_label_set_text(obj_label_val, "VAL:"); // 设置文本内容
    lv_obj_align(obj_label_val, LV_ALIGN_TOP_LEFT, 500, 15);

    // 创建一个画布
    lv_obj_t *obj_canvas = lv_obj_create(obj_background);
    if (obj_canvas == NULL)
    {
        printf("[%s:%d] obj_canvas create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_obj_set_style_border_width(obj_canvas, 0, 0); //边框宽度
    lv_obj_set_style_radius(obj_canvas, 0, 0); //圆角大小
    lv_obj_set_style_bg_color(obj_canvas, lv_color_hex(0xFFFFFF), 0);//背景颜色
    lv_obj_set_size(obj_canvas, LV_PCT(100), 420); // 设置尺寸
    lv_obj_align(obj_canvas, LV_ALIGN_TOP_LEFT, 0, 60); // 设置对齐

    // 新建一个按钮
    lv_obj_t * obj_btn = lv_btn_create(obj_background);
    if (obj_btn == NULL)
    {
        printf("[%s:%d] obj_btn create failed !!!\n",  __FUNCTION__, __LINE__);
        return;
    }

    lv_obj_set_style_bg_color(obj_btn, lv_color_hex(0xF98E2D), 0); // 设置样式背景颜色
    lv_obj_set_style_radius(obj_btn, 5, 0);
    lv_obj_set_size(obj_btn, 90, 40);
    lv_obj_align(obj_btn, LV_ALIGN_TOP_LEFT, 700, 5);

    static btn_usr_data_t data = { 0 };
    data.obj_ta_red = obj_ta_red;
    data.obj_ta_green = obj_ta_green;
    data.obj_ta_blue = obj_ta_blue;
    data.obj_canvas = obj_canvas;
    data.obj_label_val = obj_label_val;
    // 添加按键回调函数和user_data
    lv_obj_add_event_cb(obj_btn, btn_event_callback, LV_EVENT_CLICKED, (void *)&data);

    lv_obj_t * obj_btn_label = lv_label_create(obj_btn);
    if (obj_btn_label == NULL)
    {
        printf("[%s:%d] obj_btn_label create failed\n", __FUNCTION__, __LINE__);
        return ;
    }

    lv_obj_set_style_text_font(obj_btn_label, (const lv_font_t *)&lv_font_montserrat_24, 0);
    lv_label_set_text(obj_btn_label, "OK");
    lv_obj_center(obj_btn_label);
}

运行效果如下：