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

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

01

GUI-Guider 頁面設計

先新建一個工程。

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

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

接下來添加圖片按鍵的事件。需要實現的效果是，在按下圖片（木魚）時將“功德 +1"的文本框向上移動，在釋放圖片（木魚）時將”功德 +1“隱藏。這樣的效果就是點擊時會出現”功德 +1“飄出來的效果。

1.點擊左側 imgbtn_1，圖片按鈕

2.點擊手指圖標事件設置。只需要配置兩個事件，Pressed（按下）和 Released（釋放）。

3.點擊 Pressed（按下），在組件里選中 label_1，也就是文本框，在 Animation 選項下勾選移動，設置需要移動的坐標，也就是按下后lable_1 移動的最終位置，下圖中最終位置 x 坐標為206，y 坐標為 25，動畫效果選擇 linear 線性，持續(xù)時間為 50ms，也就是整個移動過程的持續(xù)時間。

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

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

記得運行一下，看一下模擬器的效果，這里同時也會生成需要的工程文件。

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。

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

在 Main 里面添加一個任務，附上完整齊Mian供大家參考。

03

添加木魚敲擊音頻

光有畫面還不行，電子木魚的靈魂在于敲擊的聲音，主打一個靈魂洗滌。

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

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

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

添加一個 muyu_8388_pcm.h 文件，定義木魚音頻的起始地址和大小。這里初始化函數在 8388_pcm.c 中已經有，只需要編寫一個 voice_MuYu 的函數。

修改8388_pcm.c 文件，編寫一個播放函數，這個函數也是調用 play_voice 這個接口，參數為音頻文件的地址和大小。同時修改 i2s 的初始化，采樣率是 44100。

主函數中記得將 8388 芯片初始化。

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

來看看最終效果（音頻版請看文首視頻）