Chameleon: A Color-Adaptive Web Browser for Mobile OLED Displays - PowerPoint PPT Presentation

Chameleon: A Color-Adaptive Web Browser for Mobile OLED Displays Mian Dong and Lin Zhong Rice University

Display is a major power consumer in a smartphone A. Carroll, "A analysis of power consumption in a smartphone,“ 2010

O rganic L ight - E mitting D iode

2009 2010 2011

OLED Rocks !!! Power = 2.0W OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!!

OLED Rocks !!! OLED Rocks !!! Power = 2.0W Power = 0.5W OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!!

An OLED-friendly theme works for GUIs

but not for Contents

65% of the contents in the web are White LiveLab: A field study (25 users; 12 months)

Web Non-Mobile Design solves the problem? OLED- Mobile Friendly

50% of the webpages visited by iPhone users are Non-Mobile Max: 70% Min: 20% Median: 50% LiveLab: A field study (25 users; 12 months)

Generate Device Specific 1 OLED Power Model

Single pixel i P i = a ∙ R i + b ∙ G i + c ∙ B i A display with N pixels N N P = ∑ P i = ∑ ( a ∙ R i + b ∙ G i + c ∙ B i ) i = 1 i = 1

Google Nokia Samsung Nexus One N85 Galaxy S 6 R R R G G G Power ( μ W) B B B 0 0 255 0 255 0 255 Linear RGB Values

Treat GUI Objects and 2 Images Differently

GUI Objects vs. Images

Color Transformation of GUI Objects Color Color Color Counting Mapping Painting Pixel # Pixel # RGB RGB

Color Transformation of Images

Keep Color Consistency 3 for Each Website

Color Consistency per Website

Top 20 websites contribute 90% of the webpages visited by each user Top 20 Top 10 Top 5 Top 1 0% 20% 40% 60% 80% 100% Average % of usage (with Max and Min) of all users LiveLab: A field study (25 iPhone users; 12 months)

Calculate Color Maps 4 Offline

Color Transformation of GUI Objects Color Color Color Counting Mapping Painting Pixel # Pixel # RGB RGB

2 Weeks of training work for 3 Months Display Power Reduction 90% Optimal Trained by 1w Trained by 2w Trained by 3w Trained by 4w 80% 70% 60% 50% 1 2 3 4 5 6 7 8 9 10 11 12 Week

Websites remain Color Consistent over many years http://confabulator.blogspot.com/2007/01/how-little-web-sites-have-changed-over.html

Give User Options 5

20 Participants

Dark Green Arbitrary Inversion Original R’ = λ R R’ = λ R R R’ = R* R’= λ (1-R) G’ = λ G G’ = λ G G G’ = G* G’= λ (1-G) B’ = λ B B’ = λ B B B’ = B* B’= λ (1-B) ↓ 25% ↓ 34% ↓ 72% ↓ 66%

Different users prefer different transformations for a website Inversion Arbitrary Green Dark 8 6 User Number 4 2 0 CNN Facebook Google Weather ESPN

Even the same user may favor different color transformations for different websites Inversion Arbitrary Green Dark 5 4 Scores (1 to 5) 3 2 1 0 CNN Facebook Google Weather ESPN

Generate Device Specific 1 OLED Power Model Treat GUI Objects and 2 Images Differently Keep Color Consistency 3 for Each Website Calculate Color Maps 4 Offline Give User Options 5

Chameleon Browser Engine Chameleon Service Power Early Model Model Stages Building Layout Color Calculation Render Tree Mapping w/ Layout Color Painting Counting Color Bitmap Histogram Display Color Maps Color Painting User Mobile Device Options Mobile User

Color Counting Internet Resource Loading Scripting Parsing DOM Tree Style Formatting Render Tree Layout Calculation Render Tree w/ Layout Painting Pixel # Bitmap Display RGB

Mapping Optimization • Input: Pixel # L RGB • Output: b a • Algorithm – Arbitrary min Power s.t. for any i, j ∆E ((L i ’, a i ’, b i ’), ( L j ’, a j ’, b j ’)) = λ∙∆E ((L i , a i , b i ), (L j , a j , b j ))

Painting GUI Objects Internet Resource DrawPoint (x, y, LUT(RGB)) DrawPoint (x, y, RGB) Loading Scripting Parsing Style Formatting Layout Calculation Painting Display

Implementation

Display Power Consumption 70% Fennec Chameleon

A Field Trial 36 Participants; 3 Months Age >30 Age <20 Female Age Male Age 21-25 26-30 Art & Science Literature Law Business High School Students Computer Science Education Engineering

Transformation is Well Accepted especially with a Low battery level Transformed Original 47% 63% Battery Level High Battery Level Low

Summary • Color transformation is beneficial: 40% system power reduction for web browsing • Color transformation is well accepted by users if performed properly • Chameleon tremendously benefited from studying users