Marvin for JavaScript - How to embed it

How to embed the editor

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 and you do not waste your time to 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, which 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 it by the getDefaultServices() function.

Accessing functions of the sketcher

To be able to access any method of the editor component, you have to retrieve its reference from the iframe. The util.js file includes a helper method to retrieve the editor component. Link this file as external resource in your HTML code and refer the editor component like this:

<script>	
var marvin = getMarvin("sketch"); // its parameter is the ID of the iframe
if(marvin != null && (typeof marvin.sketch != 'undefined')) {
	marvin.sketch.setCarbonLabelVisible(true); // display carbon labels					
}
<script>