ESP32开发路程LVGL篇(二)——例程代码浅析,可视化界面设计器


LVGL官方文档:文档链接
LVGL入门教程:简约的入门笔记

例程代码浅析

例程代码

本例程针对 lv_port_esp32 工程中的 main.c 代码进行了删减并添加了相应的注释(完整的工程移植见 上一篇 )。应用程序部分(对应 lv_application 函数)并不复杂,运行效果就是白底黑字显示“Hello world”。本文主要是针对代码框架进行浅浅分析,有任何问题烦请大家指正。

#include <stdbool.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_freertos_hooks.h"
#include "freertos/semphr.h"
#include "esp_system.h"
#include "driver/gpio.h"

#include "lvgl/lvgl.h"
#include "lvgl_helpers.h"

/*********************
 *  宏定义
 *********************/
#define LV_TICK_PERIOD_MS 1

/**********************
 *  静态函数原型
 **********************/
static void lv_tick_task(void *arg);
static void guiTask(void *pvParameter);
static void lv_application(void);

/**********************
 *  主函数
 **********************/
void app_main()
{
    xTaskCreatePinnedToCore(guiTask, "gui", 4096*2, NULL, 0, NULL, 1);
}

// 创建一个信号量以处理对lvgl的并发调用
SemaphoreHandle_t xGuiSemaphore;

/**********************
 *  guiTask
 **********************/
static void guiTask(void *pvParameter)
{
    (void) pvParameter;

    // 创建一个互斥信号量
    xGuiSemaphore = xSemaphoreCreateMutex();

    // LVGL初始化
    lv_init();
    lvgl_driver_init();

    // 初始化显示缓冲区
    lv_color_t* buf1 = heap_caps_malloc(DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA);
    assert(buf1 != NULL);
    lv_color_t* buf2 = heap_caps_malloc(DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA);
    assert(buf2 != NULL);
    static lv_disp_buf_t disp_buf;
    uint32_t size_in_px = DISP_BUF_SIZE;
    lv_disp_buf_init(&disp_buf, buf1, buf2, size_in_px);

    // 配置和注册显示驱动器
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.flush_cb = disp_driver_flush;
    #if defined CONFIG_DISPLAY_ORIENTATION_PORTRAIT || defined CONFIG_DISPLAY_ORIENTATION_PORTRAIT_INVERTED
        disp_drv.rotated = 1;
    #endif
    disp_drv.buffer = &disp_buf;
    lv_disp_drv_register(&disp_drv);

    // 创建周期性定时器
    const esp_timer_create_args_t periodic_timer_args = {
        .callback = &lv_tick_task,
        .name = "periodic_gui"
    };
    esp_timer_handle_t periodic_timer;
    ESP_ERROR_CHECK(esp_timer_create(&periodic_timer_args, &periodic_timer));
    ESP_ERROR_CHECK(esp_timer_start_periodic(periodic_timer, LV_TICK_PERIOD_MS * 1000));

    // LVGL应用程序
    lv_application();

    while (1)
    {
        vTaskDelay(pdMS_TO_TICKS(10));
        // 如果获取到信号量,则更新图形界面
        if (pdTRUE == xSemaphoreTake(xGuiSemaphore, portMAX_DELAY)) 
        {
            lv_task_handler();
            xSemaphoreGive(xGuiSemaphore);
        }
    }

    // 当任务被删除或系统停止
    free(buf1);
    free(buf2);
    vTaskDelete(NULL);
}

/**********************
 *  LVGL应用程序
 **********************/
static void lv_application(void)
{
    /* 当使用单色显示器时,只在屏幕中心显示"Hello World"文本 */

    /* 获取当前屏幕对象 */
    lv_obj_t * scr = lv_disp_get_scr_act(NULL);

    /* 在当前屏幕上创建一个标签 */
    lv_obj_t * label1 =  lv_label_create(scr, NULL);

    /* 修改标签的文本 */
    lv_label_set_text(label1, "Hello\nworld");

    /* 将标签居中对齐
     * NULL表示相对于父对象居中对齐
     * 0, 0表示对齐后的x、y偏移量 */
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
}

static void lv_tick_task(void *arg)
{
    (void) arg;
    lv_tick_inc(LV_TICK_PERIOD_MS);
}

lv_tick_task

lv_tick_task 相当于 LVGL 的心跳,可以用来了解动画和其他任务的经过时间,以 LV_TICK_PERIOD_MS 个毫秒为单位告知。

lv_task_handler

lv_task_handler 放在 while 循环中,每隔一段时间便会被调用,用来更新图形界面。lv_task_handler 在LVGL中是用于处理任务和事件的函数。

guiTask

这一部分的代码相当于LVGL的初始化,包括配置显示驱动、创建显示缓冲区、注册显示驱动器,并创建一个周期性定时器。可以不用过度关注这一部分的代码。

可视化界面设计器

关于 LVGL 的可视化界面设计器,可以有两种选择:GUI-Guider 或者 SquareLine Studio

相关介绍可以参考 这一篇

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【RT-Thread作品秀】基于 lvgl 的漏电保护装置校验仪 UI 界面设计作者:赵加文 概述低压漏电引起的各种安全事故已经严重影响到生产生活,威胁到生命财产安全。而解决这一现象的设备就是漏电保护开关,漏电保护开关的漏报率、误报率是很关键的参数,因此有必要对漏电保护开关的性能进行测试。因此,漏电保护装置校验仪是很有必要的。 开发环境硬件:ART-Pi 开发板,正点原子 480*272 4.3寸 RGB 屏幕 RT-Thread版本:4.0.3 开发工具及版本: RT-Thread Studio 2.0.0 :编写 编译 调试 下载代码 STM32CubeMX 6.1.0: codeBlocks 20.03:用于在 PC 机上进行 lvgl 模拟 MCU_Font V2.0: 用于转换中文,然后使得中文能够在 lvgl 中显示 RT-Thread使用情况概述在 UI 设计的整个过程中,使用到 RT-Thread 的部分主要有以下几个方面: 内核部分:动态线程,信号量 组件部分:PIN 设备、I2C 设备、TOUCH 设备框架、LCD 设备框架、finsh 组件 软件包部分:littlevgl2rtt、gt9147 硬件框架软件框架说明系统整体流程图: 软件模块说明整个UI 系统设计所遵循的是 lvgl 图形库的一个回调函数的机制,将各个事件与对应的操作所绑定起来,当滑动滑条时对应的滑条的回调函数就会被触发,那么就会执行滑条回调函数的内容,当滑动点击文本框时,文本框对应的回调函数就会被触发,进而创建键盘的控件,通过键盘输入所需要的数据。 演示效果图片展示: 演示视频: 比赛感悟这次参赛,之前还没有使用过 RT-Thread studio 这个集成开发环境,这次在使用 ART-Pi 的时候全程是使用 RT-Thread studio 这个开发环境,在使用的过程中也碰到了很多问题,有时候明明配置了相关组件,但是保存之后,并没有代码添加到工程里。现在也没有弄明白问题出在哪里,虽然存在着这里问题,但是在使用的过程中,还是非常的方便,整个开发过程就如同搭积木一样方便,与 RTT操作系统贴合的非常的紧密。 除此之外,便是在使用 lvgl 的过程中碰到了很多的问题,现在网上的教程基本是 lvgl v6 版本的教程,关于 lvgl v7 版本的教程很少,而且 v6版本与 V7 版本的 API 相差很大,不能按照 V6 版本来使用 V7 ,在这个过程中摸索了好多,同时也感受到了 lvgl 的魅力,使用在嵌入式系统上是非常不错的选择。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值