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

Chameleon: ¡A ¡Color-­‑Adap0ve ¡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 ¡ ¡consump6on ¡in ¡ a ¡smartphone,“ ¡2010 ¡

O rgani c L ight - E mittin g D iode

2009 ¡ 2010 ¡ 2011 ¡

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 ¡ ¡ 90% ¡ Display ¡Power ¡ReducKon ¡ Op0mal ¡ 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 � hHp://confabulator.blogspot.com/2007/01/how-­‑liHle-­‑web-­‑sites-­‑have-­‑changed-­‑over.html ¡

5 ¡ Give User Options �

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 � 5 ¡ Give User Options �

Chameleon Browser Engine � Chameleon � Service � Power � Early Stages � Model Model � 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 ¡ Scrip0ng ¡ Parsing ¡ DOM ¡Tree ¡ Style ¡ Forma]ng ¡ Render ¡Tree ¡ Layout ¡ Calcula0on ¡ Render ¡Tree ¡ w/ ¡Layout ¡ Pain0ng ¡ 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, ¡RGB) ¡ DrawPoint ¡(x, ¡y, ¡LUT(RGB)) ¡ Loading ¡ Scrip0ng ¡ Parsing ¡ Style ¡ Forma]ng ¡ Layout ¡ Calcula0on ¡ Pain0ng ¡ 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 ¡ Educa0on ¡ Engineering ¡

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

Summary ¡ • Color ¡transforma0on ¡is ¡beneficial: ¡40% ¡ system ¡power ¡reduc0on ¡for ¡web ¡browsing ¡ • Color ¡transforma0on ¡is ¡well ¡accepted ¡by ¡ users ¡if ¡performed ¡properly ¡ • Chameleon ¡tremendously ¡benefited ¡from ¡ studying ¡users ¡ hep://www.ruf.rice.edu/~dongmian/Chameleon.html ¡

Backup ¡

Outline ¡ Motivation 1 Theory 2 Design 3 Evaluation 4 Conclusion 5

LiveLab: ¡25 ¡users; ¡12 ¡months ¡ Logger ¡updated ¡daily ¡ Internet ¡ Data ¡collected ¡daily ¡ SoOware ¡team ¡ deals ¡with ¡ Human ¡factor ¡team ¡ Par6cipants ¡use ¡the ¡ the ¡logger ¡and ¡data ¡without ¡ interacts ¡with ¡the ¡ instrumented ¡phone ¡in ¡ knowing ¡the ¡par0cipants ¡ par0cipants ¡ the ¡field ¡ C. ¡Sheperd, ¡“LiveLab: ¡measuring ¡wireless ¡networks ¡and ¡smartphone ¡users ¡in ¡the ¡field,” ¡2010 ¡

Logo � Images � Background � Images �

Interval ¡ Timeout ¡ Timeout ¡ Timeout ¡ Dura0on ¡ Time ¡ 25 ¡ 25 ¡ Inter-­‑Series ¡Interval ¡(s) ¡ Series ¡DuraKon ¡(s) ¡ 20 ¡ 20 ¡ 15 ¡ 15 ¡ 10 ¡ 10 ¡ 5 ¡ 5 ¡ 0 ¡ 0 ¡ 0.25 ¡ 0.5 ¡ 1 ¡ 2 ¡ 4 ¡ 0.25 ¡ 0.5 ¡ 1 ¡ 2 ¡ 4 ¡ Timeout ¡Value ¡(s) ¡ Timeout ¡Value ¡(s) ¡

Coun0ng ¡Pixels ¡

Videos ¡ Render ¡ Internet ¡ Tree ¡ Resource ¡ Loading ¡ Scrip0ng ¡ Parsing ¡ Style ¡ Forma]ng ¡ Layout ¡ Calcula0on ¡ Pain0ng ¡ alpha=50% ¡ Display ¡

DAQ ¡ P=c+f( 1.0 ) P=c+f( 0.8 ) P=c+f( 0.6 ) P=c+f( 0.4 ) P=c+f( 0.2 ) P=c P=V 2 x I ¡ ¡ ¡ ¡ ¡ ¡ R=0.2 ¡ R=0.4 ¡ R=0.6 ¡ R=0.0 ¡ R=0.8 ¡ R=1.0 ¡ V 2 ¡ V 1 ¡ G=0.0 ¡ G=0.0 ¡ G=0.0 ¡ G=0.0 ¡ G=0.0 ¡ G=0.0 ¡ B=0.0 ¡ B=0.0 ¡ B=0.0 ¡ B=0.0 ¡ B=0.0 ¡ B=0.0 ¡ I=(V 1 - V 2 )/R R ¡ BaZery ¡

Web Browser is ¡among ¡ ¡ the ¡most ¡omen ¡used ¡applica0ons ¡

L ¡= ¡80 ¡ L ¡= ¡60 ¡ L ¡= ¡40 ¡ L ¡= ¡20 ¡