LVGL圆弧、线条、图片、色环、按钮矩阵、文本区域、键盘部件

本文主要是介绍LVGL圆弧、线条、图片、色环、按钮矩阵、文本区域、键盘部件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

LVGL圆弧部件

LVGL线条部件

LVGL图片部件

LVGL色环部件

LVGL按钮矩阵部件

LVGL文本区域部件

LVGL键盘部件


LVGL圆弧部件

圆弧部件以弧形滑动的形式来调节、显示某个参数的值。

圆弧部件组成部分:

        背景弧LV_PART_MAIN

        前景弧LV_PART_INDICATOR

        旋钮LV_PART_KNOB

创建圆弧部件:

lv_obj_t *arc = lv_arc_create(parent);

设置范围值、当前值:

lv_arc_set_range(arc, 0, 200);    /* 设置范围值 */
lv_arc_set_value(arc, 80);        /* 设置当前值(需要在范围值之内) */

设置圆弧角度(不建议使用):

lv_arc_set_angles(arc, 135, 270);    /* 设置前景狐角度 */
lv_arc_set_bg_angles(arc, 135, 45);  /* 设置背景狐角度 */

设置旋转角度(顺时针旋转):

lv_arc_set_rotation(arc, 180);

获取当前值:

lv_arc_get_value(arc);
static void event_cb(lv_event_t *e)
{lv_obj_t *target = lv_event_get_target(e);printf("%d \n", lv_arc_get_value(target));
}lv_obj_add_event_cb(arc,event_cb, LV_EVENT_VALUE_CHANGED, NULL);

设置模式、圆弧绘制速率:

lv_arc_set_mode(arc, LV_PART_MODE_REVERSE);    /* 设置模式 */
lv_arc_set_change_rate(arc, 90);               /* 绘制速率:90°/s */

LVGL线条部件

线条部件能够在一组坐标点之间依次绘制直线。

线条部件组成部分:

        主体LV_PART_MAIN

创建线条部件:

lv_obj_t *line = lv_line_create(parent);

设置线条坐标点:

static lv_point_t line_points[] = {{15,5}, {25,20}, {5,20}, {15,5}};
lv_line_set_points(line, line_points, 4);

设置线条样式:

lv_obj_set_style_line_width(line, 8, LV_PART_MAIN);        /* 设置宽度 */
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);   /* 设置圆角 */

设置y轴反转:

lv_line_set_y_invert(line, true);

Tips:第42讲 部件篇-线条部件_哔哩哔哩_bilibili演示了正弦波的产生函数。

LVGL图片部件

图片部件可用于图片显示、功能界面优化、背景优化等。

图片部件组成部分:

        主体LV_PART_MAIN

创建图片部件:

lv_obj_t *img = lv_img_create(parent);

设置图片源(图片转数组工具:LVGL官网-Tools-Image converter):

LV_IMG_DECLARE(img_bird);            /* 声明图片 */
lv_img_set_src(img, &img_bird);      /* 设置图片源 */

设置图片偏移:

lv_img_set_offset_x(img, 100);    /* x轴偏移100 */
lv_img_set_offset_y(img, 20);     /* y轴偏移20 */

图片重新着色:

lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN);
lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);

设置图片缩放、旋转:

lv_img_set_zoom(img, 512);     /* 放大2倍 */
lv_img_set_angle(img, 900);    /* 顺时针方向旋转90° */

设置中心点:

lv_obj_update_layout(img);    /* 更新图片布局信息 */
lv_img_set_pivot(img, 0,0);  /* 设置中心点 */

LVGL色环部件(V9无)

在UI设计中,色环部件一般用作颜色选择器。

色环部件组成部分:

        主体LV_PART_MAIN

        旋钮LV_PART_KNOB

创建色环部件:

lv_obj_t *cw = lv_colorwheel_create(parent, knob_recolor);

设置当前选中颜色:

lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));

获取当前选中颜色:

lv_colorwheel_get_rgb(cw);
static lv_obj_t *obj;static void event_cb(lv_event_t *e)
{lv_obj_t *target = lv_event_get_target(e);lv_obj_set_style_bg_color(obj, lv_colorwheel_get_rgb(target), LV_PART_MAIN);
}obj = lv_obj_create(lv_src_act());
lv_obj_add_event_cb(cw, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

设置色环模式:

enum{LV_COLORWHEEL_MODE_HUE,            /* 色相 */LV_COLORWHEEL_MODE_SATURATION,     /* 饱和度 */LV_COLORWHEEL_MODE_VALUE,          /* 明度 */
};lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_...);
lv_colorwheel_set_mode_fixed(cw, true);                /* 固定色环模式 */

LVGL按钮矩阵部件

按钮矩阵部件可以在不同的行和列中显示多个轻量级按钮。

按钮矩阵部件组成部分:

        主体LV_PART_MAIN

        按钮LV_PART_ITEMS

创建按钮矩阵部件:

lv_obj_t *btnm = lv_btnmatrix_create(parent);

设置按钮数量、文本:

static const char *map[] = {"btn1", "\n", "btn2","btn3",""};    /* 定义按钮数组,最后一个元素必须为空 */
lv_btnmatrix_set_map(btnm, map);                                /* 设置按钮 */

设置按钮相对宽度(默认为1):

lv_btnmatrix_set_btn_width(btnm, id, width);    /* 索引(id)从0开始,宽度1~7(默认为1) */

获取按钮索引、文本:

