biojs-vis-pdbviewer
Version:
A BioJS 2.0 component to view protein structures
277 lines (203 loc) • 11 kB
HTML
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link type="text/css" rel="stylesheet" href="messup_table.css"> -->
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>JSME test page</title>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
//this function will be started after the JavaScriptApplet code has been loaded
function jsmeOnLoad() {
var startingStructure = "13 14 C 15.94 -11.45 C 15.94 -10.05 C 14.72 -9.35 C 13.51 -10.05 C 13.51 -11.45 C 14.72 -12.15 C 17.34 -11.45 C 17.34 -10.05 O 18.33 -9.06 C 18.33 -12.44 O 17.96 -13.79 C 19.68 -12.07 N 21.03 -11.71 1 2 1 2 3 -1 3 4 1 4 5 1 5 6 1 1 6 -1 7 8 1 2 8 1 1 7 1 8 9 2 7 10 -1 10 11 2 10 12 1 12 13 3";
//Instantiate a new JSME:
//arguments: HTML id, width, height (must be string not number!)
jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
//optional parameters
"options" : "query,hydrogens",
"jme" : startingStructure
});
//Alternative method: the size is not specified: the applet will use 100% of the space of its parent container "appletContainer".
//Be sure that the parent container size > 0, otherwise the applet will not be visible
/* jsmeApplet = new JavaScriptApplet.JSME("appletContainer", {
//optional parameters
"options" : "query,hydrogens",
"jme" : startingStructure,
});
*/
//Opera patch: if some applet elements are not displayed, force repaint
//jsmeApplet.deferredRepaint(); //the applet will be repainted after the browser event loop returns
//it is recommended to use it if the JSME is created outside this jsmeOnLoad() function
//jsmeApplet has the same API as the original Java applet
//One can mimic the JME Java applet access to simplify the adaptation of HTML and JavaScript code:
document.JME = jsmeApplet;
//suggestion
//all buttons that access the jsme variable were disabled in the html
//Now enable all buttons that can access the jsme variable since the applet is ready
//example:
//document.getElementById("button").disabled=false;
//set here your own help page URL if you wish so.
//jsmeApplet.setHelpURL("http://google.com");
}
function readMolecule() {
var jme = "16 17 C 7.37 -8.99 C 7.37 -7.59 C 6.16 -6.89 C 4.95 -7.59 C 4.95 -8.99 C 6.16 -9.69 N 8.58 -6.89 C 8.58 -5.49 C 7.37 -4.79 O 6.16 -5.49 C 9.80 -7.59 O 9.80 -8.99 C 11.01 -6.89 Cl 12.22 -7.59 Cl 11.01 -5.49 C 9.80 -4.79 1 2 1 2 3 2 3 4 1 4 5 2 5 6 1 6 1 2 7 8 1 8 9 1 9 10 1 3 10 1 2 7 1 7 11 1 11 12 2 11 13 1 13 14 1 13 15 1 8 16 1";
jsmeApplet.readMolecule(jme); // or document.JME.readMolecule(jme);
}
function readMultipart() {
var jme = "9 9 C 6.68 -7.15 C 5.47 -6.45 C 4.26 -7.15 C 4.26 -8.55 C 5.47 -9.25 C 6.68 -8.55 C 5.47 -5.05 O- 6.68 -4.35 O 4.26 -4.35 1 2 1 2 3 2 3 4 1 4 5 2 5 6 1 6 1 2 2 7 1 7 8 1 7 9 2|1 0 Na+ 12.21 -6.61";
jsmeApplet.readMolecule(jme) // or document.JME.readMolecule(jme
}
function readReaction() {
var jme = "3 2 C:1 1.41 -7.12 O:2 1.41 -5.72 Cl 2.63 -7.82 1 2 2 1 3 1|3 2 N:3 5.72 -6.78 C:4 7.12 -6.78 H:5 5.02 -7.99 1 2 1 1 3 1 >> 5 4 C:1 13.51 -6.40 O:2 13.51 -5.00 N:3 14.72 -7.10 C:4 15.94 -6.40 H:5 14.71 -8.50 1 2 2 1 3 1 3 4 1 3 5 1";
jsmeApplet.readMolecule(jme);
}
function getMolfile() {
var data = document.JME.molFile();
document.getElementById("jme_output").value = data;
}
function getSmiles() {
var data = document.JME.smiles();
document.getElementById("jme_output").value = data;
}
function getJMEstring() {
var data = document.JME.jmeFile();
document.getElementById("jme_output").value = data;
}
function substituent(r) {
document.JME.setSubstituent(r);
}
</script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<h1>JSME test page</h1>
<table align="center">
<tr>
<td><div id="appletContainer"></div></td>
</tr>
</table>
<table align="center">
<tr>
<td>
<button type="button" onclick="jsmeApplet.setAntialias(true);">Turn on antialias</button>
</td>
<td>
<button type="button" onclick="jsmeApplet.setAntialias(false);">Turn off antialias</button>
</td>
<td>
<button type="button" onclick="jsmeApplet.options('oldLook');">Old look</button>
</td>
<td>
<button type="button" onclick="jsmeApplet.options('newLook');">New look</button>
</td>
</tr>
</table>
<p></p>
<div align="center">
<INPUT TYPE="button" VALUE="Clear Editor" align="center" onClick="document.JME.reset()"></div>
<p></p>
<table align="center">
<tr><td>
Turning AA on and off does not work with IE. Try IE 9 or 10 to see the applet with AA on. Unfortunately, AA cannot be turned off in EI9 and IE10.
</td>
</tr>
<p></p>
<p></p>
</table>
<p><b>public void JME.options(String)</b></p><p>enables to change applet parameters dynamically from JavaScript. Recognized keywords are :<br><b>xbutton, noxbutton</b> - show / hide the X button (even when not visible the X button functionality is accessible through the X and H key shortcuts<br><b>rbutton, norbutton</b> - show / hide the R button (to mark connection of substituent with the main scaffold)<br><!--r1button, r2button, r3button - show buttons with R1, R2 and R3 (useful for creation of scaffolds for combinatorial chemistry)<br>--><b>hydrogens, nohydrogens</b> - display / hide hydrogens<br><b>query, noquery</b> - enable / disable query features<br><b>autoez, noautoez</b> - automatic generation of SMILES with E,Z stereochemistry<br><b>nocanonize</b> - SMILES canonicalization and detection of aromaticity supressed<br><b>nostereo</b> - stereochemistry not considered when creating SMILES<br><b>reaction, noreaction</b> - enable / disable reaction input<br><b>multipart</b> - possibility to enter multipart structures<br><b>polarnitro</b> - prevent automatic conversion of nitro (and similar) groups into nonpolar form<br><b> number / autonumber</b> - possibility to number (mark) atoms<br><b>depict</b> - the applet will appear without editing buttons, this is used for structure display only<br><b>border</b> (used together with the depict option) - displays a border around depicted molecule
<br><b>newlook, oldlook</b> - turn on/off the old Java based JME look (default is off)
<p><b>public String getHelpURL()</b> return the url used to display JSME help page.</p>
<p><b>public void alert(String message)</b> Display an alert box with the look and feel of JSME.
</p>
<br><br>See also <a href="http://www.molinspiration.com/jme/doc/jme_use.html">description</a> of the applet's param tag.</p>
<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Set options:</td>
</tr>
<tr>
<td>
<textarea id="optionsTextArea", rows="1" cols="50">reaction,noquery,oldlook</textarea>
</td>
<td >
<button type="button" id="optionsButton" onclick='var options = document.getElementById("optionsTextArea").value; jsmeApplet.options(options);'>Set options</button>
</td>
</tr>
<tr>
<td>
Customize the help URL: <textarea id="urlTextArea", rows="1" cols="50">http://peter-ertl.com/jsme/2013_03/help.html</textarea>
</td>
<td >
<button type="button" id="urlButton" onclick='var url = document.getElementById("urlTextArea").value; jsmeApplet.setHelpURL(url);'>Set help URL</button>
</td>
</tr>
</table>
<p></p>
<p></p>
<table align="center">
<tr>
<td colspan="3" style="font-weight:bold;">Import predefined chemical structure to applet:</td>
</tr>
<tr>
<td>
<button type="button" onclick='readMolecule();'>Read JME String</button>
</td>
<td id= "readMultipartButton">
<button type="button" onclick='readMultipart();'>Read Multipart Structure</button>
</td>
<td id= "readReactionButton">
<button type="button" onclick='readReaction();'>Read reaction</button>
</td>
</tr>
</table>
<p></p>
<p></p>
<table align="center">
<tr>
<td colspan="3" style="font-weight:bold;">Export chemical structure from applet:</td>
</tr>
<tr>
<td>
<button type="button" onclick='getMolfile();'>Get molfile</button>
</td>
<td>
<button type="button" onclick='getSmiles();'>Get smiles</button>
</td>
<td>
<button type="button" onclick='getJMEstring();'>Get JME string</button>
</td>
</tr>
<tr>
<td colspan="3">
<TEXTAREA id="jme_output" ROWS=20 COLS=80></TEXTAREA>
</td>
</tr>
</table>
<p></p>
<H2>Known issues</H2>
IE9 64 bits in IE8 compatibility mode cannot display lines correctly
</body>
</html>