Save Structure from Ketcher to Server
How to save structures created in Ketcher editor to the Web server?
✍: FYIcenter.com
If you want to save the chemical structure created in the Ketcher editor
to the backend Web server, you need write JavaScript code to extract the
molecule data and send it as an HTML form parameter to the server.
1. Create a new HTML document, save-molecule.html, to present the Ketcher editor and the form:
<html>
<!-- save-structure.html Copyright (c) FYIcenter.com. All rights reserved. -->
<head>
<title>Create and Save Structure</title>
<script>
var ketcher = null;
function convert() {
frm = document.getElementById("frmKetcher");
ketcher = frm.contentWindow.ketcher;
ketcher.getSmiles()
.then(consumeSmiles, consumeSmiles)
.then(consumeMolfile, consumeMolfile)
.then(consumeBlob, consumeBlob)
.then(consumeImage, consumeBlob);
}
function consumeSmiles(result) {
document.getElementsByName("smiles")[0].value = result;
return ketcher.getMolfile();
}
function consumeMolfile(result) {
document.getElementsByName("sdf")[0].value = result;
opts = {outputFormat: "svg", backgroundColor: "255, 255, 255"};
return ketcher.generateImage(result, opts);
}
function consumeBlob(result) {
return result.text();
}
function consumeImage(result) {
document.getElementsByName("svg")[0].value = result;
}
</script>
</head>
<body>
<p>Create a structure in the editor:</p>
<iframe id=frmKetcher src="/ketcher/index.html"
style="width: 680px; height: 400px;"></iframe>
<p><button type="button" onclick="convert()">
Convert the structure to text formats:</button>
</p>
<form action="save-structure.php" method="post">
SMILES:<br/> <input type="text" name="smiles" value="" size="62"/><br/>
Molfile/SDF:<br/> <textarea name="sdf" rows="6" cols="60"></textarea><br/>
SVG:<br/><textarea name="svg" rows="6" cols="60"></textarea><br/>
<input type="submit" value="Save"/>
</form>
</body>
</html>
2. Create PHP script, save-structure.php, to process data submitted from the form.
<html>
<!-- save-structure.php Copyright (c) FYIcenter.com. All rights reserved. -->
<head>
<title>Molecule Data Received</title>
</head>
<body>
<p>Here is the molecule data received on the server:
</p>
<pre>
<?php
$smiles = $_REQUEST["smiles"];
$sdf = $_REQUEST["sdf"];
$svg = $_REQUEST["svg"];
echo("\nSMILES:\n$smiles\n");
echo("\nSDF:\n$sdf\n");
echo("\nSVG:\n$svg\n");
?>
</pre>
</body>
</html>
3. Copy both save-structure.html and save-structure.php to the Web server.
4. Open the above HTML document on your local Web server.
5. Draw a simple molecule in the editor.
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.
⇒ Restore Structure from Server to Ketcher
2023-10-11, 515🔥, 0💬
Related Topics:
