 Hi everybody, my name is Romain and welcome to this technical introduction to TouchFX. In this presentation, I will first go through what is TouchFX, I will explain the workflow and the main activities to follow during development, and then I will present how to get started with the TouchFX project. What to expect of this presentation? While it is aimed to developers new to TouchFX and people interested in developing graphical user interfaces, the objective is to get to know TouchFX and the workflow of a GUI project by discovering the tools and understanding the development steps. For further reading, you can find the slides with extra content in the TouchFX online documentation. You can go through the other presentations, workshops and tutorials to understand how TouchFX works and how to get started with your project. What is TouchFX? TouchFX is a GUI library delivered as an STM32 expansion package within the STID ecosystem. It consists of three components, a Cubemax plugin called TouchFX Generator, a PC tool called TouchFX Designer, which will help you in the first GUI development steps, and an embedded library called TouchFX Engine running on any STM32 microcontroller. With TouchFX, nice and smooth advanced embedded user interfaces can be developed on a wide range of STM32 microcontrollers. The main tool used during the GUI development will be TouchFX Designer. It offers easy drag and drop programming with automatic C++ generation, which can then be further modified by developers for advanced animations or optimization. To start developing prototypes using an STM32 evaluation kit, it is required to download TouchFX Designer and to download STM32 Q-Programmer, a free ST software tool needed to flash the projects on boards. They are both found on ST official website. For projects using custom STM32-based platforms or in order to configure ST evaluation kits, it is required to download Cubemax, a free graphical tool used to configure STM32 microcontrollers. We recommend to use STM32 Cubed ID for programming STM32 products, but another tool chain or ID can be set within Cubemax. In this section will be explained the structure of a TouchFX project, the workflow and the tools involved in the entire project development cycle. A TouchFX project involves a set of activities that will be addressed in the development phase. The effort in each of them depends on what the goal of the project is. For a UI prototype, it is possible to use pre-made code for major parts of the application, spinning up the development by skipping most of these activities. For a full project based on a custom-made board, it is mandatory to address each of these activities. A TouchFX project is made up of five main software and hardware components, with each of the activities generating one of those main components. The TouchFX engine is not the output of any of the activity, but is still the starting point of a TouchFX project. The hardware selection activity is the initial activity in a TouchFX project. For a UI prototype, the hardware selection activity is only a matter of selecting an available SEM32 evaluation kit. For a custom hardware solution, there are a lot of choices to be made and issues to be considered, like the MCU performance, memory setup or display size. The selected hardware components and PCD can influence the graphical user interface application. If a board has not been set yet, it is possible to start the GUI development by just using the TouchFX simulator that runs on PC. This activity is a central task to enable TouchFX to be executed on your board. The output component is called Board Initialization Code, which is a general initialization code that setups the MCU and all peripherals, preparing it for application execution. This code is independent of TouchFX, as it only handles the pure hardware setup. The main tool for this activity is Cubamex to configure the MCU and generate general setup code. For peripherals, such as external RAM and display, additional initialization code and specific peripheral drivers may need to be added by users. It is also possible to do the entire board initialization code without the use of Cubamex, but it is not recommended unless you have expert knowledge on STM32 and board bring up. The TouchFX abstraction layer development activity, also known as TouchFX All Development Activity, is key in making the TouchFX engine work on top of the fully initialized display board. The output component is called TouchFX Abstraction Layer, and it is a software layer that is an abstraction of your hardware and enables the TouchFX engine to run on top of your board. The main tool in this activity is TouchFX Generator, which is a Cubamex plugin that allows you to configure and generate most of the TouchFX All code. It is important to notice that for the TouchFX All to work, it is crucial that the board bring up activity has been successfully configured. The UI development activity is where the user interface code is developed. This activity might take most of the project development time since this is what will make up the visible part of the TouchFX project. The component is called the TouchFX UI application. The main tools in this activity are TouchFX Designer and an IDE or text editor. In TouchFX Designer, users will set up, design and create the screens of the application and generate main parts of the UI application as C++ code. For the application logic, like handling events, communicating with the non-UI part of the system, like sensors, users will use an IDE or text editor to write C++ code that will coexist and interact with the generated code from TouchFX Designer. If the aim is to do a UI prototype or just to try out TouchFX, the project can be created based on existing application template, or AT, for one of the standard STM32 evaluation kits available in TouchFX Designer. These include all of the board initialization and TouchFX all code needed. The ATs are based on a Cubemax configuration, so it is possible for users to modify the configuration for their own experiments. TouchFX Designer is the main tool developers will use to develop the graphical user interface of their project. It is possible to start a project from scratch or to select from a wide range of pre-made UI demos and STKit application templates. If the aim is to test TouchFX or develop a UI without any hardware platform, the project can be created and run on the PC simulator. The simulator can be used for UI development in parallel to the hardware development. Application templates for some of STD's display kits and partners platforms can be found in this section. It is possible to add custom application templates for STM32-based platforms. The graphical user interface can be started from scratch or using pre-configured quick examples and demos. The UI examples available can be used to understand the concept and functionalities of TouchFX Designer. They can be used as a start or as inspiration for user code. After creating your project, the canvas view is entered. TouchFX Designer offers multiple widgets like graphs or progress bars and interaction functionalities to help start the UI. After adding a background and a button for example, it is possible to directly run the UI with the simulator or on a board from TouchFX Designer. Here we have added a box widget and a button widget. We change the size of the box by dragging it in order to cover the entire screen and use it as a background. We set the color in the properties tab on the right. We then run the simulator to see the look of the UI and test the button's reaction. Selecting an application template for STM32-based kits will generate a fully configured project. Those ATs will use STM32 Q-by-D as the pre-selected tool chain. Q-by-D is a free software tool used for programming STM32 products. With this tool, projects can be flashed on target directly. The projects folder has a Generate STM32 Q-by-D project. To open it, it is only necessary to double click it. TouchFX Designer will generate C++ code for the project done within it. Users can then write extending code to create the logic behind the GUI project. Users' codes needs to be implemented in the GUI folder. After creation, TouchFX Designer will only regenerate files within the generated folder. A UI template is a good starting point to understand how to work with both generated and user code. The assets folder is where images, text, and fonts are stored. Assets can be manually added through this folder or directly from TouchFX Designer. The app, config, and simulator folders should not be modified. Those folders and files are configured to be able to work with Qubemax, other tool chains, and with the simulator available in TouchFX Designer. The target folder is where the TouchFX HAL, GPIOs, and the TouchController are configured. The folder follows the same logic with generated files and other configurable files. A Qubemax project is created once done from an application template in Designer. Qubemax is a free graphical tool that will allow users to easily configure an MCU and modify its peripherals. To work with a different ID than SDM32QID, it is possible to modify the tool chain in the Projects Manager tab. When working with a custom board, it is necessary to go back through the first three activities of a TouchFX project. The SDQID's application templates can be used as inspiration to help configure the custom platforms. It is recommended to start a project from Qubemax only when working on a custom hardware solution. The steps to follow to start a project from Qubemax from scratch are explained in the board bring up presentation and in the documentation. It is possible to work on the GUI and the board bring up in parallel. One team will configure the hardware and TouchFX all development through Qubemax and the other team will develop the GUI on TouchFX Designer by working on the simulator.