{"id":76941,"date":"2025-12-18T13:16:00","date_gmt":"2025-12-18T12:16:00","guid":{"rendered":"https:\/\/fhi.nl\/nieuws\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/"},"modified":"2025-12-18T13:17:57","modified_gmt":"2025-12-18T12:17:57","slug":"how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar","status":"publish","type":"news","link":"https:\/\/fhi.nl\/en\/news\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/","title":{"rendered":"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar"},"content":{"rendered":"
\n\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\"\"\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\n\t
\n\t\t
\n\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\tHow to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar\t\t\t\t<\/h1>\n\n\t\t\t\t
\n\t\t\t\t\t<\/svg>\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t<\/div>\n<\/header>\n\n\t
\n\t
\n\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
Branch<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tIndustrial Electronics\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
Subject<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tIndustrial Electronics\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t

TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips. It offers the capability to design object context displays, assisting STM MCU users in constructing smooth, beautiful, and various UI pages.<\/p>\r\n

The following example uses TouchGFX version 4.23.2 as a reference:<\/p>\r\n

\"\"\r\n

Figure 1: TouchGFX startup screen showing options like Example, Demo, Create Board chip, etc.<\/p>\r\n<\/div>\r\n

Overview of TouchGFX Structure<\/h3>\r\n

The TouchGFX program architecture adopts the Model-View-Presenter (MVP) pattern, as illustrated in Figure 2, with the following advantages:<\/p>\r\n

Separation of Concerns:<\/strong>\u00a0Code maintenance varies across different stages, facilitating users to write interfaces and communicate with lower layers, resulting in clear and understandable structures with high reusability.<\/p>\r\n

Unit Testing:<\/strong>\u00a0The upper-layer view can directly interact with the code generated by GFX, making it easier to validate results independently.<\/p>\r\n

\"\"\r\n

Figure 2: Relationship diagram of TouchGFX components (MVP)<\/p>\r\n<\/div>\r\n

View:<\/strong>\u00a0The main display page generated by GFX, designed for interface representation. Typically, it acts as the passive end of the MVP's upper layer, handling all design information for the UI interface, and displays corresponding screens based on the properties of the used objects.<\/p>\r\n

Model:<\/strong>\u00a0Serves as the core location for processing and sending data. Some communication packets are judged or processed and then sent to the View via the Presenter to change the currently displayed content and object status.<\/p>\r\n

Presenter:<\/strong>\u00a0Acts as the communication channel between View and Model, allowing data requests from the Model so that functions can be reused.<\/p>\r\n

Due to the FW design philosophy, which emphasizes the Model as the command processing hub, a diagram can be illustrated (Figure 3).<\/p>\r\n

Through lower-level processing for different interfaces (eg, CAN bus, RS485, UART, Bluetooth, Wi-Fi), data is forwarded to the Model for communication and then relayed to the View via the Presenter, achieving object status switching.<\/p>\r\n

\"\"\r\n

Figure 3: Communication between multiple interfaces and the MVP architecture<\/p>\r\n<\/div>\r\n

Two examples can illustrate the data exchange method:<\/p>\r\n

Sample 1:<\/strong>\u00a0Suppose the Host sends a CANopen command to the Device (Figure 4).<\/p>\r\n

CANopen receives packets through the IF port, possibly decrypts the packet data through the CAN task, and then forwards the content to the Model. After the Model updates the database and executes the corresponding command, it sends the result back to the View via the Presenter to refresh the page.<\/p>\r\n

\"\"\r\n

Figure 4: Example of Host sending a command<\/p>\r\n<\/div>\r\n

Sample 2:<\/strong>\u00a0If a user touches a UI object on the device, a touch event packet is reported back to the Host (Figure 5).<\/p>\r\n

When a user clicks on an interactive object, the View generates a click event, which is then passed to the Model via a User Event through the Presenter. The Model responds based on the currently used interface, sending the code back to the CAN task, and finally sends a TX packet to notify the Host.<\/p>\r\n

\"\"\r\n

Figure 5: User touch event sent back to the Host<\/p>\r\n<\/div>\r\n

Overview of View Page Knowledge<\/h3>\r\n

In the TouchGFX software interface, designing N pages will generate N corresponding sets of View and Presenter, but only one Model will control all view pages.<\/p>\r\n

When a user designs a UI scenario, including graphics, appearance, coordinates, and text display, pressing \u201cGenerate Code\u201d will produce code in the corresponding named view page.<\/p>\r\n

The generated folders are divided into ..\\generated\\ and ..\\gui\\, where ..\\generated\\ contains the basic code for the designed page display, and ..\\gui\\ contains the logic for object interactions.<\/p>\r\n

We can use this information to pull objects onto their respective pages and refer to the usable code.<\/p>\r\n

Here's a simple step-by-step explanation of the above description:<\/p>\r\n

For example:<\/strong><\/p>\r\n

1. Open a blank project and press \u201cCreate New\u201d to establish a Project (Figure 6).<\/p>\r\n

\"\"\r\n

Figure 6: TouchGFX project opening screen<\/p>\r\n<\/div>\r\n

2. In TouchGFX, a default Screen1 will be available. We add a new button object, select the desired image, and execute \u201cGenerate Code\u201d (Figure 7).<\/p>\r\n

\"\"\r\n

Figure 7: Create Button demonstration<\/p>\r\n<\/div>\r\n

3. Next, switching to the project path will show two new folders: gui and generated (Figure 8):<\/p>\r\n

\"\"\r\n

Figure 8: Project folder content<\/p>\r\n<\/div>\r\n

The generated folder contains the basic code related to Screen1 components, which is auto-generated by TouchGFX and cannot be modified directly. If the object state on the page changes and code is rebuilt, the code in the generated folder will update.<\/p>\r\n

Similarly, after executing \u201cGenerate Code,\u201d GFX will create Screen1ViewBase.cpp in ..\\generated\\gui_generated\\src\\screen1_screen (Figure 9).<\/p>\r\n

\"\"\r\n

Figure 9: Location of Screen1ViewBase.cpp<\/p>\r\n<\/div>\r\n

If we open Screen1ViewBase.cpp with Notepad++ (Figure 10), we can see the properties and content related to the Screen1 page and button data:<\/p>\r\n

\u2013 Set Button coordinates:
button1.setXY(63, 109);<\/p>\r\n

\u2013 Set Button image ID:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID),TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));<\/p>\r\n

