<title>Embedded JalviewJS Example 1</title><meta charset="utf-8" />
<script src="swingjs/swingjs2.js"></script>
<script>
+
+// BH 2019.10.06 adds Tree and Pca functionality
+// BH see issue JAL-3451
+
if (!self.SwingJS)alert('swingjs2.js was not found. It needs to be in swingjs folder in the same directory as ' + document.location.href)
Info = {
code: null,
serverURL: 'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
j2sPath: 'swingjs/j2s',
console:'none',
- allowjavascript: true,
-
- //Jalview-specific:
- // note that desktop-frame-div has been set to display:none
- jalview_SCREEN_WIDTH: 0, // desktop width -- 0 to hide
- jalview_SCREEN_HEIGHT: 0, // desktop height -- 0 to hide
- jalview_SCREEN_X: 10,
- jalview_SCREEN_Y: 10,
- jalview_EMBEDDED: true
-
+ allowjavascript: true
}
jvGet = function(what) {
switch(what) {
case "tree":
- break;
+ testApplet.app.openTreePanel$jalview_gui_AlignFrame$S$S(null, "NJ","BLOSUM62")
+ break;
case "pca":
- break;
+ testApplet.app.openPcaPanel$jalview_gui_AlignFrame$S(null, "BLOSUM62")
+ break;
+ case "3D":
+ break;
}
}
+
+$(document).ready(function() {
+
+ SwingJS.getApplet('testApplet', Info);
+
+});
+
</script>
</head>
<body style="background-image: url(images/coolVeryLightBG.png);">
</tr><tr>
-<td valign=top style="padding:20px" >
+<td valign=top style="padding:20px;background-color:lightgray">
+<div style="padding:20px;width:600px;height:400px;overflow-y:auto;background-color:white">
This simple page illustrates how one can embed the JalviewJS desktop into a web page.
The basic idea is that we have something interesting to say — some sort of scientific context — something we want to get
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>.
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>.
See the big block of red color? That's the <i>Ferredoxin fold</i>domain.
-
+</div>
</td><td style="background-color:lightgray;padding:20px">
-<div id="jalview-alignment-div" style="position:relative;top:0px;left:0px;width:600px;height:400px">
+<div id="jalview-alignment-div" style="padding:20px;position:relative;top:0px;left:0px;width:680px;height:400px">
<br><br>
The alignment frame will appear here momentarily. When it does, you can go ahead and manipulate the alignment with your mouse.
</div>
<td valign=top style="padding:20px;background-color:white" >
One more thing. Let's take a look at the 3D structure of one these proteins. Ferredoxins are important, because they have
iron-sulfur clusters that can accept and deliver electrons in metabolic processes. Let's see if we can find it.
-<br><center><a href="">add the 3D structure</a></center>
+<br><center><button onclick='jvGet("3D")'>add the 3D structure</button>
</td></tr></table>
-<script>
-SwingJS.getApplet('testApplet', Info)
-getClassList = function(){J2S._saveFile('_j2sclasslist.txt', Clazz.ClassFilesLoaded.sort().join('\n'))}
-</script>
-
-
+<!-- debugging (hidden) -->
+<script>getClassList = function(){J2S._saveFile('_j2sclasslist.txt', Clazz.ClassFilesLoaded.sort().join('\n'))}</script>
<div style="display:none;position:absolute;left:900px;top:30px;width:600px;height:300px;">
<div id="sysoutdiv" style="border:1px solid green;width:100%;height:95%;overflow:auto"></div>
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>
</div>
+
</body>
</html>
git://source.jalview.org / jalview.git / blobdiff