【LVGL事件(Events)】事件在不同组件上的应用(一)

2023-10-31

点击、滑动、输入、数字改变等等都可触发事件。事件就是针对不同的操作做出相对应的反应。

最近看到组态屏,这玩意开发起来好像挺简单的!!哈哈哈!!研究完LVGL的事件就看看这个。

【LVGL事件(Events)】事件代码_喜暖知寒的博客-CSDN博客LVGL的事件代码介绍https://blog.csdn.net/qq_41650023/article/details/125991887

本篇文章,主要是想了解滑块、下拉列表、键盘等这些部件的事件。

本篇文章主要是依托于官网给出的例子,分析其应用的 API 。

如果有些介绍补全,后续会继续更新添加的!目前只是能用就可。


例子

看一个官网提供的例子:

static void event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    lv_obj_t * label = lv_event_get_user_data(e);    // 读取到标签对象

    switch(code) {
    case LV_EVENT_PRESSED:    // 按下
        lv_label_set_text(label, "The last button event:\nLV_EVENT_PRESSED");
        break;
    case LV_EVENT_CLICKED:    // 按下且松开
        lv_label_set_text(label, "The last button event:\nLV_EVENT_CLICKED");
        break;
    case LV_EVENT_LONG_PRESSED:    // 按下指定多少时间
        lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED");
        break;
    case LV_EVENT_LONG_PRESSED_REPEAT:    // 类似上面但又不同
        lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED_REPEAT");
        break;
    default:
        break;
    }
}


void lv_example_event_2(void)
{
    lv_obj_t * btn = lv_btn_create(lv_scr_act());    // 创建按钮对象
    lv_obj_set_size(btn, 100, 50);
    lv_obj_center(btn);

    lv_obj_t * btn_label = lv_label_create(btn);     // 创建标签
    lv_label_set_text(btn_label, "Click me!");
    lv_obj_center(btn_label);

    lv_obj_t * info_label = lv_label_create(lv_scr_act());    //创建标签
    lv_label_set_text(info_label, "The last button event:\nNone");

    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_ALL, info_label);    // btn的事件,并传入标签对象
}

不同的显示状况:


圆弧

这个百分值问题,就用上了 事件

static void value_changed_event_cb(lv_event_t * e);

void lv_example_arc_1(void)
{
    lv_obj_t * label = lv_label_create(lv_scr_act());

    /*Create an Arc*/
    lv_obj_t * arc = lv_arc_create(lv_scr_act());
    lv_obj_set_size(arc, 150, 150);
    lv_arc_set_rotation(arc, 135);
    lv_arc_set_bg_angles(arc, 0, 270);
    lv_arc_set_value(arc, 10);
    lv_obj_center(arc);
    
    /* 创建事件,值被更改时触发事件 */
    lv_obj_add_event_cb(arc, value_changed_event_cb, LV_EVENT_VALUE_CHANGED, label);

    /*Manually update the label for the first time*/
    lv_event_send(arc, LV_EVENT_VALUE_CHANGED, NULL);
}

static void value_changed_event_cb(lv_event_t * e)
{
    lv_obj_t * arc = lv_event_get_target(e);    // 获取触发事件的部件(对象)
    lv_obj_t * label = lv_event_get_user_data(e);    // 得到label标签对象

    lv_label_set_text_fmt(label, "%d%%", lv_arc_get_value(arc));    // 设置label的值

    /*Rotate the label to the current position of the arc*/
    /* 将对象label固定在圆弧当前位置上 */
    lv_arc_rotate_obj_to_angle(arc, label, 25);
}

这里的事件函数中用到了一个函数:通过此函数可设置音量、亮度等等值!!

直接用个全局变量就能改其他的东西了!!!

/* 获取圆弧的值
 * @ obj:指向弧对象的指针
 * return:圆弧的值
 */
int16_t lv_arc_get_value ( const lv_obj_t * obj )

滑块 

 看一个两端都能控制的滑块,这样就单个划的话也能够学会!

