Programmatically Defined Transitions

[JAlbr.1]

Good Day,

I've been experimenting with transitions on TouchGFX. I'm not a huge fan of the 1990's style transitions that come out of the box, and wondered if I could define a transition myself with custom behavior. Basically, I want sections of my screen to slide off in different directions before going to the next screen.

Using the transitions already defined as an example, I was able to use the Snapshot widget to do what I want to do, but I'm currently unable to compile, as the transitions that come with designer are declared in `FrontEndApplictionBase` which is generated code.

I guess I'm not looking for a hard and fast solution here, but more just asking the open-ended question of, "has anyone else tried/succeeded in doing something like this?" I'm also open to suggestions of better solutions, but I really like the idea of this clean implementation.

Thanks,

Jack

[JTP1]

Hello

You could modfiy for example blockTransition.hpp at \Middlewares\ST\touchgfx\framework\include\touchgfx\transitions- folder to get transition style you like. These files are generated only when project is created or project is updated to the new TGFX version, so its quite 'permanent' solution.

But probably you already knew that :grinning_face_with_sweat:

Br JTP

 

[JAlbr.1]

Oh, that seems like a sneaky, clever solution! That's probably ok for now, but we'd really appreciate a better way to do this for several reasons. One big reason is we share the \Middlewares\ST\touchgfx\ folder across several projects, so custom behavior defined on a transition labeled as "block" or "slide" might anger my coworkers, haha! 

Thanks for the speedy response,

Jack

[JTP1]

Okey, I agree that it is bit workaround.

You can also place your customized transition routine calls to the FrontendApplication.cpp instead of FrontendApplicationBase.cpp, then its not overwritten.

Certainly you cannot then set customized transition as action of some interaction, but you must call it from code like 'application().gotoScreen2CustomTransition();'

As test, I just copy blockTransition.hpp to \TouchGFX\gui\include\gui\common\- folder and rename it to  customTransition and modify the class to define customTransition- class. (File attached, works like blockTransition but smaller blocks and slower, just as an example).

Then modify FrontendApplication.cpp to this:

#include <gui/common/FrontendApplication.hpp>
#include <gui/common/FrontendHeap.hpp>
#include <gui/common/CustomTransition.hpp>
#include <gui/screen1_screen/Screen1View.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <gui/screen2_screen/Screen2View.hpp>
#include <gui/screen2_screen/Screen2Presenter.hpp>

FrontendApplication::FrontendApplication(Model& m, FrontendHeap& heap)
 : FrontendApplicationBase(m, heap)
{

}
void FrontendApplication::gotoScreen2ScreenCustomTransition()
{
 customTransitionCallback = touchgfx::Callback<FrontendApplication>(this, &FrontendApplication::gotoScreen2ScreenCustomTransitionImpl);
 pendingScreenTransitionCallback = &customTransitionCallback;
}
void FrontendApplication::gotoScreen2ScreenCustomTransitionImpl()
{
 touchgfx::makeTransition<Screen2View, Screen2Presenter, touchgfx::CustomTransition, Model >(&currentScreen, &currentPresenter, frontendHeap, &currentTransition, &model);
}

and FrontedApplication.hpp:

#ifndef FRONTENDAPPLICATION_HPP
#define FRONTENDAPPLICATION_HPP

#include <gui_generated/common/FrontendApplicationBase.hpp>

class FrontendHeap;

using namespace touchgfx;

class FrontendApplication : public FrontendApplicationBase
{
public:
 FrontendApplication(Model& m, FrontendHeap& heap);
 virtual ~FrontendApplication() { }

 virtual void handleTickEvent()
 {
 model.tick();
 FrontendApplicationBase::handleTickEvent();
 }
	
	void gotoScreen2ScreenCustomTransition();

private:
 touchgfx::Callback<FrontendApplication> customTransitionCallback;

protected:
	void gotoScreen2ScreenCustomTransitionImpl();
};

#endif // FRONTENDAPPLICATION_HPP

Then its possible to change screen from view.cpp like

void Screen1View::Button3Clicked()
 {
	application().gotoScreen2ScreenCustomTransition();
 }

Like this you can implement your own transitions without having angry co-workers :face_with_tears_of_joy:

Br JTP

[JAlbr.1]

Very nice! I will attempt this solution. Thanks a bunch!