Marvin JS Example - Turn on/off 3D fog effect

3D fog effect can be turned on or off by calling the setDisplaySettings(settings) function of the sketcher. You only need to specify those settings that you would like to override, in this case the fogEffect3D property.

By looking at the source code, you see that a listener function is bound to the change events of the checkbox and radio buttons. Upon a change in the state of the checkbox, the updateFogEffect3D(fogEffect3D) is invoked, whereas a change in the radio buttons invokes the updateDisplayMode(displayMode) function.

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				marvinSketcherInstance.importStructure("mol", s).catch(function(error) {
					alert(error);
				});
				marvinSketcherInstance.setDisplaySettings({
					"toolbars" : "view3d",
					"chiralFlagVisible" : false,
					"displayMode" : "BALLSTICK"
				});
				initControls();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControls () {
			// change display mode
			$("input[name='layout-group']").change(function(e) {
				var display = $(this).val();
				updateDisplayMode(display);
			});
			// change fog effect
			$("#chbx-fogeffect3d").change(function(e) {
				var fog = this.checked;
				updateFogEffect3D(fog);
			});
			$("#chbx-fogeffect3d").prop('checked', true);
			$("#radio-ballstick").prop('checked', true);
		}

		function updateDisplayMode(displayMode) {
			marvinSketcherInstance.setDisplaySettings({
				"displayMode" : displayMode
			});
		}

		function updateFogEffect3D(fogEffect3D) {
			marvinSketcherInstance.setDisplaySettings({
				"fogEffect3D" : fogEffect3D
			});
		}