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);    /* 数字键盘模式 */

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/651646.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

实现 Vue 标签页切换效果的组件开发

实现 Vue 标签页切换效果的组件开发

在本次开发中，我们将实现一个 Vue 组件，用于展示和切换标签页。 背景有移动动画效果 该组件将具有以下功能： 标签页左右滚动点击标签页切换内容关闭指定标签页支持多种标签页风格 以下是实现该组件的具体步骤： 创建 Vue 组件…
阅读更多...
APM2.8下载固件的方法（两种办法详解）

APM2.8下载固件的方法（两种办法详解）

1.把APM飞控用安卓手机的USB线插入电脑。 选择COM口，不要选择auto，如果你没有COM口说明你驱动安装有问题。 波特率115200。点击相应的图标就可以下载固件到飞控板。 请注意：烧录APM必须选择INSTALL FIRMWARE LEAGACY,第一个是用于刷pixhawk的…
阅读更多...
数据泄露防护：企业如何通过软件限制U盘使用

数据泄露防护：企业如何通过软件限制U盘使用

在数字化办公时代，数据安全已成为企业运营中的一个关键议题。U盘作为一种便携式的数据存储和传输工具，其使用在企业内部非常普遍。然而，U盘的不当使用也可能导致严重的数据泄露问题。本文将探讨企业如何通过软件解决方案，有效限制…
阅读更多...
2024 年科技裁员综合清单

2024 年科技裁员综合清单

推荐阅读： 独立国家的共同财富 美国千禧一代的收入低于父辈 创造大量就业机会却毁掉了财富 这四件事是创造国家财富的关键 全球财富报告证实联盟自始至终无能 美国人已陷入无休止债务循环中，这正在耗尽他们的财务生命 2024 年，科技行业…
阅读更多...
告别低效率||智能BI财务分析软件

告别低效率||智能BI财务分析软件

在当今信息爆炸的时代，财务数据作为企业运营的核心，其处理和分析的效率直接关系到企业的决策速度和市场竞争力。奥威BI软件凭借其卓越的性能和智能化的分析功能，为企业提供了一套高效、准确的财务分析解决方案。 奥威BI软件在财务分析中的优…
阅读更多...
行为设计模式之职责链模式

行为设计模式之职责链模式

文章目录 概述原理代码实现小结 概述 职责链模式(chain of responsibility pattern) 定义: 避免将一个请求的发送者与接收者耦合在一起,让多个对象都有机会处理请求.将接收请求的对象连接成一条链,并且沿着这条链传递请求,直到有一个对象能够处理它为止. 在职责链模式中&…
阅读更多...
【Mybatis】映射文件获取新增记录的id

【Mybatis】映射文件获取新增记录的id

我们在讲JDBC的时候讲过在插入新数据值的时候需要获得到自动生成的那个主键id的值 ①获取PreparedStatement的对象的时候 PreparedStatement st conn.prepareStatement(sql,Statement.RETURN_GENERATED_KEYS ); ②在执行SQL语句后 st.executeUpdate();ResultSet rs st.ge…
阅读更多...
Springboot项目——博客平台

Springboot项目——博客平台

前言：为巩固之前学习的知识，同时锻炼自己的代码能力，项目经验，熟悉前后端交互方式等，特此完成一个博客平台系统。（总之，为了学习，为了进步） 博客平台：本项目…
阅读更多...
QQ名片满级会员装x助手HTML源码

QQ名片满级会员装x助手HTML源码

源码介绍 QQ名片满级会员展示生成HTML源码，源码由HTMLCSSJS组成，双击html文件可以本地运行效果，也可以上传到服务器里面，保存素材去选择QQ个性名片-选择大图模板-把图上传照片墙即可 源码效果 源码下载 蓝奏云：http…
阅读更多...
如何远程访问Redis？

如何远程访问Redis？

远程访问Redis是一种常见的需求，特别是在分布式系统或跨地域网络中。通过远程访问，我们可以轻松地对远程的Redis数据库进行操作和管理。 天联保障数据安全 对于远程访问Redis的安全性问题，我们可以借助天联来保障数据的安全。天联是一种基于…
阅读更多...
mybatisplus填充公共字段MetaObjectHandler后不生效解决方式

