resources/templates/BioJSTemplate.txt

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