There exists now an easy way of embedding a light-weight version of the TissueStack front-end in your site.
A very basic example of how to achieve this can be seen here:
http://caivm1.qern.qcif.edu.au/embedded.html
Use your browser's source view ability to see how it's done (e.g. Ctrl + U for chrome and firefox)
The 3 steps required to integrate Mini Tissue Stack are:
- Include JQuery, version 1.7 or higher and TissueStack.Embedded.js, e.g:
- Create an instance of TissueStack.Embedded, e.g:
<script type="text/javascript"> $(document).ready(function() { new TissueStack.Embedded( "test", // id of parent div that will hold the TissueStack Canvas elements "caivm1.qern.qcif.edu.au", // server name of the TissueStack instance that houses the data as well as the js and css 3, // id of data set that is requested true, // display cross hair canvas on top (defaults to: true) false); // use direct querying as opposed to pre tiles (defaults to: false) }); </script>
- Add a div that serves to be the container for the html elements that make up Tissue Stack, e.g.
<div id="test" style="margin: 10px; float:left; width: 500px; height: 500px;"></div>
A few notes that may be useful for the above process:
- You can use the Tissue Stack Server instance that you'd like to connect to in order to get the 2 mandatory java scripts included (step 1)
- You may query the Tissue Stack Server instance in question for data sets:
http://caivm1.qern.qcif.edu.au/backend/data/list which will give you a list of what's available including the individual ids that are then needed when instantiating the TissueStack.Embedded object (see step 2)
- Use explicit width and height for your div in step 3, otherwise you are at the mercy of your layout/browser and it can happen that either height or width will be 0!
Limitations in the embedded version are:
- no slider for 3 plane view
- no coordinate and extent info display
- no color ranges
- no coordinate focus
|
No comments:
Post a Comment