0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何用小安派-Eyes-S1做一个电子木鱼?

安信可科技 来源:安信可科技 2024-01-13 15:18 次阅读

2024年的第一篇教程来了,本篇学习如何添加LVGL事件,并制作完成一个电子木鱼(小美苦苦哀求,我略微出手而已)。祝大家2024积德累功,心想事成!接下来看看如何用小安派-Eyes-S1做一个电子木鱼

01

GUI-Guider 页面设计

先新建一个工程。

668eb87c-b134-11ee-8b88-92fbcf53809c.png

直接进入 UI 设计界面,这里用到了两个组件,一个是图片按钮,一个是文本框

先添加一个图片按钮,这就需要一张木鱼图,大家可以添加自己喜欢的任意图案。大小比例记得调整,需要注意的是,这里建议准备两张一模一样的图片,区别在于他们的大小,一张大图+一张小图,大图添加在释放后的图片,小图添加在按下时图片,就达成敲下去的变化效果。

66a43ec2-b134-11ee-8b88-92fbcf53809c.jpg

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

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

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

66b2d09a-b134-11ee-8b88-92fbcf53809c.jpg

2.点击手指图标事件设置。只需要配置两个事件,Pressed(按下)和 Released(释放)。

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

66cf611a-b134-11ee-8b88-92fbcf53809c.jpg

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

66eade40-b134-11ee-8b88-92fbcf53809c.jpg

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

67034552-b134-11ee-8b88-92fbcf53809c.jpg

记得运行一下,看一下interwetten与威廉的赔率体系 器的效果,这里同时也会生成需要的工程文件。

671d8b38-b134-11ee-8b88-92fbcf53809c.gif

02

文件移植

这里建议使用 FreeRTOS 加一个刷新 LVGL 屏幕的任务。将上次没移植的文件,也就是 lv_user_config 的.c 和.h 文件一并放进来,文件可以在 AiPi-Radar-WakeUp 下的 components 下的 UI 复制过来,方法不在赘述。

由于本次刷新 LVGL 需要 FreeRTOS,所以还需要复制 config 下的 FreeRTOSConfig.h,一并放在工程目录下,同时修改 proj.conf 文件,添加 set(CONFIG_FREERTOS 1),开启 RTOS。

6732980c-b134-11ee-8b88-92fbcf53809c.jpg

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

6751b926-b134-11ee-8b88-92fbcf53809c.jpg

在 Main 里面添加一个任务,附上完整齐Mian供大家参考。

6763af32-b134-11ee-8b88-92fbcf53809c.png

03

添加木鱼敲击音频

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

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

这里已经找到的音频文件是wav的格式,采样率是 44100。

6788abc0-b134-11ee-8b88-92fbcf53809c.jpg

679c2d3a-b134-11ee-8b88-92fbcf53809c.jpg

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

67af5964-b134-11ee-8b88-92fbcf53809c.jpg

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

67ca147a-b134-11ee-8b88-92fbcf53809c.jpg

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

67e03e12-b134-11ee-8b88-92fbcf53809c.jpg

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

67fc90a8-b134-11ee-8b88-92fbcf53809c.jpg

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

68158888-b134-11ee-8b88-92fbcf53809c.jpg

来看看最终效果

684153a0-b134-11ee-8b88-92fbcf53809c.gif








审核编辑:刘清

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • FreeRTOS
    +关注

    关注

    12

    文章

    484

    浏览量

    62149
  • 模拟器
    +关注

    关注

    2

    文章

    875

    浏览量

    43211
  • GUI
    GUI
    +关注

    关注

    3

    文章

    659

    浏览量

    39658
  • LVGL
    +关注

    关注

    1

    文章

    83

    浏览量

    2957

原文标题:功德+1,用小安派-Eyes-S1做一个电子木鱼