\u2013 Add the button object to the page:
Add(button1);<\/p>\r\n

\"\"\r\n

Figure 10: Content of Screen1ViewBase.cpp<\/p>\r\n<\/div>\r\n

The code with the XXXBase.cpp name will be rebuilt during \u201cGenerate Code,\u201d and any changes to the attribute data will be reflected. Thus, if we adjust the button's position, image, etc., the functions may change as well.<\/p>\r\n

As for the gui folder, it is where TouchGFX allows users to write program logic (Figure 8). Therefore, the MVP architecture is also constructed here (Figures 11 and 12), enabling us to plan our own MVP code communication methods to realize UI design directions.<\/p>\r\n

\"\"\r\n

Figure 11: Path of the Model<\/p>\r\n<\/div>\r\n

\u00a0<\/p>\r\n

\"\"\r\n

Figure 12: Paths of Presenter and View<\/p>\r\n<\/div>\r\n

4. Designing a Simple Scenario for GUI\/Generated Design Explanation<\/p>\r\n

\u2013 Write a logical control for interaction between a button and text.
\u2013 When the button is clicked once, the text value increases.<\/p>\r\n

Here's how to implement this functionality:<\/p>\r\n

Step 1:<\/strong>
Drag two objects, a button (button1) and a text area (textArea1) (Figure 13).<\/p>\r\n

\"\"\r\n

Figure 13: UI design project with Button control<\/p>\r\n<\/div>\r\n

Step 2:<\/strong>
Select the interaction action on the right side, add a Button click Event, and choose to call the function add_number when this action is executed (Figure 14).<\/p>\r\n

\"\"\r\n

Figure 14: Adding Interaction1 Event<\/p>\r\n<\/div>\r\n

Step 3:<\/strong>
Observe Screen1ViewBase.cpp (Figure 15) to find the relevant property code for creating button1 and textArea1.<\/p>\r\n

Due to the newly added interactions, buttonCallbackHandler is generated to handle the button1 touch event. When clicked, it will call the function named add_number via the callback function.<\/p>\r\n

\"\"\r\n

Figure 15: Screen1ViewBase.cpp<\/p>\r\n<\/div>\r\n

Content of Screen1ViewBase.hpp (Figure 16).<\/p>\r\n

\"\"\r\n

Figure 16: Content of Screen1ViewBase.hpp<\/p>\r\n<\/div>\r\n

Step 4:<\/strong>
In the gui section, add Screen1View.cpp and Screen1View.hpp.
Add the add_number program to utilize the count parameter for accumulation (Figures 17 and 18).<\/p>\r\n

