Modified biojs template file
[jalview.git] / resources / templates / BioJSTemplate.txt
1 <html>
2 <header><title>BioJS viewer</title></header>
3 <body>
4
5 <!-- include MSA js + css -->
6 <script src="https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.js"></script>
7 <link type=text/css rel=stylesheet href=https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.css />
8   
9
10 <!-- optional: menubar -->
11 <link type=text/css rel=stylesheet href=  https://raw.githubusercontent.com/greenify/biojs-vis-msa/master/external/jquery.dropdown.css />
12   
13 <div id="menuDiv"></div>
14 <div id="yourDiv">press "Run with JS"</div>
15 </body>
16 </html>
17
18
19 <script src=//cdn.biojs-msa.org/msa/0.2/msa.min.gz.js></script>
20
21 <script>
22 // this is a way how you use a bundled file parser
23 biojs.io.clustal.read("http://www.corsproxy.com/rostlab.org/~goldberg/jalv_example.clustal", function(seqs){
24
25 var opts = {};
26
27 // set your custom properties
28 // @see: https://github.com/greenify/biojs-vis-msa/tree/master/src/g 
29
30 var seqOnFly = [];
31 #sequenceData#
32 opts.seqs = seqOnFly;
33
34 //opts.seqs = seqs; //msa.utils.seqgen.getDummySequences(1000,300);
35 opts.el = document.getElementById("yourDiv");
36 opts.vis = {conserv: false, overviewbox: false};
37 opts.zoomer = {alignmentHeight: 225, labelWidth: 130,labelFontsize: "13px",labelIdLength: 20,   menuFontsize: "12px",menuMarginLeft: "3px", menuPadding: "3px 4px 3px 4px", menuItemFontsize: "14px", menuItemLineHeight: "14px"};
38
39 // init msa
40 var m = new msa.msa(opts);
41
42 // the menu is independent to the MSA container
43 var menuOpts = {};
44 menuOpts.el = document.getElementById('div');
45 menuOpts.msa = m;
46 var defMenu = new msa.menu.defaultmenu(menuOpts);
47 m.addView("menu", defMenu);
48
49 // call render at the end to display the whole MSA
50 m.render();
51   
52 });
53 </script>