Considering Tiling for a better User Interface
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Considering Tiling for a better User Interface

on

  • 6,555 views

 

Statistics

Views

Total Views
6,555
Views on SlideShare
4,321
Embed Views
2,234

Actions

Likes
2
Downloads
84
Comments
0

47 Embeds 2,234

http://codeposts.blogspot.com 1407
http://codeposts.blogspot.fr 184
http://maemo.org 100
http://codeposts.blogspot.in 91
http://codeposts.blogspot.de 62
http://codeposts.blogspot.co.uk 37
http://codeposts.blogspot.it 27
http://codeposts.blogspot.tw 25
http://codeposts.blogspot.com.br 24
http://codeposts.blogspot.fi 20
http://codeposts.blogspot.ru 20
http://codeposts.blogspot.se 19
http://codeposts.blogspot.ca 19
http://codeposts.blogspot.dk 16
http://codeposts.blogspot.jp 15
http://codeposts.blogspot.sg 14
http://codeposts.blogspot.kr 14
http://www.linkedin.com 12
http://codeposts.blogspot.com.au 11
http://www.slideshare.net 10
http://codeposts.blogspot.co.at 10
http://codeposts.blogspot.ro 9
http://codeposts.blogspot.nl 9
http://qtlabs.openbossa.org 8
http://codeposts.blogspot.com.es 8
http://codeposts.blogspot.be 7
http://webcache.googleusercontent.com 6
http://codeposts.blogspot.gr 5
http://codeposts.blogspot.co.il 5
http://codeposts.blogspot.hu 5
http://translate.googleusercontent.com 4
http://codeposts.blogspot.ch 4
http://codeposts.blogspot.sk 4
http://codeposts.blogspot.com.ar 3
http://codeposts.blogspot.hk 3
http://codeposts.blogspot.no 2
https://www.linkedin.com 2
http://xss.yandex.net 2
http://www.lmodules.com 2
http://dcdemo.digitalchalk.com 2
http://codeposts.blogspot.mx 1
http://codeposts.blogspot.ae 1
http://tecnojosejavier.blogspot.com 1
http://www.codeposts.blogspot.jp 1
http://codeposts.blogspot.pt 1
http://codeposts.blogspot.cz 1
http://river2.rien.tv 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Considering Tiling for a better User Interface Presentation Transcript

  • 1. Considering Tiling for a better User Experience Kenneth Rohde Christiansen WebKit Code Camp, Wiesbaden, December 2009
  • 2. SOMETHING THAT I HAVE BEEN WORKING ON
  • 3. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I?
  • 4. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I? KENNETH R. CHRISTIANSEN
  • 5. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
  • 6. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT
  • 7. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT 3+ YEARS WORKING WITH APP & FRAMEWORK DEVELOPMENT AT
  • 8. SOMETHING THAT I HAVE BEEN WORKING ON WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 1+ YEAR WORKING WITH WEBKIT 3+ YEARS WORKING WITH APP & FRAMEWORK DEVELOPMENT AT NOKIA TECHNOLOGY INSTITUTE, INdT, RECIFE, BRAZIL
  • 9. A TILED BACKING STORE
  • 10. What are the problems we are facing today? The background for considering tiling
  • 11. What are the problems we are facing today? The background for considering tiling WE PAINT THINGS WE’VE ALREADY PAINTED WHEN SCROLLING BACK
  • 12. What are the problems we are facing today? The background for considering tiling WE CALL INTO WEBCORE FOR EACH WE PAINT THINGS WE’VE PAINT... ALREADY PAINTED WHEN SCROLLING BACK
  • 13. What are the problems we are facing today? The background for considering tiling WE CALL INTO WEBCORE FOR EACH WE PAINT THINGS WE’VE PAINT... ALREADY PAINTED WHEN SCROLLING BACK ...CALLING INTO WEBCORE HAS SOME OVERHEAD
  • 14. What are the problems we are facing today? The background for considering tiling WE CALL INTO WEBCORE FOR EACH WE PAINT THINGS WE’VE PAINT... ALREADY PAINTED WHEN SCROLLING BACK FOR INSTANCE, CONSTRUCTING GRAPHICS CONTEXT IS QUITE EXPENSIVE ...CALLING INTO WEBCORE HAS SOME OVERHEAD
  • 15. What are the problems we are facing today? The background for considering tiling WE CALL INTO WEBCORE FOR EACH WE PAINT THINGS WE’VE PAINT... ALREADY PAINTED WHEN SCROLLING BACK FOR INSTANCE, CONSTRUCTING GRAPHICS CONTEXT IS QUITE EXPENSIVE ...CALLING INTO WEBCORE HAS SOME OVERHEAD CLEVER TILING CAN SOLVE THESE ISSUES
  • 16. How to accomplish this What is tiling anyway? Cache and join paint events
  • 17. How to accomplish this What is tiling anyway? Cache and join paint events Cache what you paint in image tiles
  • 18. How to accomplish this What is tiling anyway? Cache and join paint events Cache what you paint in image tiles Blit the existing tiles on scroll
  • 19. How to accomplish this What is tiling anyway? Cache and join paint events Cache what you paint in image tiles Blit the existing tiles on scroll Don’t paint non-visible dirty areas immediately
  • 20. How to accomplish this What is tiling anyway? Cache and join paint events Cache what you paint in image tiles Blit the existing tiles on scroll Don’t paint non-visible dirty areas immediately Avoid too many small tiles, due to the cost of constructing GraphicsContexts
  • 21. How to accomplish this What is tiling anyway? Cache and join paint events Cache what you paint in image tiles Blit the existing tiles on scroll Don’t paint non-visible dirty areas immediately Avoid too many small tiles, due to the cost of constructing GraphicsContexts This can be hardware accelerated!
  • 22. My experiment My basic algorithm As an experiment, implement it on the WebKit side
  • 23. My experiment My basic algorithm As an experiment, implement it on the WebKit side Implemented only for QGraphicsWebView
  • 24. My experiment My basic algorithm As an experiment, implement it on the WebKit side Implemented only for QGraphicsWebView Some changes needed elsewhere: 1) Render methods in abs. coordinates, without clipping
  • 25. My experiment My basic algorithm As an experiment, implement it on the WebKit side Implemented only for QGraphicsWebView Some changes needed elsewhere: 1) Render methods in abs. coordinates, without clipping 2) Make ScrollView / FrameView send update events outside of the viewport
  • 26. My experiment My basic algorithm As an experiment, implement it on the WebKit side Implemented only for QGraphicsWebView Some changes needed elsewhere: 1) Render methods in abs. coordinates, without clipping 2) Make ScrollView / FrameView send update events outside of the viewport Why not just make viewport == contents size?
  • 27. My experiment My basic algorithm As an experiment, implement it on the WebKit side Implemented only for QGraphicsWebView Some changes needed elsewhere: 1) Render methods in abs. coordinates, without clipping 2) Make ScrollView / FrameView send update events outside of the viewport Why not just make viewport == contents size? Because we use WebCore for drawing our scrollbars and that makes a whole lot of sense ... theming ... etc
  • 28. My experiment My basic algorithm Basic algorithm
  • 29. My experiment My basic algorithm Basic algorithm If not in cache, paint the dirty area as a tile, enlarge it slightly (64 pixels in each direction)
  • 30. My experiment My basic algorithm Basic algorithm If not in cache, paint the dirty area as a tile, enlarge it slightly (64 pixels in each direction) Put in cache, blit to screen
  • 31. My experiment My basic algorithm Basic algorithm If not in cache, paint the dirty area as a tile, enlarge it slightly (64 pixels in each direction) Put in cache, blit to screen Each tile stores it’s covered area as well as a dirty area.
  • 32. My experiment My basic algorithm Basic algorithm If not in cache, paint the dirty area as a tile, enlarge it slightly (64 pixels in each direction) Put in cache, blit to screen Each tile stores it’s covered area as well as a dirty area. On update, we update the dirty area of the intersected tiles. If it has such an area already, the bounding rect is uses as the new area. Remember, we try to avoid calling into WebCore unnecessarily
  • 33. My experiment My basic algorithm Basic algorithm If not in cache, paint the dirty area as a tile, enlarge it slightly (64 pixels in each direction) Put in cache, blit to screen Each tile stores it’s covered area as well as a dirty area. On update, we update the dirty area of the intersected tiles. If it has such an area already, the bounding rect is uses as the new area. Remember, we try to avoid calling into WebCore unnecessarily Furthermore, if the dirty area == covered area, remove it from cache
  • 34. My experiment My basic algorithm Basic algorithm
  • 35. My experiment My basic algorithm Basic algorithm On update and scroll: Update all tiles, blit what is in the cache, create tiles for what is not
  • 36. My experiment My basic algorithm Basic algorithm On update and scroll: Update all tiles, blit what is in the cache, create tiles for what is not That is more of less the basic algorithm, but there are some problems.
  • 37. My experiment My basic algorithm Problems
  • 38. My experiment My basic algorithm Problems Scrollbars Paint the scrollbars separately, make sure updates to them do not invalidate any tiles. These are not tiled in my implementation!
  • 39. My experiment My basic algorithm Problems Scrollbars Paint the scrollbars separately, make sure updates to them do not invalidate any tiles. These are not tiled in my implementation! Enlarging tiles When enlarging we much make sure that we don’t cover an area already in the cache, so I need to know what area is cached.
  • 40. My experiment My basic algorithm Problems
  • 41. My experiment My basic algorithm Problems Cache growth Storing the whole page in the cache would be expensive, memory-wise, so the cache has a max size.
  • 42. My experiment My basic algorithm Problems Cache growth Storing the whole page in the cache would be expensive, memory-wise, so the cache has a max size. The solution is to give each tile an age and increase the age when not used, and reset it when being blit.
  • 43. My experiment My basic algorithm Problems Cache growth Storing the whole page in the cache would be expensive, memory-wise, so the cache has a max size. The solution is to give each tile an age and increase the age when not used, and reset it when being blit. Before adding a new tile, we reserve the needed space for it, removing the oldest tiles.
  • 44. So what is the preliminary results? Did it really pay off? Benjamin wrote a simple scrolling test app, and the results are quite promising.
  • 45. So what is the preliminary results? Did it really pay off? Benjamin wrote a simple scrolling test app, and the results are quite promising. QWEBVIEW PERFORMS RESONABLE, DUE TO THE XCOPYREGION
  • 46. So what is the preliminary results? Did it really pay off? Benjamin wrote a simple scrolling test app, and the results are quite promising. QWEBVIEW PERFORMS THE TILING IS FASTER! RESONABLE, DUE TO THE XCOPYREGION
  • 47. So what is the preliminary results? Did it really pay off? Benjamin wrote a simple scrolling test app, and the results are quite promising. QWEBVIEW PERFORMS THE TILING IS FASTER! RESONABLE, DUE TO THE XCOPYREGION But we had some surprises as well. NON-TILED QGRAPHICSWEBVIEW IS EXTREMELY SLOW
  • 48. Where are se’ numbers? Back up your claims dude! Simple painting QWebView QGraphicsWebView Tiled QGraphicsWebView 0 2,5 5,0 7,5 10,0 Milliseconds
  • 49. Where are se’ numbers? Back up your claims dude! Slashdot page QWebView QGraphicsWebView Tiled QGraphicsWebView 0 25 50 75 100 Milliseconds
  • 50. Where are se’ numbers? Back up your claims dude! Amazon book page QWebView QGraphicsWebView Tiled QGraphicsWebView 0 22,5 45,0 67,5 90,0 Milliseconds
  • 51. Where are se’ numbers? Back up your claims dude! Wikipedia Qt page QWebView QGraphicsWebView Tiled QGraphicsWebView 0 37,5 75,0 112,5 150,0 Milliseconds
  • 52. Can’t you do better than that? Ideas for improvement WE CAN!
  • 53. Can’t you do better than that? Ideas for improvement WE CAN! More realistic test suite!
  • 54. Can’t you do better than that? Ideas for improvement WE CAN! More realistic test suite! My data structures are not that good, nor profiled
  • 55. Can’t you do better than that? Ideas for improvement WE CAN! More realistic test suite! My data structures are not that good, nor profiled Should be lower in the stack using WebCore constructs
  • 56. Can’t you do better than that? Ideas for improvement WE CAN! More realistic test suite! My data structures are not that good, nor profiled Should be lower in the stack using WebCore constructs Paint in another thread, not block WebCore
  • 57. Can’t you do better than that? Ideas for improvement WE CAN! More realistic test suite! My data structures are not that good, nor profiled Should be lower in the stack using WebCore constructs Paint in another thread, not block WebCore That is why we are here ;-) Now let’s get on to the work!
  • 58. Thanks for listening KENNETH ROHDE CHRISTIANSEN ext-kenneth.christiansen@nokia.com kenneth.christiansen@openbossa.org