Skip to content

Using the PhyloBox Remote Client

Jump to bottom Edit New page
andrewxhill edited this page Nov 10, 2010 · 36 revisions

The PhyloBox Remote Client allows users to plug interactive trees into webpages outside of the phylobox domain. To make it familiar we have attempted to emulate the basic methods for embedding a Google Map into a webpage for embedding a PhyloBox into a webpage.

VERSION 2.0 EXAMPLES.

Basic

<html>
<head>
    <script type="text/javascript" src="http://phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
    <script type="text/javascript">
        function initialize(){
             var myOptions = {
                 viewType: "dendogram",
                 threeD: false,
                 htuLabels: false,
                 nodeLabels: false,
                 background: false,
                 tools: {
                       click: true,
                       rotate: true,
                       collapse: true,
                       move: false,
                 }
              };
              var phylobox = new PhyloBox(document.getElementById("phylo_div"), myOptions);
              phylobox.drawTree("key","8432840932-8492jkflsdj-4208kdsflj");
         }
    </script>
</head>
<body onload="initialize()">
    <div id="phylo_div" width="100%" height="100%" ></div>
</body>
</html>

Adding event handlers for tree operations

<html>
<head>
    <script type="text/javascript" src="http://phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
    <script type="text/javascript">
        function initialize(){
             var myOptions = {
                 viewType: "dendogram"
              };
              var myHandlers = {
                 rotate: function(e){ alert( e.target.data.leaf.order ) }
              };
              var phylobox = new PhyloBox(document.getElementById("phylo_div"), myOptions, myHandlers);
              phylobox.drawTree("key","8432840932-8492jkflsdj-4208kdsflj");
         }
    </script>
</head>
<body onload="initialize()">
    <div id="phylo_div" width="100%" height="100%" ></div>
</body>
</html>

Using a new PhyloXML file to draw a tree without preprocessing to get a key

<html>
<head>
    <script type="text/javascript" src="http://phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
    <script type="text/javascript">
        function initialize(){
             var myOptions = {
                 viewType: "dendogram"
              };
              var phylobox = new PhyloBox(document.getElementById("phylo_div"), myOptions);
              phylobox.drawTree("url","http://2-0.phylobox.appspot.com/static/files/example.xml");
         }
    </script>
</head>
<body onload="initialize()">
    <div id="phylo_div" width="100%" height="100%" ></div>
</body>
</html>
Add a custom footer
Add a custom sidebar
Clone this wiki locally