Marvin JS Example - Create QR Code

You can create QR Code from the drawn structure. If the MolConvert web service is not available, error message appears on the page when you attempt to convert the structure.

In the text field above the sketcher, you can specify the target URL encoded into the QR Code.

Please, press the button on the left toolbar to generate QR Code image from the current structure. The generated code can be scanned by your mobile phone (eg. with these apps: iOS , Android).

When the page is loaded, setup a molecule for the sketcher, define a custom button to submit QR Code generation process and provide an option to change the URL prefix of the generated code by the creating a textbox.

var marvinSketcherInstance;

$(document).ready(function handleDocumentReady (e) {
	MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
		marvinSketcherInstance = sketcherInstance;
			$("#resetButton").on("click", function handlegetQRCodeButton () {
			qrCodeControl.reset();
		});
		var buttonAttributes = {
				"name" : "Generate QR Code",
				"image-url" : "examples/images/qr.png",
				"toolbar" : "W"
		};
		sketcherInstance.addButton(buttonAttributes, function() {
			qrCodeControl.getQRCode();
		});
		
		var s = "\n\n\n"+
		" 14 15  0  0  0  0  0  0  0  0999 V2000\n"+
		"    0.5089    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    1.2234    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    1.2234    7.4191    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"   -0.2055    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"   -0.9200    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    0.5089    5.3566    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"   -0.2055    7.4191    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    0.5089    6.1816    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"   -0.9200    6.1816    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    0.5089    8.6566    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.4929    7.0066    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.0080    7.6740    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.0080    6.3391    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.2630    8.4586    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"  1  7  1  0  0  0  0\n"+
		"  8  2  1  0  0  0  0\n"+
		"  1  3  1  0  0  0  0\n"+
		"  2  3  2  0  0  0  0\n"+
		"  7  4  1  0  0  0  0\n"+
		"  4  8  1  0  0  0  0\n"+
		"  4  9  2  0  0  0  0\n"+
		"  7  5  1  0  0  0  0\n"+
		"  8  6  1  0  0  0  0\n"+
		"  1 10  2  0  0  0  0\n"+
		"  3 12  1  0  0  0  0\n"+
		"  2 13  1  0  0  0  0\n"+
		" 13 11  2  0  0  0  0\n"+
		" 12 11  1  0  0  0  0\n"+
		" 12 14  1  0  0  0  0\n"+
		"M  END\n";
		
		sketcherInstance.importStructure("mol", s).catch(function(error) {
			alert("Import structure failed:"+error);
		});
	}, function () {
		alert("Cannot retrieve sketcher instance from iframe");
	});
});
	

The qrCodeControl object is responsible to retrieve the structure from the editor. It communicates with the MolConvert webservice via AJAX request to convert the molecule to SMILES format. It provides the input for the QR Code generator. The QR Code generator expects a DOM object to insert into and a text data to encode.

var qrCodeControl = (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 = {
		"getQRCode": function getQRCode () {
			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) {
				qrCodeControl.convertsmilesToQRCode(data['structure']);
			}).fail(handleRequestError);
		}

		, "reset": function reset () {
			$("#targetField").val("http://www.chemicalize.org/structure/#!mol=");
			$("#result").empty();
			errorConsole.reset();
		}
		
		, "convertsmilesToQRCode": function convertsmilesToQRCode(smiles) {
			$("#result").empty();
			var qrCode = new QRCode(document.getElementById("result"), { "width" : 450, "height" : 450 , "correctLevel" : QRCode.CorrectLevel.M });
			var s = $("#targetField").val() + escape(smiles);
			qrCode.makeCode(s);
		}
	}
	return controlObject;
}());
	

The errorConsole object is responsible to display error messages.

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 following additional JavaScript libraries are required:

	<script src="e;../js/lib/jquery-3.6.0.min.js"e;></script>
	<script src="e;../js/webservices.js"e;></script>
	<script src="e;../js/util.js"e;></script>
	<script src="e;../js/lib/qrcode/qrcode.min.js"e;></script>
	
	

The QR Code generation uses a contributed JavaScript library, it is under MIT license.