Marvin JS Examples - Convert Structure To Image

Create a hidden DIV element with an empty image that will be refreshed as a new image generated.

<div id="imageContainer" class="left10" style="display: none;">
  <img id="image" class="bordered" />
</div>

You need the ImageGenerator object from the marvin namespace to convert structure to image.

Load the marvinpack.html into a separate iframe. It loads the marvin namespace. The separate iframe is highly recommended to avoid potential css conflicts by the usage of the ImageGenerator API.

You will also need the MarvinJS global object, so you have to include the following lines to the head of your HTML page to be able to use it.

<script src="../gui/lib/promise-1.0.0.min.js"></script>
<script src="../js/marvinjslauncher.js"></script>

The MarvinJS.getPackage(String) provides a promise to access the reference for marvin namespace object. When the desired object is received from the iframe, we store this reference on the page to be able to use it later.

After you got the marvin object, you can define a click handler for the Create button.

When a click event is performed, a new image is created. The first parameter of molToDataUrl is the molecule source, the second one is the image type and the third one is a JavaScript object with the display settings based on the current value of the input fields. The molToDataUrl function returns with a base64 serialized image (data URI). Since the img tag accepts data URI as image source, you can update the image very easy.

					var marvin;
		$(document).ready(function handleDocumentReady (e) {
			// load marvin namespace in a separate frame to avoid css conflict
			// the display attribute of this iframe cannot be "none", but you can hide it somewhere	
			$('body').append($('<iframe>', { id: "marvinjs-iframe", src: "../marvinpack.html"}));
			// wait for the reference of marvin namespace from the iframe
			MarvinJSUtil.getPackage("#marvinjs-iframe").then(function (marvinNameSpace) {
				// the reference to the namespace is arrived but there is no guaranty that its initalization has been finished
				// because of it, wait till the ready state to be sure the whole API is available
				marvinNameSpace.onReady(function() {
					marvin = marvinNameSpace;
					initControl();
				});
			},function (error) {
				alert("Cannot retrieve marvin instance from iframe:"+error);
			});
		});
		
		function initControl() {
			$("#molsource-box").val(caffeineSource);
			$("#createButton").on("click", function() {
				var settings = {
						'carbonLabelVisible' : $("#chbx-carbonVis").is(':checked'),
						'cpkColoring' : $("#chbx-coloring").is(':checked'),
						'implicitHydrogen' : $("#implicittype").val(),
						'displayMode' : $("#displayMode").val(),
						'background-color': $('#bg').val(),
						'zoomMode' : $("#zoommode").val(),
						'width' : parseInt($("#w").val(), 10),
						'height' : parseInt($("#h").val(), 10)
				};
				var dataUrl = marvin.ImageExporter.molToDataUrl($("#molsource-box").val(),"image/png",settings);
				$("#image").attr("src", dataUrl);
				$("#imageContainer").css("display", "inline-block");
			});
		}
		

If you would like to hide the new (marvinjs-iframe) iframe, setup its CSS style by the following way.
(Take care that display: none; CSS setting for the iframe can cause undefined result at the usage of marvin.ImageExporter.molToDataUrl in certain browsers.)

iframe#marvinjs-iframe {
		width: 0;
		height: 0;
		display: initial;
		position: absolute;
		left: -1000;
		top: -1000;
		margin: 0;
		padding: 0;
}