formula, weight, elemental analysis solution

User 870ab5b546

03-01-2017 18:01:00

MarvinSketch has a convenient menu option that one can use to get the formula, weight, and elemental analysis of a drawn structure. MarvinJS lacks this button. I have created a solution to this deficiency. You need to have installed JChem on your server and set up your web app to access it. It's probably also possible to remediate this deficiency with Web services, but I haven't investigated it.

When you set up the MarvinJS editor, include this code inside the getEditor().then(function (sketcher) { }) block:

elemAnalButtonAttrs = {

        'name' : 'elemental analysis',

        'image-url' : '/webAppHome/images/elemAnal.png', // button icon

        'toolbar' : 'S'

};

marvinSketcherInstance.addButton(elemAnalButtonAttrs, function() {

    marvinSketcherInstance.exportStructure('mrv').then(function(mol) {

        url = new String.builder().

                append('/webAppHome/includes/showElemAnal.jsp?mrv=').

                append(encodeURIComponent(mol)).toString();

        openAnalysisWindow(url);

    }, function(error) {

        alert('Molecule export to MRV failed: ' + error);

    });

});

I've posted the PNG file that we use for the button icon, which this code places in the south toolbar.

Make the following method available to the previous method:

function openAnalysisWindow(url) {

    "use strict";

    var w = window.open(url, 'Elemental Analysis',

        'width=400,height=200,left=200,top=70,resizable=yes,scrollbars=yes,status=yes');

    w.focus();

}

Finally, the contents of includes/showElemAnal.jsp:

<%@ page language="java" %>

<%@ page import="

    chemaxon.formats.MolImporter,

    chemaxon.calculations.ElementalAnalyser,

    java.text.NumberFormat"

%>

<%

    final String mrv = request.getParameter("mrv");

    final ElementalAnalyser elemanal = new ElementalAnalyser();

    elemanal.setMolecule(MolImporter.importMol(mrv));

    final NumberFormat numberFormat = NumberFormat.getInstance();

    numberFormat.setMaximumFractionDigits(5);

    numberFormat.setMinimumFractionDigits(5);



%>

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>MarvinJS elemental analysis window</title>

<link rel="stylesheet" href="marvinJS/css/doc.css" type="text/css"/>

</head>



<body style="overflow:auto;">

Formula: <%= elemanal.isotopeFormula() %>

<br/>

Molecular weight: <%= elemanal.mass() %> g / mol

<br/>

Exact mass: <%= numberFormat.format(elemanal.exactMass()) %> amu

<br/>

Elemental composition: <%= elemanal.composition(2) %>

</body>

</html>

When you press the elemental analysis button in MarvinJS, a new window will open that shows the formula, average molecular weight, exact weight, and elemental analysis of the contents of the MarvinJS window. See the screen shot below.

User 870ab5b546

11-01-2017 18:11:22

I discovered a limitation of this method: If the MRV is very long, the URI fails to pass to the new file. So here's a more general solution.

When you set up the MarvinJS editor, include this code inside the getEditor().then(function (sketcher) { }) block; it creates a form containing the MRV of the user's drawing and submits it, opening a new window to display the results:

var buttonAttrs = {

        'name' : 'elemental analysis',

        'image-url' : '/webAppHome/images/elemAnal.png', // button icon

        'toolbar' : 'S'

};

marvinSketcherInstance.addButton(buttonAttrs, function() {

    marvinSketcherInstance.exportStructure('mrv').then(function(mol) {

        var targetPage = '/webAppHome/includes/showElemAnal.jsp';

        // target page name must be exactly the same as in openAnalysisWindow()

        var newForm = prepareForm(targetPage, 'Elemental Analysis');

        newForm.appendChild(prepareField('mrvStr', mol));

        document.body.appendChild(newForm);

        openAnalysisWindow(targetPage);

        newForm.submit();

    }, function(error) {

        alert('Molecule export to MRV failed: ' + error);

    });

});

Make the following methods available to the method that invokes MarvinJS:

function prepareForm(targetPage, targetPageName) {

    var newForm = document.createElement('form');

    newForm.setAttribute('method', 'post');

    newForm.setAttribute('action', targetPage);

    // target name must be exactly the same as in openwindows.js

    newForm.setAttribute('target', targetPageName);

    return newForm;

} // prepareForm()



function prepareField(name, value) {

    var newField = document.createElement('input');

    newField.setAttribute('name', name);

    newField.setAttribute('type', 'hidden');

    newField.setAttribute('value', value);

    return newField;

} // prepareField()



function openAnalysisWindow(url) {

    "use strict";

    var w = window.open(url, 'Elemental Analysis',

        'width=400,height=200,left=200,top=70,resizable=yes,scrollbars=yes,status=yes');

    w.focus();

} // openAnalysisWindow()

The contents of /webAppHome/includes/showElemAnal.jsp:

<%@ page language="java" %>

<%@ page import="

    chemaxon.formats.MolImporter,

    chemaxon.calculations.ElementalAnalyser,

    java.text.NumberFormat"

%>

<%  

    final String mrvStr = request.getParameter("mrvStr");

    final ElementalAnalyser elemanal = new ElementalAnalyser();

    elemanal.setMolecule(MolImporter.importMol(mrvStr));

    final NumberFormat numberFormat = NumberFormat.getInstance();

    numberFormat.setMaximumFractionDigits(5);

    numberFormat.setMinimumFractionDigits(5);

%>  

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>MarvinJS elemental analysis window</title>

<link rel="stylesheet" href="/webAppHome/doc.css" type="text/css"/>

</head>

<body style="overflow:auto;">

Formula: <%= elemanal.isotopeFormula() %>

<br/>

Molecular weight: <%= elemanal.mass() %> g / mol

<br/>   

Exact mass: <%= numberFormat.format(elemanal.exactMass()) %> amu

<br/>

Elemental composition: <%= elemanal.composition(2) %>

</body> 

</html>