美文网首页
lvgl学习(一)

lvgl学习(一)

作者: ZZES_ZCDC | 来源:发表于2024-01-20 15:30 被阅读0次

    1.项目结构

    aithinker_Ai-M6X_SDK\examples\lvgl\demos目录中新建一个文件夹, 可以直接cv lvgl文件夹修改, 例如我新建的目录 lvgltest2 结构如下

    image.png

    2.项目代码

    1) 页面代码

    在demos目录中新建test(名称自定)文件夹, 新建 lv_demo_test.clv_demo_test.h文件,来编写页面代码

    lv_demo_test.h文件, 用来定义方法和引入依赖

    /**
     * @file lv_demo_test.h
     *
     */
    
    #ifndef LV_DEMO_TEST_H
    #define LV_DEMO_TEST_H
    
    #ifdef __cplusplus
    extern "C" {
    #endif
    
    /*********************
     *      INCLUDES
     *********************/
    #include "../lv_demos.h"
    
    
    /**********************
     * GLOBAL PROTOTYPES
     **********************/
    void lv_demo_test(void);
    
    
    #ifdef __cplusplus
    } /* extern "C" */
    #endif
    
    #endif /*LV_DEMO_TEST_H*/
    
    

    lv_demo_test.c 文件用来写页面代码, 添加一个标题, 创建两个button

    • lv_theme_default_init() 设置主题
    • lv_scr_act()获取当前屏幕指针
    • lv_style_init() 样式对象初始化
    • lv_style_set_text_opa() 设置样式
    • lv_label_create() 创建文本
    • lv_label_set_text() 设置文本值
    • lv_obj_add_style() 设置定义的样式
    • lv_btn_create() 创建按钮
    • lv_obj_set_pos() 设置位置坐标
    /**
     * @file lv_demo_test.c
     *
     */
    
    /*********************
     *      INCLUDES
     *********************/
    #include "lv_demo_test.h"
    
    #if LV_USE_DEMO_TEST
    
    #if LV_MEM_CUSTOM == 0 && LV_MEM_SIZE < (38ul * 1024ul)
        #error Insufficient memory for lv_demo_widgets. Please set LV_MEM_SIZE to at least 38KB (38ul * 1024ul).  48KB is recommended.
    #endif
    
    /**********************
     *      TYPEDEFS
     **********************/
    // 定义枚举, 三种屏幕大小
    typedef enum {
      DISP_SMALL,
      DISP_MEDIUM,
      DISP_LARGE,
    } disp_size_t;
    
    /**********************
     *  STATIC PROTOTYPES
     **********************/
    
    /**********************
     *  STATIC VARIABLES
     **********************/
    static disp_size_t disp_size;
    
    static lv_style_t style_text_opacity;
    static lv_style_t style_title;
    
    static const lv_font_t * font_large;
    static const lv_font_t * font_normal;
    
    
    /**********************
     *   GLOBAL FUNCTIONS
     **********************/
    
    void lv_demo_test(void) {
      // 判断设备尺寸
      if(LV_HOR_RES <= 320) disp_size = DISP_SMALL;
      else if(LV_HOR_RES < 720) disp_size = DISP_MEDIUM;
      else disp_size = DISP_LARGE;
    
      // 先将large字体和normal字体修改为默认大小
      font_large = LV_FONT_DEFAULT;
      font_normal = LV_FONT_DEFAULT;
      // 根据屏幕大小 设置字体大小
      if (disp_size == DISP_LARGE) {
    #if LV_FONT_MONTSERRAT_24
        font_large     = &lv_font_montserrat_24;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_24 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
    #if LV_FONT_MONTSERRAT_16
        font_normal    = &lv_font_montserrat_16;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_16 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
      } else if (disp_size == DISP_MEDIUM) {
    #if LV_FONT_MONTSERRAT_20
        font_large     = &lv_font_montserrat_20;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_20 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
    #if LV_FONT_MONTSERRAT_14
        font_normal    = &lv_font_montserrat_14;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_14 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
      } else {   /* disp_size == DISP_SMALL */
    #if LV_FONT_MONTSERRAT_18
        font_large     = &lv_font_montserrat_18;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_18 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
    #if LV_FONT_MONTSERRAT_12
        font_normal    = &lv_font_montserrat_12;
    #else
        LV_LOG_WARN("LV_FONT_MONTSERRAT_12 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    #endif
      }
    
    #if LV_USE_THEME_DEFAULT
      // 设置默认主题
      lv_theme_default_init(
        NULL, // 没指定 则为默认主题
        lv_palette_main(LV_PALETTE_BLUE), // 主颜色为蓝色
        lv_palette_main(LV_PALETTE_RED), // 次颜色为红色
        LV_THEME_DEFAULT_DARK, // 设置主题为暗色模式
        font_normal // 字体
      );
    #endif
    
      // 设置字体透明度
      lv_style_init(&style_text_opacity);
      lv_style_set_text_opa(&style_text_opacity, LV_OPA_50);
    
      // 设置标题字体大小
      lv_style_init(&style_title);
      lv_style_set_text_font(&style_title, font_large);
    
    
      // 标题
      lv_obj_t * title = lv_label_create(lv_scr_act());
      lv_label_set_text(title, "Test Title");
      lv_obj_add_style(title, &style_title, 0);
      lv_obj_add_style(title, &style_text_opacity, 0);
    
      // 创建按钮
      lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
    
      // 设置定位
      lv_obj_set_pos(btn1, 60, 40);
    
      // 复制btn1
      lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
      // 设置定位
      lv_obj_set_pos(btn2, 60, 80);
    
      // 给按钮添加文字
      lv_obj_t * label1 = lv_label_create(btn1);
      lv_label_set_text(label1, "Button 1");
    
      lv_obj_t * label2 = lv_label_create(btn2);
      lv_label_set_text(label2, "Button 2");
    
    }
    
    
    #endif
    

    2) 配置页面代码

    demos/lv_demos.h 文件中引入 lv_demo_test.h文件, 也可以不用判断LV_USE_DEMO_TEST, 我这主要沿用了之前lvgl项目的代码

    /**
     * @file lv_demos.h
     *
     */
    
    #ifndef LV_DEMOS_H
    #define LV_DEMOS_H
    
    #ifdef __cplusplus
    extern "C" {
    #endif
    
    /*********************
     *      INCLUDES
     *********************/
    #include "lvgl.h"
    
    #if LV_USE_DEMO_TEST
    #include "test/lv_demo_test.h"
    #endif
    
    #ifdef __cplusplus
    } /* extern "C" */
    #endif
    
    #endif /*LV_DEMO_H*/
    
    

    lvgltest2\lv_conf.h文件 可以看到 lvgltest2\lv_conf.h文件中还有其他配置, 用来开放lvgl的一些功能, 比如开放button功能等, 默认这些都是开启的

    image.png

    配置 LV_USE_DEMO_TEST为1, 引入刚刚写的页面

    image.png

    3) 执行代码

    main.c 执行 lv_demo_test 方法

    1. 初始化开发板
    2. 初始化lvgl
    3. 初始化显示驱动
    4. 初始化输入设备驱动
    5. 绘制屏幕
    6. 循环执行任务队列
    /**
     * @file main.c
     * @brief
     *
     * Copyright (c) 2021 Bouffalolab team
     *
     * Licensed to the Apache Software Foundation (ASF) under one or more
     * contributor license agreements.  See the NOTICE file distributed with
     * this work for additional information regarding copyright ownership.  The
     * ASF licenses this file to you under the Apache License, Version 2.0 (the
     * "License"); you may not use this file except in compliance with the
     * License.  You may obtain a copy of the License at
     *
     *   http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
     * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
     * License for the specific language governing permissions and limitations
     * under the License.
     *
     *
     */
    #include "board.h"
    #include "bflb_gpio.h"
    #include "bflb_l1c.h"
    #include "bflb_mtimer.h"
    
    #include "lv_conf.h"
    #include "lvgl.h"
    
    #include "lv_port_disp.h"
    #include "lv_port_indev.h"
    
    #include "lcd.h"
    
    #include "demos/lv_demos.h"
    
    /* lvgl log cb */
    void lv_log_print_g_cb(const char *buf)
    {
        printf("[LVGL] %s", buf);
    }
    
    int main(void)
    {
        board_init();
        printf("lvgl case\r\n");
    
        /* lvgl init */
        lv_log_register_print_cb(lv_log_print_g_cb);
        lv_init();
        // 初始化显示驱动
        lv_port_disp_init();
        // 初始化输入设备驱动
        lv_port_indev_init();
    
        // 屏幕绘制
        lv_demo_test();
    
        // 任务队列用于管理后台任务,例如绘制屏幕、处理用户输入等
        lv_task_handler();
    
        printf("lvgl success\r\n");
        while (1) {
            lv_task_handler();
            bflb_mtimer_delay_ms(1);
        }
    }
    
    

    3. 结果

    image.png

    相关文章

      网友评论

          本文标题:lvgl学习(一)

          本文链接:https://www.haomeiwen.com/subject/mfrsodtx.html