ketcher.setMolecule() - Import Molecule into Ketcher
How to import a molecule structure into the Ketcher with the ketcher.setMolecule() method?
✍: FYIcenter.com
To import a molecule structure into the Ketcher,
you can use the setMolecule(structure) method provided by the Ketcher API
as shown in below:
1. Load the Ketcher editor in an "iframe" HTML element:
<iframe id=frmKetcher src="/ketcher/index.html" style="width: 680px; height: 400px;"></iframe>
2. Create "button" HTML elements with "click" event handlers.
<p><button onclick="importSMILES();">Import Molecule in SMILES</button></p> <p><button onclick="importMolfile();">Import Molecule in Molfile</button></p>
3. Access the "ketcher" object from the "iframe" element in "click" event handlers directly, since the "iframe" element is already loaded:
frm = document.getElementById("frmKetcher");
ketcher = frm.contentWindow.ketcher;
4. Call the ketcher.setMolecule(structure) method to import molecule structures into the Ketcher editor. Note that the input structure can be specified multiple formats: SMILES, SMARTS, Molfile, RXN, CDX, Ketcher, etc..
The following HTML document gives you an example of how to import a molecule structure into the Ketcher:
<html>
<!-- import-molecule-to-ketcher.html Copyright (c) FYIcenter.com. -->
<head>
<title>Import Molecule Structure to Ketcher</title>
</head>
<body>
<p>Load the Ketcher editor, then click import buttons below the editor:</p>
<iframe id=frmKetcher src="/ketcher/index.html"
style="width: 680px; height: 400px;"></iframe>
<p><button onclick="importSMILES();">Import Molecule in SMILES</button></p>
<script>
function importSMILES() {
frm = document.getElementById("frmKetcher");
ketcher = frm.contentWindow.ketcher;
ketcher.setMolecule("c1ccccc1");
}
</script>
<p><button onclick="importMolfile();">Import Molecule in Molfile</button></p>
<script>
function importMolfile() {
frm = document.getElementById("frmKetcher");
ketcher = frm.contentWindow.ketcher;
ketcher.setMolecule(`FYI-1002017
FYIcenter.com
6 6 0 0 0 0 0 0 0 0999 V2000
-0.8660 -0.5000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
-1.7321 -0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
-1.7321 1.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.8660 1.5000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.0000 1.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
0.0000 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
1 6 1 0 0 0 0
1 2 2 0 0 0 0
2 3 1 0 0 0 0
3 4 2 0 0 0 0
4 5 1 0 0 0 0
5 6 2 0 0 0 0
M END`);
}
</script>
</body>
</html>
5. Put the above HTML document on your local Web server and open it in your browser, you will see the Ketcher editor loaded and ready to use.
6. Click "Import Molecule in SMILES" button, you will see a benzene molecule structure imported to the editor:
⇒ ketcher.getMolfile() - Export Molecule in Molfile Format
2024-03-17, 411🔥, 0💬
Related Topics:
