Skip to main content
Associate III
July 18, 2024
Question

Rendering frequency spectrum

  • July 18, 2024
  • 2 replies
  • 2976 views

Hello,

i want to render frequency spectrum FFT in the small area of screen and handle touch in this area. This should be done by some custom widget/container. Can you help me how to do it?

 

Best Regards,

Petr

2 replies

GaetanGodart
Technical Moderator
July 19, 2024

Hello @Petr3 ,

 

It seems that the graph widget would be enough to display fast Fourier transform.

The dynamic graph have more methods available. You can for instance click on an area of the screen to get the data there.

Do you have something specific that you want to do that a graph widget wouldn't be able to do?

 

Regards,

Petr3Author
Associate III
July 20, 2024

Hello GaetanGodart,

yes, i trying to show RF signal periodically recieved from FPGA. So STM should recieve data, compute FFT and show each sample set in the display area. Additionaly touch and slide in this area should call some functions for show some menu, move frequency spectrum left/right etc. Basically touch and slide in the area should be handled.

 

Best Regards,

Petr

GaetanGodart
Technical Moderator
July 22, 2024

Sure!

 

I don't know how to help you on getting the data and computing the FFT.

 

However, I can help you on displaying the result of the FFT.
It seems you want to be able to zoom in and out and to move inside the graph when zoomed in.

To zoom, you can add a couple buttons (one to zoom in and one to zoom out).
You can look at the Dynamic Graph Example and at the methods getScale and setInterval.

To slide, you can fetch a drag movement directly on the widget natively.
You can look at the method setXAxisOffset.

 

Regards,

Petr3Author
Associate III
January 21, 2025

Hello @GaetanGodart ,

yes a little bit. I created some space for dynamic bitmaps in the third bank of my SDRAM(in the second bank it doesn't work probably due to some TouchGFX protection/usage, screen buffer is located in the first bank):

 

FrontendApplication::FrontendApplication(Model& m, FrontendHeap& heap)
 : FrontendApplicationBase(m, heap)
{
#ifdef SIMULATOR
 const uint32_t cacheSize = 0x100000; //1 MB, as example
 uint16_t* const cacheStartAddr = (uint16_t*)malloc(cacheSize);
 Bitmap::setCache(cacheStartAddr, cacheSize, 4);
#else
 // Place cache start address in SDRAM at address 0x60400000;
 uint16_t* const cacheStartAddr = (uint16_t*)0x60400000;
 const uint32_t cacheSize = 0x100000; //1 MB, as example
 Bitmap::setCache(cacheStartAddr, cacheSize,4);
#endif
}

 

 

Next i insterted manually image13 in my ScreenView:

 

private:
 Image image13;

 

 

Then i created bitmap in setupScreen:

 

void SDRScreenView::setupScreen()
{
	SDRScreenViewBase::setupScreen();

	BitmapId bmpId;

	//Create (16bit) dynamic bitmap of size 100x150
	const int width = 600;
	const int height = 300;
	bmpId = Bitmap::dynamicBitmapCreate(600, 300, Bitmap::RGB565);

	//set all pixels white
	if (bmpId != BITMAP_INVALID)
	{
	 memset(Bitmap::dynamicBitmapGetAddress(bmpId), 0xFF, width*height*2);
	}

	//Make Image widget show the dynamic bitmap
	image13.setBitmap(Bitmap(bmpId));

	//Position image and add to View
	image13.setXY(100, 100);
	add(image13);
}

 

 

And finally fill it with single color:

 

void SDRScreenView::setWifi(bool state)
{
	IMAGES_wifi_active.setVisible(state);
	IMAGES_wifi_active.invalidate();
	static bool state_prev;
	if (state != state_prev)
	{
		static BitmapId bmpId;
		const int width = 600;
		const int height = 300;
		Bitmap::dynamicBitmapDelete(bmpId);
		bmpId = Bitmap::dynamicBitmapCreate(600, 300, Bitmap::RGB565);
		if (bmpId != BITMAP_INVALID)
		{
		 if(state) memset(Bitmap::dynamicBitmapGetAddress(bmpId), 0xFF, width*height*2);
		 else memset(Bitmap::dynamicBitmapGetAddress(bmpId), 0x55, width*height*2);
		}
		image13.setBitmap(Bitmap(bmpId));
		image13.invalidate();
		//image13.setXY(100, 100);
		//add(image13);
	}
	state_prev = state;
}

 

 

The big rectangle is showed and changes color based on state variable.

Now i want to continue with create some touch "zones" inside this rectangle and call functions based on different locations inside of it.

GaetanGodart
Technical Moderator
February 18, 2025

Hello @Petr3 ,

 

I am not sure why you are doing everything by hand.

Couldn't you use the graph widget and put it inn a custom container and use the handleClickEvent?

 

Regards,

Petr3Author
Associate III
March 7, 2025

Hello @GaetanGodart ,

maybe i could, this is my first project with TouchGFX. So i dont have any experience with it and i dont know about possibilities of built-in components.

Problem is that i have written older project without TouchGFX as direct writing of pixels into screen memory from application. Now i want to convert it or add it into TouchGFX framework.

The spectrum and waterfall that i mentioned above are refreshed every 100ms. This is not typical curve graph, it is something like histogram collored based on signal level. Waterfall is more different from typical graph too. This is the reason why i want to render graph with the same approach(generate screen/graph pixel by pixel in application and validate it for TouchGFX).

 

Petr3