Building eye-catching GUIs for your embedded MCU designs

Francis Lamotte, KEOLABS

December 18, 2013

Francis Lamotte, KEOLABSDecember 18, 2013

This article describes how integration of 2D Direct Memory Access (DMA2D) in microcontrollers creates new possibilities for graphics use in user interfaces by placing limits on device and application coding costs, at the same time improving core processor performance. It describes the key features of DMA2D and how developers can implement these features in application software, with code examples that engineers can use in their own applications. The examples cover techniques for:

  • Handling of bitmaps (display, overlaying and moving)
  • Using transparency (pixel-level, global and blending)
  • Dynamic versus Read-Only objects
  • Management of objects and touch sensing
  • Use of layering (Z-order)
  • Transformations of graphic objects
  • Use of memory spaces including external SDRAM resources.

Chrome-ART acceleration for MCU GUI applications
Thanks to the ease of implementing touch sensing and the improved price points for displays and 32-bit MCUs, graphical user interfaces (GUI) have become increasingly present in MCU applications. Because they are attractive, flexible, and interactive, GUIs are an excellent way to enhance both application functionality and the user’s experience.

In spite of this evolution, some technical challenges have persisted. Typical GUI implementations on microcontrollers (unlike high-end processors targeting mobile appliances) have been limited by how much of their processing power, peripherals, and memory resources could be allocated to managing the display and graphics.

Relatively limited memory, processing power, and resulting code complexity all conspired to make implementation costly and responsiveness of the GUI relatively limited.

The demonstration described here illustrates how integrated 2D Direct Memory Access (DMA2D) and the right combination of supporting peripherals can open a new world of possibilities for graphics use in general purpose microcontroller applications (Figure 1). For our example we used ST Microelectronic’s STM32F429.

Figure 1: Multiple bitmaps used in a dynamic GUI on a general purpose MCU

DMA2D integration is the keystone to this graphics potential in the MCU we have selected. Through a set of registers, the STM32F429 manages graphics with minimal code and impact on processor performance. Graphics capabilities supported by DMA2D include:
  • Handling of bitmap files (up to 32 bits per pixel)
  • Management of image overlays, with or without transparency
  • Handling of object display to include multiple objects and their positions, sizes and layering (Z-order)

The DMA2D hardware
Chrom-ART Accelerator is the commercial name for STMicroelectronics’ implementation of the DMA2D peripheral on the STM32F429. Figure 2 shows the internal structure of the DMA2D and integrated features that make it particularly advantageous for managing graphics.
Its features include:
  • Two input pixel format converters (PFC). These blocks are able to read and to decode bitmap files
  • The blender, which computes and mixes the data from the two input PFC
  • The output PFC, which decodes the information to be sent to the destination
  • The FIFOs used for both the inputs and the outputs connected to a specific DMA controller

Integrating blending, encoding, and decoding functionality in the microcontroller itself relieves these requirements from the application code and the core processor.

Figure 2: Internal structure of Chrom-ART 2D Direct Memory Access (DMA2D)

DMA2D assistive apps on the STM32F429
In addition to DMA2D, the STM32F429 provides other integrated controllers that facilitate the optimal implementation of a GUI. These include:
  • An SDRAM controller for the addition of cost-effective RAM resources for stocking graphical elements
  • An LCD-TFT controller to enable writing of graphics directly to the display for improved efficiency and performance
  • A digital camera interface

In the past, these types of peripherals and features were reserved for high-end or application-specific processors. Notably for DMA2D, this is the first time we see it integrated in a standard, general-purpose MCU like the STM32F429. The appearance of these peripherals in a general purpose device represents a major evolution for microcontroller users and opens a range of application possibilities.

The EvoPrimer software/hardware environment
The examples described here were developed using the EvoPrimer development platform (Figure 3), its CircleOS software environment, and DMA2D API. This has some impacts on the manner in which the DMA2D is used in the demonstration.

You can watch a video of this demonstration. Source code, board schematics, bill of materials and documentation are available to download.

Figure 3: EvoPrimer features the STM32F429ZI microcontroller and 2 Mbytes of additional SDRAM

