Component to display audio spectral graph

[carlosdelfino]

 

Does anyone have a component to display audio spectral graphs, specifically for the STM32N6570 Discovery?

[Osman SOYKURT]

Hello @carlosdelfino ,

Do you have an array of all the data points for your audio spectral graph?
Have you tried the graph widget?
Depending of the number of points and if you're running on STM32N6, performance should be ok, but if not I have another suggestion which is to use a custom vector renderer class that can draw more than 3000 points and keeping a good rendering time. I have a project that I can share with you later if you need that, but first I think the graph widget should be tried.

[carlosdelfino]

I wasn't clear about the type of data displayed in the graph; it's a frequency spectral graph, thus representing a third dimension of the data with colors.

In addition to the spectral graph, I also intend to display a cepstral graph.

[Osman SOYKURT]

Hello @carlosdelfino ,

Ok and what about my suggestion using the graph widget? Have you tried that? If you need help to get started, we have a example in the designer which you could get inspiration from. 

 

[carlosdelfino]

I need a spectrogram; I made a simulator with Python. The first image below shows the spectrogram I'm trying to create in touchgfx, while the second image, which is the FFT, I can do without problems.

Image 1:

'

 

Image 2:

 

[Osman SOYKURT]

Hello @carlosdelfino ,

I am able to do this on m STM32N6570-DK board :

It is made of 800 x 3 = 2400 points , and  render time is around 6ms.

I'm using VectorRenderer class to draw this. Let me know if you want me to share my project with you.

[carlosdelfino]

Hello @Osman SOYKURT, thank you for your reply

The graph I need is a Spectral graph, which has 3 dimensions: Time (x), Frequency (y), and magnitude (colors). As in the image below, the first is spectral, the second is Mel Band obtained from Cepstral, and the third is FFT:

 

[carlosdelfino]

I've reached some conclusions about the component responsible for generating the spectrogram. It doesn't seem difficult to implement, although it requires a good command of TouchGFX. At the moment, I don't yet have the necessary knowledge to develop it on my own. I believe that guidance from someone experienced in creating custom components would make the path shorter and more objective. I already have some implementation ideas, but I need to validate the approach before moving forward.

My proposal is based on a multidimensional matrix where, in addition to the time index, I store the frequencies present and the magnitude corresponding to each one. Considering an interval of 0 to 3 seconds (for example, 3000 ms), I can fragment the time into smaller windows—such as 20 ms—depending on the characteristics of the microphone used, in this case the STM32N6570-DK. Each time index of the matrix would represent a frame containing multiple frequencies detected at that instant, along with their magnitudes. It's important to highlight that there isn't just one frequency per instant, but potentially hundreds or thousands within the 0 to 1 kHz range. These frequencies could be grouped into bands, for example, 30 Hz or 60 Hz, forming the Y-axis of the spectrogram.

The challenge lies in the graphical representation, as the available display is approximately 800x480 pixels, which limits the effective vertical resolution after discounting labels and markers. I would need to compress the frequency bands to something between 100 and 400 pixels in height. Each pixel would represent an interpolation of the magnitude of that band, probably using a color gradient to improve visualization, since a single isolated pixel would have little visual expressiveness. I am still refining the model of this matrix, which would basically give me access to tuples of the type (time, frequency, magnitude), and the component would draw the graph from that. I searched the manuals for some reference or example close to this type of implementation, but I haven't yet found anything that directly solves this need.

[Osman SOYKURT]

Hello @carlosdelfino ,

I can escalate your support request to the dedicated support team for one-to-one guidance if you want. Should I put you in contact with them?

[carlosdelfino]

Yes please,

I'm starting out with the STM32, especially focusing on the STM32N6, and it would be valuable for me to learn how to create this graph.

[Osman SOYKURT]

Hello @carlosdelfino ,

I transmitted the case to our support team.