TouchGFX Graphical User Interface with STM32

 Introduction :

               TouchGFX is an advanced GUI tool offering everything you need to create cutting-edge GUIs. TouchGFX is an advanced, free-of-charge GUI optimized for STM32 microcontrollers. TouchGFX accelerates the HMI-of-Things revolution through the creation of stunning smartphone user interfaces on embedded devices ranging from simple low-color UI applications up to high-resolution and high-color UI applications. TouchGFX is optimized for STM32 microcontrollers, needing only a limited amount of memory for running smooth GUIs.

TouchGFX is distributed as an X-CUBE-TOUCHGFX zip file which has the following components inside:

• TouchGFX Designer - Build a UI through a Windows-based GUI Builder

• TouchGFX Generator - Create a custom TouchGFX HAL through CubeMX

• TouchGFX Engine - The TouchGFX C++ framework that drives the UI application

Installation :

First of all, you need to download X-CUBE-TOUCHGFX from the ST.com official website .After you follow following link to installation process.

https://support.touchgfx.com/docs/introduction/installation

First Screen  after installing, you see it.

We are using  STM32F429I-Discovery Board so select it from Template as shown below pic.

First  this is introduction screen for creating project is as below.

screens : screen panel show you created screens, and widgets nest added to that screen. from ➕  you can add screen as per your requirement.

Widgets : From this menu you can create button, text area , different type of control for screen, you just have to drags and drop control. its properties you can change it. 

Interaction : This is tool work for interaction with widgets for any action like click, drag, touch...and trigger event.

Now We are creating one Simple Project  using STM32F429I - Discovery Board As shown as below.

Create simple project as drag and drop facility available on TouchGFX as show below

TouchGFX Screen

 

After creating screen need to write interaction event for change Button and Toggle Button for that we are adding interaction. First select event from drop down of Trigger, we are selecting Button is clicked ,select source widget for which your creating event from choose clicked source drop down list. select virtual function call from Action drop down list. last write virtual function name as per your choice in Action text area. Last but not least is interaction name. you can also change it as per your choice.

     Model-View-Presenter Design Pattern

 TouchGFX follows the Model-View-Presenter (MVP) design pattern as described in Model-View-Presenter Design Pattern. The TouchGFX screen concept ties into the overall Model-View-Presenter architecture by classes that inherit from the View and Presenter classes in TouchGFX. So when adding a new screen to your application in TouchGFX Designer it creates both a new specific View class and a Presenter class to represent that particular screen.
The content and responsibility of the MVP classes in a TouchGFX application are as follows.

Model-View-Presenter and external communication

Model:

The Model class is a singleton class which is always alive and has two purposes:

1. Store state information for the UI. The Views and Presenters are deallocated when switching screen, so they cannot be used to store information which should be kept across screen transitions. Use the Model for this instead.

2. Act as an interface towards the backend system, relaying events to and from the currently active

screen. The Model class is automatically setup to have a pointer to the currently active presenter. When changes occur in the Model the current active Presenter is notified of the change. This is done via methods in the ModelListener interface in the application.
New applications generated by the Designer will automatically have a Model class ready to be used by the UI.

View: 

The View class (or more specifically, a class that derives from the TouchGFX View class) contains the widgets that are shown in this view as member objects. It also contains a setupScreen and a
tearDownScreen function, which gets automatically called when this screen is entered/exited. Typically you would configure your widgets in the setupScreen function.

Your View will also contain a pointer to the associated Presenter. This pointer is set up automatically by the framework. Using this pointer you can communicate UI events like button clicks to the Presenter.

Presenter: 

Your Presenter class (again, a class that derives from the TouchGFX Presenter class) is responsible for the business logic of the currently active screen. It will receive "backend" events from the Model, and UI events from the View and decide which action to take. For instance, if an alarm event is received from the Model, the Presenter might decide to tell the View that an alarm popup dialog should be displayed.

Now Its time to Run simulator to preview than after run generate generate code button to create code. 

After it open brows folder for hierarchies structure to show as shown in below.

Project Folder 

After that open STM32CubeIDE Folder -> Open .Project file to STM32CubeIDE. As Shown below.

Project open in STM32CubeIDE

As shown in project Hierarchy we have to implement virtual function for interaction which we have created BackcolorChange()  and ONOFFLED();

we need to do it in sceen1View files.

In gui folder ----> Screen1View.cpp file .

we have declare function in Screen1View.hpp file  as shown below.

    virtual void BackcolorChange();

    virtual void ONOFFLED();

after that define both function in Screen1View.cpp file.

  
void Screen1View::BackcolorChange()
{

   boxWithBorder1.setColor(boxWithBorder1.getColor()+1234);
   boxWithBorder1.invalidate();

}

void Screen1View::ONOFFLED()
{

   HAL_GPIO_TogglePin(GPIOG,GPIO_PIN_13);
   HAL_Delay(200);
}