Use Unicode: snprintf(textArea1Buffer, TEXTAREA1_SIZE, \u201c%02d\u201d, count); to refresh the updated count into textArea1.<\/p>\r\n

Then use textArea1.invalidate() to refresh the data.<\/p>\r\n

\"\"\r\n

Figure 17: Content of Screen1View.cpp<\/p>\r\n<\/div>\r\n

\u00a0<\/p>\r\n

\"\"\r\n

Figure 18: Content of Screen1View.hpp<\/p>\r\n<\/div>\r\n

After running the simulator, it can be confirmed that each time button1 is touched, textArea1 (count value) will start adding from 0 (Figure 19).<\/p>\r\n

\"\"\r\n

Figure 19: Simulator result display<\/p>\r\n<\/div>\r\n

This confirms that the definition of object properties is generally established in the generated path, while the user writes logic execution code under the gui section.<\/p>\r\n

TouchGFX and Builder Object Property Examples<\/h3>\r\n

The Smart Display GUI Builder provided by Winstar is a drag-and-drop interface design tool for UI\/UX, offering customers a no-code development service tailored for rapid development and design of ST MCU-based products. Built as an extension of the TouchGFX framework, the GUI Builder incorporates the original widget functionalities of TouchGFX, with its primary distinction being the support for multiple system interfaces and communication protocols. This allows users to directly observe how commands affect widget control and changes.<\/p>\r\n

Here is the introduction to the Builder:
https:\/\/www.winstar.com.tw\/video\/play\/142.html<\/p>\r\n

The design philosophy of Smartdisplay is related to the functionality of TouchGFX setting, including the firmware written using STM32 MCU as the foundation of MVP. The objects inside are designed using existing items combined with logic.<\/p>\r\n

Therefore, among the objects opened up by the GUI Builder, some items can be implemented using existing TouchGFX UI components to achieve corresponding display results.<\/p>\r\n

*Supplementary Explanation Segment<\/p>\r\n

Here's a simple example using the Builder slider (Figure 20):<\/p>\r\n

\"\"\r\n

Figure 20: Builder slider property page<\/p>\r\n<\/div>\r\n

The properties of the Builder Slider are as follows:<\/strong><\/p>\r\n

Size:
\u2013 Width: 618
\u2013 Height: 20<\/p>\r\n

Positions:
\u2013 Background Position (X): 0
\u2013 Background Position (Y): 4<\/p>\r\n

Indicator Position:
\u2013 Min: 0
\u2013 Max: 580
\u2013 Pos: 0<\/p>\r\n

These parameters correspond to the Slider Component settings in TouchGFX (Figure 21).<\/p>\r\n

\"\"\r\n

Figure 21: Properties of TouchGFX Slider<\/p>\r\n<\/div>\r\n

The properties of TouchGFX Slider are as follows:<\/strong><\/p>\r\n

Location:
\u2013 Width: 618
\u2013 Height: 20<\/p>\r\n

Positions:
\u2013 Background Position (X): 0
\u2013 Background Position (Y): 4<\/p>\r\n

Indicator Position:
\u2013 Min: 0
\u2013 Max: 580
\u2013 Y: 0<\/p>\r\n

Users can adjust the Start value in GFX to simulate the results in Builder (Figure 22).<\/p>\r\n

If the value is set to 100, it can simulate the same result in Builder (Figure 23).<\/p>\r\n

\"\"\r\n

Figure 22: Adjusting Start = 100 in TouchGFX<\/p>\r\n<\/div>\r\n

\u00a0<\/p>\r\n

\"\"\r\n

Figure 23: Adjusting Test Value = 100 in Builder<\/p>\r\n<\/div>\r\n

If we look at the Screen1ViewBase.cpp generated by GFX (Figure 24):<\/p>\r\n

\"\"\r\n

Figure 24: Function in Screen1ViewBase.cpp<\/p>\r\n<\/div>\r\n

We can understand how the parameters mentioned above can be used and modified in code. Such numbers are directly related to the design of the GFX project. When the Builder uploads the project and resets the initial parameters for the Device Slider.<\/p>\r\n

If the Host sends a command to change the Slider's value, it will execute slider1.setValue() in the view to complete the object's change (Figure 25).<\/p>\r\n

\"\"\r\n

Figure 25: Host sends slider command<\/p>\r\n<\/div>\r\n

This is a simple explanation of the relationship between Builder and TouchGFX objects.<\/p>\r\n

Future Extensions and Development Evaluation of Builder Objects<\/h3>\r\n

