本項目旨在利用LVGL驅(qū)動的 Xiao-expansion-board的OLED顯示屏實現(xiàn)FFT聲音數(shù)據(jù)的實時可視化。關(guān)鍵內(nèi)容包括利用LVGL庫在OLED屏幕上進行數(shù)據(jù)可視化展示，在XIAO ESP32S3 Sense上進行聲音數(shù)據(jù)的高速采集和預(yù)處理，以及同步進行FFT (快速傅里葉) 變換計算。該項目利用了XIAO ESP32S3 Sense開發(fā)板的I2S麥克風(fēng)組件和XiaoExpansion board的OLED實現(xiàn)音頻數(shù)據(jù)可視化的過程，深入地了解聲音數(shù)據(jù)處理與可視化的技術(shù)細節(jié)，為實時聲音及音樂數(shù)據(jù)監(jiān)測與展示提供參考和應(yīng)用價值。

材料清單

硬件：

XIAOESP32S3 Sense

XiaoExpansion board

軟件：

Visual Studio Code

STEP1 - LovyanGFX驅(qū)動oled屏幕

XiaoExpansionboard拓展了多個grove接口，同時還配備了一個入門級別的ssd1306_oled,按照常規(guī)ssd1306就該使用u8g2這樣的功耗上古神器來驅(qū)動，但隨著很多高性能嵌入式開發(fā)板出現(xiàn)了，圖形驅(qū)動更新迭代的速度也加快了,驅(qū)動ssd1306也有了更多選擇。我們值得擁有最好的， 本項目中使用LovyanGFX圖形驅(qū)動庫來驅(qū)動ssd1306。LovyanGFX庫受TFT_eSPI啟發(fā)，深度改造而來，是很多大眾創(chuàng)客的摯愛，它不單只可以驅(qū)動常見的LCD屏幕，同時還可以支持一些oled屏幕，使用這個庫使得最簡單入門級別的ssd1306 oled屏幕也可以共享LCD屏幕才有的作圖函數(shù)。

在本項目完成了對xiao系列擴展板上的ss1306的適配，更進一步地，按照當(dāng)下最流行的lvgl圖形庫的作圖機理進行了移植，極大的豐富了xiao擴展板的ssd1306的應(yīng)用場景，希望你也能從中受到啟發(fā)，這個項目能為你今后的工作帶來便利。

STEP2 -基于ssd1306的lvgl移植

傳統(tǒng)的圖形繪制庫（例如經(jīng)典TFT_eSPI,Adafruit_GFX,Lovyan_GFX等）可以幫助用戶快速的完成方案。LVGL（Light and Versatile Graphics Library）的出現(xiàn)給嵌入式開發(fā)在最終產(chǎn)品呈現(xiàn)上提供了一種更優(yōu)雅的解決方案。LVGL相對于傳統(tǒng)圖形庫更適合用于嵌入式系統(tǒng)，它在性能、資源占用和靈活性方面都有一定的優(yōu)勢。然而在ssd1306上運行l(wèi)vgl曾經(jīng)是多么高遠的夢想呀，如今我們在Arduino編程環(huán)境上就可以輕松使用上，也可以共享廣闊的開源繁榮，是一次重大的進步。

移植完成后，在ssd1303上可以流暢運行l(wèi)vgl的項目，但在程序設(shè)計的時候注意顏色最好能指定白色或者黑色，這樣顯示效果更清晰。

LVGL它與傳統(tǒng)的圖形庫有幾個顯著的差異：

1.硬件加速支持：LVGL具有對硬件加速的支持，可以利用硬件功能來加快圖形渲染速度和降低CPU負(fù)載，而傳統(tǒng)的圖形庫則通常依賴于軟件渲染。

2. 內(nèi)存需求：LVGL設(shè)計時考慮了嵌入式系統(tǒng)的資源限制，因此在內(nèi)存占用上更為高效，這使得它在資源受限的嵌入式設(shè)備上表現(xiàn)更出色。

3. 事件處理：LVGL提供了靈活且強大的事件處理機制，能夠方便地實現(xiàn)觸摸屏、按鍵等輸入設(shè)備的交互，而傳統(tǒng)圖形庫在這方面可能需要額外的定制和開發(fā)。

4. 主題和樣式：LVGL提供了豐富的主題和樣式支持，可以輕松地定制界面外觀和風(fēng)格，而傳統(tǒng)圖形庫可能需要較多的工作來實現(xiàn)相同的效果。

5. 跨平臺支持：LVGL被設(shè)計成可跨平臺使用，可以在不同的嵌入式系統(tǒng)上運行，而傳統(tǒng)圖形庫可能需要針對特定平臺進行適配或者重新開發(fā)。

STEP3-聲音頻譜解析

（1）I2S麥克風(fēng)的設(shè)置