文章出处:【微信号:安信可科技,微信公众号:安信可科技】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    零基础开发小安-Eyes-DU之【PWM循环呼吸灯】

    性能。 既然是开源硬件,那必然讲究DIY,今天小安亲自用小安-Eyes-DU来制作
    的头像 发表于 08-14 15:37 792次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes</b>-DU之【PWM循环呼吸灯】

    零基础开发小安-Eyes-S1外设篇——GPIO 输入输出

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP摄像头接口,外置ES8388音频编解码芯片以及预留TF卡座,并且引出USB接口,可接入USB摄像头。 从零开始学习小安1
    的头像 发表于 10-25 13:50 1013次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>外设篇——GPIO 输入输出

    零基础开发小安-Eyes-S1外设篇——GPIO中断编程

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP摄像头接口,外置ES8388音频编解码芯片以及预留TF卡座,并且引出USB接口,可接入USB摄像头。 产品资料:https://docs.ai-thinker.com/eyes 从零开始学习
    的头像 发表于 10-29 14:56 744次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>外设篇——GPIO中断编程

    零基础开发小安-Eyes-S1外设篇——I2S

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP摄像头接口,外置ES8388音频编解码芯片以及预留TF卡座,并且引出USB接口,可接入USB摄像头。 从零开始学习小安1
    的头像 发表于 12-13 18:02 926次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>外设篇——I2<b class='flag-5'>S</b>

    零基础开发安信可小安-Eyes-S1【入门篇】——初识小安-Eyes-S1

    初识小安-Eyes-S1 前言:本教程针对零基础人员可以快速上手小安-Eyes-S1实现
    发表于 09-08 11:06

    小安-Eyes-S1/S2多功能开发板简介

    今天,我们在小安放出新鲜的开发板产品AiPi-Eyes-S1小安-Eyes-S1)、AiP
    的头像 发表于 06-19 10:10 952次阅读
    <b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>/<b class='flag-5'>S</b>2多功能开发板简介

    小安开源硬件制作桌面天气站

    上周安信可推出了小安的2款开源硬件——AiPi-Eyes-S1、AiPi-Eyes-S2,安信可应用开发团队用小安
    的头像 发表于 07-02 11:07 976次阅读
    用<b class='flag-5'>小安</b><b class='flag-5'>派</b>开源硬件制作<b class='flag-5'>一</b><b class='flag-5'>个</b>桌面天气站

    小安-Eyes-S1外设接口简介

    前言:本教程针对零基础人员可以快速上手小安-Eyes-S1实现些简单的应用开发,仅供参考学习,本人也在学习的过程中,感谢大家支持。
    的头像 发表于 09-18 09:55 848次阅读

    零基础开发小安-Eyes-S1【入门篇】——初识小安-Eyes-S1

    前言:本教程针对零基础人员可以快速上手小安-Eyes-S1实现些简单的应用开发,仅供参考学习,本人也在学习的过程中,感谢大家支持。 小安
    的头像 发表于 09-18 15:41 719次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【入门篇】——初识<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>

    小安-Eyes-S1安装VMware与Ubuntu教程

    设置了中文,换好了国内的清华APT源,安装VScode与必要的插件,拉取了截至目前更新的小安最新的SDK和子模块,配置好了编译环境。由于集成度较高,本次下载的压缩包高达10G。选择上传了百度云(主要是莫工有会员),若有其他需求后期也可以上传至其他云。
    的头像 发表于 09-24 10:58 877次阅读
    <b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>安装VMware与Ubuntu教程

    功德+1,用小安-Eyes-S1做一个电子木鱼

    2024积德累功,心想事成!接下来 看看如何用小安-Eyes-S1做一个电子
    的头像 发表于 01-16 14:33 740次阅读
    功德+<b class='flag-5'>1</b>,用<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b><b class='flag-5'>做一个</b><b class='flag-5'>电子</b><b class='flag-5'>木鱼</b>

    零基础开发小安-Eyes-S1【入门篇】——工程文件架构

    、零基础开发小安-Eyes-S1入门篇——Win下SSH连接Linux5、零基础开发小安-Eyes-
    的头像 发表于 11-06 16:10 149次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【入门篇】——工程文件架构

    零基础开发小安-Eyes-S1【外设篇】——PWM

    =200ms。PWM 占空比: 脉冲周期内,高电平的时间占整个周期时间的比例。单位是 %,高电平时间是 50ms,周期是 100ms。占空比就是 50/100*100%=50%。了解小安
    的头像 发表于 11-06 16:10 145次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【外设篇】——PWM

    零基础开发小安-Eyes-S1 外设篇 ——I2C

    。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP摄像头接口,外置ES8388音频编解码芯片以及预留TF卡座,并且引出USB接口,可接入USB摄像头。 从零开始学习小安1
    的头像 发表于 11-27 16:39 208次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b> 外设篇 ——I2C

    零基础开发小安-Eyes-S1【外设篇】——FLASH

    。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP摄像头接口,外置ES8388音频编解码芯片以及预留TF卡座,并且引出USB接口,可接入USB摄像头。 从零开始学习小安1
    的头像 发表于 12-05 14:31 167次阅读
    零基础开发<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【外设篇】——FLASH