Marvin JS - How to embed it

Insert an iframe into your page and specify its size. It will determine the dimensions of the editor. Load the editor.html file into this frame and define an id that helps to refer to it later. The size of the iframe should be set in exact units (e.g. pixels): the minimum values should be 500px * 450px. It's recommended to set its overflow property to hidden and to set a solid border to the iframe element.

<iframe id="sketch" src="../editor.html" 
	style="overflow: hidden; min-width: 500px; min-height: 450px; border: 1px solid darkgray;"  />

If you need default web services but you do not wish setup each one, you can use alternative version of editor.html: editorws.html

It presets default web services at startup.

<iframe id="sketch" src="../editorws.html" 
	style="overflow: hidden; min-width: 500px; min-height: 450px; border: 1px solid darkgray;"  />

Please, note that web services have to be available at the default location that webservices.js defines. You can modify the default location in this file by overwriting these settings. editorws.html refers to this external JavaScript file when it retrieves the default webservice config. If you link this file into your code, you can also refer to it by the getDefaultServices() function.

Accessing functions of the sketcher

There is no guarantee that the editor is already alive when the loading of the parent page (where its iframe is inserted) has been finished.

Because of this, getting the reference to the editor is not trivial.

We provide a helper API to access it. Below, we demonstrate how to use this helper API or how you can access the sketcher without it.

• Embed with the helper API
• Embed without the helper API

Embed with the helper API

The marvinjslauncher.js JavaScript library provides an interface to control the event when the editor is loaded and helps to get a reference to the editor to be able to refer to the editor API.

First of all, insert the following lines into header of your web page to import it (promise-1.0.0.min.js is a dependency of marvinjslauncher.js).

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

The marvinjslauncher.js loads the MarvinJSUtil object whose functions are described below. This API operates with Promise objects. If you are not familiar with the Promise pattern, you can read more about it here: Promise/A

Not all browsers provide Promise implementation yet. Because of this, we need the promise-1.0.0.min.js, that provides Promise implementation where it is not implemented yet.

var marvinSketcherInstance;
MarvinJSUtil.getEditor("#sketch").then(function(sketcherInstance) {
	marvinSketcherInstance = sketcherInstance;
}, function(error) {
	alert("Loading of the sketcher failed"+error);
});

var marvin;
MarvinJSUtil.getPackage("#sketch").then(function(marvinPackage) {
	marvin = marvinPackage;	
}, function(error) {
	alert("Marvin package is not available:" +error);
});

Embed without the helper API

If you do not use the helper API, accessing of the sketcher is more complicated but not impossible:

var marvinSketch;

document.getElementById("sketch").addEventListener("load", function() { // listen when the document in the iframe is loaded

	var eframeWin = document.getElementById("sketch").contentWindow;
		if(typeof eframeWin != 'undefined') { // if the contentWindow property of iframe is available, you can access inner content
			try {
				var marvin = eframeWin.marvin; // reference to marvin library in the iframe
				if(marvin != null) {
					marvin.onReady(function() { // onReady is performed when loading of the marvin API is ready (hopefully, sketcher is already instantiated)
						if(typeof marvin.sketch != 'undefined') { // undefined if you have no right to access it or instantiation failed
							marvinSketch = marvin.sketch;
							marvinSketch.importAsMrv(s);
						}
					});
				}
			} catch(e) {
				alert(e);
			}
		}
	});