(十八)零基础开发小安派-Eyes-S1【进阶篇】——LVGL事件学习_制作电子木鱼

[复制链接]
查看2457 | 回复20 | 2024-1-4 20:28:36 | 显示全部楼层 |阅读模式

本帖最后由 Ai-Thinker小泽 于 2024-1-5 10:35 编辑

本帖最后由 Ai-Thinker小泽 于 2024-1-5 10:21 编辑

本帖最后由 Ai-Thinker小泽 于 2024-1-5 10:19 编辑

本帖最后由 Ai-Thinker小泽 于 2024-1-4 20:28 编辑

零基础开发小安派-Eyes-S1【进阶篇】——LVGL事件学习——制作电子木鱼

2024的第一篇教程来了,本篇学习LVGL的事件添加,教给大家如何添加事件并且最终完成一个电子木鱼(小美苦苦哀求而我略微出手)。2024年的第一项运动——敲木鱼,敲电子木鱼,品赛博人生。顺便净化一下心灵且累积功德。祝大家2024积德累功,功成名就。

一、GUI-Guider页面设计

先新建一个工程,具体步骤就不展示了。 屏幕截图2023-12-29135654.png

咱们直接进入UI设计界面,这里我用到了两个组件,一个是图片按钮,一个是文本框。先添加一个图片按钮,这就需要一张木鱼图,大家可以添加自己喜欢的任意图案。大小比例记得调整,需要注意的是,这里建议准备两张一模一样的图片,区别在于他们的大小,一张大图一张小图,大图添加在释放后的图片,小图添加在按下时图片,就达成我们敲下去的变化效果。我这里准备了一张大木鱼图还有一张小木鱼图。 微信截图_20240104195714.png

添加一个文本框,先固定好位置,在右侧的文本输入“功德+1”字样,注意字体选择simsun才可以显示中文。据此,所需要的组件已经添加成功了。 微信截图_20240104164540.png

接下来我们添加图片按键的事件。需要实现的效果是,在按下图片(木鱼)时将“功德+1"的文本框向上移动,在释放图片(木鱼)时将”功德+1“隐藏。这样的效果就是点击时会出现”功德+1“飘出来的效果。

1.点击左侧imgbtn_1,图片按钮

微信截图_20240104165110.png

2.点击手指图标事件设置。这里我们可以看到有许多事件的添加,我们只需要配置两个事件,Pressed(按下)和Released(释放)。

3.点击Pressed(按下),在组件里选中label_1,也就是我们的文本框,在Animation选项下勾选移动,设置需要移动的坐标,也就是我们按下后的最后lable_1移动的最终位置,这里我的最终位置x坐标伟206,y坐标为25,动画效果选择linear线性,持续时间为50ms,也就是整个移动过程的持续时间。 微信截图_20240104174040.png

4.返回上一层,点击Released,一样在组件里选中lable_1,首先在General下勾选可视化,选择隐藏,也就是我们释放按钮后会隐藏文本框。

微信截图_20240104174150.png

5.其次在Animation下勾选移动,将我们按下图片后的文本框移动回原来的位置,也就是一开始的坐标位置,x坐标206,y坐标45,动画选择linear线性,持续时间0秒也就是瞬间移动。这样我们在按下图片时Y轴移动文本框20个像素,然后在释放图片时会将文本框移动回原来的位置并且隐藏。就可以实现”功德+1“飘出来的效果。

微信截图_20240104200329.png

记得运行一下看一下模拟器的效果。同时也会生成我们需要的工程文件。

muyu01.gif

二、文件移植

创建新的工程文件方法在上篇教程中已经输出给大家,但是我发现在main中的while(1)进行刷屏的速率会卡住,目前原因暂不明,所以还是建议使用FreeRTOS加一个刷新LVGL屏幕的任务。 将我们上次没移植的文件,也就是lv_user_config的.c和.h文件一并放进来,文件可以在AiPi-Radar-WakeUp下的components下的UI复制过来,方法不在赘述。由于本次刷新LVGL需要FreeRTOS,所以我们还需要复制config下的FreeRTOSConfig.h,一并放在我们的工程目录下,同时修改proj.conf文件,添加set(CONFIG_FREERTOS 1),开启RTOS。 微信截图_20240104180315.png

其次将我们所有的文件通过CMakeLists.txt添加编译。这里附上我的CMake。

微信截图_20240104181036.png

