The Power of Intuitive GUIs on STM32 (Part 2) +++ SILICON LABS goes Arduino +++ 650 V Superjunction MOSFETs

Part 2: The Power of Intuitive GUIs on STM32 -
You Should Know This Software!

GUI Design Part 2

Following our five tips for user-friendly interfaces, today we will show you how to impress with simple and functional GUI designs.

Intuitive user interfaces make operating your device convenient and easy.

TouchGFX from STMicroelectronics is a free graphics framework. This software is part of the renowned STM32Cube ecosystem. Whether appealing sliders, functional buttons or clear menus: With TouchGFX Designer, you can easily transform your vision into reality.

This powerful tool allows you to design GUIs directly on the computer and easily convert them into C++ code. TouchGFX comes with a comprehensive range of widgets that are easy to use and place on the screen.

Simply import existing GUI elements as PNG files or vector graphics and integrate them seamlessly into your application. Increase the interactivity of your application through defined interactions - from simple touches to complex navigation tasks through menus or triggering hardware functions.

With TouchGFX, you not only rely on a powerful tool, but also on a platform that accelerates your development and takes your products to a new level.

Get started now and start your GUI projects with TouchGFX...

Practical design aids

The many practical functions of TouchGFX simplify the design of surfaces and reduce the time required.

Guide lines: Guides can be used to position elements precisely and align them with each other.

Buttons: Buttons with different properties can be selected as standard. These are diverse in design and function.

Images: This widget enables the integration of a wide variety of images. These include background images and animated image sequences.

Containers: Containers can be used to implement modern functions, as known from smartphones or tablets - scroll wheel, scroll lists, pop-ups, swipe gestures, drop-down menus.

Shapes: This includes various geometric shapes.

Progress: Texts, circles, bars and also images can be used to display a progressing process.

Miscellaneous: Also worth mentioning are widgets such as sliders (Fig. 2), clocks, pointers, graphs and videos. The latter of course depends on the resolution and performance of the controller.

Button Import
Fig. 1: If you import two buttons that look slightly different (e.g. color gradient, shadow), you will later get a realistic animation when you press them.
Dimming display brightness
Fig. 2: With TouchGFX, you can implement the dimming of the display brightness via a slider in the project in just a few minutes, for example.

The simulator should also be mentioned at this point. TouchGFX generates an .exe file on request. This simulates the GUI in a 1:1 representation on the PC. This means that the code can be checked for functionality in real time without flashing the target hardware.

In addition, several people can get an impression of the development status of the GUI - without having to have the hardware available.

 

 

Easy to maintain code
A particularly practical function of TouchGFX is the custom container. This allows you to create your own templates, which can then be integrated on any page. This means that changes only have to be maintained in one place.

An example: You want to display the software version (e.g. the text “Version 1.43”) and the company logo in the same position on all menu pages. With 50 submenus, it would be very time-consuming to change something manually in 50 places each time. With “Custom Containers” you can do this in just a few seconds.

TouchGFX is based on the module view presenter principle (MVP). This structure separates the hardware-relevant code from everything that has to do with the graphic design. This allows you to integrate hardware functions without having to change the code for the GUI at the same time. This not only avoids errors, but also allows several people to work on the project at the same time. The code is also easier to maintain and expand.

TouchGFX is an optional component of the Smart Embedded® display family
STMicroelectronics supplies TouchGFX directly with board support packages for the Smart Embedded® display family from GLYN. An overview of display sizes and starter kits can be found at glyn.com/se or here.

Start your HMI development now with GLYN-SUPPORT.

How to impress with a good, user-friendly GUI design

How to Impress with a Good, User-Friendly GUI Design - Part 1

"Who could have thought up this user interface?" What a shame it would be if a well-designed product with great functions failed to win over customers simply because they were put off by the user interface.

Whether it's a smartphone, tablet, or industrial control system, if the graphical user interface (GUI) is not well-thought-out, the user will avoid the software or device. There is often a lack of standardization, knowledge, or creativity. If a few design principles are observed, the GUI invites the user to operate the device - and that can be the key to success.

Read more here

Two useful recommendations for you

As experts with over 20 years of experience in HMI applications, we would like to make the following two recommendations for an appealing GUI:

Smart Embedded Displays in combination with TouchGFX

Smart Embedded® modules are displays that already have an Arm Cortex®-M7 and several interfaces integrated. The concept: an intelligent display whose graphic content is generated directly on-board. This avoids the need to transfer large amounts of data externally. You can use the free TouchGFX software to design GUIs. Find out more about Smart Embedded® Displays and TouchGFX here.

CONZE - Your partner for UI design

It takes many years of experience to realize a high-performance display of sophisticated user interfaces on minimal hardware. CONZE gets the most out of low-power embedded systems for you. Visit CONZE here.

In this video you can see the result of the development of a GUI for a smart home control system. See for yourself what is possible with an Arm Cortex®-M7 (STM32H750) design.

Share this article

Displays

Fon
+49 6126 590-453
display@glyn.de