0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

功德+1,用小安派-Eyes-S1做一個電子木魚

安信可科技 ? 2025-04-09 18:38 ? 次閱讀

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

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


01

GUI-Guider 頁面設(shè)計

先新建一個工程。


cbb9211a-152e-11f0-9434-92fbcf53809c.png


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


cbf6d0dc-152e-11f0-9434-92fbcf53809c.jpg


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


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


1.點擊左側(cè) imgbtn_1,圖片按鈕


cc13c886-152e-11f0-9434-92fbcf53809c.jpg


2.點擊手指圖標事件設(shè)置。只需要配置兩個事件,Pressed(按下)和 Released(釋放)。

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

cc2d3852-152e-11f0-9434-92fbcf53809c.jpg

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


cc4745da-152e-11f0-9434-92fbcf53809c.jpg


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


cc5dd73c-152e-11f0-9434-92fbcf53809c.jpg


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

02

文件移植

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

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

cc90104e-152e-11f0-9434-92fbcf53809c.jpg


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


ccb1cc84-152e-11f0-9434-92fbcf53809c.jpg


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


ccd5abd6-152e-11f0-9434-92fbcf53809c.png

03

添加木魚敲擊音頻

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

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

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

cd1af8bc-152e-11f0-9434-92fbcf53809c.jpgcd33bf96-152e-11f0-9434-92fbcf53809c.jpg


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


cd539d52-152e-11f0-9434-92fbcf53809c.jpg


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


cd6fc996-152e-11f0-9434-92fbcf53809c.jpg


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


cd898282-152e-11f0-9434-92fbcf53809c.jpg


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


cda22184-152e-11f0-9434-92fbcf53809c.jpg


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


cdc827f8-152e-11f0-9434-92fbcf53809c.jpg



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


cdfe00a8-152e-11f0-9434-92fbcf53809c.gif

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • GUI
    GUI
    +關(guān)注

    關(guān)注

    3

    文章

    677

    瀏覽量

    40780
  • LVGL
    +關(guān)注

    關(guān)注

    1

    文章

    100

    瀏覽量

    3555
收藏 0人收藏

    評論

    相關(guān)推薦
    熱點推薦

    如何用小安-Eyes-S1做一個電子木魚?

    2024年的第篇教程來了,本篇學(xué)習(xí)如何添加LVGL事件,并制作完成電子木魚(小美苦苦哀求,我略微出手而已)。祝大家2024積德累功,心
    的頭像 發(fā)表于 01-13 15:18 ?1381次閱讀
    如何用<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>?

    零基礎(chǔ)開發(fā)小安-Eyes-S1外設(shè)篇——GPIO 輸入輸出

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 10-25 13:50 ?1387次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>外設(shè)篇——GPIO 輸入輸出

    零基礎(chǔ)開發(fā)小安-Eyes-S1外設(shè)篇——I2S

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 12-13 18:02 ?1515次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>外設(shè)篇——I2<b class='flag-5'>S</b>

    零基礎(chǔ)開發(fā)小安-Eyes-S1 外設(shè)篇——DAC

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 12-27 10:55 ?1150次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b> 外設(shè)篇——DAC

    零基礎(chǔ)開發(fā)安信可小安-Eyes-S1【入門篇】——初識小安-Eyes-S1

    初識小安-Eyes-S1 前言:本教程針對零基礎(chǔ)人員可以快速上手小安-Eyes-S1實現(xiàn)
    發(fā)表于 09-08 11:06

    小安-Eyes-S1/S2多功能開發(fā)板簡介

    今天,我們在小安放出新鮮的開發(fā)板產(chǎn)品AiPi-Eyes-S1小安-Eyes-S1)、AiP
    的頭像 發(fā)表于 06-19 10:10 ?1172次閱讀
    <b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>/<b class='flag-5'>S</b>2多功能開發(fā)板簡介

    小安-Eyes-S1外設(shè)接口簡介

    前言:本教程針對零基礎(chǔ)人員可以快速上手小安-Eyes-S1實現(xiàn)些簡單的應(yīng)用開發(fā),僅供參考學(xué)習(xí),本人也在學(xué)習(xí)的過程中,感謝大家支持。
    的頭像 發(fā)表于 09-18 09:55 ?1093次閱讀

    零基礎(chǔ)開發(fā)小安-Eyes-S1【入門篇】——初識小安-Eyes-S1

    前言:本教程針對零基礎(chǔ)人員可以快速上手小安-Eyes-S1實現(xiàn)些簡單的應(yīng)用開發(fā),僅供參考學(xué)習(xí),本人也在學(xué)習(xí)的過程中,感謝大家支持。 小安
    的頭像 發(fā)表于 09-18 15:41 ?913次閱讀
    零基礎(chǔ)開發(fā)<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>

    功德+1,小安-Eyes-S1做一個電子木魚

    2024積德累功,心想事成!接下來 看看如何用小安-Eyes-S1做一個電子木魚 。 01、G
    的頭像 發(fā)表于 01-16 14:33 ?1194次閱讀
    <b class='flag-5'>功德</b>+<b class='flag-5'>1</b>,<b class='flag-5'>用</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>

    零基礎(chǔ)開發(fā)小安-Eyes-S1【外設(shè)篇】——PWM

    =200ms。PWM 占空比: 脈沖周期內(nèi),高電平的時間占整個周期時間的比例。單位是 %,高電平時間是 50ms,周期是 100ms。占空比就是 50/100*100%=50%。了解小安
    的頭像 發(fā)表于 11-06 16:10 ?431次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【外設(shè)篇】——PWM

    零基礎(chǔ)開發(fā)小安-Eyes-S1 外設(shè)篇 ——I2C

    。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 11-27 16:39 ?735次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b> 外設(shè)篇 ——I2C

    零基礎(chǔ)開發(fā)小安-Eyes-S1【外設(shè)篇】——FLASH

    。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1、
    的頭像 發(fā)表于 12-05 14:31 ?663次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【外設(shè)篇】——FLASH

    零基礎(chǔ)開發(fā)小安-Eyes-S1——初識LVGL并搭建最小工程

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 01-03 14:09 ?802次閱讀

    零基礎(chǔ)開發(fā)小安-Eyes-S1【進階篇】——初識 LVGL 并搭建最小工程

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 01-06 16:14 ?641次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>【進階篇】——初識 LVGL 并搭建最小工程

    零基礎(chǔ)開發(fā)小安-Eyes-S1 進階篇 ——通過屏幕輸入連接 Wi-Fi

    等。 AiPi-Eyes-S1集成了SPI屏幕接口,DVP攝像頭接口,外置ES8388音頻編解碼芯片以及預(yù)留TF卡座,并且引出USB接口,可接入USB攝像頭。 從零開始學(xué)習(xí)小安1
    的頭像 發(fā)表于 01-16 09:47 ?390次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b> 進階篇 ——通過屏幕輸入連接 Wi-Fi

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會員交流學(xué)習(xí)
    • 獲取您個性化的科技前沿技術(shù)信息
    • 參加活動獲取豐厚的禮品