Taking a low-code approach to developing a great GUI
User interfaces have always been hugely important in the embedded sector, but in recent years they have become differentiating.
A graphical user interface (GUI) with a resistive or capacitive touch screen is now expected in many electronic products, across all sectors. In industrial control, the screen and touch technology need to be more robust than in, say, a consumer product, but the user experience is becoming common.
People expect certain things to happen when they see a screen on a device. Swiping, pinching and tapping are now as ubiquitous as “double-click.” When designed well, a GUI will naturally invite people to interact with it. Part of that expectation has been set by the smart phone industry, but the reason it has spread so successfully is because people just get it.
Products we don’t often physically touch anymore, like TVs, now rely on a graphical user interface and modern accessories, such as on-demand streaming boxes, and may have no physical buttons at all. Wearables such as watches and fitness trackers all generally have touch-sensitive screens, some with incredibly high resolution. The development of micro-LED technology will help drive this on and the result will be even smaller screens with higher resolutions going into more diverse products.
The cost of LCD technology continues to fall while the number of colors continues to rise; tiny displays with millions of colors are now integrated into almost anything. Household goods, such as refrigerators, washer and dryers, dish washers, microwaves and stoves, even coffee pots and toaster ovens now feature displays that provide an amazing user experience.
Our modern life relies on tiny but informative displays that connect us to the connected world.
While segmented LED-based displays still have their place, it is the LCD with the capability to display animated images that now defines the embedded human-machine interface (HMI). This raises a few design challenges, of course, and the embedded electronics industry is responding as it always does, with innovative solutions that will empower new applications.
Abstraction is the key
Adding graphical displays to any design requires specific features, but in a deeply embedded application these requirements are normally constrained by the resources available. Fortunately, the general trend in microcontroller design is toward more powerful 32-bit architectures conceived with low power and limited system resources in mind.
Integration levels continue to increase, which means semiconductor manufacturers can supplement these already powerful, low-power processing cores with frame buffers and dedicated hardware to accelerate a wide number of functions. Graphics acceleration is one of them, taking images stored using standard compression methods like JPEG and MPEG, decompressing and rendering them as rich images or high frame-rate videos with high-definition audio. Add to this, the controllers and drivers needed to interface to an LCD screen and engineers are well equipped to develop sophisticated GUIs without needing to code at the very lowest level.
Storing and extracting compressed digital images is only part of the challenge. Many screens now support resistive or capacitive touch-sensing, which also requires its own dedicated hardware interface. Fortunately, again, modern microcontroller units (MCUs) are more than capable of running the algorithms needed to support touch-sensing and, often, this feature will also be supported on-chip by a dedicated interface and hardware block. The availability of low-cost, low-power MCUs able to support high-resolution graphics, video and audio is increasing all the time.
From an embedded software point of view, the mechanics of driving a display have now become memory-mapped to these hardware functions, but the process of rendering, interpreting and updating what is actually displayed is still software-centric. More often today, that low-level software burden has been abstracted away from the user.
This has even given rise to modularized solutions controlled using just an 8-bit MCU through simple serial (I2C/SPI) interfaces. This approach can produce an effective solution with minimal design effort, and it can be very effective for simpler products such as a digital thermostat or other similar control panels. But it comes with limitations in terms of what can be modified, customized or presented, and the screen size and shape will be fixed for the module. For more flexibility or demanding applications, such as displaying media files, there may still be a need to get deeper into the weeds.
Avnet & ST Workshop
Sign up for Avnet’s workshop “Creating Cutting-Edge GUIs Quickly” to take your first steps toward embedded GUI design using low-code tools.
This hands-on workshop with Avnet field application engineers gives attendees an introduction to using TouchGFX Designer, a drag-and-drop environment with code generation that can streamline your GUI design. The workshop also includes the STM32H7B31-DK Evaluation Kit.
The workshop will be held on July 28th and the last day to register is July 14th. Sign up today!
Register HereThe low-code approach: Creating cutting-edge GUIs quickly
This is where GUI frameworks fit, providing what has become known as a “low-code” approach to embedded GUI design. Under the skin, these frameworks generally employ structured, object-oriented coding methods, based on libraries pulled in when needed. The output of these frameworks is often standard ANSI C/C++ source code or even compiled code added to a larger application.
Through abstraction, these frameworks provide the low-code approach to graphical user interface design, generally using imported images created with standard graphics design environments. The amount of system resources needed to execute the output of these frameworks varies and not all can support every feature on the smallest MCU, but the concept is scalable. The abstraction also makes the output portable, allowing engineers to develop the GUI before selecting the most appropriate hardware platform.
| Design method | Ease of use | Flexibility | Pros | Cons |
|---|---|---|---|---|
| Modularized approach | High | Low | Easy to use, can be controlled with very low end (8-bit) MCUs | Little or no hardware design flexibility, as everything is provided as a module |
| Low-code framework | Medium | Medium to high | Speeds development through a platform approach, often with a drag & drop interface and auto-code generation for easy integration | Some coding required, but this is generally object-oriented and assisted by the framework’s design platform |
| Source code | Low | High | Complete flexibility in the design | Very high degree of low-level coding required |
Streamlining GUI design
Smart phones, tablets and other consumer experiences raise the expectation for embedded GUIs. However, GUI design has also followed this direction, with frameworks that now resemble the development environments used for smart phone/tablet application development. These frameworks provide a low-code approach to design that balances flexibility with ease of use. This comes with some predefined demands on the hardware platform, but even this isn’t really a compromise, given that the resources are needed anyway.
At a system level, GUIs require a processor with memory, a display, a driver and a controller. But GUIs are mostly about software and it is here that frameworks really make a difference. Increasingly, those frameworks are able to provide a level of abstraction that supports scalability and portability.
