木魚(yú)聲一響，煩惱走光光~敲電子木魚(yú)，品賽博人生，今天你的功德積累到多少了？

2024年的第一篇教程來(lái)了，本篇學(xué)習(xí)如何添加LVGL事件，并制作完成一個(gè)電子木魚(yú)（小美苦苦哀求，我略微出手而已）。祝大家2024積德累功，心想事成！接下來(lái)看看如何用小安派-Eyes-S1做一個(gè)電子木魚(yú)。

01

GUI-Guider 頁(yè)面設(shè)計(jì)

先新建一個(gè)工程。

直接進(jìn)入 UI 設(shè)計(jì)界面，這里用到了兩個(gè)組件，一個(gè)是圖片按鈕，一個(gè)是文本框。
先添加一個(gè)圖片按鈕，這就需要一張木魚(yú)圖，大家可以添加自己喜歡的任意圖案。大小比例記得調(diào)整，需要注意的是，這里建議準(zhǔn)備兩張一模一樣的圖片，區(qū)別在于他們的大小，一張大圖+一張小圖，大圖添加在釋放后的圖片，小圖添加在按下時(shí)圖片，就達(dá)成敲下去的變化效果。

添加一個(gè)文本框，先固定好位置，在右側(cè)的文本輸入“功德 +1”字樣，注意字體選擇simsun才可以顯示中文。到這一步，所需要的組件已經(jīng)添加成功了。

接下來(lái)添加圖片按鍵的事件。需要實(shí)現(xiàn)的效果是，在按下圖片（木魚(yú)）時(shí)將“功德 +1"的文本框向上移動(dòng)，在釋放圖片（木魚(yú)）時(shí)將”功德 +1“隱藏。這樣的效果就是點(diǎn)擊時(shí)會(huì)出現(xiàn)”功德 +1“飄出來(lái)的效果。

1.點(diǎn)擊左側(cè) imgbtn_1，圖片按鈕

2.點(diǎn)擊手指圖標(biāo)事件設(shè)置。只需要配置兩個(gè)事件，Pressed（按下）和 Released（釋放）。

3.點(diǎn)擊 Pressed（按下），在組件里選中 label_1，也就是文本框，在 Animation 選項(xiàng)下勾選移動(dòng)，設(shè)置需要移動(dòng)的坐標(biāo)，也就是按下后lable_1 移動(dòng)的最終位置，下圖中最終位置 x 坐標(biāo)為206，y 坐標(biāo)為 25，動(dòng)畫(huà)效果選擇 linear 線性，持續(xù)時(shí)間為 50ms，也就是整個(gè)移動(dòng)過(guò)程的持續(xù)時(shí)間。

4.返回上一層，點(diǎn)擊 Released，一樣在組件里選中 lable_1，首先在General 下勾選可視化，選擇隱藏，也就是我們釋放按鈕后會(huì)隱藏文本框。

5.其次在 Animation 下勾選移動(dòng)，將按下圖片后的文本框移動(dòng)回原來(lái)的位置（即一開(kāi)始的坐標(biāo)位置，x 坐標(biāo) 206，y 坐標(biāo) 45），動(dòng)畫(huà)選擇 linear 線性，持續(xù)時(shí)間 0 秒也就是瞬間移動(dòng)。這樣在按下圖片時(shí) Y 軸移動(dòng)文本框 20 個(gè)像素，然后在釋放圖片時(shí)會(huì)將文本框移動(dòng)回原來(lái)的位置并且隱藏。就可以實(shí)現(xiàn)”功德 +1“飄出來(lái)的效果。

記得運(yùn)行一下，看一下模擬器的效果，這里同時(shí)也會(huì)生成需要的工程文件。

02

文件移植

這里建議使用 FreeRTOS 加一個(gè)刷新 LVGL 屏幕的任務(wù)。將上次沒(méi)移植的文件，也就是 lv_user_config 的.c 和.h 文件一并放進(jìn)來(lái)，文件可以在 AiPi-Radar-WakeUp 下的 components 下的 UI 復(fù)制過(guò)來(lái)，方法不在贅述。

由于本次刷新 LVGL 需要 FreeRTOS，所以還需要復(fù)制 config 下的 FreeRTOSConfig.h，一并放在工程目錄下，同時(shí)修改 proj.conf 文件，添加 set(CONFIG_FREERTOS 1)，開(kāi)啟 RTOS。

其次將所有的文件通過(guò) CMakeLists.txt 添加編譯。這里附上 CMake。

在 Main 里面添加一個(gè)任務(wù)，附上完整齊Mian供大家參考。

03

添加木魚(yú)敲擊音頻

光有畫(huà)面還不行，電子木魚(yú)的靈魂在于敲擊的聲音，主打一個(gè)靈魂洗滌。

這里為了方便制作，將 8388 的驅(qū)動(dòng)也移植到了 commponents，修改了部分配置文件。驅(qū)動(dòng)的原理是 I2S 驅(qū)動(dòng) 8388 芯片，將音頻文件燒錄至 flash 中，然后再接口中通過(guò) dma 輸出音頻文件。

這里已經(jīng)找到的音頻文件是wav的格式，采樣率是 44100。

將音頻文件放進(jìn)去，然后修改 flash_prog_cfg.ini 將音頻文件燒錄進(jìn) flash 中，可以參考截圖中的方法，起始地址可以參考 flash 教學(xué)博文中，這里選擇 0x230000，如果是燒錄多個(gè)文件的話，記得計(jì)算文件大小，確保地址空間不重復(fù)。

添加一個(gè) muyu_8388_pcm.h 文件，定義木魚(yú)音頻的起始地址和大小。這里初始化函數(shù)在 8388_pcm.c 中已經(jīng)有，只需要編寫(xiě)一個(gè) voice_MuYu 的函數(shù)。

修改8388_pcm.c 文件，編寫(xiě)一個(gè)播放函數(shù)，這個(gè)函數(shù)也是調(diào)用 play_voice 這個(gè)接口，參數(shù)為音頻文件的地址和大小。同時(shí)修改 i2s 的初始化，采樣率是 44100。

主函數(shù)中記得將 8388 芯片初始化。

修改LVGL工程中的 events_init.c，這個(gè)文件是事件控制文件，添加muyu_8388_pcm.h 頭文件，在 Pressed 事件中加入播放音頻的接口。

來(lái)看看最終效果（音頻版請(qǐng)看文首視頻）