MarvinSketch Example - Calculating molecular properties on the fly

Modify the molecule (delete some atoms or bonds, draw new ones), and watch how the calculated fields change.

Molecular weight:
logP:
H bond donor count:
H bond acceptor count:
Lipinski rule of 5:
 
 
Atom count:
Ring count:
Polar surface area:
IUPAC name:
SMILES:

Molecular properties are calculated by evaluating Chemical Terms expressions. When the molecule is altered the Chemical Terms expressions are re-evaluated and the results are updated. The background colors of the first five property values indicate if the values fulfill the sub-rules of Lipinski rule of 5 (if the sub-rule is fulfilled the background color is green, otherwise it is red). 

<!--  Important!  -->
<body onUnLoad="document.MSketch=null">

<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function evaluateChemicalTerms(expression) {
    if(document.MSketch != null) {
        return document.MSketch.evaluateChemicalTerms(expression);
    } else {
        alert("Cannot evaluate expression on molecule:\n"+
              "no JavaScript to Java communication in your browser.\n");
    }
}

function setFields() {
    var mass = evaluateChemicalTerms("mass()");
    setElementValueAndBackgroundColor('mass', mass, mass <= 500, '#0f0', '#f00');
    var logp = evaluateChemicalTerms("logP()");
    setElementValueAndBackgroundColor('logp', logp, logp <= 5, '#0f0', '#f00');
    var donorcount = evaluateChemicalTerms("donorCount()");
    setElementValueAndBackgroundColor('donorcount', donorcount, donorcount <= 5, '#0f0', '#f00');
    var acceptorcount = evaluateChemicalTerms("acceptorCount()");
    setElementValueAndBackgroundColor('acceptorcount', acceptorcount, acceptorcount <= 10, '#0f0', '#f00');
    var lipinskiruleof5 = evaluateChemicalTerms("(mass() <= 500) && (logP() <= 5) && (donorCount() <= 5) && (acceptorCount() <= 10)");
    setElementValueAndBackgroundColor('lipinskiruleof5', lipinskiruleof5, lipinskiruleof5 == 1, '#0f0', '#f00');
    document.getElementById('atomcount').innerHTML = evaluateChemicalTerms("atomCount()");
    document.getElementById('ringcount').innerHTML = evaluateChemicalTerms("ringCount()");
    document.getElementById('logp').innerHTML = evaluateChemicalTerms("logP()");
    document.getElementById('psa').innerHTML = evaluateChemicalTerms("PSA()");
    document.CTForm.name.value = evaluateChemicalTerms("name()"); 
    document.CTForm.smiles.value = evaluateChemicalTerms("molString('smiles')");
}

function setElementValueAndBackgroundColor(elementID, value, booleanExpression, trueColor, falseColor) {
    document.getElementById(elementID).innerHTML = value;
    if (booleanExpression) {
    	document.getElementById(elementID).style.backgroundColor = trueColor;
    } else {
    	document.getElementById(elementID).style.backgroundColor = falseColor;
    }
}

function propertyChange(prop) {
    if (prop.indexOf('mol=') !=-1) {
        setFields();
    } 
}

msketch_name = "MSketch";
msketch_mayscript = true;
msketch_begin("../../..", 540, 480);
msketch_param("mol", "../../../mols-2d/caffeine.csmol");
msketch_param("listenpropertychange","true");
msketch_end();
//-->
</script>
<p>
<form NAME="CTForm">
<table border=0>
    <tr>
        <td>Molecular weight:</td>
        <td><div ID="mass" style="position:absolute"></div></td>
    </tr>
    <tr>
        <td>logP:</td>
        <td><div ID="logp" style="position:absolute"></div></td>
    </tr>
    <tr>
        <td>H bond donor count:</td>
        <td><div ID="donorcount" style="position:absolute"></div></td>
    </tr>
    <tr>
        <td>H bond acceptor count:</td>
        <td><div ID="acceptorcount" style="position:absolute"></div></td>
    </tr>
    <tr>
        <td>Lipinski rule of 5:</td>
        <td><div ID="lipinskiruleof5" style="position:absolute"></div></td>
    </tr>
    <tr>
        <td><center><div class="lenia">&nbsp;</div></center></td>
        <td><center><div class="lenia">&nbsp;</div></center></td>
    </tr>
    <tr>
        <td>Atom count:</td>
        <td><div ID="atomcount"></div></td>
    </tr>
    <tr>
        <td>Ring count:</td>
        <td><div ID="ringcount"></div></td>
    </tr>
    <tr>
        <td>Polar surface area:</td>
        <td><div ID="psa"></div></td>
    </tr>
    <tr>
        <td>IUPAC name:</td>
        <td><textarea NAME="name" ROWS=2 COLS=60 READONLY="readonly"></textarea></td>
    </tr>
    <tr>
        <td>SMILES:</td>
        <td><textarea NAME="smiles" ROWS=2 COLS=60 READONLY="readonly"></textarea></td>
    </tr>
</table>
</form>
</center>
<script language="javaScript1.1">
<!--
    setFields();
//-->
</script>

</body>