Marvin JS Example - Add custom template button to the toolbar

Back to index

Append a custom template button to the toolbar at startup:

$(document).ready(function handleDocumentReady (e) {
	MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
		var templateAttributes = {
						'structure':"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<cml xmlns=\"http://www.chemaxon.com\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.chemaxon.com/marvin/help/formats/schema/mrvSchema_6_1_0.xsd\" version=\"ChemAxon file format v6.1, generated by v6.1.0\">\n<MDocument>\n  <MChemicalStruct>\n    <molecule molID=\"m1\">\n      <atomArray atomID=\"a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12\" elementType=\"C C N C C C O C C O C O\" x2=\"3.189999994039537 1.6499999940395358 0.8799999940395326 -0.6600000059604675 -1.4300000059604656 -2.970000005960466 -3.7400000059604674 -0.6600000059604636 -1.4300000059604623 -0.6600000059604607 0.8799999940395365 1.6499999940395358\" y2=\"-0.831839567470531 -0.8318395674705295 -2.165518689298567 -2.1655186892985645 -0.8318395674705278 -0.8318395674705257 -2.16551868929856 0.5018395543575072 1.8355186761855429 3.1691977980135775 0.501839554357506 1.8355186761855407\"/>\n      <bondArray>\n        <bond id=\"b1\" atomRefs2=\"a1 a2\" order=\"1\"/>\n        <bond id=\"b2\" atomRefs2=\"a2 a3\" order=\"2\"/>\n        <bond id=\"b3\" atomRefs2=\"a2 a11\" order=\"1\"/>\n        <bond id=\"b4\" atomRefs2=\"a3 a4\" order=\"1\"/>\n        <bond id=\"b5\" atomRefs2=\"a4 a5\" order=\"2\"/>\n        <bond id=\"b6\" atomRefs2=\"a5 a6\" order=\"1\"/>\n        <bond id=\"b7\" atomRefs2=\"a5 a8\" order=\"1\"/>\n        <bond id=\"b8\" atomRefs2=\"a6 a7\" order=\"1\"/>\n        <bond id=\"b9\" atomRefs2=\"a8 a9\" order=\"1\"/>\n        <bond id=\"b10\" atomRefs2=\"a8 a11\" order=\"2\"/>\n        <bond id=\"b11\" atomRefs2=\"a9 a10\" order=\"1\"/>\n        <bond id=\"b12\" atomRefs2=\"a11 a12\" order=\"1\"/>\n      </bondArray>\n    </molecule>\n  </MChemicalStruct>\n</MDocument>\n</cml>",
						'name':"Vitamin B6",
						'icon':"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB/ElEQVRIS82Uv0scQRTHZ7eQK4KxUYxy7AbBRhDOYBnuQhqLEJImpFOwUBslnZVckSpVOpsUh3+ACBo0YHFJETHkjktjYaKsYKGIqElzBPY2n2dm5Vh33d3kDhz43Oy9mff9vjf7w1BtHkab9dXtMfCUGqDbC7gsip+TJN0n7gCDMQRF9B4ckfi1ZQaIF3XVl3OaEdtBl1LWmVIfEc2z+SCNuC4qNuUDO7YgtPq4exPbAcK/4CW8DysFgxniX6LuTRKDCZLH4VHQAHGL2DewEJIn7NpIYiBJZShprkQeKLXCo1RDJPT4kt4D2VeAdXgLde2QYx6F/rDK/VjSDnwDh8Renbyvr1ti4B/RBqIZbXDKvKqP77+OaAIRQboIDptADWQ+b1oc5NqFn8EjyhN8Df45S85DWIRXIQZ3iX2CPm0kW37AMnTDbtDAIfhGFprEFrgehmdQbjbJZHqL9frRLLElWNNr8t5s62t5fP8Onuk5pucECoFKbf7Lh+0Yhvy1XO6dZZrujud51Wp1WroMHQbC0oqIbEqlEd+bImvTMA8lX2lkZHGv0VCTtdpM+SaDJyzeh8+IVyI28s1T3+FONvtC9fQ8Vq7rPTUMs9M0vcNKZco/kmvpSd8DSTShQ07QtseV4xz85gVuRFXux9MYxGmF34N/ykqR1PYO/gD34W6BfraGuwAAAABJRU5ErkJggg=="
				};
		sketcherInstance.addTemplate(templateAttributes);
	}, function () {
		alert("Cannot retrieve sketcher instance from iframe");
	});
});
		
Back to index