site-resources/jalview_embedded_example1.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Embedded JalviewJS Example 1</title><meta charset="utf-8" />
   5 <script src="swingjs/swingjs2.js"></script>
   6 <script>
   7 if (!self.SwingJS)alert('swingjs2.js was not found. It needs to be in swingjs folder in the same directory as ' + document.location.href)
   8 Info = {
   9   code: null,
  10   main: "jalview.bin.JalviewJS2",
  11 //  core: "NONE",
  12         core:"_jalview",
  13   readyFunction: null,
  14         serverURL: 'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
  15         j2sPath: 'swingjs/j2s',
  16         console:'none',
  17         allowjavascript: true,
  18
  19         //Jalview-specific:
  20         // note that desktop-frame-div has been set to display:none
  21         jalview_SCREEN_WIDTH: 0, // desktop width -- 0 to hide
  22         jalview_SCREEN_HEIGHT: 0,  // desktop height -- 0 to hide
  23         jalview_SCREEN_X: 10,
  24         jalview_SCREEN_Y: 10,
  25         jalview_EMBEDDED: true
  26
  27 }
  28
  29 jvGet = function(what) {
  30         switch(what) {
  31         case "tree":
  32         break;
  33         case "pca":
  34         break;
  35         }
  36
  37 }
  38 </script>
  39 </head>
  40 <body style="background-image: url(images/coolVeryLightBG.png);">
  41 <table style="width:1400px;border:2px solid lightblue;border-spacing:0;font-size:16pt;" padding="10" valign="top">
  42 <tr><td style="font-size:24;font-weight:bold;background-color:lightblue" colspan=2><center>Demonstration of embedded JalviewJS components</center>
  43 </td></tr>
  44 <tr><td valign=top style="padding:20px" rowspan=2>
  45 This simple page illustrates how one can embed the JalviewJS desktop into a web page.
  46 The basic idea is that we have something interesting to say &mdash; some sort of scientific context &mdash; something we want to get
  47 across to our visitors with more than just text and images. The idea is to have a <b>dynamic</b> page that will involve <b>user interaction</b>.
  48 <br><br>
  49 We start with a Jalview desktop. You can't see it, because I have placed it in a <code>div</code> tag with style <i>width:0px;height:0px</i> just after the period that ends this sentence.
  50 <div id="jalview-desktop-div" style="width:0px;height:0px;"></div>
  51 <br>
  52 The idea is NOT to teach visitors how to use Jalview. The idea is to seamlessly integrate components of Jalview that can be used to enrich a discussion.
  53 Like JSmol in <a target="_blank" href="http://proteopedia.org/wiki/index.php/Main_Page"><img src=https://pbs.twimg.com/profile_images/818051034/proteopedia_135x200_small_logo_for_Twitter_400x400.png width=16 height=16/>Proteopedia</a>.
  54 For example, in the space to the right, after a few seconds, you will see an alignment frame. This alignment is for 15 genes that code for one of the domains in the ferredoxin family (<a href=https://pfam.xfam.org/family/NIR_SIR_ferr target=_blank>NIR_SIR_ferr (PF03460)</a>).
  55 <br><br>
  56 What you first see is just the first few bases. Doesn't look like much of an alignment, does it? But <b>scroll to the right</b>.
  57 See the big block of red color? That's the <i>Ferredoxin fold</i>domain.
  58 <br><br>
  59 <b>Select a few alignments</b> by left-dragging across a few rows of the alignment to make a selection box.
  60 Then click one of the buttons below to see more information about your selected subset of the alignment.
  61 <ul>
  62 <li><button onclick='jvGet("tree")'>similarity tree</button></li>
  63 <li><button onclick='jvGet("pca")'>principal component analysis</button></li>
  64 </ul>
  65
  66 </td><td style="background-color:lightgray;padding:20px">
  67
  68 <div id="jalview-alignment-div" style="position:relative;top:0px;left:0px;width:600px;height:400px">
  69 <br><br>
  70 The alignment frame will appear here momentarily. When it does, you can go ahead and manipulate the alignment with your mouse.
  71 </div>
  72 </td></tr>
  73 <tr>
  74 <!-- first column continued from above -->
  75 <td><table style="border-spacing:0"><tr><td style="background-color:lightgray;padding:10px 0px 10px 20px">
  76 <div id="jalview-tree-div" style="position:relative;top:0px;left:0px;width:300px;height:300px">
  77 <br><br><br><br>
  78 jalview-tree-div
  79 </div>
  80 </td><td style="background-color:lightgray;padding:10px 20px 10px 0px">
  81 <div id="jalview-pca-div" style="position:relative;top:0px;left:0px;width:300px;height:300px">
  82 <br><br><br><br>
  83 jalview-pca-div
  84 </div>
  85 </td></tr></table></td></tr>
  86
  87
  88 </table>
  89
  90 <table>
  91 <tr><td>
  92 </td></tr><tr><td>
  93 </td></tr><tr>
  94 <td>
  95 <div id="jalview-structureviewer-div" style="position:relative;top:0px;left:0px;width:400px;height:400px">
  96 jalview-structureviewer-div
  97 </div>
  98 </td>
  99 <td>
 100 </td>
 101 <td>
 102 </td></tr></table>
 103
 104
 105 </tr></table>
 106
 107 <script>
 108 SwingJS.getApplet('testApplet', Info)
 109 getClassList = function(){J2S._saveFile('_j2sclasslist.txt', Clazz.ClassFilesLoaded.sort().join('\n'))}
 110 </script>
 111
 112
 113 <div style="display:none;position:absolute;left:900px;top:30px;width:600px;height:300px;">
 114 <div id="sysoutdiv" style="border:1px solid green;width:100%;height:95%;overflow:auto"></div>
 115 This is System.out. <a href="javascript:testApplet._clearConsole()">clear it</a> <br>Add ?j2snocore to URL to see full class list; ?j2sdebug to use uncompressed j2s/core files <br><a href="javascript:getClassList()">get _j2sClassList.txt</a>
 116 </div>
 117 </body>
 118 </html>