With the recent update to TouchGFX version 4.24.0, new objects and functionalities are available. If we need to evaluate whether Builder can be integrated, we can first try using the default examples from GFX for demos and research (Figure 26):<\/p>\r\n

\"\"\r\n

Figure 26: Various example projects<\/p>\r\n<\/div>\r\n

Since version 4.24.0 supports new objects like QR code, we can evaluate the parameters and functions that can be used if Builder is integrated.<\/p>\r\n

Example Using QR Code:<\/strong><\/p>\r\n

1. Select BlankUI.
2. Drag into the QR code Container.
3. Observe the configurable properties (Figure 27):
Location: (X, Y)
Configuration:
\u2013 QRVersion
\u2013 Scale
\u2013 Text
\u2013 Error Correction Code\u2026<\/p>\r\n

\"\"\r\n

Figure 27: QR code property screen<\/p>\r\n<\/div>\r\n

These parameters about the QR code can be referenced from the official website (Figure 28).<\/p>\r\n

\"\"\r\n

Figure 28: Official website explanation<\/p>\r\n<\/div>\r\n

In the generated function of Screen1ViewBase.cpp, confirm the available parameters and settings (Figure 29):<\/p>\r\n

1. Set coordinates: qrCode1.setXY(208, 224);
2. Set QR code version: qrCode1.setQRCodeVersion(3);
3. Set QR scale: qrCode1.setScale(5);
4. Input text to generate the QR code:
qrCode1.convertStringToQRCode(\u201chttps:\/\/www. winstar.com.tw\/zh-tw\/\u201d);<\/p>\r\n

\"\"\r\n

Figure 29: Generated code in Screen1ViewBase.cpp<\/p>\r\n<\/div>\r\n

If the QR code function is integrated into Builder in the future, it will allow users to set these adjustable parameters.<\/p>\r\n

If you want more information or if you have any questions, please\u00a0contact Nijkerk Electronics<\/a>!<\/p>\t\t<\/div>\n\t<\/div>\n<\/div>\r\n\t

\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t
<\/svg>

Related articles<\/h2><\/div>\t\t\t\t\t\t\t\t\t\t\t\t\tview profile<\/a>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\n\n\t
\n\t\t\n\n\n<\/mask>\n\n\n\n\n<\/g>\n<\/svg>\n\t<\/div>\n\t

Glow Wire Tests for Safety Testing Household Appliances<\/h3><\/div><\/div>\n\t
\n\t\t\n\t\t\n\t\t\t\t\t\tIndustrial Electronics<\/span>\n\t\t\t\t\t\t\t\tDesign Automation & Embedded Systems Event<\/span>\n\t\t\t\t\t\t\t\tActive components<\/span>\n\t\t\t\t\t\t\t\tAntenna Design Service<\/span>\n\t\t\t\t\t<\/div>\n\t
\n\t\t\t\t\t
\n\t\t\t\tW\u00fcrth Elektronik NL BV\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\tApril 18, 2024\t\t\t<\/div>\n\t\t\t<\/div>\n<\/a>\n\n\n\t
\n\t\t\n\n\n<\/mask>\n\n\n\n\n<\/g>\n<\/svg>\n\t<\/div>\n\t

