ODeV framework meets TouchGFX

30/12/18 12:51

TouchGFX is a powerful graphics UI tool (C++ framework and an UI designer software) to create amazing user interface for embedded application. Computer graphics and User Interface are one of my passion, so let’s integrate TouchGFX within the ODeV framework.

I am working on it in a dedicated branch (gui_demo) of the GIT repository. It is still a work in progress, but the firmware is already running on the board in all configurations (Debug, Release, TEST_R, Trace). Let’s take a sneak peek at this demo…

Main components

TouchGFX - the GUI tool and framework.

Atollic TrueSTUDIO - the IDE.

STM32L4R9I-EVAL - the board to run the demo.

The idea

Working at this demo I have three goals in my mind:

To use TouchGFX Designer to design the UI and, of course, to reuse the generated code.

To integrate a TouchGFX application with the ODeV framework in order to reuse all code I developed for ODeV.

To use a modern IDE like TrueSTUDIO. This is important also because of the C++ nature of TouchGFX, and note the Designer does not generate a TrueSTUDIO project.

I choose that evaluation board because it is powered by STM32L4+ and it is supported by TouchGFX. Moreover it comes with two displays. At the end, if this demo works fine, we will be able to use all templates provided by TouchGFX with ODeV and we will have a powerful environment to develop embedded application with amazing GUI.

STM32L4R9I-EVAL and Atollic TrueSTUDIO
Fig.01

How to use TouchGFX Designer generated code with the IDE and the standard ODeV project

I created a template project with the Designer and I called it UIDesign. A good thing about the Designer is that it creates a self contained project inside the root folder. All files are there, resources like images and fonts, the project specific files for the supported IDE (IAR and Keil), the board support packages provided by ST, etc. For convenience I create the UIDesign project in the same workspace as the ODeV_f project. At this point what I need to do is basically:

To import UIDesign in the workspace as a standard Eclipse resource project (nota that this is not a C/C++ project).

To use all needed files as linked resources in the ODeV_f project.

To add the C++ nature to ODeV_f.

All the ODeV source files that use the UI must be renamed as .cpp files. This is because we need to compile them with g++.

There are also other minor things to do like to modify some project settings, but here I want to highlight only the main points.

ODeV and TouchGFX folder three relationship
Fig.02

Fig.02 displays the two projects and their folder structure. Note that all UIDesign files are imported inside the gui folder as linked resources. In this way every time we modify the UI in the Designer, all generated or modified files are automatically available in the ODeV_f project.

How to integrate the GUI task with ODeV

TouchGFX is a well designed object oriented and multi tasking framework. It provides two tasks, a GUI task and a Touch Screen Controller Task, and it uses FreeRTOS. This suggest that we should be able to transform the two tasks in Managed Task. So I created two managed tasks:

GuiTask. The GUI task

TscTask. The Touch Screen Controller task

The other managed tasks from the simple demo are still there. The HelloWorld task blinks the LED LD4 with a fixed interval, and the PushButton task manage the Wakeup button to modify the UI. In this way it shows how to interact with the GUI task using the Model object.

How to program and debug the evaluation board

Even if TrueSTUDIO version v9.2.0 uses STM32CubeProgrammer to program the target, and so it supports the external memory of the ST evaluation board, I had a problem to program the board. But I was able to program the board using STM32CubeProgrammer as a standalone tool. So, waiting for ST to fix this issue, we can use some feature of Eclipse to bypass the problem. I created a launch group with two launch configurations. The first one use STM32CubeProgrammer as external tool to program the board, and the second one start a debug session without download the firmware.
Use the Debug Configurations menu command from the Run menu to open the Debug Configuration dialog. In this dialog there is ODeV_f Program and Debug launch group (see Fig.03). Use it to program the board and start a debug session. You can give a look at each launch configuration in order to find out how it works.

Debug Configuration dialog.
Fig.03

Conclusions

This demo is still a work in progress: there is still some work to do in order to better integrate the TouchGFX project with ODeV. But the demo is already working well enough.
You can download this project from the download page of this web side, or from the GIT repository.

The video at the beginnong of the page displays all the concepts discussed in this post.