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
53 lines (42 loc) • 1.48 kB
HTML
<html>
<head>
<title>SMILES Hilight demo</title>
<script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>
<style>
em {background-color:rgb(102,255,255);}
</style>
<script>
//this function will be called after the JavaScriptApplet code has been loaded.
function jsmeOnLoad() {
jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px", {
"options" : "oldlook,star,nocanonize"
});
jsmeApplet.setNotifyStructuralChangeJSfunction("show_smiles");
}
var patt=/\[([A-Za-z][a-z]?)H?\d*:\d+\]/g; //regexp pattern for numbered atom
function show_smiles() {
checkbox = document.getElementById("canonic_check");
if(checkbox.checked) {
jsmeApplet.options("canonize");
} else {
jsmeApplet.options("nocanonize");
}
smiles = jsmeApplet.smiles(); //atom that are colored are numbered
new_smiles = smiles.replace(patt, '<em>$1</em>');
document.getElementById("smiles_container").innerHTML = new_smiles
}
</script>
</head>
<body>
<H1>SMILES Highlight demo</H1>
<p>
Draw a structure, click on the star icon of the editor and click on one or more atoms
</p>
<div id="jsme_container"></div>
<form>
<input type="checkbox" id="canonic_check" onclick='show_smiles();'" >Canonical SMILES
</form>
<BR>
SMILES: <b><span id="smiles_container" ></span></b>
</body>
</html>