Persistent widgets between screens

[luiscrsousa]

I'm a touchgfx beginner but i've designed many graphic apps using other tools like lvgl. One thing my app needs is to have some common areas or widgets that work between multiple screens, like persistent widgets that always exists in all screens, is this possible someway? 

Imagine I have 100 different screens that share a "status bar" area that contains multiple text or other widgets, I want to avoid designing 100 times the same widgets all over again between all different screens. Is this possible?

[luiscrsousa]

Forgot to say that I can use the custom container but it does not persist the same widgets status after changing screens

[GaetanGodart · Accepted solution]

Hello @luiscrsousa ,

The standard way to do a status bar is to use a custom container : custom-containers-documentation 

In a custom container, you can add many widgets/elements. For your status bar, you can set the height at 50 pixels and the width to be the full width of your screen. Then, add widgets such as a text to say which screen you are on, a toggle button to toggle some settings, a button to go back, etc.

You can then add this custom container to all of your screens. This will create a singular and unique element for each of your screens (100 in your case), therefore, when you change screen, you will have to setup your status bar base on the current screen to update the text, whether or not you clicked on the toggle button, etc.
To do that, you can have a variable "bool hasBeenToggled" define in your model.hpp file. 
The model allows you to keep a variable even when changing screen, see this tutorial-03 .

You can see examples of this in our demos such as the demo7, where we use a topbar (same as status bar) with a toggle button.

I think the is the best way to do it, but maybe you could create your custom container in TouchGFX Designer, but not adding it to the screens, instead instantiate it at runtime (with proper safety mechanisms) in model.cpp and adding it to the screen currently being displayed, but that sounds harder to do.

If this comment answers your question, I invite you to select it as best answer.

Regards,

[ferro]

Hi @luiscrsousa ,

What about this.

Define a menu widget (BoxCommon here) in some globaly accesible module. I use FrontendApplication.cpp just for a quick demo:

#include <gui/common/FrontendApplication.hpp>

touchgfx::Box BoxCommon  { 200, 20, 0xFFEECC }; // w,h

touchgfx::Box & FrontendApplication::getMenuWidgetRef ()
{
	return BoxCommon;
}

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

}

Provide access to its reference ::getMenuWidgetRef () :

#include <gui_generated/common/FrontendApplicationBase.hpp>
#include <touchgfx/widgets/Box.hpp>

class FrontendHeap;
using namespace touchgfx;

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

    touchgfx::Box & getMenuWidgetRef ();

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

#endif // FRONTENDAPPLICATION_HPP

.

And use it in any screen you want:

ScreenView::ScreenView()
{
	Screen::add ( application ().getMenuWidgetRef () );
}

ScreenView::~ScreenView()
{
	Screen::remove ( application ().getMenuWidgetRef () );
}