XIAOESP32S3 Sense除了裝備有攝像頭還有一個I2Smicrophone,所以可以開展天馬行空的語音類的項目。本項目正是利用了I2S microphore的優(yōu)良特性，在本項目中發(fā)揮了鍵作用。i2s_config 中我們主要關(guān)注的參數(shù)包括sample_rate、dma_buf_cout、dma_buf_len這3個參數(shù)。采樣率、dma數(shù)量、dma_buf長度參數(shù)的不同會對數(shù)據(jù)最終呈現(xiàn)產(chǎn)生明顯區(qū)別。采樣率越快就更能捕獲聲音的細節(jié)信息，但也不是可以無限的放大，我這里設(shè)了64000，意思是1秒鐘能采集64000個數(shù)值，這個能力是ADC機制的麥克風(fēng)無法企及的。DMA 是 "Direct Memory Access"（直接內(nèi)存訪問）允許外部設(shè)備直接訪問系統(tǒng)內(nèi)存，而無需CPU的干預(yù)。這樣可以提高數(shù)據(jù)傳輸?shù)男剩瑴p少對CPU的負(fù)擔(dān)，從而提升系統(tǒng)整體性能。這里我們用一個比喻來幫助大家理解體會DMA和MCU之間的關(guān)系，DMA它就像會自己獨立好學(xué)的孩子，它完成“作業(yè)”后，就會向老爸（cpu/mcu）報告，然后在老爸忙檢查作業(yè)的時候，這個好孩子又自覺得跑去做另一門作業(yè)了，一刻也沒停過，反倒老爸忙個不停。這樣理解的話dma_buf_count 參數(shù)至少是2，（就是給孩子布置兩份作業(yè)一個數(shù)學(xué)，一個語文，輪流干，不然做完一門作業(yè)他就沒事干了，肯定會跑去玩手機，也可設(shè)為3，多布置一份英語作業(yè)）。dma_buf_len這里呢，就更有意思了，因為好孩子一把作業(yè)做完就會立即送去給老爸看，如果這孩子做一個題目就去給老爸看，就不斷的去打擾老爸，老爸就會很煩，老爸就跟孩子說你把這一整頁都做完了再來找我，所以為了減少對cpu的占用次數(shù)和時間，也把這參數(shù)設(shè)得盡量大，但也有個范圍是8-1024，這樣孩子跟老爸默契的配合下，老爸工作安心工作，孩子認(rèn)真學(xué)習(xí)，其樂融融，大家的工作都完成得很漂亮。

? ??

（I2S調(diào)參指南）

（2）FFT數(shù)據(jù)處理

在臺面上我們只看到兩個入口函數(shù)，第一步用FreeRTOS 在esp32的第二個核心上創(chuàng)建一個音頻數(shù)據(jù)處理任務(wù)，這個任務(wù)的句柄是processing_task_handle，第二個是 i2s_sampler.start 函數(shù)，我們把剛才配置好的i2s設(shè)置傳遞給它，它就會在后臺默默的干活并通過上述句柄將dma采集到的數(shù)據(jù)釋放出來。在I2SSampler里面FreeRTOS的經(jīng)典招式都用上了，包括消息隊列，消息直接通知，多任務(wù)創(chuàng)建，看似慌亂，實際是在密鑼緊鼓的忙乎著給老板們“做飯”。另外一個功臣是Processor，它就是FFT的化身，它接收了I2SSampler傳來的消息，然后嚼爛消化成漂亮干凈的數(shù)據(jù)。我就是喜歡這樣的好同事，一直默默無聞地工作，做好事不留名。實際這些在后臺默默無聞埋頭苦干的小伙伴們才這個項目的精華部分。

(3)LVGL動態(tài)繪圖

我們采用一個振幅更新函數(shù)（bar_value_update）來處理頻譜和屏幕大小適配的工作，它接受一個傅里葉變換計算得到的浮點型數(shù)組mag，循環(huán)遍歷mag數(shù)組的每隔兩個元素，計算它們的平均值ave，并將其與窗口高度進行比較得到柱狀圖的值。整體邏輯是計算加權(quán)平均值，然后根據(jù)條件判斷，更新柱狀圖的值和峰值，并且采用了一階滯后的平滑處理，使得柱狀圖的變化更加平穩(wěn)。

而圖形的繪制關(guān)鍵環(huán)節(jié)在于把頻譜對象作為一個容器進行繪制（spectrum_draw_event_cb），繪圖沒有采用lvgl常規(guī)的使用預(yù)設(shè)的作圖函數(shù)，而是采用底層的繪圖方法。繪圖實際發(fā)生在LV_EVENT_DRAW_POST（繪圖結(jié)束后）事件，會對頻譜對象進行繪制操作。整個過程中使用了繪制矩形（lv_draw_rect）、繪制線條（lv_draw_line）機制等。矩形圖代表瞬時的頻譜強度，線條用于代表頻譜峰值的滯后響應(yīng)，由于線條的寬度是2 像素，所以看起來也是一個小長方體。它通過循環(huán)遍歷一個大小為頻譜分析結(jié)果數(shù)據(jù)SAMPLE_SIZE的數(shù)組，繪制矩形和兩條線條，其中bar_chart和bar_chart_peaks是用于確定柱狀圖高度的數(shù)據(jù)數(shù)組。快速地在spectrum_obj對象上繪制柱狀圖，并通過柱狀圖的高度數(shù)據(jù)進行實時更新。即使是在非黑即白的Oled屏上也能夠響應(yīng)及時，產(chǎn)生了良好的動態(tài)效果。

總結(jié)

最終在xiao expansion board的屏幕上展示了經(jīng)過FFT處理的音樂信息，它能夠即時的對當(dāng)前麥克風(fēng)采集到聲音作出反饋。它就好像是一座小型的音樂的噴泉，在水平面被音符的動能彈起，形成了美麗的水花飛濺的壯觀場景。每一個頻率成分就如同飛濺的水花一樣，展現(xiàn)出音樂中多姿多彩的細節(jié)和紋理，從低頻的穩(wěn)重沉郁到高頻的輕盈活潑，每個音符都呈現(xiàn)出獨特的張力與韌性。充分展現(xiàn)了FFT解析音樂的魅力和神奇之處，通過這種方式讓人仿佛能夠透過頻譜數(shù)據(jù)看到音樂的靈魂，令人陶醉。






審核編輯：劉清