0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

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

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

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

安信可科技 ? 來源:安信可科技 ? 2024-01-13 15:18 ? 次閱讀

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

01

GUI-Guider 頁面設(shè)計

先新建一個工程。

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

直接進入 UI 設(shè)計界面,這里用到了兩個組件,一個是圖片按鈕,一個是文本框。

先添加一個圖片按鈕,這就需要一張木魚圖,大家可以添加自己喜歡的任意圖案。大小比例記得調(diào)整,需要注意的是,這里建議準備兩張一模一樣的圖片,區(qū)別在于他們的大小,一張大圖+一張小圖,大圖添加在釋放后的圖片,小圖添加在按下時圖片,就達成敲下去的變化效果。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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。

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

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

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

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

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

03

添加木魚敲擊音頻

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

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

這里已經(jīng)找到的音頻文件是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 文件,定義木魚音頻的起始地址和大小。這里初始化函數(shù)在 8388_pcm.c 中已經(jīng)有,只需要編寫一個 voice_MuYu 的函數(shù)。

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

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

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

主函數(shù)中記得將 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








審核編輯:劉清

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

    關(guān)注

    12

    文章

    483

    瀏覽量

    61849
  • 模擬器
    +關(guān)注

    關(guān)注

    2

    文章

    861

    瀏覽量

    43086
  • GUI
    GUI
    +關(guān)注

    關(guān)注

    3

    文章

    632

    瀏覽量

    39428
  • LVGL
    +關(guān)注

    關(guān)注

    0

    文章

    79

    瀏覽量

    2811

原文標題:功德+1,用小安派-Eyes-S1做一個電子木魚

文章出處:【微信號:安信可科技,微信公眾號:安信可科技】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏

    評論

    相關(guān)推薦

    基于Eyes-DU板子制作PWM循環(huán)呼吸燈

    上周發(fā)布了新的開源硬件——小安-Eyes-DU,DU板子亮點是什么?小安來解釋下。
    的頭像 發(fā)表于 08-11 17:50 ?1673次閱讀
    基于<b class='flag-5'>Eyes</b>-DU板子制作<b class='flag-5'>一</b><b class='flag-5'>個</b>PWM循環(huán)呼吸燈

    零基礎(chǔ)開發(fā)小安-Eyes-DU之【PWM循環(huán)呼吸燈】

    性能。 既然是開源硬件,那必然講究DIY,今天小安親自用小安-Eyes-DU來制作
    的頭像 發(fā)表于 08-14 15:37 ?697次閱讀
    零基礎(chǔ)開發(fā)<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes</b>-DU之【PWM循環(huán)呼吸燈】

    何用小安玩小霸王游戲

    “啊哈!小霸王!其樂無窮?。 ?,還記得小時候玩的小霸王游戲機嗎?這次小安的用戶來帶大家回憶起童年啦,來看看安信可社區(qū)大佬如何用小安玩小霸
    的頭像 發(fā)表于 11-05 10:08 ?596次閱讀
    如<b class='flag-5'>何用</b><b class='flag-5'>小安</b><b class='flag-5'>派</b>玩小霸王游戲

    零基礎(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 ?820次閱讀
    <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/S2多功能開發(fā)板

    前言 AiPi-Eyes-S1 是安信可開源團隊專門為Ai-M61-32S設(shè)計的款開發(fā)板,支持WiFi6、BLE5.3。所搭載的Ai-M61-32S 模組具有豐富的外設(shè)接口,具體包括
    的頭像 發(fā)表于 06-20 09:51 ?579次閱讀
    安信可開源工程——<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ā)板

    小安開源硬件制作桌面天氣站

    上周安信可推出了小安的2款開源硬件——AiPi-Eyes-S1、AiPi-Eyes-S2,安信可應(yīng)用開發(fā)團隊用小安
    的頭像 發(fā)表于 07-02 11:07 ?889次閱讀
    用<b class='flag-5'>小安</b><b class='flag-5'>派</b>開源硬件制作<b class='flag-5'>一</b><b class='flag-5'>個</b>桌面天氣站

    何用小安開源硬件制作桌面天氣站?

    安信可推出了小安的2款開源硬件—— AiPi-Eyes-S1、AiPi-Eyes-S2, 近期應(yīng)用開發(fā)團隊用小安
    的頭像 發(fā)表于 07-03 14:14 ?774次閱讀
    如<b class='flag-5'>何用</b><b class='flag-5'>小安</b><b class='flag-5'>派</b>開源硬件制作<b class='flag-5'>一</b><b class='flag-5'>個</b>桌面天氣站?

    -Eyes-DU開發(fā)板的參數(shù)說明

    本周又來小安開源硬件——小安-Eyes-DU開發(fā)板,來看看參數(shù)~
    的頭像 發(fā)表于 08-06 10:18 ?572次閱讀
    安<b class='flag-5'>派</b>-<b class='flag-5'>Eyes</b>-DU開發(fā)板的參數(shù)說明

    安信可開源硬件——小安-Eyes-DU開發(fā)板

    安信可科技又來小安開源硬件——小安-Eyes-DU開發(fā)板,來看看參數(shù)~ 01概述
    的頭像 發(fā)表于 08-07 14:52 ?728次閱讀
    安信可開源硬件——<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes</b>-DU開發(fā)板

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

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

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

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

    小安-Eyes-S1安裝VMware與Ubuntu教程

    設(shè)置了中文,換好了國內(nèi)的清華APT源,安裝VScode與必要的插件,拉取了截至目前更新的小安最新的SDK和子模塊,配置好了編譯環(huán)境。由于集成度較高,本次下載的壓縮包高達10G。選擇上傳了百度云(主要是莫工有會員),若有其他需求后期也可以上傳至其他云。
    的頭像 發(fā)表于 09-24 10:58 ?793次閱讀
    <b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-S1</b>安裝VMware與Ubuntu教程

    制作86智能屏,用安信可的小安-Eyes-R1/R2

    最近持續(xù)關(guān)注我們的朋友們知道,小安新品開發(fā)我們都快卷死自己了,又上新??! ? 接口說明及系統(tǒng)框圖 AiPi-Eyes-R1 AiPi-Eyes-R2 乍
    的頭像 發(fā)表于 10-23 17:55 ?505次閱讀
    制作86智能屏,用安信可的<b class='flag-5'>小安</b><b class='flag-5'>派</b>-<b class='flag-5'>Eyes-R1</b>/R2

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

    2024積德累功,心想事成!接下來 看看如何用小安-Eyes-S1做一個電子
    的頭像 發(fā)表于 01-16 14:33 ?545次閱讀
    功德+<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>