Pages

Wednesday 10 November 2010

WPF App - Virtualized Canvas - 32k nodes + connections

Some time ago I faced the challenge of showing thousands of elements on the canvas at the same time. The list of requirement was short and tidy:
  1. presentation of thousands of elements,
  2. low memory consumption, 
  3. fully responsive UI, 
  4. real-time interaction. 
Showing thousands of elements on the screen is not a problem but if you want to minimize memory consumption and you don't want to wait ages for loading all elements (fully responsive UI) you have to run this  process asynchronously and visualize only necessary elements. For detecting elements belonging to my visibility area (in this particular case screen + 25% margin) I decided to use Quadtree algorithm. On the pictures below you can find ZoomBoxes with all elements (left hand side) and just necessary elements detected by Quadtree (right hand side). ZoomBoxes on the left hand side contain simplified form of nodes (just nodes no connections, about 15k ellipses) loaded upfront to help users to find themselves on this huge canvas 66000 x 66000 pixels.



12 comments:

  1. Dude, you rock :)
    Is there any code to be shared? I'd like to know more details on implementing similar behavior and also using same kind of animations

    ReplyDelete
  2. My implementation is not ready to be shared :-) but I can redirect you to the source which became my inspiration http://blogs.msdn.com/b/jgoldb/archive/2008/03/08/performant-virtualized-wpf-canvas.aspx

    ReplyDelete
    Replies
    1. When will u be able to share it?

      Thanks

      Delete
  3. Thanks! I've noticed that article :) Did you do that using WPF 4?

    ReplyDelete
  4. There are not a lot of new things but I decided to use PLINQ in few places and I was thinking about using Cached Composition for reach Node representation.

    ReplyDelete
  5. Hi, how about releasing the code?

    I have a problem where I have an hierarchical Models, in a form of a Tree, and while scrolling, the CPU goes high and it is not smooth.

    If all the UI is loaded (no virtualization) then the scrolling is smooth and the CPU usage is low, but I don't want that.

    I'll try to explain the models hierarchy:

    I have a list of Regions, each region has a list of Rungs, and each rung contains a list of Elements.

    The regions and the rungs are virtualized, but the elements are not (one a rung is loaded, I should see all elements).

    A rung can even contain 40-80 elements, and the UI of the elements is complex...

    Since while scrolling, rungs enter the viewport and therefor realized, then all the 40-80 usercontrols of the elements are also being created and then rendered, which causes the program to lag.

    The ideal thing is to load/render the usercontrols in a different render thread (which seems to be impossible).


    However, your video shows a smooth scrolling where UI loads async (with a nice animation where the opacity changes from 0 to 1).


    Can you share the code?

    Thanks

    ReplyDelete
  6. When will u be able to share it?

    Thanks

    ReplyDelete
  7. Any way to see the code for this? Please?

    ReplyDelete
  8. can u please share the code, and or can i buy a copy of it?

    ReplyDelete
  9. Can you share the code? Plz.

    ReplyDelete