STM32F4 Discovery

Libraries and tutorials for STM32F4 series MCUs by Tilen Majerle

TouchGFX simulator development in Visual Studio Code with CMake

by · Published · Updated

Likely you have heard before about Visual Studio Code, shortly vscode (or even vsc), a powerful and extension-based text editor. Being open source and with support for many languages (through extensions) developers simply love it. On the other hand, TouchGFX is one of the most advanced graphics stacks for embedded systems. It is FREE for any STM32 application, let it be simply UI with no touch or more sophisticated GUI with 800×480 pixels (or more) with mobile-like UI design.

A TouchGFX, being optimized for embedded systems, comes with Windows based TouchGFX-Designer tool, including WYSIWYG view and simulator. Simulator based application is compiled (usually, but not limited to) using GCC for windows. GUI library uses MVP development pattern, strongly separating data source (model) from display part (presenter, view). Keeping that in mind, a data source (Model class) is in charge to provide relevant data for the UI and interacts between UI and the rest of application logic.

Click here to explore MVP application pattern from TouchGFX docs 4.20.

This tutorial is focused on development of the GUI in the simulator. That is, a data source (Model) will provide random, simulation data, that will act as real sensor information.

New application with TouchGFX

I will start by simple application for STM32H735G-DK, that was the first board available in my hands.

  1. Download and install STM32CubeMX
  2. Download X-CUBE-TOUCHGFX from the embedded libraries section and install TouchGFX designer tool (It is available in the default STM32Cube repository, typically C:/users/username/STM32Cube/Repository/Packs/…)
  3. Open TouchGFX designer, start new project and select STM32H735G-DK board
  4. New empty project will start – you can add your widgets. Here is the view of my view, with one text, slider and dynamic graph.

    TouchGFX designer tool with widgets

    TouchGFX designer tool with widgets

  5. . After you are done with widget design, you can generate the UI code. You can use 3 buttons in the bottom right corner of the screen
    1. Left: Generate code and assets: It will generate the code of the UI and run the STM32CubeMX to generate part for microcontroller
    2. Middle: Run simulator – click this to generate the code and immediately run the simulator
    3. Right: Run on the target. It generates the code, compiles with target compiler (ARM none eabi GCC) and loads the firmware to the board.
  6. Generate the code and go to project folder to see the structure, that should look similar to the one from picture below (actually without cmake folder and CMakeLists.txt file – this is the part to be done on our side).
Folder tree inside TouchGFX project

Folder tree inside TouchGFX project

Project is now generated and simulator can run. There is a project structure available, under simulator/gcc and simulator/msvs (for Visual Studio, that is not free for corporations – community version exists tho).

TouchGFX, thanks to C++, significantly relies on class inheritance feature. We will not go into details in this tutorial. Important to keep in mind is that you should never modify any code, except the one in gui folder. The rest is always generated if you go back to TouchGFX designer and update/modify the widgets design. Tutorial assumes you are aware of this. If not, please read the TouchGFX user manual.

Prerequisities

As we will be using vscode and CMake, we shall ensure that

  • VScode is installed, with extension pack ms-vscode.cpptools-extension-pack (you can download extension pack from inside vscode)
  • CMake is installed on your computer and available through console. cmake –version must return valid reply. You can download it from official website or through MSYS2’s package manager (mingw-w64-x86_64-cmake).
  • Ninja build system is installed and available through console. ninja –version must return valid reply. You can download it from official website or through MSYS2’s package manager (mingw-w64-x86_64-ninja).
  • GCC toolchain for Windows is available
    • TouchGFX installation comes with 32-bit windows GCC compiler, suitable for building the simulator. By default, it is available in c:\TouchGFX\4.20.0\env\MinGW\bin\ (depends on the TGFX version). Ensure it is part of environmental paths. You should get valid reply to i686-w64-mingw32-gcc –version command from cmd or powershell
    • Alternatively, you can download compiler through MSYS2 pacman tool. As I am using GCC for other applications already, I am using this option instead
GCC and CMake check

GCC and CMake check

Open vscode with TouchGFX folder as our root.

TouchGFX project in Visual Studio Code

TouchGFX project in Visual Studio Code

We will create new files and folders. Content of the files is available below, but always-up-to-date project will be available in my Github. You can always look there, in case of future changes.

  1. CMakeLists.txt in the root of the folder
  2. cmake/i686-w64-mingw32-gcc.cmake with content
  3. CMakePresets.json with content

This is enough and allows us to build the project with CMake extension from within vscode context. In the light-blue bottom line, select configuration preset (default) and click Build button next to it. Build configuration followed by actual build should start.

TouchGFX project compiled from vscode with GCC and CMake

TouchGFX project compiled from vscode with GCC and CMake

Let’s create some more files, that will help you with fast build, run, clean, debug and C/C++ intellisense.

  1. .vscode/c_cpp_properties.json file for C/C++ intellisense. Build macros, include paths (for go to definition search) and other key parameters are provided through CMake plugin.
  2. .vscode/launch.json for easier debugging
  3. .vscode/tasks.json for quick access to build (CTRL+SHIFT+B), project clean and application run (without debug mode)

With all the files added, new structure shall look similar to

New vscode files added

New vscode files added

Intellisense in action

Intellisense in action

VScode in debug mode

VScode in debug mode

Good to know

  • All the files we created in this tutorial are generic, can be simply reused for any other TouchGFX project for simulation.
  • If you regenerate project from TouchGFX designer and add new widgets and resources, you should rebuild cmake to parse newly added files and add them to build, or you will face build errors
  • Thanks to CMake, intellisense will scan files and include paths as described in CMake. CMakeLists.txt is therefore unique entry point of project settings, that are later used in vscode.
  • Use F5 to enter debug and set breakpoint at your desired instruction
  • Use CMake plugin (on the left side of vscode window) to browse all files being part of the build
  • Use Model class to feed simulation data to UI -> through ModelListener interface – read TouchGFX user manual for more information
  • Simulator conditional compilation is available through #ifdef SIMULATOR C/C++ option
  • Open Github and access the code

Tags:

tilz0R

Owner of this site. Application engineer, currently employed by STMicroelectronics. Exploring latest technologies and owner of different libraries posted on Github.

You may also like...