Showing results for 
Search instead for 
Did you mean: 

What is the best way to perform a screen transition?



I develop a project based on TouchGFX. It consists of 21 screens for now (in the future it will come to 30). I noticed that it becomes pretty hard for me to code the application flow. Many screens have several conditions to be transitioned to. There are some screens that has higher priority than the rest. There are some screens that should work kind of like an interrupt. 

So far I implement screen transitions in each screen and it starts to look spaghetti-like. It consists of many if's and else if's, becomes hard to read and understand the logic behind it.

I also noticed that the TouchGFX has a bug, at least for me it looks like one. In general it is possible to perform a screen transition during ongoing one. What it does is change the the value of the variables in `makeTransition` function and possibly also members of the `MVPApplication` class instance. In my opinion it should be gaurded with some mutex or something alike. From my experience it can cause graphical artifacts. I sometimes change the orientation of the UI during screen transitions (landscape and portrait) according to data from accelerometer. If a transition to let's say Screen2 (which is developed in portrait orientation) happens during a transition to Screen1 (which is developed in landscape transition) the graphical artifacts show up. The ThouchGFX tries to render a landscape Screen1 in portrait mode. Is someone from ST employees reads it go ahead and DM me. I can share more details with you and maybe help to fix this bug.

I'd like to ask you what is your technique of performing a screen transitions? Do you perform them in the code of each screen View/Presenter? Maybe you have some unified place to do them? I thought that maybe it is a good idea to make them inside `Model::tick()` based on some state machine?

Please share your idea/approche? 



Hello @ypiotrp ,

Thank you for your post, we would like to see the problem you talked about. 

For transitioning between the screens, the easiest way is to do it through the TouchGFX Designer from the Interactions section. There you can define a Trigger for the transition, or leave the trigger empty and just call the function yourself in the View class (the related function will be generated by TouchGFX). You can also create custom triggers through Custom Containers

You can read more about Custom Containers and Triggers here:

I hope this helps. Looking forward to hearing from you

Mohammad MORADI
ST Software Developer | TouchGFX