Printer Friendly

Creating "smartphone-like" user interfaces in resource-limited embedded graphics applications.

I blame the smart phones! Everyone now expects to see smartphone-inspired 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 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): [R.sub.p] = [F.sub.p] [alpha] + BP (1 - [alpha])


[R.sub.p]--Resulting alpha-blended pixel

[F.sub.p]--Foreground pixel

[B.sub.p]--Background pixel

[alpha]--Alpha value factor (0 [less than or equal to] [alpha] [less than or equal to] 1)

[alpha] defines the percentage of intensity of the foreground pixel. This means that an example value of 0.25 [alpha] translates to 25 percent intensity of the foreground pixel. (1 - [alpha]) then becomes 75 percent 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 a and (1 - [alpha]) 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 to substantial processing power and time.

A solution is to implement selective a values, which can be enough to produce the desired smartphone" effect as with full range alpha blending. Since a is a percentage of the intensity, a 50 percent value translates to a 1-bit shift, 25 percent a 2-bit shift and 75 percent the sum of 25 and 50 percent of the original value. Equation 1 transforms into the following three equations:

Equation (2): [R.sub.p] = ([F.sub.p] >> 2) + [([B.sub.p] >> 1) + ([B.sub.p] >> 2)] ([alpha] = .25)

Equation (3): [R.sub.p] = ([F.sub.p] >> 1) + ([B.sub.p] >> 1) ([alpha] = .50)

Equation (4): RP = [([F.sub.p] >> 2) + ([F.sub.p] >> 1)] + ([B.sub.p] >> 2) ([alpha] = .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.

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.

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.

By Paolo Tamayo, Principal Applications Engineer, Microchip Technology Inc.
COPYRIGHT 2014 Advantage Business Media
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2014 Gale, Cengage Learning. All rights reserved.

Article Details
Printer friendly Cite/link Email Feedback
Author:Tamayo, Paolo
Publication:ECN-Electronic Component News
Date:May 15, 2014
Previous Article:Easy solar micro inverter design using MCUs: solar inverter designs can be a challenge, but they offer the best solution to complexity in grid...
Next Article:Top five design opportunities for MCUs in the Internet of Things.

Terms of use | Privacy policy | Copyright © 2019 Farlex, Inc. | Feedback | For webmasters