2024年的第一篇教程來了,本篇學習如何添加LVGL事件,并制作完成一個電子木魚(小美苦苦哀求,我略微出手而已)。祝大家2024積德累功,心想事成!接下來看看如何用小安派-Eyes-S1做一個電子木魚。
01
GUI-Guider 頁面設(shè)計
先新建一個工程。
直接進入 UI 設(shè)計界面,這里用到了兩個組件,一個是圖片按鈕,一個是文本框。
先添加一個圖片按鈕,這就需要一張木魚圖,大家可以添加自己喜歡的任意圖案。大小比例記得調(diào)整,需要注意的是,這里建議準備兩張一模一樣的圖片,區(qū)別在于他們的大小,一張大圖+一張小圖,大圖添加在釋放后的圖片,小圖添加在按下時圖片,就達成敲下去的變化效果。
添加一個文本框,先固定好位置,在右側(cè)的文本輸入“功德 +1”字樣,注意字體選擇simsun才可以顯示中文。到這一步,所需要的組件已經(jīng)添加成功了。
接下來添加圖片按鍵的事件。需要實現(xiàn)的效果是,在按下圖片(木魚)時將“功德 +1"的文本框向上移動,在釋放圖片(木魚)時將”功德 +1“隱藏。這樣的效果就是點擊時會出現(xiàn)”功德 +1“飄出來的效果。
1.點擊左側(cè) imgbtn_1,圖片按鈕
2.點擊手指圖標事件設(shè)置。只需要配置兩個事件,Pressed(按下)和 Released(釋放)。
3.點擊 Pressed(按下),在組件里選中 label_1,也就是文本框,在 Animation 選項下勾選移動,設(shè)置需要移動的坐標,也就是按下后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 個像素,然后在釋放圖片時會將文本框移動回原來的位置并且隱藏。就可以實現(xiàn)”功德 +1“飄出來的效果。
記得運行一下,看一下模擬器的效果,這里同時也會生成需要的工程文件。
02
文件移植
這里建議使用 FreeRTOS 加一個刷新 LVGL 屏幕的任務(wù)。將上次沒移植的文件,也就是 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 里面添加一個任務(wù),附上完整齊Mian供大家參考。
03
添加木魚敲擊音頻
光有畫面還不行,電子木魚的靈魂在于敲擊的聲音,主打一個靈魂洗滌。
這里為了方便制作,將 8388 的驅(qū)動也移植到了 commponents,修改了部分配置文件。驅(qū)動的原理是 I2S 驅(qū)動 8388 芯片,將音頻文件燒錄至 flash 中,然后再接口中通過 dma 輸出音頻文件。
這里已經(jīng)找到的音頻文件是wav的格式,采樣率是 44100。
將音頻文件放進去,然后修改 flash_prog_cfg.ini 將音頻文件燒錄進 flash 中,可以參考截圖中的方法,起始地址可以參考 flash 教學博文中,這里選擇 0x230000,如果是燒錄多個文件的話,記得計算文件大小,確保地址空間不重復。
添加一個 muyu_8388_pcm.h 文件,定義木魚音頻的起始地址和大小。這里初始化函數(shù)在 8388_pcm.c 中已經(jīng)有,只需要編寫一個 voice_MuYu 的函數(shù)。
修改8388_pcm.c 文件,編寫一個播放函數(shù),這個函數(shù)也是調(diào)用 play_voice 這個接口,參數(shù)為音頻文件的地址和大小。同時修改 i2s 的初始化,采樣率是 44100。
主函數(shù)中記得將 8388 芯片初始化。
修改LVGL工程中的 events_init.c,這個文件是事件控制文件,添加muyu_8388_pcm.h 頭文件,在 Pressed 事件中加入播放音頻的接口。
來看看最終效果
審核編輯:劉清
-
FreeRTOS
+關(guān)注
關(guān)注
12文章
483瀏覽量
61849 -
模擬器
+關(guān)注
關(guān)注
2文章
861瀏覽量
43086 -
GUI
+關(guān)注
關(guān)注
3文章
632瀏覽量
39428 -
LVGL
+關(guān)注
關(guān)注
0文章
79瀏覽量
2811
原文標題:功德+1,用小安派-Eyes-S1做一個電子木魚
文章出處:【微信號:安信可科技,微信公眾號:安信可科技】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
相關(guān)推薦
評論