first demo of embedding components as simple divs with known ids
authorhansonr <hansonr@STO24954W.ad.stolaf.edu>
Mon, 1 Apr 2019 02:41:49 +0000 (21:41 -0500)
committerhansonr <hansonr@STO24954W.ad.stolaf.edu>
Mon, 1 Apr 2019 02:41:49 +0000 (21:41 -0500)
site-resources/jalview_bin_JalviewJS_embedded.html

index 6650720..d3e0c81 100644 (file)
@@ -10,14 +10,15 @@ Info = {
   main: "jalview.bin.JalviewJS2",
   core: "NONE",
   readyFunction: null,
-       serverURL: 'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol2.php',
+       serverURL: 'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
        j2sPath: 'swingjs/j2s',
        console:'sysoutdiv',
        allowjavascript: true,
        
-       //JalviewJS-specific:
-       jalview_SCREEN_WIDTH: 300, // desktop width
-       jalview_SCREEN_HEIGHT: 1,  // desktop height -- 0 to hide
+       //Jalview-specific:
+       // note that desktop-frame-div has been set to display:none
+       jalview_SCREEN_WIDTH: 100, // desktop width -- 0 to hide
+       jalview_SCREEN_HEIGHT: 70,  // desktop height -- 0 to hide
        jalview_SCREEN_X: 10,
        jalview_SCREEN_Y: 10,
        jalview_EMBEDDED: true
@@ -26,9 +27,31 @@ Info = {
 </script>
 </head>
 <body>
-<div id="align-frame-div" style="position:absolute;left:100px;top:100px;width:600px;height:400px;">
+<table><tr><td>
+<!-- note that the desktop must have a z-index ge 1000 because it is the root of all popups -->
+<div id="jalview-desktop-div" style="z-index:1000;position:relative;top:0px;left:0px;width:300px;height:70px">desktop here</div>
+</td></tr><tr><td>
+<div id="jalview-alignment-div" style="position:relative;top:0px;left:0px;width:600px;height:400px">
 The alignment frame will appear here momentarily...
 </div>
+</td></tr><tr>
+<td>
+<div id="jalview-structureviewer-div" style="position:relative;top:0px;left:0px;width:400px;height:400px">
+jalview-structureviewer-div
+</div>
+</td>
+<td>
+<div id="jalview-tree-div" style="position:relative;top:0px;left:0px;width:400px;height:400px">
+jalview-tree-div
+</div>
+</td>
+<td>
+<div id="jalview-pca-div" style="position:relative;top:0px;left:0px;width:400px;height:400px">
+jalview-pca-div
+</div>
+</td>
+
+</tr></table>
 
 
 <script>