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

最新推荐文章于 2024-05-18 18:02:50 发布
最新推荐文章于 2024-05-18 18:02:50 发布
阅读量408 收藏 4
点赞数 5
分类专栏： threadx系列 文章标签： stm32 单片机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44742767/article/details/138078728
版权

前言

  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 基本上不做太复杂的逻辑设计，够用了。
詩不诉卿
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
lvgl设计器 NXP gui guider v1.6.1
12-27
它是基于开源LVGL图形库的最新版本，提供可视化所见即所得的拖放UI设计器，能够快速轻松地为嵌入式应用程序开发漂亮、高性能的人机交互图形应用。 新版本的GUI Guider增加了QNX实时操作系统的支持，用户可以将设计...
LVGL使用记 - GUI-Guider设计使用
我的博客
03-22 9589
gui_guider是NXP官方推出的基于LVGL框架的GUI设计软件，虽说是用于NXP芯片的，但是支持仿真功能，不需要选择MCU型号，可直接生成设计源码，故用此做图形化设计是一个不错的选择。 官网下载安装 工程及屏幕参数设置 设计界面 界面设计完之后，先可以运行仿真，点击"Run Simlator",查看界面效果，确认OK，点击“Generate Code”，可以生成代码了,在Code Viewer中可以查看生成的GUI初始化代码 打开工程文件，找到generated文件夹，并
【快速入门 LVGL】-- 2、GUI Guider 下载、安装
qq_49053936的博客
04-06 1597
LVGL, 可视化设计 ，Gui Guider
【LVGL】GUI神器 NXP GUI GUIDER开发工具入门教程
weixin_38933763的博客
08-18 5402
GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的图形化设计方式开发LVGL GUI页面，加速GUI的设计。相比LVGL官方推出的付费工具 SquareLine Studio ，GUI Guider完全免费，它们甚至开发页面的布局都类似，但两者功能上，GUI Guider也相应的没有SquareLine Studio 细致和丰富，希望NXP能持续的优化更新。
LVGL之GUI GUIder使用教程
PrairieOne的博客
10-22 4627
lvgl是一个免费的开放源代码图形库，提供创建具有易于使用的图形元素，再配合NXP提供的GUI-Guider软件，极大简化了嵌入式系统UI的设计。GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。单击按钮，您可以在模拟环境中运行应用或将其导出到目标项目。
【LVGL】学习笔记--(2)GUI Guider的使用
热门推荐
sinat_33408502的博客
02-27 1万+
GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码
GUI Guider使用例程（应用LVGL的三个界面切换）
02-27
GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本...
LVGL界面设计器V1.3
03-02
LVGL界面设计器是一款用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需...
Gui-Guider-Setup-1.3.0-GA 嵌入式图形应用程序UI
06-28
GUI guide提供了一个IDE来使用拖放控件设计嵌入式图形应用程序UI，并在编辑过程中提供帮助。该软件为嵌入式设备上图形应用的用户界面设计提供了方便。 IDE —支持Windows 10、MacOS 11、Ubuntu 20.04操作系统 —IDE...
GUI-Guider-1.3.1-GA
01-30
1.GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或...
【STM32】检测SD卡是否插入
最新发布
AC0
05-18 401
使用中断的方式检测SD卡是否插入。插入时初始化，拔出时取消初始化
STM32快速入门（串口传输之USART）
m0_52566365的博客
05-08 1347
STM32实现USART串口传输，记录了自己学习时的许多细节。
物联网应用开发--STM32+ESP8266与新大陆云平台通信（下行控制蜂鸣器、LED）
面包板扎的专栏
05-14 1216
1、掌握云平台执行器的创建2、熟悉STM32 与ESP8266模块之间的通信3、具体实现目标：（1）创建5个执行器：蜂鸣器，LED1，LED2，ED3，LED4;（2）执行器能对应控制开发板的蜂鸣器和LED。项目创建详细步骤参考：https://blog.csdn.net/luojuan198780/article/details/138766783项目整体：创建5个执行器1.1 执行器之蜂鸣器设置1.2 执行器之LED设置。4个LED配置除了名称其它都一样开发板P7四个跳键帽接法如下图：说明：单片机
【从零开始实现stm32无刷电机foc】【理论】【1/6 电机旋转本质】
网上没有的这里会写，网上有的没写好的这里会写，网上写的好的这里不会写
05-14 405
从电机旋转本质出发，推导得到需要控制线圈合成磁矢量。
用Ai编写一个电机驱动程序
番茄蛋汤面
05-12 1036
对于有一定编程经验的人来说，这个回答还是能看懂的，但是如果是初学者，也不难理解，还是完整的提供了核心的程序，对于HAL库来说，不同的开发平台虽然不尽相同，但是基本有现成的程序接口，总的来是AI的这个回答还是可以的，但是和这个程序还没提涉及到产品逻辑，要想达到能用的状态还需要人工进行一些加工和修饰。
通过单总线实现单片机之间的数据传输
二向无常的博客
05-11 301
这里要用稍微复杂一些的信号，例如使用600us的高电平+200us的低电平表示逻辑1，用200us的高电平+600us的低电平来表示逻辑0。这样组合起来，可以轻易的分辨出当前接收的是0还是1，也可以避免当多个相同的0或1连续发送/接收时，对于接收方来说无法分辨这其中有几个0和1的情况。一个简单的格式头可以根据引脚空闲状态的低电平来设置，假设引脚的空闲状态为高电平，那么可以使用连续的低电平来作为格式头。的20%左右（时间不用很严谨，因为不同的单片机内部的时钟不同，可以允许一定范围内的误差）。
基于C8051F340单片机的内部温度传感器，测量温度的C程序
xll_007的博客
05-16 287
基于C8051F340单片机的内部温度传感器，测量温度的C程序。 C8051F340单片机片内的温度传感器，可以进行温度测量，温度传感器可配置为ADC的输入，通过ADC进行测量。
基于C8051F340单片机的可编程技术阵列——看门狗定时器的应用C程序
xll_007的博客
05-14 343
基于C8051F340单片机的可编程技术阵列——看门狗定时器的应用C程序。 C8051F340单片机的可编程技术阵列PCA的的模块 4 可以实现可编程看门狗定时器（WDT）功能。如果连续两次对 WDT更新寄存器的写操作间隔时间超过规定的值，看门狗定时器将产生一次复位。可以根据需要用软件配置和使能/禁止 看门狗。本文通过P2.2输出LED闪烁（10Hz），P2.0读取按钮状态，当按钮按下并保持，超过一定的时间，单片机将因为看门超时触发系统复位，LED闪烁频率加快（100Hz）。
lvgl nxp gui guider 1.6
08-29
lvgl nxp gui guider 1.6是一个用于NXP微控制器的图形用户界面(GUI)开发工具。LVGL（轻量级嵌入式图形库）是一款开源的GUI库，可以在各种嵌入式设备上创建美观且功能丰富的用户界面。NXP GUI Guider是一个可视化的GUI设计工具，可以通过简单的拖放操作来设计和生成LVGL GUI界面。 使用LVGL NXP GUI Guider 1.6可以轻松快速地开发出专业水平的GUI界面。它提供了丰富的内置控件，如按钮、文本框、进度条、滑块等，用户可以根据自己的需求进行定制和扩展。此外，它还支持动画效果、多语言支持和主题切换等功能，使得界面更加丰富多样。 利用该工具，开发人员只需通过简单的拖放操作就可以设计和布局界面元素，并直接在编辑器中进行预览和调试。同时，可以通过代码生成器自动生成所需的LVGL C代码，方便集成进项目中。这样，开发人员可以更专注于业务逻辑或者其他核心功能的实现，提高开发效率。 此外，LVGL NXP GUI Guider 1.6还支持与其他开发工具的集成，如NXP MCUXpresso IDE和RTCS库等。这样，开发者可以在一个完整的开发环境中进行GUI开发，并且可以更好地与其他系统组件进行集成和交互。 总之，LVGL NXP GUI Guider 1.6是一个强大且易用的GUI开发工具，能够帮助开发者快速创建出高效、美观的GUI界面，并且与NXP微控制器的生态系统完美集成，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

詩不诉卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值