jsme
Version:
JSME is a free molecule editor written in JavaScript. JSME is a direct successor of the JME Molecule Editor applet. JSME supports drawing and editing of molecules and reactions on desktop computer, as well as on handheld devices including iPhone, iPad and
97 lines (73 loc) • 5.39 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">
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
jsme_parent = new JSApplet.JSME("JME_parent", "100%", "600px", {
"options": "hydrogens,removehs,nocanonize,oldlook,atommovebutton,polarnitro"
});
jsme_metabolite = new JSApplet.JSME("JME_metabolite", "100%", "600px", {
"options": "hydrogens,removehs,nocanonize,oldlook,atommovebutton,polarnitro"
});
}
</script>
<style>
em {background-color:rgb(102,255,255);}
</style>
<script>
</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>
<!-- 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>
<h3>Metabolism Database - Structure Input using JSME</h3>
<h3>This is an example showing how to use JSME templates</h3>
<table align="center" border="0" width="100%">
<tr>
<td><b>Structure of Parent</b></td>
<td><b>Structure of Metabolite</b></td>
</tr>
<tr>
<td width="40%">
<div id="JME_parent"></div>
</td>
<td width="60%">
<div id="JME_metabolite"></div>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">Add group (required anchor atom):
<button type="button" onclick="jsme_metabolite.setTemplate('12 12 C 32.29 -7.92 C 32.29 -6.52 C:1 31.08 -5.82 O 29.87 -6.52 C 29.87 -7.92 C 31.08 -8.62 C 28.66 -8.62 O 31.08 -10.02 O 33.50 -8.62 O 33.50 -5.82 O 27.44 -7.92 O 28.66 -10.02 1 2 1 2 3 1 3 4 1 4 5 1 5 6 1 6 1 1 5 7 -1 6 8 -2 1 9 -1 2 10 -2 7 11 2 7 12 1','D-Glucuronic acid');">D-Glucuronic acid (O)</button>
<button type="button" onclick="jsme_metabolite.setTemplate('4 3 S:1 24.54 -7.63 O 24.57 -9.03 O 23.14 -7.65 O 25.94 -7.60 1 2 1 1 3 2 1 4 2','Sulfate');">Sulfate (O)</button>
<button type="button" onclick="jsme_metabolite.setTemplate('4 3 O 10.11 -6.80 O 8.71 -5.40 P+:1 8.71 -6.80 O 8.71 -8.20 2 3 2 3 1 1 3 4 1','Phosphate');">Phosphate (O)</button>
<button type="button" onclick="jsme_metabolite.setTemplate('21 20 C 5.77 -6.97 C 6.98 -7.67 C 8.20 -6.97 N 9.41 -7.67 C 10.62 -6.97 C 11.83 -7.67 N 13.05 -6.97 C 14.26 -7.67 C 15.47 -6.97 O 16.68 -7.67 O 15.47 -5.57 O 11.83 -9.07 O 8.20 -5.57 C 4.56 -7.67 C 3.35 -6.97 O 3.35 -5.57 O 2.13 -7.67 H 5.26 -8.88 N 3.86 -8.88 C:1 9.92 -5.75 H 11.32 -5.75 1 2 1 2 3 1 3 4 1 4 5 1 5 6 1 6 7 1 7 8 1 8 9 1 9 10 1 9 11 2 6 12 2 3 13 2 1 14 1 14 15 1 15 16 2 15 17 1 14 18 -1 14 19 -2 5 20 -1 5 21 -2','Glutathione');">Glutathione (S)</button>
<button type="button" onclick="jsme_metabolite.setTemplate('52 54 C:1 1.20 -1.95 C 2.44 -2.66 N 3.67 -1.95 C 4.91 -2.66 O 4.91 -4.09 C 6.15 -1.95 C 7.38 -2.66 N 8.62 -1.95 C 9.85 -2.66 O 9.85 -4.09 C 11.09 -1.95 H 11.87 -1.50 O 11.09 -0.52 C 12.32 -2.66 C 13.04 -1.42 C 12.32 -4.09 O 11.09 -4.80 P 11.09 -6.23 O 12.52 -6.23 O 9.66 -6.23 O 11.09 -7.65 P 11.09 -9.08 O 12.52 -9.08 O 9.66 -9.08 O 11.10 -10.47 C 12.30 -11.19 C 12.32 -12.57 H 12.84 -11.84 O 14.54 -11.83 C 16.47 -12.56 H 17.30 -12.90 C 15.42 -13.59 H 16.25 -13.94 O 15.43 -14.76 C 13.52 -13.59 H 12.70 -13.97 O 13.52 -14.76 P 13.51 -16.23 O 13.51 -17.68 O 14.96 -16.23 O 12.06 -16.23 N 16.46 -11.20 C 15.66 -10.10 N 16.48 -8.98 C 17.79 -9.41 C 17.79 -10.79 N 18.99 -11.48 C 20.19 -10.79 N 20.19 -9.41 C 18.99 -8.71 N 18.99 -7.33 C 13.75 -2.66 1 2 1 2 3 1 3 4 1 4 5 2 4 6 1 6 7 1 7 8 1 8 9 1 9 10 2 9 11 1 11 12 1 11 13 -2 11 14 1 14 15 1 14 16 1 16 17 1 17 18 1 18 19 1 18 20 2 18 21 1 21 22 1 22 23 1 22 24 2 22 25 1 25 26 1 27 26 -1 27 28 1 27 29 1 29 30 1 30 31 1 30 32 1 32 33 1 32 34 -2 32 35 1 35 36 1 27 35 1 35 37 -2 37 38 1 38 39 1 38 40 1 38 41 2 30 42 -1 42 43 1 43 44 2 44 45 1 45 46 2 42 46 1 46 47 1 47 48 2 48 49 1 49 50 2 45 50 1 50 51 1 14 52 1','CoA');">CoA (S)</button>
</td>
</tr>
</table>
<p>
<b>How to add your own template</b><p>
Templates may be easily added using the JavaScript call <code>jsme.setTemplate('jme string')</code> where the jme string is the JME string of your template. The JME string may be generated for example <a href="JSME_template.html">here</a>. The atom that should act as a connection point (root) of the template should by marked by :1 (for example the oxygen serving as root should have atomic symbol O:1).
<br>
For more information check also the HTML source of this page
</body>
</html>