logo - patented
Patented

El-pincel - A Painter Cloud Service for Greener Web Pages

ABSTRACT

Due to their thin size, vivid colors, high contrast and power efficiency, OLED and its variants such as AMOLED screens are increasingly replacing traditional LCD screens in mobile phones (eg. Google Nexus One, Samsung Galaxy S phones). However, the power efficiency of OLED screens greatly depends on the luminance and colors of the displayed contents on the screen. Web browsing is one of the most widely used applications in mobile devices. We demonstrate our cloud service, which intelligently re-paints the web pages in real-time with power efficient colors and tone mapping techniques without adversely affecting the user experience in reading the pages and the identity of the page. As the color transformations are performed in the cloud, El-pincel service will not add any addtional processing cost to the mobile device. El-pincel system caches the low power versions of frequently accessed pages to provide swift response.

          >> CLICK HERE DEMO IN YOUTUBE

SYSTEM DESIGN

Objectives:

The components of El-pincel are shown in Figure 1. The Client Analyzer gets information about the client such as client device type, screen type (eg. LCD, OLED), screen size, client’s remaining battery power, user specific requirements (eg. power save aggressiveness), the page requested.

Architecture

 

Figure 1: Components of El-pincel

 

 

The Brand Color Manager gets the key image (eg. favicon, logo) associated with the page request and generates one or more base colors for the page using the following algorithm.    

Algorithm Color_Pick() {

  • Create a RGB histogram of the key image.
  • Quantize to 4096 web safe colors (256x256x256) colors.
  • Rank the colors and select the top ‘n’.
  • With RGB_Power model [Figure 2], select ‘m’ colors from ‘n’, which are power efficient.

}

These ‘m’ colors are base colors.

Power vs Color Model

 

Figure 2: RGB Pixels Power Model(Google Nexus One- OLED). In general, if R = 1, G = 1.5 * R and B = 2.1 * R.

 

The Color Palette Generator selects a color from ‘m’ base colors based on the requirements from Client Analyser (ep. level of power saving required). Then using the color wheel [Figure 3] it selects set of monochromatic (from types I,V,T) and complementary colors (from types I, Y, X) for the color palette [1]. The monochromatic colors are used as background colors and the complementary colors are used as foreground colors to ensure sufficient chromatic contrast. These colors are used to generate new CSS after assuring W3C recommended amount of achromatic contrast between them for good legibility.

Color Wheel

Figure 3 Color (Hue) Wheel Types [Obtained from: Ref [1]]

Given a power model for an OLED display, a one to one mapping from the original color to energy efficient color is generated. This is an offline process in which the mapping is computed once for each power model and stored in the El-pincel database. The mapping for each color is decided by solving an optimisation problem as follows. For each color C0 = (r;g;b), we map it to a C1 = (r';g';b') with minimum power consumption subjected to some constraints on the differences between Luminance, Hue and Saturation of the colors C1 and C0. We use this pre-computed data to map pixel colors of images in a web page to power efficient colors on-the-fly without loosing image fidelity. Then, the entire page is rendered using new CSS. Using the RGB power model total power consumption of the page is computed and approximated to client’s screen size. If it satisfies the client’s requirement, the page with new CSS is sent the client. If not, the search is repeated with next higher/lower power consuming base color.

RESULTS

Results for a sample mobile pages is shown in Figure 4.

Results

Figure 4 Sample Output & Power Saved

VIDEO-DEMO (as shown in ACM MobiSys 2011) :


Demo at Youtube http://www.youtube.com/watch?v=MFR0aBHlacQ

WORK-in-PROGRESS

Converting Video, Flash and other contents. Adapting to other display type. User study to evaluate quality.

All these with complete results will be included in completed paper shown below.

PUBLICATIONS

REFERENCES

[1] Daniel Cohen-Or, Olga Sorkine, Ran Gal, Tommer Leyvand, Ying-Qing Xu, Color Harmonization. Proceedings of ACM SIGGRAPH 2006.
[2] http://www.blackle.com/about/
[3] http://jsharkey.org/blog/2010/07/01/android-surfaceflinger-tricks-for-fun-and-profit/