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

▶
chameleon a color adaptive web browser for mobile oled
SMART_READER_LITE
LIVE PREVIEW

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

Jun 10, 2023 383 likes •809 views

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

slide-1
SLIDE 1

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

Mian Dong and Lin Zhong Rice University

slide-2
SLIDE 2

is a major power consumer in a smartphone

Display

  • A. Carroll, "A analysis of

power consumption in a smartphone,“ 2010

slide-3
SLIDE 3

Organic Light- Emitting Diode

slide-4
SLIDE 4

2010 2009 2011

slide-5
SLIDE 5

Power = 2.0W

OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!! OLED Rocks !!!

slide-6
SLIDE 6

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 !!!

slide-7
SLIDE 7

An OLED-friendly theme works for

GUIs

slide-8
SLIDE 8

but not for

Contents

slide-9
SLIDE 9

65% of the contents

in the web are White

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

slide-10
SLIDE 10

Web Design

solves the problem?

Non-Mobile Mobile OLED- Friendly

slide-11
SLIDE 11

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%

slide-12
SLIDE 12
slide-13
SLIDE 13

1

Generate Device Specific OLED Power Model

slide-14
SLIDE 14

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

slide-15
SLIDE 15

Google Nexus One Nokia N85 Samsung Galaxy S

6 255

R G B

255

R G B

255

R G B

Linear RGB Values Power (μW)

slide-16
SLIDE 16

2

Treat GUI Objects and Images Differently

slide-17
SLIDE 17

GUI Objects vs. Images

slide-18
SLIDE 18

Color Transformation of GUI Objects

RGB Pixel # RGB Pixel #

Color Counting Color Mapping Color Painting

slide-19
SLIDE 19

Color Transformation of Images

slide-20
SLIDE 20

3

Keep Color Consistency for Each Website

slide-21
SLIDE 21

Color Consistency per Website

slide-22
SLIDE 22

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

  • f the webpages visited by each user
slide-23
SLIDE 23

4

Calculate Color Maps Offline

slide-24
SLIDE 24

Color Transformation of GUI Objects

RGB Pixel # RGB Pixel #

Color Counting Color Mapping Color Painting

slide-25
SLIDE 25

50% 60% 70% 80% 90% 1 2 3 4 5 6 7 8 9 10 11 12

Display Power Reduction Week

Optimal Trained by 1w Trained by 2w Trained by 3w Trained by 4w

2 Weeks of training work for 3 Months

slide-26
SLIDE 26

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

Websites remain

Color Consistent

  • ver many years
slide-27
SLIDE 27

5

Give User Options

slide-28
SLIDE 28

20 Participants

slide-29
SLIDE 29

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

slide-30
SLIDE 30

2 4 6 8 CNN Facebook Google Weather ESPN User Number Inversion Arbitrary Green Dark

Different users prefer different transformations for a website

slide-31
SLIDE 31

1 2 3 4 5 CNN Facebook Google Weather ESPN Scores (1 to 5) Inversion Arbitrary Green Dark

Even the same user may favor different color transformations for different websites

slide-32
SLIDE 32

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

slide-33
SLIDE 33

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

slide-34
SLIDE 34

Color Counting

RGB Pixel #

Resource Loading Parsing Style Formatting Layout Calculation Internet Scripting Painting Display DOM Tree Render Tree Render Tree w/ Layout Bitmap

slide-35
SLIDE 35

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 Pixel #

L a b

slide-36
SLIDE 36

Painting GUI Objects

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

Resource Loading Parsing Style Formatting Layout Calculation Internet Scripting Painting Display

slide-37
SLIDE 37

Implementation

slide-38
SLIDE 38

Display Power Consumption

Chameleon Fennec

70%

slide-39
SLIDE 39

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

slide-40
SLIDE 40

Transformation is Well Accepted especially with a Low battery level

47% 63%

Original Transformed

Battery Level High Battery Level Low

slide-41
SLIDE 41

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