mybatisplus填充公共字段MetaObjectHandler后不生效解决方式

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import org.apache.ibatis.reflection.MetaObject; import org.springframework.context.annotation.Primary; import org.springframework.stereotype.Component;import java.util.Date;/*** 拦截处理公共字…
阅读更多...
开发一个comfyui的自定义节点

开发一个comfyui的自定义节点

文章目录 目标功能开发环境comfyui自定义节点的实现原理仓库地址完整代码目标功能 开发一个comfyui的自定义节点，该节点的功能是：可以对comfyui工作流中最终输出的图像添加一些自定义文案，且可以指定文案在图像上的位置、文案的字体样式、字体大小、字体颜色等。最终效果如…
阅读更多...
全网讲的最详细的Docker镜像分层存储原理

全网讲的最详细的Docker镜像分层存储原理

先说结论，容器镜像分层存储图示 欢迎关注 实验环境准备 当前实验docker版本24.0.7如下，当前docker版本使用overlay2机制存储镜像 Client: Docker Engine - CommunityVersion: 24.0.7API version: 1.43Go version: go1.20.10…
阅读更多...
YOLOv8+PyQt5西红柿成熟度检测系统完整资源集合（yolov8模型，从图像、视频和摄像头三种路径识别检测，包含登陆页面、注册页面和检测页面）

YOLOv8+PyQt5西红柿成熟度检测系统完整资源集合（yolov8模型，从图像、视频和摄像头三种路径识别检测，包含登陆页面、注册页面和检测页面）

西红柿成熟度检测（https://mbd.pub/o/bread/mbd-ZpWbk5ly）_哔哩哔哩_bilibili 资源包含可视化的西红柿成熟度检测系统，基于最新的YOLOv8训练的西红柿成熟度检测模型，和基于PyQt5制作的可视化西红柿成熟度检测系统，包含…
阅读更多...
系统思考—战略沙盘推演咨询服务

系统思考—战略沙盘推演咨询服务

今日与JSTO团队一起学习了《战略沙盘推演咨询服务》。通过沙盘体验，我深刻感受到组织与战略就像一张皮的正反两面。在转型过程中，即使战略非常明确，团队成员由于恐惧和顾虑，往往不愿意挑战新的业务，从而难以实现战略目…
阅读更多...
创新实训2024.05.28日志：记忆化机制、基于MTPE与CoT技术的混合LLM对话机制

创新实训2024.05.28日志：记忆化机制、基于MTPE与CoT技术的混合LLM对话机制

1. 带有记忆的会话 1.1. 查询会话历史记录 在利用大模型自身能力进行对话与解答时，最好对用户当前会话的历史记录进行还原，大模型能够更好地联系上下文进行解答。 在langchain chat chat的chat函数中，通过实现langchain框架提供的ChatMemo…
阅读更多...
虚拟化技术 分布式资源调度

虚拟化技术 分布式资源调度

一、实验内容 实现分布式资源调度 二、实验主要仪器设备及材料 安装有64位Windows操作系统的台式电脑或笔记本电脑，建议4C8G或以上配置已安装VMware Workstation Pro已安装Windows Server 2008 R2 x64已安装vCenter Server 三、实验步骤 将主机esxi1和esxi2加入…
阅读更多...
【找出缺失的观测数据】python

【找出缺失的观测数据】python

思路： 主要在于分配剩余的部分分配问题 代码： class Solution:def missingRolls(self, rolls: List[int], mean: int, n: int) -> List[int]:m len(rolls)total_sum (n m) * meantoset total_sum - sum(rolls)# 检查 toset 是否在可能的范围内i…
阅读更多...
R可视化：可发表的prism点图

R可视化：可发表的prism点图

介绍 可发表的prism点图 加载R包 knitr::opts_chunk$set(echo = TRUE, message = FALSE, warning = FALSE) library(tidyverse) library(ggpubr) library(ggprism)rm(list = ls()) options(stringsAsFactors = F)导入数据 data("iris")head(iris)处理数据 plotd…
阅读更多...
git stash 命令

git stash 命令

线上版本出现了bug，我们应该放下手头上的开发工作先将线上的bug修复，这个时候dev分支下的改动怎么处理？ 是向分支行上提交代码还是直接切换到master分支下？ 首先我们的开发工作还未完成，就把代码提交到分支上&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023