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

Mian Dong and Lin Zhong

Rice University

is a major power

consumer in a

smartphone

Display

A. Carroll, "A analysis of power consumption in a smartphone,“ 2010

Organic

Light-

Emitting

Diode

2010 2009 2011

Power = 2.0W 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 !!! 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

Design solves the

problem?

Non-Mobile

Mobile OLED-

Friendly

50% of the webpages

visited by iPhone users are

Non-Mobile

LiveLab: A field study (25 users; 12 months)

Max: 70% Min: 20% Median: 50%

1 Generate Device Specific

OLED Power Model

Single pixel i

A display with N pixels

Pi = a ∙ Ri + b ∙ Gi + c ∙ Bi

P = ∑ Pi = ∑ (a ∙ Ri + b ∙ Gi + c ∙ Bi) i = 1

N N

i = 1

Google

Nexus One Nokia

N85

Samsung

Galaxy S

0

6

0 255

R

G

B

0 255

RGB

0 255

R

G

B

Linear RGB Values

Pow

er (μ

W)

2 Treat GUI Objects and

Images Differently

GUI Objects vs. Images

Color Transformation of GUI Objects

RGB

Pix

el #

RGB P

ixe

l #

Color Counting

Color Mapping

Color Painting

Color Transformation of Images

3 Keep Color Consistency

for Each Website

Color Consistency per Website

Top 20 websites contribute 90%

LiveLab: A field study (25 iPhone users; 12 months)

0% 20% 40% 60% 80% 100%

Top 1

Top 5

Top 10

Top 20

Average % of usage (with Max and Min) of all users

of the webpages visited by each user

4 Calculate Color Maps

Offline

Color Transformation of GUI Objects

RGB

Pix

el #

RGB

Pix

el #

Color Counting

Color Mapping

Color Painting

50%

60%

70%

80%

90%

1 2 3 4 5 6 7 8 9 10 11 12

Dis

pla

y P

ow

er

Re

du

ctio

n

Week

Optimal Trained by 1w Trained by 2w

Trained by 3w Trained by 4w

2 Weeks of training work for 3 Months

http://confabulator.blogspot.com/2007/01/how-little-web-sites-have-changed-over.html

Websites remain

Color Consistent over many years

5 Give User Options

20 Participants

Dark R’ = λR

G’ = λG

B’ = λB

↓25%

Green R’ = λRR

G’ = λGG

B’ = λBB

↓34%

Arbitrary R’ = R*

G’ = G*

B’ = B*

↓72%

Inversion R’= λ(1-R)

G’= λ(1-G)

B’= λ(1-B)

↓66%

Original

0

2

4

6

8

CNN Facebook Google Weather ESPN

Use

r N

um

be

r

Inversion Arbitrary Green Dark

Different users prefer different

transformations for a website

0

1

2

3

4

5

CNN Facebook Google Weather ESPN

Sco

res

(1 t

o 5

)

Inversion Arbitrary Green Dark

Even the same user may favor different

color transformations for different websites

1 Generate Device Specific

OLED Power Model

2 Treat GUI Objects and

Images Differently

3 Keep Color Consistency

for Each Website

4 Calculate Color Maps

Offline

5 Give User Options

Model

Building Color

Mapping Color

Counting

Color

Painting

Early

Stages

Layout

Calculation

Painting

Display

Mobile Device

Chameleon

Service Chameleon Browser Engine

Color Maps

Power

Model

Color

Histogram

Render Tree

w/ Layout

Bitmap

Mobile User

User

Options

Color Counting

RGB

Pix

el #

Resource Loading

Parsing

Style Formatting

Layout Calculation

Internet

Scripting

Painting

Display

DOM Tree

Render Tree

Render Tree w/ Layout

Bitmap

Mapping Optimization

• Input:

• Output:

• Algorithm – Arbitrary

min Power

s.t. for any i, j

∆E ((Li’, ai’, bi’), (Lj’, aj’, bj’)) = λ∙∆E ((Li, ai, bi), (Lj, aj, bj))

RGB

Pix

el #

L

a

b

Painting GUI Objects

DrawPoint (x, y, RGB) DrawPoint (x, y, LUT(RGB)) Resource Loading

Parsing

Style Formatting

Layout Calculation

Internet

Scripting

Painting

Display

Implementation

Display Power Consumption

Chameleon Fennec

70%

A Field Trial 36 Participants; 3 Months

Female Male

Age <20

Age 26-30

Age >30

Age 21-25

Art & Literature

Business

Computer Science

Engineering

Education

High School Students

Law

Science

Transformation is Well Accepted

especially with a Low battery level

47% 63%

Original Transformed

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