static void slider_event_cb(lv_event_t * e);

void lv_example_slider_3(void)
{
    /*Create a slider in the center of the display*/
    lv_obj_t * slider;
    slider = lv_slider_create(lv_scr_act());
    lv_obj_center(slider);

    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);    // 模式设置
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);    // 右边界
    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);    // 左边界

    /* 创建事件,任何动作可触发 */
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);    
    lv_obj_refresh_ext_draw_size(slider);    // 刷新绘图大小
}

static void slider_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    lv_obj_t * obj = lv_event_get_target(e);    // 获取触发事件的部件(对象)

    /*Provide some extra space for the value*/
    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {    // 获取对象周围所需的额外绘制区域
        lv_event_set_ext_draw_size(e, 50);
    }
    else if(code == LV_EVENT_DRAW_PART_END) {    // 完成绘制部分
        lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
        if(dsc->part == LV_PART_INDICATOR) {    // 指标
            char buf[16];
            lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));

            lv_point_t label_size;    // 尺寸结构体
            lv_txt_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
            lv_area_t label_area;    // 位置结构体
            label_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - label_size.x / 2;
            label_area.x2 = label_area.x1 + label_size.x;
            label_area.y2 = dsc->draw_area->y1 - 10;
            label_area.y1 = label_area.y2 - label_size.y;

            lv_draw_label_dsc_t label_draw_dsc;
            lv_draw_label_dsc_init(&label_draw_dsc);
            label_draw_dsc.color = lv_color_hex3(0x888);
            lv_draw_label(dsc->draw_ctx, &label_draw_dsc, &label_area, buf, NULL);
        }
    }
}

和圆弧类似的API

/* 获取主旋钮的值
 * @ obj:指向滑块的指针
 * return:滑块主旋钮的值
 */
static inline int32_t lv_slider_get_value(const lv_obj_t *obj)

复选框


static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {    // 当复选框备切换时
        const char * txt = lv_checkbox_get_text(obj);    // 获取复选框的文本
        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
        LV_LOG_USER("%s: %s", txt, state);
    }
}

void lv_example_checkbox_1(void)
{
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * cb;
    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Apple");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Banana");
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(cb, "Lemon");
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_scr_act());
    lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_checkbox_set_text(cb, "Melon\nand a new line");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    lv_obj_update_layout(cb);
}

用到的API

/* 获取复选框的文本
 * @ obj:指向复选框对象的指针
 * return:指向复选框文本的指针
 */
const char * lv_checkbox_get_text ( const lv_obj_t * obj ) 
/* 获取对象的状态
 * @ obj:指向对象的指针
 * return:状态(lv_state_t)
 */
lv_state_t lv_obj_get_state ( const lv_obj_t * obj )

下拉列表

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {    // 对象的值被更改
        char buf[32];
        lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
        LV_LOG_USER("Option: %s", buf);
    }
}

void lv_example_dropdown_1(void)
{

    /*Create a normal drop down list*/
    lv_obj_t * dd = lv_dropdown_create(lv_scr_act());
    lv_dropdown_set_options(dd, "Apple\n"
                            "Banana\n"
                            "Orange\n"
                            "Cherry\n"
                            "Grape\n"
                            "Raspberry\n"
                            "Melon\n"
                            "Orange\n"
                            "Lemon\n"
                            "Nuts");

    lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 20);    // 对齐
    lv_obj_add_event_cb(dd, event_handler, LV_EVENT_ALL, NULL);    // 事件
}

用到的 API

/* 以字符串形式获取当前选定的选项
 * @ obj:指向下拉对象的指针
 * @ buf:指向存储字符串的数组的指针
 * @ buf_size:buf大小以字节为单位
 */