Oscilloscope-based double pulse test speeds up validation time of SiC and GaN<\/h3><\/div><\/div>\n\t
\n\t\t\n\t\t\n\t\t\t\t\t\tIndustrial Electronics<\/span>\n\t\t\t\t\t\t\t\tDesign Automation & Embedded Systems Event<\/span>\n\t\t\t\t\t\t\t\tCommunication technology<\/span>\n\t\t\t\t\t\t\t\tOscilloscopes<\/span>\n\t\t\t\t\t<\/div>\n\t
\n\t\t\t\t\t
\n\t\t\t\tCN Rood\t\t\t<\/div>\n\t\t\t\t\t\t\t
\n\t\t\t\tJune 21, 2023\t\t\t<\/div>\n\t\t\t<\/div>\n<\/a>\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"featured_media":76942,"template":"","branches":[13],"events":[9],"secretariat":[],"categories":[57],"themes_tax":[511],"content_types":[514],"class_list":["post-76941","news","type-news","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"\nHow to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar<\/title>\n<meta name=\"description\" content=\"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar\" \/>\n<meta property=\"og:description\" content=\"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/\" \/>\n<meta property=\"og:site_name\" content=\"FHI, federatie van technologiebranches\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T12:17:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fhi.nl\/nieuws\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/\",\"url\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/\",\"name\":\"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar\",\"isPartOf\":{\"@id\":\"https:\/\/fhi.nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg\",\"datePublished\":\"2025-12-18T12:16:00+00:00\",\"dateModified\":\"2025-12-18T12:17:57+00:00\",\"description\":\"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage\",\"url\":\"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg\",\"contentUrl\":\"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg\",\"width\":800,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fhi.nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nieuws\",\"item\":\"https:\/\/fhi.nl\/nieuws\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fhi.nl\/#website\",\"url\":\"https:\/\/fhi.nl\/\",\"name\":\"FHI, federatie van technologiebranches\",\"description\":\"Nederlandse branchevereniging voor technologiebranches\",\"publisher\":{\"@id\":\"https:\/\/fhi.nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fhi.nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fhi.nl\/#organization\",\"name\":\"FHI, federatie van technologiebranches\",\"url\":\"https:\/\/fhi.nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/fhi.nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fhi.nl\/app\/uploads\/2024\/06\/3-e1722349014385.png\",\"contentUrl\":\"https:\/\/fhi.nl\/app\/uploads\/2024\/06\/3-e1722349014385.png\",\"width\":732,\"height\":136,\"caption\":\"FHI, federatie van technologiebranches\"},\"image\":{\"@id\":\"https:\/\/fhi.nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/fhi-federation-of-technology-branches\",\"https:\/\/www.instagram.com\/fhi_nl\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar","description":"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/","og_locale":"en_GB","og_type":"article","og_title":"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar","og_description":"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.","og_url":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/","og_site_name":"FHI, federatie van technologiebranches","article_modified_time":"2025-12-18T12:17:57+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fhi.nl\/nieuws\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/","url":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/","name":"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar","isPartOf":{"@id":"https:\/\/fhi.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage"},"image":{"@id":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage"},"thumbnailUrl":"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg","datePublished":"2025-12-18T12:16:00+00:00","dateModified":"2025-12-18T12:17:57+00:00","description":"TouchGFX is a graphic user interface (GUI) development framework provided by STMicroelectronics, designed for embedded system development targeting STM32 microcontroller (MCU) chips.","breadcrumb":{"@id":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#primaryimage","url":"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg","contentUrl":"https:\/\/fhi.nl\/app\/uploads\/2025\/12\/Fig-25-How-to-Select-the-Ideal-TouchGFX-Object-for-GUI-Builder-Use-by-Winstar.jpg","width":800,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/www.nijkerk-ne.com\/how-to-select-the-ideal-touchgfx-object-for-gui-builder-use-by-winstar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fhi.nl\/"},{"@type":"ListItem","position":2,"name":"Nieuws","item":"https:\/\/fhi.nl\/nieuws\/"},{"@type":"ListItem","position":3,"name":"How to Select the Ideal TouchGFX Object for GUI Builder Use \u2013 by Winstar"}]},{"@type":"WebSite","@id":"https:\/\/fhi.nl\/#website","url":"https:\/\/fhi.nl\/","name":"FHI, federation of technology industries","description":"Dutch trade association for technology industries","publisher":{"@id":"https:\/\/fhi.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fhi.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/fhi.nl\/#organization","name":"FHI, federation of technology industries","url":"https:\/\/fhi.nl\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/fhi.nl\/#\/schema\/logo\/image\/","url":"https:\/\/fhi.nl\/app\/uploads\/2024\/06\/3-e1722349014385.png","contentUrl":"https:\/\/fhi.nl\/app\/uploads\/2024\/06\/3-e1722349014385.png","width":732,"height":136,"caption":"FHI, federatie van technologiebranches"},"image":{"@id":"https:\/\/fhi.nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/fhi-federation-of-technology-branches","https:\/\/www.instagram.com\/fhi_nl\/"]}]}},"_links":{"self":[{"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/news\/76941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/news"}],"about":[{"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/types\/news"}],"version-history":[{"count":0,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/news\/76941\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/media\/76942"}],"wp:attachment":[{"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/media?parent=76941"}],"wp:term":[{"taxonomy":"branches","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/branches?post=76941"},{"taxonomy":"events","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/events?post=76941"},{"taxonomy":"secretariat","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/secretariat?post=76941"},{"taxonomy":"categories","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/categories?post=76941"},{"taxonomy":"themes","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/themes_tax?post=76941"},{"taxonomy":"content_types","embeddable":true,"href":"https:\/\/fhi.nl\/en\/wp-json\/wp\/v2\/content_types?post=76941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}