Example - Import / Export SMILES

You can import and export SMILES into / from the sketcher. If the MolConvert web service is not available, error message appears on the page when you attempt to get/set SMILES.

The following JavaScript packages are imported in this example. Since the example uses JQuery, a minimal JQuery package is imported. The webservices.js is required to be able to retrieve the location of MolConvert webservice that is used for SMILES conversion. The util.js JavaScript libary contains the getMarvinPromise helper function to retrieve the sketcher instance from the embedded IFRAME.

		
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../js/webservices.js"></script>
	<script src="../js/util.js"></script>
		
	

When the document is loaded, we get the reference of the sketcher from the iframe. It is a deferred call. If it is successful, the sketch reference is stored and click handlers are assigned to the buttons that control SMILES import/export.

		<iframe src="../editor.html" id="sketch" class="sketcher-frame"></iframe>
	
		
		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			getMarvinPromise("#sketch").done(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;

				$("#getSmilesButton").on("click", function handleGetSmilesButton () {
					smilesControl.getSmiles();
				});

				$("#setSmilesButton").on("click", function handleGetSmilesButton () {
					smilesControl.setSmiles();
				});

				$("#resetButton").on("click", function handleGetSmilesButton () {
					smilesControl.reset();
				});

			}).fail(function () {
				alert("Cannot retrieve sketcher instance from iframe");
			});
		});
		
	
The errorConsole object is responsible for displaying error messages (in a div tag below the IFRAME of the sketcher).
		
		var errorConsole = (function () {
			var controlObject = {
				"reset" : function() {
					$("#error").children("p").html("");
				}
				,"print" : function(txt) {
					$("#error").children("p").html(txt);
				}
				,"isEmpty" : function() {
					return ($("#error").children("p").html() === "");
				}
			};

			return controlObject;

		}());
		
	
The smilesControl object communicates with the MolConvert webservice and get/set the structure to the editor.
		
		var smilesControl = (function () {

			function getMolConvertURL() {
				var ws = getDefaultServices();
				return ws['molconvertws'];
			};
			
			function handleRequestError (qXHR, textStatus, errorThrown) {
				if (qXHR.status == 0) { // UNSENT request
					var errMsg = "ERROR: MolConvert failed.\nThe request has not been sent.\nThe request may violate the cross domain policy.";
					errorConsole.print(errMsg);
				} else {
					errorConsole.print("ERROR: MolConvert failed (status code "+ qXHR.status + ")\n" + qXHR.responseText);
				}
			};

			var controlObject = {

				"getSmiles": function getSmiles () {
					errorConsole.reset();
					var s = marvinSketcherInstance.exportAsMrv();
					var	data = JSON.stringify({
						"structure" : s,
						"inputFormat" : "mrv",
						"parameters" : "smiles"
					});

					$.ajax({
						"url": getMolConvertURL()
						,"type": "POST"
						,"dataType": "json"
						,"contentType": "application/json"
						,"data": data
					}).done(function (data, textStatus, jqXHR) {
						$("#smiles").val(data['structure']);
					}).fail(handleRequestError);
				}

				,"setSmiles": function setSmiles() {
					errorConsole.reset();
					var s = $("#smiles").val();
					if (s == null || s == "") {
						marvinSketcherInstance.importAsMrv(null);
					} else {
						var data = JSON.stringify({
							"structure" : s,
							"inputFormat" : "smiles",
							"parameters" : "mrv"
						});

						$.ajax({
							"url": getMolConvertURL()
							,"type": "POST"
							,"dataType": "json"
							,"contentType": "application/json"
							,"data": data
						}).done(function (data, textStatus, jqXHR) {
							marvinSketcherInstance.importAsMrv(data['structure']);
						}).fail(handleRequestError);
					}
				}

				,"reset": function reset () {
					$("#smiles").val("");
					errorConsole.reset();
				}
			}

			return controlObject;

		}());