Save Molecule from JSME to Server


How to save molecules created in JSME editor to the Web server?



If you want to save the molecule structure created in the JSME editor to the backend Web server, you need write JavaScript code to extract the molecule data and send it as HTML form parameters.

1. Create a new HTML document, save-molecule.html, to present the JSME editor and the form:

<!-- save-molecule.html Copyright (c) All rights reserved. -->
<title>Create and Save Molecule</title>
<script type="text/javascript" src="/jsme/jsme.nocache.js"></script>
  function jsmeOnLoad() {
    jsmeObj = new JSApplet.JSME("jsme_container", "380px", "340px");
  function convert() {
    var smiles = jsmeObj.smiles(); 
    var sdf = jsmeObj.molFile(); 
    var svg = jsmeObj.getMolecularAreaGraphicsString(); 
    document.getElementsByName("smiles")[0].value = smiles;
    document.getElementsByName("sdf")[0].value = sdf;
    document.getElementsByName("svg")[0].value = svg;
  var JSApplet = {};
  JSApplet.Inchi = {};
<script type="text/javascript" src="/jsme/96E40B969193BD74B8A621486920E79C.cache.js"></script>
function updateInChI(sdf) {
  var result;
  JSApplet.Inchi.__resultHandler = function (inchi_result) {
    result = inchi_result

  JSApplet.Inchi.computeInchi(sdf, "JSApplet.Inchi.__resultHandler");
  delete JSApplet.Inchi.__resultHandler;

  var text = "";
  Object.keys(result).forEach(function (k) {
    text += k + ": " + result[k] + "\n"
  document.getElementsByName("inchi")[0].value = text;

<p>Create a molecule in the editor:</p>
<div id="jsme_container"></div>

<p><button type="button" onclick="convert()">
  Convert the molecule to text formats:</button>

<form action="save-molecule.php" method="post">
  <input type="text" name="smiles" value="" size="62"/><br/>
  <textarea name="sdf" rows="10" cols="60"></textarea><br/>
  <textarea name="svg" rows="10" cols="60"></textarea><br/>
  InChI and InChIKey:<br/>
  <textarea name="inchi" rows="10" cols="60"></textarea><br/>
  <input type="submit" value="Save"/>


2. Create PHP script, save-molecule.php, to process data submitted from the form.

<!-- save-molecule.php Copyright (c) All rights reserved. -->
<title>Molecule Data Received</title>
<p>Here is the molecule data received on the server: 
  $smiles = $_REQUEST["smiles"]; 
  $sdf = $_REQUEST["sdf"];
  $svg = $_REQUEST["svg"];
  $inchi = $_REQUEST["inchi"];

  echo("\nInChI and InChIKey:\n$inchi\n");

3. Copy both save-molecule.html and save-molecule.php to the Web server:

fyicenter$ sudo cp save-molecule.* /var/www/html/jsme

4. Test JSME editor page on the Apache Web server by opening "http://localhost/jsme/save-molecule.html" URL in a Web browser.

5. Select the "benzene ring" icon from the JSME editor menu and click a location inside the editor. You see a benzene ring molecule created.

6. Click "Convert" button below the editor. You see molecule's SMILES string, Mol/SDF and SVG representations populated in the form.

7. Click "Save" button below the form. You see molecule's SMILES string, Mol/SDF and SVG representations received on the server and echoed back to the browser.

Save Molecule from JSME to Server
Save Molecule from JSME to Server


Refresh Molecule in JSME Editor

JSApplet.Inchi.computeInchi() - Generate InChI

JSME JavaScript API

⇑⇑ JSME Tutorials

2020-05-18, 1738🔥, 0💬