News:

Welcome to the Bridgetek Community!

Please read our Welcome Note

Technical Support enquires
please contact the team
@ Bridgetek Support

Please refer to our website for detailed information on all our products - Bridgetek - Bridging Technology

Main Menu

FT813 GUI Development Workflow

Started by Nick, June 24, 2025, 09:21:14 AM

Previous topic - Next topic

Nick

Hi,

Following on from my introduction here a few months ago, I've now completed my STM32H755 PCB design (and bringup) and I want to start on the GUI development. My display is a Riverdi 800x480 capacitive touch with FT813 and I'm using SPI (1).

I've gone through several of the ESD tutorial videos on YouTube and have been looking at the documents. There's a lot of information to digest and without reading a lot more than I have already I'm not really getting the confidence that I want to know that I'm going in the right direction.

Firstly, my target platform is a custom PCB using STM32H7 with the display and EVE chip mentioned above. ESD wants me to define several aspects of my h/w: host processor, EVE platform, Flash memory etc.. whereas the only thing that seems relevant to me is that I'm using FT813 and I see now way to select a configuration that correlates well with my hardware. Should I worry about this? May I find in future that I can't generate code for my platform?

Secondly, is ESD the best place to start with my GUI, or should I firstly use ESE? I know what I want to implement and don't particularly feel the need to prototype screen layouts. I suppose I'm still unclear about how ESE fits into the development process.

In what I've read so far, the ESD tutorials and examples seem self contained and with no data input/output to/from the host applications. A key requirement of my system is to show real-time views of spectrograms 2D heat maps, so frame-by-frame updates of charts and bit-maps will be needed. Are there any examples that show these kind of data interactions with the GUI?

My overall impression is that GUI dev with the EVE tools that I've seen is quite far from my past experience of WYSIWYG design, with a considerably steeper learning curve. Any tips on how best to get up that curve would be very much appreciated.

Thanks in advance,
Nick

BRT Community

Hi Nick,

Great to hear that you have your PCB designed.

There are a few different development approaches that you can use.

EVE Screen Designer will allow you to lay out the user interface via the drag-and-drop editor. The latest ESD versions have STM32 CUBE IDE export also included and so you can choose the STM32 as the platform in ESD. You can then export to an STM32 CUBE IDE project via the menu and then build on CUE IDE. ESD also includes the flowchart based programming of the application flow. For this reason, the ESD project typically runs on the MCU as the main program loop and interaction with other I/O on the MCU can for example be added via User code in ESD. One example is the Blink LED via GPIO example where a GPIO on the MCU is controlled and the usercode example.

Another option is a code-based solution such as our code examples from https://github.com/Bridgetek/ or Rudolph's library. If you require a lot of editing on a pixel by pixel basis this may be a good solution. You can update things like raw bitmaps in RAM_G and they will be reflected on the screen. We also have different bitmap formats such as the bargraph type which may be useful. For the code-based solution, you can also use EVE Screen Editor to lay out your user interface, and then copy the list of commands into your code and this will make the layout easier.

What kind of spectrograms and graphs will you be using, and we can see if we have any examples for either ESD or for a code-based application?

Best Regards, BRT Community


Nick

#2
Hi BRT Community,

Many thanks for your reply. I'm not sure how to upload pictures in order to show some example views that I'm aiming for, so I'll try to explain as briefly as I can.

My spectrogram data arrives at the GUI (software) as a vector of 128 pixel values - i.e. 128 different colour values, where this vector is updated at a rate of about 100 Hz. This is obviously faster than the supported frame rate, so my software will need to lower the rate, which I can do by grouping the data into chunks of 5 (columns) x 128 (rows) at 100/5 = 20 Hz. So the challenge is then to left-shift the current bitmap left by 5 columns, discarding the left-most 5 columns and filling the 5 right-most columns with my new data. The aim is a view that scrolls from right to left in real time. Given a width of 800 pixels and 100 columns per second, the view should hold 8 seconds of data at any instant. I have this working already on a very simple SPI display (128x240) using the ST7735 controller chip.

I have another type of view in which I'd like to update an entire bitmap, of roughly 256x256 pixels, at the full frame rate.

Just to make things more interesting, I would also like the above two to be supported concurrently.

I've been reading deeper into the ESD User Guide and have looked at more of the examples and I'm beginning to think that your suggestion of using a primarily code-based approach is going to work best. I find the logic flow way of "coding" quite confusing without having a good grip on all the tricks that are no doubt there, but not so easy to find when scrolling the library tree.

All that I really need, I think, is a top level screen that has a menu button at top left. I want to touch that and have a panel grow (animated over a few hundred ms) to reveal half a dozen further menu buttons and maybe some checkboxes. I then want those revealed buttons to enable about 4 different views on the main page: two of those views I've already mentioned, the third is just an panel where I want to print some text and the 4th is a floating widget very much like a compact audio-recorder (stop/pause/play buttons+progress bar). If I can create the basic containers and this menu animation in ESD, then perhaps everything else can be done in pure C code as you've suggested?

I tried to adapt one of the examples to animate the transition from one page to another, as a crude attempt to achieve the animation mentioned above, but so far this isn't working. The Animation example using Actor generation uses a lot of logic to do what seems to me a really simple thing?

Thanks again and any further advice would be great.

*STOP PRESS* I just got a linear-layout with buttons opening in animated fashion! I guess that animated page transitions may not be supported, whereas to achieve the same using layouts is the right approach?..

Nick