lv_btnmatrix_get_selected_btn(btnm);    /* 获取索引 */
lv_btnmatrix_get_btn_text(btnm, id);    /* 获取文本 */
static void event_cb(lv_event_t *e)
{uint8_t id;lv_obj_t *target = lv_event_get_target(e);id = lv_btnmatrix_get_selected_btn(target);printf("%d %s\n", id, lv_btnmatrix_get_btn_text(target, id));
}lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

设置、清除按钮属性:

enum
{LV_BTNMATRIX_CTRL_HIDDEN,        /* 隐藏 */LV_BTNMATRIX_CTRL_DISABLED,      /* 失能 */LV_BTNMATRIX_CTRL_CHECKABLE,     /* 允许状态切换 */LV_BTNMATRIX_CTRL_RECOLOR,       /* 允许文本重新着色,#ff0000 btn1# */
};lv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL...);        /* 设置单个按钮属性 */
lv_btnmatrix_clear_btn_ctrl(btnm, id, LV BTNMATRIX CTRL ..);      /* 清除单个按钮属性 */
lv_btnmatrix_set_btn_ctrl_all(btnm, LV BTNMATRIX CTRL....);       /* 设置所有按钮属性 */

设置单次选中属性:

lv_btnmatrix_set_one_checked(btnm, true);    /* 注意:需要先设置允许状态切换属性 */

LVGL文本区域部件

文本区域部件即文本输入框,用户可以在其中输入文本内容。

文本区域部件组成部分:

        主体LV_PART_MAIN

        滚动条LV_PART_SCROLLBAR

        所选文本LV_PART_SELECTED

        光标LV_PART_CURSOR

        占位符TEXTAREA_PLACEHOLDER

创建文本区域部件:

lv_obj_t *ta = lv_textarea_create(parent);

添加文本:

lv_textarea_add_char(ta, 'A');        /* 添加一个字符到当前光标处 */
lv_textarea_add_text(ta, "BCDEF");    /* 添加字符串到当前光标处 */lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());    /* 创建键盘部件 */
lv_keyboard_set_textarea(keyboard, ta);                   /* 关联键盘和文本区域部件 */

设置光标位置:

lv_textarea_set_cursor_pos(ta, 0);    /* 0:最左侧,LV_TEXTAREA_CURSOR_LAST:最右侧 */

删除文本:

lv_textarea_del_char(ta);            /* 删除光标左侧的一一个字符 */
lv_textarea_del_char_forward(ta);    /* 删除光标右侧的一个字符 */

设置模式:

lv_textarea_set_one_line(ta, true);            /* 单行模式 */
lv_textarea_set_password_mode(ta, true);       /* 密码模式(隐藏输入的内容)*/
lv_textarea_set_password_show_time(ta, 100);   /* 密码显示时间 */

限制字符输入:

lv_textarea_set_accepted_chars(ta, "0123456789");    /* 限制接收的字符 */
lv_textarea_set_max_length(ta, 6);                   /* 限制字符长度 */

设置占位符:

lv_textarea_set_placeholder_text(ta, "password");    /* 提示输入密码 "/

获取文本:

const char *txt = lv_textarea_get_text(ta);    /* 获取文本框文本 */
static void event_cb(lv_event_t *e)
{lv_obj_t *target = lv_event_get_target(e);const char *txt = lv_textarea_get_text(target);if(strcmp(txt, "123456") == 0){printf("pass \n");}printf("%s \n", txt);
}lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

对比文本内容:

strcmp(const char *s1, const char *s2);    /* 当s1=s2时,返回0 */

LVGL键盘部件

键盘部件可用于输入文本内容,其本质上就是一个特殊的按钮矩阵。

键盘部件组成部分:

        主体LV_PART_MAIN

        按钮LV_PART_ITEMS

创建键盘部件:

lv_obj_t *kb = lv_keyboard_create(parent);

关联文本框:

lv_obj_t *ta = lv_textarea_create(lv_scr act());    /* 创建文本区域部件 */
lv_keyboard_set_textarea(kb, ta);                   /* 关联键盘和文本区域部件 */

设置按键弹窗:

lv_keyboard_set_popovers(kb, true);    /* 允许按键弹窗提示 */

设置键盘模式:

lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);    /* 数字键盘模式 */

这篇关于LVGL圆弧、线条、图片、色环、按钮矩阵、文本区域、键盘部件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1009867

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

Go语言如何判断两张图片的相似度

《Go语言如何判断两张图片的相似度》这篇文章主要为大家详细介绍了Go语言如何中实现判断两张图片的相似度的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 在介绍技术细节前,我们先来看看图片对比在哪些场景下可以用得到:图片去重:自动删除重复图片,为存储空间"瘦身"。想象你是一个

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

详解如何使用Python从零开始构建文本统计模型

《详解如何使用Python从零开始构建文本统计模型》在自然语言处理领域,词汇表构建是文本预处理的关键环节,本文通过Python代码实践,演示如何从原始文本中提取多尺度特征,并通过动态调整机制构建更精确... 目录一、项目背景与核心思想二、核心代码解析1. 数据加载与预处理2. 多尺度字符统计3. 统计结果可

C/C++中OpenCV 矩阵运算的实现

《C/C++中OpenCV矩阵运算的实现》本文主要介绍了C/C++中OpenCV矩阵运算的实现,包括基本算术运算(标量与矩阵)、矩阵乘法、转置、逆矩阵、行列式、迹、范数等操作,感兴趣的可以了解一下... 目录矩阵的创建与初始化创建矩阵访问矩阵元素基本的算术运算 ➕➖✖️➗矩阵与标量运算矩阵与矩阵运算 (逐元

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现