lvgl图形化设计工具GUI Guider结合使用

news2024/9/29 15:30:50

前言

  1. 上篇博客整合了lvgl到项目中，采用的是自己编写源码的方式，实现了个简单的界面。
  2. 实际过程中一般情况开发界面都借助设计工具，这里使用的是gui guider来进行示例记录

项目结构（生成代码路径依然放到项目路径下）

在这里插入图片描述

CMakeLists配置(改为引用LVGL的源码)

file(GLOB_RECURSE EmWinSrc
        EmWin/Source/*.c
        EmWin/Resource/*.c
)


file(GLOB_RECURSE LVGL_SRC

        LVGL/Code/*.c
)

set(LVGL_INC
        LVGL/Code/custom
        LVGL/Code/generated
        LVGL/Code/generated/guider_fonts
        LVGL/Code/generated/guider_customer_fonts

)


target_sources(${PROJECT_NAME}.elf
        PRIVATE
        ${LVGL_SRC}

)

target_include_directories(${PROJECT_NAME}.elf
        PUBLIC
        ${LVGL_INC}
)

LVGL任务线程调整

在这里插入图片描述

/*
 * Copyright (c) 2024-2024，shchl
 *
 * SPDX-License-Identifier: Apache-2.0
 *
 * Change Logs:
 * Date           Author       Notes
 * 2024-4-20     shchl   first version
 */
#include "includes.h"
#include "lv_api_map.h"



#if 1

#define APP_TASK_GUI_LVGL_PRIO 15
#define APP_TASK_GUI_LVGL_STK_SIZE 4096


/*
*******************************************************************************************************
*                               外部引入变量
*******************************************************************************************************
*/

/*
*******************************************************************************************************
*                               变量
*******************************************************************************************************
*/
TX_THREAD gui_lvgl_thread;
VOID *gui_thread_stack_area;
/*
*********************************************************************************************************
*                                       静态全局变量
*********************************************************************************************************
*/



/*
*********************************************************************************************************
*                                      函数声明
*********************************************************************************************************
*/
static VOID gui_lvgl_thread_entry(ULONG input);

/*
*********************************************************************************************************
*                                      外部函数
*********************************************************************************************************
*/
/**
 * @brief cpu 状态任务
 * @param first_thread 第一个启动的任务线程首地址
 */
int tx_task_gui_lvgl_create() {
    UINT status;
    gui_thread_stack_area = app_malloc(APP_TASK_GUI_LVGL_STK_SIZE);

    if(!gui_thread_stack_area){

        tx_printf("app malloc error\r\n");
        return -1;
    }

    status = tx_thread_create(&gui_lvgl_thread,              /* 任务控制块地址 */
                              "gui lvgl thread",               /* 任务名 */
                              gui_lvgl_thread_entry,                  /* 启动任务函数地址 */
                              0,                             /* 传递给任务的参数 */
                              gui_thread_stack_area,            /* 堆栈基地址 */
                              APP_TASK_GUI_LVGL_STK_SIZE,    /* 堆栈空间大小 */
                              APP_TASK_GUI_LVGL_PRIO,        /* 任务优先级*/
                              APP_TASK_GUI_LVGL_PRIO,        /* 任务抢占阀值 */
                              TX_NO_TIME_SLICE,               /* 不开启时间片 */
                              TX_AUTO_START);                 /* 创建后立即启动 */
    if (status) {
        tx_printf("create error:%d\r\n",status);
    }

    return TX_SUCCESS;
}

TX_THREAD_EXPORT(tx_task_gui_lvgl_create);

/*
*********************************************************************************************************
*                                      内部函数
*********************************************************************************************************
*/
#include "gui_guider.h"
#include "events_init.h"
lv_ui guider_ui;

static VOID gui_lvgl_thread_entry(ULONG input) {
    setup_ui(&guider_ui);
    events_init(&guider_ui);

    while (1) {
        lv_task_handler();
        tx_thread_sleep(5);
    }

}

#endif

测试界面

在这里插入图片描述

通过软件添加3个事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

代码事件中添加日志

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

将移动代码的获取新值的回调函数替换成自己的（原有的基础上加个输出）

/*
 * Copyright 2024 NXP
 * SPDX-License-Identifier: MIT
 * The auto-generated can only be used on NXP devices
 */

#include "events_init.h"
#include <stdio.h>
#include "lvgl.h"

void events_init(lv_ui *ui) {
}

int32_t lv_anim_path_ease_in2(const lv_anim_t *a);

static void screen_1_btn_1_event_handler(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_anim_t screen_1_led_1_anim_x;
    lv_anim_t screen_1_led_1_anim_y;
    switch (code) {
        case LV_EVENT_CLICKED: {
            lv_obj_set_style_bg_color(guider_ui.screen_1_spangroup_1, lv_color_make(0xd2, 0x1e, 0x1e), LV_PART_MAIN);
            lv_obj_set_pos(guider_ui.screen_1_led_1, 0, 0);

            //Write animation: screen_1_led_1move in x direction
            lv_anim_init(&screen_1_led_1_anim_x);
            lv_anim_set_var(&screen_1_led_1_anim_x, guider_ui.screen_1_led_1);
            lv_anim_set_time(&screen_1_led_1_anim_x, 10000);
            lv_anim_set_exec_cb(&screen_1_led_1_anim_x, (lv_anim_exec_xcb_t) lv_obj_set_x);
            lv_anim_set_values(&screen_1_led_1_anim_x, lv_obj_get_x(guider_ui.screen_1_led_1), 0);
            lv_anim_set_path_cb(&screen_1_led_1_anim_x, &lv_anim_path_ease_in2);
            lv_anim_start(&screen_1_led_1_anim_x);

            //Write animation: screen_1_led_1move in y direction
            lv_anim_init(&screen_1_led_1_anim_y);
            lv_anim_set_var(&screen_1_led_1_anim_y, guider_ui.screen_1_led_1);
            lv_anim_set_time(&screen_1_led_1_anim_y, 10000);
            lv_anim_set_exec_cb(&screen_1_led_1_anim_y, (lv_anim_exec_xcb_t) lv_obj_set_y);
            lv_anim_set_values(&screen_1_led_1_anim_y, lv_obj_get_y(guider_ui.screen_1_led_1), 0);
            lv_anim_set_path_cb(&screen_1_led_1_anim_y, &lv_anim_path_ease_in2);
            lv_anim_start(&screen_1_led_1_anim_y);

            logInfo("screen_1_btn_1_event_handler");
        }
            break;
        default:
            break;
    }
}


static void screen_1_btn_2_event_handler(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_anim_t screen_1_led_1_anim_x;
    lv_anim_t screen_1_led_1_anim_y;
    switch (code) {
        case LV_EVENT_CLICKED: {
            lv_obj_set_pos(guider_ui.screen_1_led_1, 0, 0);

            //Write animation: screen_1_led_1move in x direction
            lv_anim_init(&screen_1_led_1_anim_x);
            lv_anim_set_var(&screen_1_led_1_anim_x, guider_ui.screen_1_led_1);
            lv_anim_set_time(&screen_1_led_1_anim_x, 10000);
            lv_anim_set_exec_cb(&screen_1_led_1_anim_x, (lv_anim_exec_xcb_t) lv_obj_set_x);
            lv_anim_set_values(&screen_1_led_1_anim_x, lv_obj_get_x(guider_ui.screen_1_led_1), 320);
            lv_anim_set_path_cb(&screen_1_led_1_anim_x, &lv_anim_path_ease_in2);
            lv_anim_start(&screen_1_led_1_anim_x);

            //Write animation: screen_1_led_1move in y direction
            lv_anim_init(&screen_1_led_1_anim_y);
            lv_anim_set_var(&screen_1_led_1_anim_y, guider_ui.screen_1_led_1);
            lv_anim_set_time(&screen_1_led_1_anim_y, 10000);
            lv_anim_set_exec_cb(&screen_1_led_1_anim_y, (lv_anim_exec_xcb_t) lv_obj_set_y);
            lv_anim_set_values(&screen_1_led_1_anim_y, lv_obj_get_y(guider_ui.screen_1_led_1), 480);
            lv_anim_set_path_cb(&screen_1_led_1_anim_y, &lv_anim_path_ease_in2);
            lv_anim_start(&screen_1_led_1_anim_y);

            tx_printf("screen_1_btn_2_event_handler\r\n");
        }
            break;
        default:
            break;
    }
}

// 自定义 lv_anim_path_ease_in
int32_t lv_anim_path_ease_in2(const lv_anim_t *a) {

    static int cnt = 0;
    if (cnt > 20) { // 刷新20次,打印一次,方便调试
        lv_coord_t x = lv_obj_get_x(guider_ui.screen_1_led_1);
        lv_coord_t y = lv_obj_get_y(guider_ui.screen_1_led_1);
        logInfo("(x,y)-->(%d,%d)", x, y);
        cnt = 0;
    } else {
        cnt += 1;
    }



    /*Calculate the current step*/
    uint32_t t = lv_map(a->act_time, 0, a->time, 0, LV_BEZIER_VAL_MAX);
    int32_t step = lv_bezier3(t, 0, 50, 100, LV_BEZIER_VAL_MAX);

    int32_t new_value;
    new_value = step * (a->end_value - a->start_value);
    new_value = new_value >> LV_BEZIER_VAL_SHIFT;
    new_value += a->start_value;

    return new_value;
}

void events_init_screen_1(lv_ui *ui) {
    lv_obj_add_event_cb(ui->screen_1_btn_1, screen_1_btn_1_event_handler, LV_EVENT_ALL, NULL);
    lv_obj_add_event_cb(ui->screen_1_btn_2, screen_1_btn_2_event_handler, LV_EVENT_ALL, NULL);
}

在这里插入图片描述

总结

  1. gui guider 基本上不做太复杂的逻辑设计，够用了。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Hack The Box-Runner

Hack The Box-Runner

总体思路 子域名扫描->CVE-2023-42793利用->获取敏感信息->user->端口转发->CVE-2024-21626利用->root 信息收集&端口利用 nmap -sSVC 10.10.11.13目标开放22、80、8000端口&#xff0c;这里先将runner.htb加入到hosts文件后&#xff0c;访问之 查看源…
阅读更多...
腾讯后端一面：当 TCP 建立连接之后，TCP 和 UDP 的实时性是不是就差不多了？

腾讯后端一面：当 TCP 建立连接之后，TCP 和 UDP 的实时性是不是就差不多了？

更多大厂面试内容可见 -> http://11come.cn 腾讯后端一面&#xff1a;当 TCP 建立连接之后&#xff0c;TCP 和 UDP 的实时性是不是就差不多了&#xff1f; 项目相关 面试官可能是 Go 方向的&#xff0c;我面试的是 Java 方向的&#xff0c;所以面试官也没有问我简历上的项…
阅读更多...
信号继电器HBDXH-200/1辅助电源110VDC 启动电压110VDC JOSEF约瑟

信号继电器HBDXH-200/1辅助电源110VDC 启动电压110VDC JOSEF约瑟

用途 适用于直流操作的继电保护和自动控制线路中&#xff0c;作为信号指示用&#xff0c;有多组动合保持触点。满足现场指示和遥信要求。 技术参数 启动信号额定值:直流电流型:10mA~4A. 直流电压型:220VDC、110VDC、48VDC、24VDC 辅助电源电压:220VDC、110VDC、220VAC、110…
阅读更多...
华为ensp中MSTP多网段传输协议(原理及配置命令)

华为ensp中MSTP多网段传输协议(原理及配置命令)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月22日15点29分 在华为ENSP中&#xff0c;MSTP&#xff08;多段传输协议&#xff09;是重要的生成树协议&#xff0c;它扩展了STP&#xff08;生成树协议&#xff09…
阅读更多...
舒适护眼模式：苹果手机字体大小怎么设置？

舒适护眼模式：苹果手机字体大小怎么设置？

在现代社会&#xff0c;人们对于手机的使用已经不再局限于通讯和娱乐&#xff0c;也逐渐成为了我们生活和工作中不可或缺的一部分。然而&#xff0c;长时间使用手机可能会对我们的视力造成一定程度的影响。 为了更好地保护视力健康&#xff0c;苹果手机提供了舒适护眼的模式&a…
阅读更多...
vue3项目使用＜img :src=““ /＞动态加载图片

vue3项目使用＜img :src=““ /＞动态加载图片

分享一下使用<img :src"" />动态加载图片时遇到的问题以及解决方法。 下面是部分页面代码&#xff0c;这里我使用了<img :src"itemc.headUrl" />来动态加载图片 这时遇到了问题&#xff0c;因为这里的itemc.headUrl是图片的相对路径&#xff…
阅读更多...
戴尔电脑怎么关闭开机密码？

戴尔电脑怎么关闭开机密码？

1.同时按键盘上是“window键”&#xff08;一般是键盘最下面一排第二个&#xff09;和“R键“&#xff0c;并在弹出的窗口输入“netplwiz”然后确定。 2.然后会弹出的“用户账户”窗口&#xff0c;接下来取消勾选“要使用本计算机&#xff0c;用户必须输入用户名和密码” 3.上面…
阅读更多...
RK3568 学习笔记 : 更改 u-boot spl 中的 emmc 的启动次序

RK3568 学习笔记 : 更改 u-boot spl 中的 emmc 的启动次序

环境 开发板&#xff1a; 【正点原子】 的 RK3568 开发板 ATK-DLRK3568 u-boot 版本&#xff1a;来自 【正点原子】 的 RK3568 开发板 Linux SDK&#xff0c;单独复制出来一份&#xff0c;手动编译 编译环境&#xff1a;VMware 虚拟机 ubuntu 20.04 问题描述 RK3568 默认 …
阅读更多...
Automated CNN approach

Automated CNN approach

图1有点简单 作者未提供代码
阅读更多...
Linux 内核设备树 ranges属性

Linux 内核设备树 ranges属性

今天有人问了我一下ranges属性&#xff0c;找了相关资料确认后&#xff0c;记录一下&#xff1a; 参考资料链接&#xff1a;让你完全理解linux内核设备树ranges属性地址转换 - vkang - 博客园 (cnblogs.com) ranges属性定义如下&#xff1a; ranges < local_address pa…
阅读更多...
学习笔记：Vue3（图片明天处理）

学习笔记：Vue3（图片明天处理）

文章目录 1.概述1.1定义1.2特性1.3组合式API 2.基本用例-项目搭建3.项目目录介绍3.1概述3.2查看文件 4.组合式API4.1概述4.2新的API风格4.2.1概述4.2.2写法4.2.3基本用例-Setup选项使用4.2.4基本用例-语法糖写法&#xff08;重点&#xff09;4.2.5执行时机4.2.6代码特点 4.3响应…
阅读更多...
nodejs在控制台打印艺术字

nodejs在控制台打印艺术字

const figlet require("figlet");figlet("SUCCESS", function (err, data) {if (err) {console.log("Something went wrong...");console.dir(err);return;}console.log(data);}); 参考链接&#xff1a; https://www.npmjs.com/package/figlet…
阅读更多...
制造数字化“管理套路”

制造数字化“管理套路”

在当今竞争激烈的市场环境中&#xff0c;制造企业始终关心三个核心问题&#xff1a;生产效率、产品质量、成本控制&#xff0c;所以许多企业渴望加强对生产过程的管理控制。 生产过程是一个相对复杂的过程&#xff0c;涉及到多个环节和因素。从原材料的采购到产品的设计、生产…
阅读更多...
【机器学习】各大模型原理简介

【机器学习】各大模型原理简介

目录 ⛳️推荐 前言 一、神经网络&#xff08;联结主义&#xff09;类的模型 二、符号主义类的模型 三、决策树类的模型 四、概率类的模型 五、近邻类的模型 六、集成学习类的模型 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风…
阅读更多...
一举颠覆Transformer！最新Mamba结合方案刷新多个SOTA，单张GPU即可处理140k

一举颠覆Transformer！最新Mamba结合方案刷新多个SOTA，单张GPU即可处理140k

还记得前段时间爆火的Jamba吗&#xff1f; Jamba是世界上第一个生产级的Mamba大模型&#xff0c;它将基于结构化状态空间模型 (SSM) 的 Mamba 模型与 transformer 架构相结合&#xff0c;取两种架构之长&#xff0c;达到模型质量和效率兼得的效果。 在吞吐量和效率等关键衡量指…
阅读更多...
去除图像周围的0像素，调整大小

去除图像周围的0像素，调整大小

在做分割任务时&#xff0c;经常需要处理图像&#xff0c;如果图像周围有一圈0像素&#xff0c;需要去除掉&#xff0c;重新调整大小 数组的处理 如果图像的最外一圈为0&#xff0c;我们将图像最外圈的图像0去除掉。 import numpy as npdef remove_outer_zeros(arr):# 获取数…
阅读更多...
vue3【详解】选项式 API 实现逻辑复用

vue3【详解】选项式 API 实现逻辑复用

抽离逻辑代码到一个函数函数命名约定为 useXxxx格式 ( React Hooks 也是 )在 setup 中引用 useXxx 函数 演示代码&#xff1a;实时获取鼠标的坐标 逻辑封装 useMousePosition.js // 导入 ref, onMounted, onUnmounted import { ref, onMounted, onUnmounted } from "vue…
阅读更多...
【Python-Pygame】

【Python-Pygame】

Python-Pygame ■ Pygame-简介■ Pygame-安装■ Pygame-Rect区域位置■ Pygame-Draw绘图函数■ Pygame-■ Pygame-■ Pygame-■ Pygame-事件监听■ Pygame-Event事件模块■ Pygame-游戏循环■ Pygame-Display显示模块■ Pygame-Time时间控制■ Pygame-Font文本和字体■ Pygame-…
阅读更多...
软考 - 系统架构设计师 - ESB（企业服务总线）例题

软考 - 系统架构设计师 - ESB（企业服务总线）例题

问题 1&#xff1a; 根据描述 Ramp Control 是负责系统中相关各种业务活动的组件&#xff0c;根据题目描述&#xff0c;系统中包含检查机位环境&#xff0c;卸货&#xff0c;装货等业务活动&#xff0c;所以 Ramp Control 服务组件提供的服务名称就是 “负责检查机位环境&#…
阅读更多...
OLAP多维语义模型

OLAP多维语义模型

概述 为了严谨起见&#xff0c;在正式内容之前&#xff0c;先把OLAP多维语义模型是什么说明一下。 先说OLAP&#xff08;Online Analytical Processing&#xff09;&#xff0c;它是和OLTP相对的概念&#xff0c;关于这两个概念的详细解释网上有很多。严格的来说OLAP与多维数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023