然后在Main里面添加一个任务,先附上我的完整mian供大家参考。

#include "board.h"
#include "bflb_gpio.h"
#include "bflb_l1c.h"
#include "bflb_mtimer.h"
#include "FreeRTOS.h"
#include "task.h"
#include "timers.h"

#include "lv_conf.h"
#include "lvgl.h"

#include "lv_port_disp.h"
#include "lv_port_indev.h"

#include "gui_guider.h"
#include "custom.h"
#include "lcd.h"
#include "lv_user_config.h"

//该变量必须是全局变量
lv_ui guider_ui;


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();

    //外部输入初始化(Touch触摸)
    lv_port_indev_init();

    //设计小组件的UI布局
    setup_ui(&guider_ui);

    custom_init(&guider_ui);

    printf("lvgl success\r\n");

    //es8388芯片初始化
    es8388_voice_init();

    //创建一个任务,lvgl的刷新任务,该任务函数在lv_user_config.c中
    xTaskCreate(lvgl_tick_task, (char*)"lvgl", 1024, NULL, 1, NULL);

    //开启任务调度
    vTaskStartScheduler();

    while (1) {

     vTaskDelay(5000/portTICK_RATE_MS);
    }
}

三、添加木鱼敲击音频

光有点击的画面还不行,电子木鱼的灵魂在于敲击的声音,主打一个灵魂洗涤。

这里为了方便大家,我将8388的驱动也移植到了commponents,修改了部分配置文件。驱动的原理是I2S驱动8388芯片,然后将音频文件烧录至flash中,然后再接口中通过dma输出音频文件。

这里我已经找到一个音频文件,是wav的格式,采样率是44100。 微信截图_20240104115447.png

微信截图_20240104193737.png

首先将音频文件放进去,然后修改flash_prog_cfg.ini将音频文件烧录进flash中,可以参考我截图中方法,起始地址可以参考flash教学博文中,这里我选择0x230000,如果是烧录多个文件的话,记得计算文件大小,确保他们的地址空间不重复。 微信截图_20240104201136.png

添加一个muyu_8388_pcm.h文件,定义木鱼音频的起始地址和大小。这里初始化函数在8388_pcm.c中已经有,我们只需要编写一个voice_MuYu的函数。

微信截图_20240104194207.png

修改8388_pcm.c文件,编写一个播放函数,这个函数也是调用play_voice这个接口,参数为音频文件的地址和大小。同时修改i2s的初始化,采样率是44100。

微信截图_20240104194322.png

微信截图_20240104201441.png

主函数中记得将8388芯片初始化。

微信截图_20240104194406.png

修改我们的LVGL工程中的events_init.c,这个文件是我们的事件控制文件,添加我们的muyu_8388_pcm.h头文件,在Pressed事件中加入播放音频的接口。

微信截图_20240104194651.png

四、演示效果

由于论坛限制,后续会附上B站视频链接,这里先贴上动图。

05dfce02ace4445b3ab65574da2f8a4b00_00_00-00_00_30.gif

五、源码

在评论区附上源码,论坛的Markdown编辑器还不知道怎么添加附件,爱它就要原谅它。

本帖被以下淘专辑推荐:

回复

使用道具 举报

Ai-Thinker小泽 | 2024-1-4 20:28:37 | 显示全部楼层
源码:

WoodenFish.zip

131.26 KB, 下载次数: 16

回复

使用道具 举报

timo | 2024-1-4 21:55:53 | 显示全部楼层
厉害了,大佬,期待加上麦克风的联动
回复 支持 反对

使用道具 举报

san | 2024-1-4 21:56:35 | 显示全部楼层
学习
回复

使用道具 举报

1084504793 | 2024-1-5 08:27:30 | 显示全部楼层
回复

使用道具 举报

lazy | 2024-1-5 08:37:41 | 显示全部楼层
功德++
回复

使用道具 举报

爱笑 | 2024-1-5 08:41:23 | 显示全部楼层
小泽棒棒!
用心做好保姆工作
回复

使用道具 举报

bzhou830 | 2024-1-5 08:59:29 | 显示全部楼层
功德++
选择去发光,而不是被照亮
回复

使用道具 举报

WT_0213 | 2024-1-5 09:15:16 | 显示全部楼层
优秀
回复

使用道具 举报

粉色小风扇 | 2024-1-5 09:42:24 | 显示全部楼层
功德+1
回复

使用道具 举报

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

本版积分规则