I blame the smart phones! Everyone now expects to see “smartphone-like” user interfaces in everything that has a display. Coffee makers, security systems and thermostat panels are just a few of the examples where you will see integrated colored screens. This new consumer expectation on these simple products brings a new challenge to designers. In resource-limited embedded graphics applications, with limited RAM and processing power, how can one achieve icons with alpha-blended backgrounds?
This article will discuss ways to overcome this challenge. It will specifically explore how to render icons with alpha-blended backgrounds efficiently, using a combination of techniques, such as alpha blending using selected alpha values, line-by-line processing routines and the use of a global transparent color to render non-rectangular icons.
Alpha blending is an operation that combines a new pixel (foreground) with an existing pixel on the screen (background) to create an effect of partial to full transparency, where the value of alpha defines the level of transparency (Equation 1).
Equation (1): RP = FPα + BP (1 – α)
Where:
RP – Resulting alpha-blended pixel
FP – Foreground pixel
BP – Background pixel
α – Alpha value factor (0 ≤ α ≤ 1)
α defines the percentage of intensity of the foreground pixel. This means that an example value of 0.25 α translates to 25% intensity of the foreground pixel. (1 – α), then becomes 75% of the intensity of the background pixel.
In most resource-limited environments, an alpha-blending engine in hardware is not present. Therefore, software alpha blending is the only option. Unfortunately, this requires a lot of multiplication and division operations, due to the α and (1 – α) components. This is further complicated by the fact that a pixel is composed of three-color components (red, green, blue), resulting in Equation 1 being performed three times. This translates in to substantial processing power and time.
A solution is to implement selective α values, which can be enough to produce the desired “smart-phone” effect as with full range alpha blending. Since α is a percentage of the intensity, a 50% value translates to a 1-bit shift, 25% a 2-bit shift and 75% the sum of 25 and 50% of the original value. Equation 1 transforms into the following three equations:
Equation (2): RP = (FP >> 2) + [(BP >> 1) + (BP >> 2)] (α = .25)
Equation (3): RP = (FP >> 1) + (BP >> 1) (α = .50)
Equation (4): RP = [(FP >> 2) + (FP >> 1)] + (BP >> 2) (α = .75)
Instead of using the common 32 bpp color data, a 16 bpp color data is used to keep the memory requirement low. A 16 bpp color format is composed of 5 bits red, 6 bits green and 5 bits blue (5-6-5). In this format, the shifting of the RGB components can be performed all at once, which speeds up the operation. It also removes the need to operate on each color component separately.
The alpha-blending operation can be performed on a full image, line-by-line or at the pixel level. Performing it on a full image requires a lot of memory to store the foreground, background and result. Performing it on a pixel-by-pixel level require more fetch and store overhead. Doing it on a line-by-line level strikes a balance between the two. A buffer will be required, but will be limited to the width of the screen; since the maximum pixels that can be processed on a single line is equal to the width of the screen. Figure 2 shows the pseudo procedure for 50% alpha blend of a rectangular panel to a background image. In this example, the background is an image and the foreground is a flat color panel.
A non-rectangular icon can be rendered with the use of a global transparent color. The idea is for the icon to use a predefined global transparent color for the pixels that should not be rendered. The method has a low firmware processing overhead, compared to other methods, and does not require each pixel to contain additional information as to whether it should be drawn. This approach allows the flexibility to change the background image and/or foreground icons independently. Figure 3 shows a run-time output of the combined techniques to create a “smart-phone like” icon.
Using the described techniques, a “smartphone-like” user interface can be achieved using a microcontroller with smaller memory and lower processing power. By combining a reduced alpha-blend equation with line-by-line processing and global-transparency color, a balance between RAM requirements and processing power is achieved in a resource-limited embedded graphics application.