void lv_dropdown_get_selected_str ( const lv_obj_t * obj , char * buf , uint32_t buf_size ) 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【LVGL事件(Events)】事件在不同组件上的应用(一) 的相关文章

  • 如何使用 HTML 5 实现类似 gmail 的文件上传/附件

    我记得一些支持 Ajax 之类的选项 无回发世界 文件上传 隐藏的 iframe 使用 flash 对象 尽管我仍然好奇为什么使用 SWF 以及它提供什么优势 然而 通过查看博客 HTML 5 似乎很有前途 我尝试了一些小示例 它确实有效
  • Angular UI select:从远程服务获取数据

    我正在使用角度用户界面选择 https github com angular ui ui select https github com angular ui ui select 我查看了演示的可用位置这个笨蛋 http plnkr co
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 我怎样才能让这个脚本在 WordPress 上运行?

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 如何转义 HTML 字符?在.NET中-->“

    如何在 NET 中转义 HTML 字符 我正在从 json 字符串中获取 html 并在标题中得到 amp quot more text 看起来我需要做两次才能得到 amp quot 成为 quot 那么它就是一个 如何转义 NET 中的所
  • HTML 代码中的 PHP [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我用 HTML 代码编写了 PHP div div 但这出现在输出页面中 else print 我怎样才能让PHP执行 你的文件有一个 p
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • Python:如何下载 blob url 视频?

    我想使用 Python 脚本从网站下载视频 但是该视频由如下 Blob URL 提供
  • 无法在jspdf中加载多个图像

    我正在尝试加载动态生成的多个图像 我想将这些图像转换为 PDF 格式 HTML 代码如下
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • 如果一个设置多个html标签的id属性值相同,会发生什么?

    我最近看到一个html页面 我认为几个html标签的id是相同的 然后我意识到id是唯一的 但这提出了一个问题 如果页面实际上使用了多个标签 会发生什么 正如我听说每个 html 标签 如果有的话 的 id 属性必须是唯一的 现在我想知道如
  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i

随机推荐

  • GitHub上9款美观大气的后台管理系统,基于但不限于vue、react、Angular、Bootstrap框架

    文章目录 1 vue element admin 2 D2Admin 3 Vue admin better 4 AdminLTE 5 Ant Desiong Pro 6 Tabler 7 ngx admin 8 Gentelella 9 b
  • 桥接与NAT连接的区别

    一 网络模式 我们首先说一下VMware的几个虚拟设备 VMnet0 用于虚拟桥接网络下的虚拟交换机 VMnet1 用于虚拟Host Only网络下的虚拟交换机 VMnet8 用于虚拟NAT网络下的虚拟交换机 VMware NetworkA
  • BUUCTF [MRCTF2020]Ez_bypass

    BUUCTF MRCTF2020 Ez bypass 记录一次BUUCTF做题过程 分析 实操 记录一次BUUCTF做题过程 首先打开题目 将其还原 大概是这样 I put something in F12 for you
  • OpenBrush 工程项目源码学习(一):在macOS编译至Oculus Quest 2运行

    开发环境 MacBook Pro 2017 macOS Big Sur Version 11 6 Unity 2021 3 4 f1 步骤 Step 1 访问 https github com icosa gallery open brus
  • kafka_2.12-3.1.0集群安装配置(zookeeper-3.6.3)

    文章目录 安装kafka 2 12 3 1 0 安装环境 安装步骤 1 下载安装包 2 修改配置文件 修改server properties 添加环境变量 3 启动kafka 安装kafka 2 12 3 1 0 安装环境 CentOS版本
  • 【笔记:模拟MOS集成电路】带隙基准(基本原理+电流模+电压模电路详解)

    在模拟电路中 广泛的包含电压基准和电流基准 而且电路增益 输出噪声和功耗等参数常与基准直接相关 这种基准一般是直流量 要求基准与电源 工艺参数以及温度无关 PVT 而下面要讨论的带隙基准 主要作用就是建立一个与温度无关的基准源 产生基准的目
  • rest以及restful的基本理解

    传统下的API接口 http是目前在互联网上使用最多的协议 没有之一 可是http的创始人一直都觉得 在过去10几年来 所有的人都在错误的使用Http 这句话怎么说呢 如果说你要删除一个数据 以往的做法通常是 delete id 如果你要更
  • 电脑抓屏按钮使用:

    键盘上 Print Screen Sys Rq 键的作用是屏幕抓图 用法一 按 Print Screen SysRq 一下 对当前屏幕进行抓图 就是整个显示屏的内容 用法二 先按住 Alt 键 再按 Print Screen SysRq 键
  • HBase高手之路1-Hbase简介

    文章目录 HBase高手之路1 Hbase简介 一 什么是HBase 1 HBase简介 2 HBase的发展过程 二 HBase特点 1 海量存储 2 列式存储 3 极易扩展 4 高并发 5 稀疏 6 强一致性读 写 7 自动分块 8 自
  • Web服务器的搭建

    一 Web服务器简介 Web服务器的基本功能是提供web信息浏览服务 主要涉及的协议是HTTP协议 二 Web服务器的搭建 1 安装httpd包 2 关闭防火墙 3 启动httpd服务 4 备份conf文件 5 配置浏览器网页读取的根目录
  • 微服务相关面试要点

    什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置 properties或yml文件 创建独立的spring引用程序 main方法运行 嵌入的Tomcat 无需部署war文件 简化maven
  • python读视频文件_python读取和保存视频文件

    如何用python实现视频关键帧提取并保存为图片 也许你会觉得对小编多做一点事你会觉得你很爽 可是在小编看来这是不屑的 import cv2vc cv2 VideoCapture Test avi 读入视频文件c 1if vc isOpen
  • linux安装anaconda

    linux安装anaconda 1 下载anaconda Conda 是一个强大的包管理器和环境管理器 您可以在 Windows 的 Anaconda Prompt 或 macOS 或 Linux 的终端窗口中与命令行命令一起使用 换句话说
  • Linux Socket网络编程 循环互相通信

    一 效果展示 持续互相通信 上面是服务端 下面为客户端加上ip 最后客户端输入exit退出 二 代码展示 服务端 server c include
  • Leetcode刷题:空间缩减思想

    文章目录 167 两数之和 II 输入有序数组 11 盛最多水的容器 240 搜索二维矩阵 II 11 盛最多水的容器 暴力 空间缩减 证明 二分 167 两数之和 II 输入有序数组 167 两数之和 II 输入有序数组 1 二分 cla
  • R语言在图上标出点坐标_R语言做图plot参数

    R语言做图plot参数函数名称 plot 用 途 作图 用 法 plot x y 参 数 1 符号和线条 pch 指定绘制点所使用的符号 取值范围 0 24 其中4是 差号 20是 点 cex 指定符号的大小 cex是一个数值 表示pch的
  • NVIDIA GeFprce GTX 1080 Ti NVIDIA图形驱动程序版本466.77下载和安装

    前言 在win7下 NVIDIA GeFprce GTX 1080 Ti NVIDIA图形驱动程序版本466 77下载和安装 但安装时系统报错 缺少KB4474419和KB4490628补丁 解决 NVIDIA GeFprce GTX 10
  • win10解决COM Surrogate问题

    Fix Problems with COM Surrogate on Windows 10 For various PC problems we recommend to use this tool This tool will repai
  • NPN和PNP 的电流方向 、大小关系 、电压偏置

    电流流向 NPN三极管 电流方向为基极流向发射极 驱动电流从基极流入 集电极流向发射极 PNP三极管 电流方向为发射极流向基极 驱动电流从基极流出 发射极流向集电极 PNP的电流方向是从下往上流的 但是在实际电路图中 大多还是发射极连接高电
  • 【LVGL事件(Events)】事件在不同组件上的应用(一)

    点击 滑动 输入 数字改变等等都可触发事件 事件就是针对不同的操作做出相对应的反应 最近看到组态屏 这玩意开发起来好像挺简单的 哈哈哈 研究完LVGL的事件就看看这个 LVGL事件 Events 事件代码 喜暖知寒的博客 CSDN博客LVG