小安派lvgl学习(一)

[复制链接]
查看1618 | 回复10 | 2024-1-21 15:23:41 | 显示全部楼层 |阅读模式

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功能等, 默认这些都是开启的

1705821263697.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. 结果

629aae1afbfb07365fda247f0572ac0.jpg

本帖被以下淘专辑推荐:

回复

使用道具 举报

timo | 2024-1-21 16:55:35 | 显示全部楼层
赞,这不是用vscode吧?看图标很好看
回复 支持 反对

使用道具 举报

1084504793 | 2024-1-21 17:46:14 | 显示全部楼层
回复

使用道具 举报

zzes | 2024-1-21 20:41:45 | 显示全部楼层
timo 发表于 2024-1-21 16:55
赞,这不是用vscode吧?看图标很好看

是vscode,  图标用的Material Icon Theme
回复 支持 反对

使用道具 举报

干簧管 | 2024-1-21 21:09:46 | 显示全部楼层
👍🏻
回复

使用道具 举报

timo | 2024-1-21 22:03:07 | 显示全部楼层
zzes 发表于 2024-1-21 20:41
是vscode,  图标用的Material Icon Theme

感谢分享
回复 支持 反对

使用道具 举报

WT_0213 | 2024-1-22 08:46:36 | 显示全部楼层
回复

使用道具 举报

bzhou830 | 2024-1-22 08:56:30 | 显示全部楼层
选择去发光,而不是被照亮
回复

使用道具 举报

爱笑 | 2024-1-22 09:09:35 | 显示全部楼层
不错不错~
用心做好保姆工作
回复

使用道具 举报

lazy | 2024-1-22 11:14:50 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则