How to plot spectrogram on Matlab App Designer with UIAxes?

Hello, I'm trying to use spectrogram function to plot spectrogram with Matlab App Designer, not the old GUI. This means I got uifigures and uiaxes, not figure and axes in the old GUI system. There are some answers about using spectrogram function in the old GUI system, which are using axes() function to set current axes, unfortunately, I haven't seen something about using spectrogram function in App Designer, can anyone help, plz?

[a bc]

TO make this clear, I try to use the Matlab spectrogram function in App Designer to plot spectrogram

s=spectrogram(x)

The keypoint is use this function to plot with UIFigures and UIAxes. I hope it's clear now. Any advice will be appreciated!

Answer 1

[Birdman]

Imagine you have a 2D axes and you hold it in a variable:

axesSpec=app.UIAxes;

Then, I assume that you already obtain the output of spectrogram, and which actually means the psd of a signal, you need to plot it on a semilogx plot. Consider the following notation(assume that y and f are the outputs and frequency for the signal respectively):

axesSpec.XScale='log';
plot(axesSpec,f,y);

This notation should do it. Hope I am clear.

[a bc]

Thanks for your quick reply! I guess I didn't make this question clear. I want to plot spectrogram directly in App Designer using the Matlab function

s=spectrogram(x);

not compute the psd first manually, then plot it. Thanks again, anyway.

[Birdman]

Yes, that is what I have explained here. Three output version of spectrogram function also gives you the frequency vector. To make something clear, I did not tell you to use psd function or I did not tell you not to use spectrogram. You have to use it. I said it is another way of taking psd of a signal. Check the usages of spectrogram function from the following link:

https://www.mathworks.com/help/signal/ref/spectrogram.html

Notice that three-output versions gives you transformed vector named as s and frequencies f. All you need to do is to put f to x axis, s to y axis.

all you have is just additional two or three lines of code.

The codes I wrote in my answer are related to App Designer. Please check the 2D axes usage in App Designer and its code.

[a bc]

I tried this as you said

 [x,Fs] = audioread('handel.wav');
 [s,f,t]=spectrogram(x,Fs);
 axesSpec=app.UIAxes;
 axesSpec.XScale='log';
 plot(axesSpec,f,s);

the first picture 'code_test' is the output. I'm not sure if that's what you mean. But I want to get the result like the second picture 'ideal_result' using following code

[x,Fs] = audioread('handel.wav');
spectrogram(x);

Tip: this is the code in .m file, I try to get that in App Designer. Any idea? Thanks a lot.

[Birdman]

The first output is actually what I try to say.

axesSpec=app.UIAxes; axesSpec.XScale='log'; plot(axesSpec,f,s);

These three lines have to be written in App Designer.

As far as I understand, your ideal output has a linearly scaled x axis, so therefore change log to linear. And also you need to set your x axis limits according to your ideal output figure x axis because it has normalized frequency in itself.

[a bc]

I think I got your idea now. You are really helpful. Thanks a lot for your patience!

[Birdman]

You are welcome !

[Jan Kuttruff]

Hello, I also try to plot my spectrogram into my App like your ideal_result.png . I have tried to understand the code lines of Birdman but I don't get it how to get it right for the result like the ideal_result. Can you show how you have done it?

[a bc]

Hi Jan

If you use the new MATLAB App Designer to build your App, I can't find the solution to draw spectrogram like ideal_result.png till the time I raised the question. So finally I switched to the old GUI tool to build my App and draw ideal_result.png successfully. Since the new MATLAB App Designer is far from mature, I recommend you to use the old GUI tool for full functionality for now.

If so, refer to my_github_project for the implemention detail on the old GUI tool.

Answer 2

[John]

Please see below for an update using AppDesigner - Using 2021a

Requires signal processing toolbox - but spectrogram outputs should be similar to pspectrum outputs

% dimensions of app.dat2plot = [1 2886144] 
% Sampling frequency is 4kHz

[S,F,T] = pspectrum(transpose(app.dat2plot),4000,'spectrogram', 'FrequencyLimits',[0 50],'MinThreshold',-110);
 
imagesc(app.UIAxes2, T, flipud(F), rot90(log(abs(S')))); %plot the log spectrum
 
set(app.UIAxes2,'YDir', 'normal'); % flip the Y Axis

Outputs image below in AppDesigner

[Andrew Cline]

Thanks for this answer. Never would have figured this out myself.

Also, you can do this afterwards to fit it to the window

axis(app.UIAxes2,'tight')