MarvinSketch Example - Import/export of image formats in JavaScript

Press the Import button to import the molfile into MarvinSketch. Change the molecule (delete some atoms or bonds, draw new ones), select an image format from the list, then try the Export buttons. You can import a SMARTS string from the text box by using the Import SMARTS button.

You can validate the text field content and find out it contains a valid molecule source or not. You also can validate against a particular format.

Export format:


Several Marvin supported image formats demonstrated here. 

<form NAME=MolForm onSubmit="return false">
<textarea NAME="MolTxt" ROWS=20 COLS=70>
3,7-Dihydro-1,3,7-trimethyl-1H-purine-2,6-dione
  Marvin  07099920012D

 14 15  0  0  0  0  0  0  0  0999 V2000
   -2.0245   -2.6287    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
   -2.0245   -1.0107    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
   -1.7156   -0.0596    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.4367   -1.8197    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -3.8415   -0.8197    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -5.5735   -0.8197    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -4.7075   -2.3196    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -3.8415   -3.8197    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.9755   -2.3196    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.9755   -1.3197    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -3.8415    0.1803    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
   -5.5735   -2.8197    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
   -4.7075   -1.3197    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
   -3.8415   -2.8197    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
  5 13  1  0  0  0  0
 13  7  1  0  0  0  0
  7 14  1  0  0  0  0
 14  9  1  0  0  0  0
  9 10  2  0  0  0  0
  5 10  1  0  0  0  0
  4  2  1  0  0  0  0
  2 10  1  0  0  0  0
  9  1  1  0  0  0  0
  4  1  2  0  0  0  0
  2  3  1  0  0  0  0
  5 11  2  0  0  0  0
 13  6  1  0  0  0  0
  7 12  2  0  0  0  0
 14  8  1  0  0  0  0
M  END
</textarea>
<p>
<input TYPE=BUTTON VALUE="Import" onClick="importMol(null)">
<input TYPE=BUTTON VALUE="Import SMARTS" onClick="importMol('smarts:')">
<input TYPE=BUTTON VALUE="Validate" onClick="validateTextField(null)">
<input TYPE=BUTTON VALUE="Validate SMARTS" onClick="validateTextField('smarts')">
</p>
<p>Export format:
<select NAME="molformat">
<option VALUE="bmp">bmp</option>
<option VALUE="jpg">jpg</option>
<option SELECTED VALUE="png">png</option>
<option VALUE="svg">svg</option>
</select>
<input TYPE=BUTTON VALUE="Export" onClick="exportMolImage(document.MolForm.molformat.value)">
<input TYPE=BUTTON VALUE="Undo" onClick="undo()">
<input TYPE=BUTTON VALUE="Redo" onClick="redo()">
<input TYPE=BUTTON VALUE="Clean 2D" onClick="clean2D()">
<input TYPE=BUTTON VALUE="Clean 3D" onClick="clean3D()">
</p>
</form>
<script type="text/javascript" SRC="../../../marvin.js"></script>
<script type="text/javascript">
<!--

function undo() {
    if(document.MSketch != null) {
        document.MSketch.undo();
    }
}

function redo() {
    if(document.MSketch != null) {
        document.MSketch.redo();
    }
}

function clean2D() {
    if(document.MSketch != null) {
        document.MSketch.clean2D();
    }
}

function clean3D() {
    if(document.MSketch != null) {
        document.MSketch.clean3D();
    }
}
function importMol(opts) {
	if(document.MSketch != null) {
		var s = document.MolForm.MolTxt.value;
		document.MSketch.setMol(s, opts);
	} else {
		alert("Cannot import molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function exportMolImage(format) {
	if(document.MSketch != null) {
		var s = document.MSketch.getMolImage("base64:"+format);
		var img = document.getElementById('molImage');
		img.src = "data:image/"+getDecoratedFormat()+";base64,"+s;
	} else {
		alert("Cannot import molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function validateTextField(format){
	if (document.MSketch != null) {
		var s = document.MSketch.validateMoleculeStr(document.MolForm.MolTxt.value, format);
		if (s==0){
			alert("The structure source can be imported by MarvinSketch.");
		} else {
			alert("Warning the structure source is invalid, or can not be imported by MarvinSketch.");
		}
	} else {
		alert("Cannot import molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}

function getDecoratedFormat() {
	var sel = document.MolForm.molformat;
    var v = document.MolForm.molformat[sel.selectedIndex].value;
    if(v=="svg") {
    	return v+"+xml";
    }
    return v;
}
msketch_name = "MSketch";
msketch_begin("../../..", 540, 480);
msketch_end();

//-->
</script>
<br />
<div id="imageDiv">
	<img src="" id="molImage" />
</div>
 

It may happen that you want to save space on the web page and visualize your molecule in a small area. The next example shows how to fit the applet into a small area.