-
Notifications
You must be signed in to change notification settings - Fork 0
Using the PhyloBox Remote Client
andrewxhill edited this page Dec 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.
Live example: http://2-0.latest.phylobox.appspot.com/examples/widget.html
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
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function pbinit(){
var myPhylobox = new PhyBox("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
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function pbinit(){
var myOptions = {
viewMode: "circular dendrogram",
threeD: true,
htuLabels: false,
nodeLabels: true,
background: false,
branchWidth: 1,
nodeRadius: 6,
title: true,
tools: true
};
var myPhylobox = new PhyBox("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="border: 1px solid grey; width:600px; height:500px" ></div>
</body>
</html>Using a hosted PhyloXML file to draw a tree
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://phylobox.appspot.com/static/js/2-0/widget.phylobox.js"></script>
<script type="text/javascript">
function pbinit(){
var myOptions = {
viewMode: "dendogram"
};
var myPhylobox = new PhyBox("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
<!DOCTYPE HTML>
<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 pbinit(){
var myOptions = {
viewMode: "circular cladogram",
threeD: true,
htuLabels: false,
nodeLabels: false,
background: "#020212",
branchColor: "#ff0000",
branchWidth: 2,
nodeRadius: 3,
title: false,
};
var myPhylobox = new PhyBox("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>