Twitter icon
Facebook icon
LinkedIn icon
Google icon
Reddit icon
StumbleUpon icon
Del.icio.us icon

Taking a low-code approach to developing a great GUI

Added to IoTplaybook or last updated on: 09/30/2021
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.

The 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.

 

Avnet

This content is provided by our content partner Avnet, a global technology solutions provider with end-to-end ecosystem capabilities. Visit them online for more great content like this.

This article was originally published at Avnet. It was added to IoTplaybook or last modified on 09/30/2021.