EvoPrimer features the STM32F429ZI microcontroller and 2 Mbytes of additional SDRAM. The demonstration application uses the microcontroller’s DMA2D and SDRAM controller. EvoPrimer already includes a controller for its color TFT touchscreen and no camera is available on the platform, so neither the integrated LCD-TFT controller nor camera interface are used here.

For this demonstration, a software API encapsulates the functionality of the DMA2D. This implementation is based both on the EvoPrimer hardware platform and the CircleOS software environment. In addition to an API for STM32 peripherals, CircleOS provides native capabilities for drawing objects, lines, text, and pixels. However, the source files specific to the DMA2D are designed to be easily extracted and re-used without CircleOS.

In this article we will talk about virtual spaces called “screens” and displayed “objects”. In the application, “Screen” refers to a virtual area that can be shown on the LCD display, a bit like a desktop. A screen has a visible zone the size of the EvoPrimer LCD display (240 x 320 pixels).
“Object” refers to a graphic rectangle in bitmap format that can be read from memory and written to the LCD display using the DMA2D. An object is declared as a rectangle, but any form could be considered if transparency is used in the bitmap. In this demo application, these objects such as icons or a background image are attributed to a virtual “screen” in order to be displayed. Objects are placed in the screen by X, Y coordinates. The coordinates can be outside the displayed area of the screen. The visible area can also be moved like a window to display objects in virtual space. This is demonstrated in detail in the next sections.

Using the API provided in the DMA2D files of CircleOS is a simple way to manage the graphics capability of the DMA2D to include use of two or more virtual screens, with up to 256 graphic objects per screen  and display and movement of objects anywhere on the two-dimensional space of a screen.

Keep in mind that, in its simplest form, an STM32F429 application can use the DMA2D to write a bitmap directly to the LCD. The implementation in the demonstration application is a little more complex, but allows us to explore a wide range of possibilities for DMA2D use in a graphical interface.

Figure 4 shows how DMA2D and SDRAM are used in the demonstration application. The application calls bitmaps (objects) from memory and includes the information for their positions (X, Y coordinates), layer (Z-order) and attributes them to a screen.

Figure 4: DMA2D blends the objects and stores the resulting object directly to SDRAM

The DMA2D blends the objects and stores the resulting object directly to SDRAM. In this demonstration application, the DMA is used to transfer the object to the display. SDRAM is also used to store dynamic objects such as texts or forms that are created using CircleOS native draw capabilities for rendering forms, text, lines or pixels.

In the C program, a bitmap must be declared as a byte array initialized by the contents of the binary file (translated into an .h text file). This example describes the code used to display the 640 x 320 pixel bitmap (photo_x8 with 8-bit indexed color palette) shown here, on a display that is 320 x 240 pixels. Because the image is larger than the size of the LCD panel, it will automatically be cropped by the DMA2D API, as shown in Figure 5.

Figure 5: If an image is larger (shaded) than the LCD panel (clear display), it will automatically be cropped

Below is the code to declare for both this background image and a bird character (bird_A888) that is used later in the demonstration:

To display the picture photo_x8 as the background of a screen, all you have to do is to create an object, create a link between the object and the bitmap, then make the bitmap visible.

The palette for the bitmap is loaded automatically by the DMA2D, based on the header information that is decoded by the application software (in this case the API).

The last command (DMA2D_ScreenRedraw) scans the list of objects assigned to a screen and repaints all the visible ones. Note that the size of the background image (640x420 pixels in this example) can be bigger than the size of the screen (320x240 for our demonstration platform).

The bitmap can be positioned based on provided coordinates. 0 for X and Y axes are the lower left had corner of the LCD. To fill the entire display area of the LCD, the coordinates X and Y must be negative (or equal to 0). Positive coordinates will leave an area that has not been drawn starting in the lower left corner of the display to the coordinate where the lower left corner of the background image is displayed.

If you want to center the image, you can "move" the background before redrawing:

DMA2D_ObjectMove(BG_Image, PosX_BG = -160, PosY_BG = -120 ); //set the position

Because the overall object is too big to be displayed in our screen, it is automatically cropped at the borders of the LCD panel.

< Previous
Page 1 of 2
Next >

Loading comments...