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
203 lines (135 loc) • 5.78 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<script>
jQuery.support.cors = true;
//this function will be started after the JavaScriptApplet code has been loaded
function jsmeOnLoad() {
//Instantiate a new JSME:
//arguments: HTML id, width, height (must be string not number!)
jsmeApplet = new JSApplet.JSME("appletContainer", "640px", "480px", {
//optional parameters
"options" : "query,hydrogens,removehs"
//removehs : remove explicit hydrogens when importing a structure - useful when importing from the NCI service
});
//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;
jsmeApplet.setNotifyStructuralChangeJSfunction("showMoleculeName"); //set to null to reset
//jsmeApplet.setPrePasteJSfunction("convertToMolfile");//set to null to reset
//customize the paste label in the popup menu
jsmeApplet.setPasteLabel("Paste any chemical text repr.");//set to null to reset
function convertToMolfile2(jsmeEvent) {
var molecularRepresentation = jsmeEvent.argument;
var jsmeInstance = jsmeEvent.src;
if(molecularRepresentation && molecularRepresentation.indexOf("M END") == -1 && molecularRepresentation.slice(0, 4) !="$RXN") {
$.ajax({
url: "https://cactus.nci.nih.gov/chemical/structure",
crossDomain: true,
data: {
"string" : molecularRepresentation,
"representation" : "sdf"
},
success: function( data ) {
jsmeInstance.readMolFile(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Ajax error: " + textStatus);
}
});
} else {
jsmeInstance.readMolFile(molecularRepresentation);
}
}
jsmeApplet.setCallBack("BeforePaste", convertToMolfile2);
}
function fixedEncodeURIComponent (str) {
return encodeURIComponent(str).replace(/[!'()*]/g, escape);
}
function showMoleculeName() {
var smiles = document.JME.smiles();
if(smiles) {
$.ajax({
url: "https://cactus.nci.nih.gov/chemical/structure",
crossDomain: true,
data: {
"string" : smiles,
"representation" : "iupac_name"
},
success: function( data ) {
document.JME.showInfo(data);
},
error: function(jqXHR, textStatus, errorThrown) {
if(errorThrown.toUpperCase() != "NOT FOUND") {
alert("Ajax error: " + errorThrown);
} else {
document.JME.showInfo("Name not found");
}
}
});
}
}
function convertToMolfile(molecularRepresentation) {
if(molecularRepresentation && molecularRepresentation.indexOf("M END") == -1 && molecularRepresentation.slice(0, 4) !="$RXN") {
$.ajax({
url: "https://cactus.nci.nih.gov/chemical/structure",
crossDomain: true,
data: {
"string" : molecularRepresentation,
"representation" : "sdf"
},
success: function( data ) {
document.JME.readMolFile(data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Ajax error: " + errorThrown);
}
});
} else {
document.JME.readMolFile(molecularRepresentation);
}
}
</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>
<h1>JSME + Chemical Identifier Resolver demo</h1>
<h3>Compound to name</h3>
The name of the molecule in the editor is fetched from the NCI web service (https://cactus.nci.nih.gov/chemical/structure) after the structure in the editor has changed.<br>
<h3>Pasting any chemical structure representation</h3>
Paste operation accepts molecule name, Inchi, smiles ... and is using the same service.
<br>Note: <b>the JQuery Ajax calls are not working on IE.</b>
<br>
<br>Examples:
<br>
<br>benazepril
<br>c1ccccc1O
<br>4-[(4-methylpiperazin-1-yl)methyl]-N-(4-methyl-3-{[4-(pyridin-3-yl)pyrimidin-2-yl]amino}phenyl)benzamide
<br>50-78-2
<br>PCZOHLXUXFIOCF-BXMDZJJMSA-N
<br>
<table align="center">
<tr>
<td id="appletContainer"></td>
</tr>
</table>
</body>
</html>