Building an Embedded UI: Factors and Design Considerations

Recent trends show that modern-day users do not want to know how a device works but they just want to utilize it with the shortest learning possible. Users are giving more preference to fancy displays along with touchscreen to operate their devices. Due to the increase in demand for IoT based appliances, consumer electronic industries are trying to showcase even the minute information onto displays and creating user interfaces (UI) that are engaging, enticing and easy to use.

The adoption of displays has become part and parcel of every smart product in consumer electronics like refrigerators, Washing machines, Micro ovens, Home Automations and especially in the Wearables industry like Smartwatches and VR technologies. We can also observe Display integration into the automotive industry for infotainment systems.

In the consumer space, the UI can make or break a product and have a lasting impact on a vendor’s product line. While we design the display related products, we need to give equal importance to both hardware and software/firmware. In the hardware, we need to look for proper display components such as AMOLED, TFT, e-Ink display etc. and in software/Firmware, the kind of UI framework to be used to develop better UI leading to better user experience.

Hardware
Design Considerations:

An embedded display is a screen that connects to an embedded device. The screen provides information about how the device is working and allows users to interact with it. During the product development, the developer should consider the type of display to be used in the product. As we discussed, there are many display options available in the market like TFT, LCD, OLED, AMOLED, e-Ink etc.

Major parameters that need to be considered for display selection while designing are

  1. No of Pixels
  2. Colour depth

Based on the above parameters we should calculate the frame buffer required for display.

For example, we are using 320×480 pixel display and to showcase RGB 565-pixel format (RGB565 colour means Red 5bits, Green 6 bits, Blue 5 bits so total 16-bit colour depth)

So, one framebuffer = row x column x colour depth/8 bytes

In this example, framebuffer = 320x480x16/8 = 307200 bytes

To store one frame buffer, we need about 307KB of RAM memory to transfer one frame buffer to display. In General, a Frame buffer (Fb) will be stored in RAM and later pushed to the respective display for populating that particular frame. The options for developers are Fb can be placed either in internal RAM of MCU or External RAM(PSRAM). Each option has both pros and cons and lets us look at them.

Internal RAM – If we store Fb in Internal RAM, rendering is very fast, and we get better smoothness. But MCU RAM is accessed by many other parts of the system so developers should calculate memory requirements parallelly. If the MCU is having higher RAM then placing Fb in internal RAM would be a better option and we can avoid other costs such as avoiding PSRAM.

External RAM (PSRAM) – If internal RAM is not sufficient or enough, then better to use PSRAM for placing Fb rather than placing it in internal RAM. The read and write access to external RAM will typically be slower than to the internal RAM, but the amount of external RAM will typically be much larger. Therefore, this is sometimes the only viable solution. To increase the access speed better use DMA for PSRAM with the display.

Number of Framebuffers required – The system should provide a higher Frame Per Second (FPS) rate for a better user experience. In general, the following parameters will affect the FPS rate and need to be considered:

  1. Number of Framebuffers – If the system can accommodate 2 framebuffers, then FPS can be increased
  2. Display refresh rate (SPI/QSPI/MIPI) – MIPI displays have a better refresh rate. Refresh rate order is like MIPI > QSPI > SPI
  3. Inbuilt Graphics Engine in the MCU – Graphics Engine will take care of rendering of the Fb to achieve better FPS.

Based on the above parameters, product designers should choose the correct hardware architecture and their respective components to build the best display.

Software/Firmware
UI Frameworks

Developing a beautiful user interface for embedded systems requires experience and knowledge in both the general UX/UI design process and a good understanding of development platforms and libraries available for the embedded world. So, choosing a UI framework is also equally important. Let us look at the available options in the UI framework for embedded systems.

1. LVGL

The LVGL is a lightweight embedded library for displays and touchscreens providing everything required to build fully featured-embedded GUIs.

Specifications

Memory Requirements – minimum requirement 64kB Flash and 8KB RAM for simple user interface
Platform Support – Use LVGL on any platforms, such as NXP LPC or iMX, STM32, PIC, Arduino, ESP32, Raspberry and so on.
Widgets – Supports 30+ ready to use widgets and customize them with ease
Display – It supports any display Monochrome, TFT, OLED, etc
Operating System- Supports FreeRTOS or any OS
License – Really Free to use with MIT license
Simulator – Yes
Link to Refer – https://lvgl.io/

2. TouchGFX

The TouchGFX is an advanced GUI tool supporting multiple displays and offers only for STM32 family of processors

Specifications

Memory Requirements – minimum requirement 20KB Flash and 10KB RAM for simple user interface
Platform Support – It supports only for STM32 family MCU’s
Widgets – Supports 30+ ready to use widgets and customize them with ease
Display – It supports any display Monochrome, TFT, OLED, etc
Operating System – Bare metal, FreeRTOS or any OS
License – Free for STM32 Family Processors
Simulator – No
Link to Refer – /www.st.com/content/st_com/en/ecosystems/stm32-graphic-user-interface.html

3. emWIN

emWin can be used in any application from battery-powered single-chip products with basic graphic needs, to high-end embedded systems demanding ultra-high performance, and sophisticated animations. emWin, the professional GUI by SEGGER is used in many different target markets such as industrial controls, Internet of Things (IoT), networking, consumer electronics, safety-critical devices, automotive, medical devices, and avionics, making it a state-of-the-art GUI solution in the embedded industry

Specifications

Memory Requirements – minimum requirement 20KB Flash and 10KB RAM for simple user interface
Platform Support – NXP LPC or iMX, STM32, PIC, Arduino, ESP32, Any Cortex M based MCU, Raspberry and so on.
Widgets – Supports 30+ ready to use widgets and customize them with ease
Display – It supports any display Monochrome, TFT, OLED, etc
Operating System – Bare metal, FreeRTOS or any OS
License – Commercial for developers license. No need to pay for Production
Simulator – Yes
Link to Refer – //www.segger.com/products/user-interface/emwin/

All UI Frameworks mentioned above are lightweight and can support multiple low memory embedded systems. The porting of the UI libraries is also much simpler and development time and time to market are much faster. So based on the application and MCU, the developer can freely choose the above UI frameworks and kickstart the development.

Finally, displays are an important part of many embedded systems and can often be the most expensive element in your design. Choosing the right display and streamlining the user interface design is the need of the hour for the success of your embedded device.

Apply Online Quick Enquiry Chat with us