html/index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2 <html><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
   3 <title>WarpTree: WarpTree</title>
   4 <link href="doxygen.css" rel="stylesheet" type="text/css">
   5 <link href="tabs.css" rel="stylesheet" type="text/css">
   6 </head><body>
   7 <!-- Generated by Doxygen 1.5.0 -->
   8 <div class="tabs">
   9   <ul>
  10     <li id="current"><a href="index.html"><span>Main&nbsp;Page</span></a></li>
  11     <li><a href="annotated.html"><span>Classes</span></a></li>
  12     <li><a href="files.html"><span>Files</span></a></li>
  13   </ul></div>
  14 <h1>WarpTree</h1>
  15 <p>
  16 WarpTree provides a widget, <a class="el" href="classWarpTreeView.html">WarpTreeView</a>, that can display any hierarchical data set.<p>
  17 <ul>
  18 <li><a class="el" href="index.html#warped">Warped space</a></li><li><a class="el" href="index.html#features">Features</a></li><li><a class="el" href="index.html#examples">Examples</a></li><li><a class="el" href="index.html#using">Using WarpTree</a></li><li><a class="el" href="index.html#designer">Integration in Qt Designer</a></li></ul>
  19 <p>
  20 <dl class="author" compact><dt><b>Authors:</b></dt><dd>Jos van den Oever</dd></dl>
  21 License: LGPL<h2><a class="anchor" name="warped">
  22 Warped space</a></h2>
  23 The amount of data people are handling day to day is steadily increasing. Getting an overview of a large data sets can be a daunting task. For visualizing near-infinite data sets, one would need a near-infinite screen size. Or a convenient way of mapping the infinite screensize to a finite area. Such a methods exist. A popular method is to lay the data out in a hyperbolic plane and visualizing this on a Poincaré disk. Such a disk has a high resolution view of the plane in thecenter and a low resolution on the edges. The Poincaré disk was nice visualized by the Dutch graphic artist <a href="http://en.wikipedia.org/wiki/M._C._Escher">M.C. Escher</a>.<p>
  24 <div align="center">
  25 <img src="../images/bi.jpg" alt="bi.jpg">
  26 <p><strong>Circle Limit I by MC Escher</strong></p></div>
  27  As you can see from the drawing, this information is projected on a circle. This is a bit wasteful on standard computer screens that are usually rectangular. So if one uses a circular projection, the amount of space wasted is at least 20%.<p>
  28 For this reason, we came up with a different projection which we simply call 'warped'. It is the same as the projection above, but points are extended from the center of the projection to the edge of the containing rectangle. If we apply this method to 'Circle Limit I' we get this image:<p>
  29 <div align="center">
  30 <img src="../images/bu.jpg" alt="bu.jpg">
  31 <p><strong>Square Limit I generated with warp</strong></p></div>
  32 <h2><a class="anchor" name="qabstract">
  33 QAbstractItemModel and QAbstractItemView</a></h2>
  34 One of the most powerfull new features in Qt4 is the introduction of a Model/View paradigm. The most important classes of this paradigm are QAbstractItemModel and QAbstractItemView. If you can present your data in QAbstractItemModel, you can use one of the implementations of QAbstractItemView classes to display the data. So the QAbstractItemModel is more or less the standard format for more complex data in Qt and it is a natural choice to implement WarpTree as a QAbstractItemView. Using QAbstractItemView really allows us be more creative with less code.<p>
  35 So what type of view is <a class="el" href="classWarpTreeView.html">WarpTreeView</a>? It is a bit like a <a href="http://doc.trolltech.com/4.3/qtreeview.html">QTreeView</a>, but for larger data sets. The best way to understand it is to use it.<p>
  36 <div align="center">
  37 <img src="../images/round.png" alt="round.png">
  38 <p><strong>Showing the graph on a unit disc.</strong></p></div>
  39  <div align="center">
  40 <img src="../images/rect.png" alt="rect.png">
  41 <p><strong>Showing the graph in WarpTreeView.</strong></p></div>
  42  <h2><a class="anchor" name="features">
  43 Features</a></h2>
  44 <ul>
  45 <li>dynamic loading of the network</li><li>showing labels of nodes if there is room for them regardless of position in the hierarchy</li><li>no overlapping labels</li><li>adaptable to different datatypes and styles by implementing a <a class="el" href="classWarpNodePainter.html">WarpNodePainter</a></li><li>zooming with the mousewheel to see different levels of detail</li><li>change the projection with cursor keys and &lt;Home&gt; or by dragging the tree</li><li>show tooltips if the model provides information for them</li></ul>
  46 <h2><a class="anchor" name="examples">
  47 Examples</a></h2>
  48 <h3><a class="anchor" name="dirview">
  49 DirView</a></h3>
  50 DirView is a simple application that uses a QDirModel to browse your files. Looking at the code is very insightfull if you want to start using <a class="el" href="classWarpTreeView.html">WarpTreeView</a>. Here you see a screenshot of DirView. On the left you see a normal QTreeView and on the right you see the <a class="el" href="classWarpTreeView.html">WarpTreeView</a>. The two views share the same data model and the same selection model. This means that if you select an item in one view, it is also selected in the other view.<p>
  51 The way the background, the nodes and the lines are drawn can be customized by subclassing <a class="el" href="classWarpNodePainter.html">WarpNodePainter</a>. The default <a class="el" href="classWarpNodePainter.html">WarpNodePainter</a> does not draw a background. In DirView, an adapted <a class="el" href="classWarpNodePainter.html">WarpNodePainter</a> is used: if the active file is a picture, ImageNodePainter draws the picture in the background of the view. This allows the user to browse for pictures while keeping an eye on the potentially large directory structure.<p>
  52 <div align="center">
  53 <img src="../images/dirview.png" alt="dirview.png">
  54 <p><strong>The DirView example application showing an image preview.</strong></p></div>
  55  <div align="center">
  56 <img src="../images/windirview.png" alt="windirview.png">
  57 <p><strong>The DirView example application running under Windows XP.</strong></p></div>
  58  The information in the view is loaded dynamically from the QAbstractItemModel so the user does not have to wait until the entire data model has been scanned. In DirView, you can see how this works, because data shows up as it is loaded into the view. This asynchronous behaviour a very important feature, because a data model might be slow or large.<h3><a class="anchor" name="treeoflife">
  59 The Tree of Life</a></h3>
  60 The <a href="tolweb.org">Tree of Life</a> is a website where information is collected about the history of evolution. The tree of life describes which species evolved from which other species. This history can be seen as a big tree which is rooted in the primordial sea, the start of all life. We, humans, are but one of the leaves of this tree. The entire tree currently contains almost 100.000 species. With the <a class="el" href="classWarpTreeView.html">WarpTreeView</a>, you can conveniently browse this entire tree.<p>
  61 The program 'tol', that comes with this package, allows you to view the tree. You can start it with 'tol'. This loads a phylogeny with 88000 nodes. This is what you see:<p>
  62 <div align="center">
  63 <img src="../images/zoom.png" alt="zoom.png">
  64 <p><strong>Zoomed out view of the tree of life.</strong></p></div>
  65  <div align="center">
  66 <img src="../images/zoom2.png" alt="zoom2.png">
  67 <p><strong>Far zoomed out view of the tree of life.</strong></p></div>
  68  <div align="center">
  69 <img src="../images/zoomtooltip.png" alt="zoomtooltip.png">
  70 <p><strong>Zoomed in view of the tree of life with tooltip.</strong></p></div>
  71  You can zoom in or out with the mouse-wheel and move around in the tree by dragging it or by using the cursor keys. By clicking on an entry, you move it to the middle of the widget and by hovering over an entry you can activate a tooltip with more information.<p>
  72 The data from the tree of life can be used for non-commercial use as is stated on <a href="http://www.tolweb.org/tree/home.pages/downloadtree.html">the download website</a>.<h2><a class="anchor" name="using">
  73 Using WarpTree</a></h2>
  74 You can use WarpTree by instanciating a <a class="el" href="classWarpTreeView.html">WarpTreeView</a> and adding your data to it in the form of a QAbstractItemModel. Examples on how to do it can be found in dirview/main.cpp and treeoflife/tol.cpp.<p>
  75 All you need to use the widget is the dynamic library and the header 'warptreeview.h'.<h3><a class="anchor" name="designer">
  76 Integration in Qt Designer</a></h3>
  77 WarpTree comes with a plugin that, when installed, shows up in Qt Designer automatically. It appears in the widget sidebar and can be dragged onto dialogs and applicion windows like any other widget.<h3><a class="anchor" name="additional">
  78 additional</a></h3>
  79 <div align="center">
  80 <img src="../images/expand.png" alt="expand.png">
  81 <p><strong>Schema showing how the warped widget makes better use of the available space by mapping from a cirkel to a square.</strong></p></div>
  82  Additional information on hyperbolic planes can be found in the hypertree project. There is a nice paper in there: <a href="http://hypertree.cvs.sourceforge.net/%2Acheckout%2A/hypertree/hypertree/article/principal_hypertree.ps">article on displaying a network on a hyperbolic plane</a>. <hr size="1"><address style="align: right;"><small>Generated on Sat Jun 2 19:18:06 2007 for WarpTree by&nbsp;
  83 <a href="http://www.doxygen.org/index.html">
  84 <img src="doxygen.png" alt="doxygen" align="middle" border="0"></a> 1.5.0 </small></address>
  85 </body>
  86 </html>