utils/jalviewjs/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
   8 // NOTE: The applet on this page is "Jalview".
   9
  10 // BH 2019.10.06 adds Tree and Pca functionality
  11 // BH see issue JAL-3451
  12
  13 if (!self.SwingJS)alert('swingjs2.js was not found. It needs to be in swingjs folder in the same directory as ' + document.location.href)
  14 Info = {
  15   code: null,
  16   main: "jalview.bin.JalviewJS2",
  17 //  core: "NONE",
  18         core:"_jalview",
  19   readyFunction: null,
  20         serverURL: 'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
  21         j2sPath: 'swingjs/j2s',
  22         console:'none',
  23         allowjavascript: true
  24 }
  25
  26 jvGet = function(what) {
  27         switch(what) {
  28         case "tree":
  29                 Jalview.app.openTreePanel("NJ","BLOSUM62")
  30                 break;
  31         case "pca":
  32                 Jalview.app.openPcaPanel("BLOSUM62")
  33                 break;
  34         case "3D":
  35                 Jalview.app.showStructure("1a70", "mmcif");
  36                 break;
  37         }
  38
  39 }
  40
  41 $(document).ready(function() {
  42
  43   SwingJS.getApplet('Jalview', Info);
  44
  45 });
  46
  47 </script>
  48 </head>
  49 <body style="background-image: url(images/coolVeryLightBG.png);">
  50 <table style="width:1400px;border:2px solid lightblue;border-spacing:0;font-size:16pt;" padding="10" valign="top">
  51 <tr>
  52 <td style="font-size:24;font-weight:bold;background-color:lightblue" colspan=2><center>Demonstration of embedded JalviewJS components</center>
  53 </td>
  54
  55
  56 </tr><tr>
  57
  58
  59 <td valign=top style="padding:20px;background-color:lightgray">
  60 <div style="padding:20px;width:600px;height:400px;overflow-y:auto;background-color:white">
  61 This simple page illustrates how one can embed the JalviewJS desktop into a web page.
  62 The basic idea is that we have something interesting to say &mdash; some sort of scientific context &mdash; something we want to get
  63 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>.
  64 <br><br>
  65 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.
  66 <div id="Jalview-desktop-div" style="width:0px;height:0px;"></div>
  67 <br>
  68 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.
  69 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>.
  70 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>).
  71 <br><br>
  72 What you see initially is just the first few residues. Doesn't look like much of an alignment, does it? But <b>scroll to the right</b>.
  73 See the big block of red color? That's the <i>Ferredoxin fold</i>domain.
  74
  75 </div>
  76 </td><td style="background-color:lightgray;padding:20px">
  77 <div id="Jalview-alignment-div" style="padding:20px;position:relative;top:0px;left:0px;width:680px;height:400px">
  78 <br><br>
  79 The alignment frame will appear here momentarily. When it does, you can go ahead and manipulate the alignment with your mouse.
  80 </div>
  81 </td>
  82
  83
  84 </tr><tr>
  85
  86
  87 <td colspan=2 valign=top style="padding:0px 0px 0px 0px">
  88 <table style="background-color:lightgray"><tr><td  style="padding:0px 0px 0px 20px">
  89 <b>Select a few alignments</b> by left-dragging across a few rows of the alignment to make a selection box.
  90 Then click one of the buttons below to see more information about your selected subset of the alignment.
  91 <br><br>
  92 <button onclick='jvGet("tree")'>similarity tree</button> <button onclick='jvGet("pca")'>principal component analysis</button>
  93 <br><br>
  94 One more thing. Let's take a <a href="javascript:jvGet('3D')" style="text-decoration:none;color:red">look at the 3D structure</a> of one these proteins. Ferredoxins are important, because they have
  95 iron-sulfur clusters that can accept and deliver electrons in metabolic processes. Let's see if we can find it.
  96 <br><br>
  97
  98
  99
 100 </td><td style="padding:0px 0px 0px 0px">
 101 <table style="border-spacing:0"><tr><td style="background-color:lightgray;padding:10px 0px 10px 20px">
 102 <div id="Jalview-tree-div" style="position:relative;top:0px;left:0px;width:500px;height:500px">
 103 <br><br><br><br>
 104 <a href="javascript:jvGet('tree')">Jalview-tree-div</a>
 105 </div>
 106 </td><td style="background-color:lightgray;padding:10px 20px 10px 0px">
 107 <div id="Jalview-pca-div" style="position:relative;top:0px;left:0px;width:500px;height:500px">
 108 <br><br><br><br>
 109 <a href="javascript:jvGet('pca')">Jalview-pca-div</a>
 110 <br><br>
 111
 112 </div>
 113 </td></tr></table>
 114
 115 </td></tr></table>
 116
 117
 118 </td></tr>
 119
 120 <!-- let it float
 121 <tr>
 122
 123 <td valign=top style="padding:20px;height:650px" >
 124
 125 <div id="Jalview-structureviewer-div" style="position:relative;top:0px;left:0px;width:600px;height:600px">
 126 <a href="javascript:jvGet('3D')">Jalview-structureviewer-div</a>
 127 </div>
 128 </td>
 129 <td valign=top style="padding:20px;background-color:white" >
 130 One more thing. Let's take a look at the 3D structure of one these proteins. Ferredoxins are important, because they have
 131 iron-sulfur clusters that can accept and deliver electrons in metabolic processes. Let's see if we can find it.
 132 <br><center><button onclick='jvGet("3D")'>add the 3D structure</button>
 133 </td></tr>
 134  -->
 135
 136 </table>
 137
 138
 139 <!-- debugging (hidden) -->
 140 <script>getClassList = function(){J2S._saveFile('_j2sclasslist.txt', Clazz.ClassFilesLoaded.sort().join('\n'))}</script>
 141 <div style="display:none;position:absolute;left:900px;top:30px;width:600px;height:300px;">
 142 <div id="sysoutdiv" style="border:1px solid green;width:100%;height:95%;overflow:auto"></div>
 143 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>
 144 </div>
 145
 146 </body>
 147 </html>