-
Notifications
You must be signed in to change notification settings - Fork 0
Using the PhyloBox Remote Client
andrewxhill edited this page Nov 12, 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.
At this point we have two caveats. First, the widget.phylobox.js file must be pulled in AFTER the initialize function. Second, the phylobox object must be created inside an initialize function. If either of these are missing, the phylobox app loads out of order. We will be working to fix this ASAP.
Basic
<html>
<head>
<script type="text/javascript">
function initialize(){
var myPhylobox = new PhyloBox("phylo_div");
myPhylobox.drawTree("key","phylobox-2-0-f8677cdb-5f5d-43ca-b4a1-f42e0bf69c7e");
}
</script>
<script type="text/javascript" src="http://2-0.latest.phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
</head>
<body>
<div id="phylo_div" style="width:600px; height:500px" ></div>
</body>
</html>Basic with Options
<html>
<head>
<script type="text/javascript">
function initialize(){
var myOptions = {
viewMode: "circular dendrogram",
threeD: true,
htuLabels: false,
nodeLabels: true,
background: false,
branchWidth: 1,
nodeRadius: 6,
title: true,
tools: true
};
var myPhylobox = new PhyloBox("phylo_div", myOptions);
myPhylobox.drawTree("key","phylobox-2-0-f7fd33b2-932a-497a-9652-4732e1a3110f");
}
</script>
<script type="text/javascript" src="http://2-0.latest.phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
</head>
<body style="background: #000000">
<div id="phylo_div" style="width:600px; height:500px" ></div>
</body>
</html>Using a hosted PhyloXML file to draw a tree
<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 = {
viewMode: "dendogram"
};
var myPhylobox = new PhyloBox("phylo_div", myOptions);
myPhylobox.drawTree("url","http://www.phyloxml.org/examples/bcl_2.xml");
}
</script>
<script type="text/javascript" src="http://2-0.latest.phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
</head>
<body>
<div id="phylo_div" style="width:600px; height:500px" ></div>
</body>
</html>Adding event handlers for tree operations
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
body{ background: #000000; }
.pb{ border: 1px solid red; width:600px; height:500px; float: left; }
.cl{ color: #eeeeee; float:left; width:300px; border: 1px solid red; margin-left: 15px; height: 500px; }
</style>
<script type="text/javascript">
function initialize(){
var myOptions = {
viewMode: "circular cladogram",
threeD: true,
htuLabels: false,
nodeLabels: false,
background: "#020212",
branchColor: "#ff0000",
branchWidth: 2,
nodeRadius: 3,
title: false,
};
var myPhylobox = new PhyloBox("phylo_div", myOptions);
myPhylobox.drawTree("url","http://www.phyloxml.org/examples/bcl_2.xml");
PbEvent.addListener(myPhylobox,"pb-nodeclick",
function(e,data){
document.getElementById('myClickDiv').innerHTML += "<br>id: " + data.node.id();
document.getElementById('myClickDiv').innerHTML += "<br>color: " + data.node.color();
}
);
}
</script>
<script type="text/javascript" src="http://2-0.latest.phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
</head>
<body>
<div id="phylo_div" class="pb" ></div>
<div id="myClickDiv" class="cl" ></div>
</body>
</html>