jsmol/simple2.htm at main · openmopac/jsmol · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html>
<head>
	<title>JSmol -- platform-aware Jmol using jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="JSmol.min.js"></script>

<script type="text/javascript">

// simple2.htm: demonstration of using platform-aware Jmol with jQuery
// author: Bob Hanson hansonr@stolaf.edu 8/11/2012 8:21:03 AM

// ---------------------------------------------------------------------------------

////// special stuff just for this particular page

var s = unescape(document.location.search).split("&fbclid")[0].split("?fbclid")[0];
var defaultDisplay = ';set antialiasdisplay;set measurementUnits angstroms;set zoomlarge false;'

var script = 'set errorCallback "myCallback";'
	+ defaultDisplay
	+'set echo top left;echo loading XXXX...;refresh;'
	+'load ":XXXX";set echo top center;echo XXXX;'
var xxxx = s.split("_USE=")[0]
if (xxxx.length < 2) {
  xxxx = "ethanol"
} else {
  xxxx = xxxx.substring(1);
  if (xxxx.indexOf("load ") >= 0) {
    script = xxxx 	+ defaultDisplay

    xxxx = ""
  }
}
if (xxxx)
  script = script.replace(/XXXX/g, xxxx)

// --------------------------------------------------------------------------

////// every page will need one variable and one Info object for each applet object

var Info = {
	width: 450,
	height: 450,
	script: script,
	use: "HTML5",
	jarPath: "java",
	j2sPath: "j2s",
	jarFile: "JmolAppletSigned.jar",
	isSigned: false,
	addSelectionOptions: false,
	serverURL: "https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
	readyFunction: null,
	console: "jmol_infodiv",
	disableInitialConsole: true,
	defaultModel: null,
	debug: false
}

	// this next bit just allows us to see what platform we are on
	// based on our decisions indicated in Info

	// "true" here indicates just a check

	Jmol.getApplet("appletCheck", Info, true);
	var isApplet = (appletCheck._jmolType.indexOf("_Applet") >= 0);
	var is2D = appletCheck._is2D;

	if (!isApplet && !Info.script) {

		// JSmol or image

		Info.defaultModel = "$tylenol";
		Info.script = "#alt:LOAD :tylenol";

	}

// The actual applet will be jmol._applet (if it turns out to be an actual Applet),
// but we will never access that directly.

$(document).ready(function(){

	// This demonstration shows that
	// what is put on the page can depend upon the platform.

	// Note that the use of $(document.ready()) is optional but preferred.
	// You can do the traditional in-body coding if you want. See also simple2-nojq.htm.
	// But as Gusts Kaksis pointed out, if we are using jQuery for database lookups, we might
	// as well use it for more than that.

  // note that we create the applet first, before the controls, because
  // we need window.jmol to be defined for those, and Jmol.getAppletHtml does that.

  $("#middlepanel").html(Jmol.getAppletHtml("jmol", Info));

  // alternatively, you can use
  //
  //   jmol = "jmol"
  //
  // and then create the buttons before the applet itself.
  // Just make sure if you do that to use the name of the applet you are
  // actually going to be using. So, perhaps:
  //
  //   jmolApplet0 = "jmolApplet0"
  //

	var use = (Info.use != "JAVA" ? Info.use : Info.isSigned ? "SIGNED" : "JAVA");
  var radios = [
		["set background white", "white", true],
		["set background black", "black"]
		];

		$("#leftpanel").html(
		  '<a target="_blank" href="data/chairflip.png">images</a> '
			+ '<a target="_blank" href="simple2.htm?load%20data/cyclflip2.spt;//&_USE=' + use + '">cyclohexane ring flip</a> '
			+ '<a href="simple2.htm?_USE=' + use + '">back</a><br>'
			+ (true || isApplet ?
			'Drag-Minimize '
			+ Jmol.jmolLink(jmol,"set picking dragMinimize", "on")
			+ "    " + Jmol.jmolLink(jmol,"set picking ident", "off")
			: "")

			+ "<br>Model Kit Mode "
			+ Jmol.jmolLink(jmol,"set modelkitmode", "on")
			+ "    "
			+ Jmol.jmolLink(jmol,"set modelkitmode off", "off")
			+ "<br>Display calculated MMFF94 energy "
			+ Jmol.jmolLink(jmol,"function atomMoved(){set echo top left;minimize energy;echo @{'' + _minimizationEnergy + ' ' + energyUnits + '/mol'}};set minimizationSteps 200;set atomMovedCallback 'jmolscript:atomMoved()';set loadstructcallback 'minimize energy';set minimizationcallback '';set echo top left;echo @{'' + _minimizationEnergy + ' ' + energyUnits + '/mol'};minimize energy", "on")
			+ "    "
			+ Jmol.jmolLink(jmol,"echo @{''};set atomMovedCallback '';minimizationCallback '';set loadstructcallback ''", "off")
			+ "<br>Energy Units "
			+ Jmol.jmolLink(jmol,"set energyunits kcal;minimize energy", "kcal/mol")
			+ "    "
			+ Jmol.jmolLink(jmol,"set energyunits kJ;minimize energy", "kJ/mol")
			+ "<br>"
			+ Jmol.jmolLink(jmol,"calculate chirality;label %[chirality];background labels yellow;set labelPointers", "Show")
			+ "/" + Jmol.jmolLink(jmol,"labels off", "Hide")
			+ " R/S Chirality<br>Background: "
			+ Jmol.jmolRadioGroup(jmol, radios)
		);

  // right panel

	Jmol.setButtonCss(null, "style='width:160px'");
	$("#rightpanel").html(
		Jmol.jmolButton(jmol,"if (!molname) { molname = 'tylenol'};var x = prompt('Enter the name or identifier (SMILES, InChI, CAS) of a molecule',molname);if (!x) { quit }; molname = x; load @{'$' + molname} #alt:LOAD $??Enter a model name","Load MOL (NCI)")
		+ "<br>"
		+ Jmol.jmolButton(jmol,"if (!molname) { molname = 'tylenol'};var x = prompt('Enter the name of a compound',molname);if (!x) { quit }; molname = x; load @{':' + molname} #alt:LOAD :??Enter a model name","Load MOL (PubChem)")
		+ (isApplet ?
		"<br>"
		+ Jmol.jmolButton(jmol,(isApplet ? "minimize" : "set forceField UFF;minimize"),"Minimize (MMFF94)")
		: "")
 		+ (isApplet ?
		"<br>"
		+ Jmol.jmolButton(jmol,"load ? ","Load URL")
		+ "<br>"
		+ Jmol.jmolButton(jmol,"load ? ","Load FILE")
		+ "<br>"
		+ Jmol.jmolButton(jmol,"script ?.spt","Load SCRIPT")
		: "")
		+ "<br><br>"
		+ Jmol.jmolButton(jmol,"select *;if ($s1) {isosurface s1 delete} else {calculate partialcharge;isosurface s1 vdw map MEP translucent}","show/hide MEP")
		+ "<br><br>"
		+ (isApplet ?
// no longer works		Jmol.jmolButton(jmol,"show NMR","Predict NMR")
//		+ "<br><br>"
		Jmol.jmolButton(jmol,"write FILE ?","Save FILE")
		+ "<br>"
		+ Jmol.jmolButton(jmol,"write PNGJ jsmol.png","Save PNG")
		+ "<br><br><a href=simple2.htm?_USE=HTML5>HTML5 version</a>"
		+ "<br><br><a href=simple2.htm?_USE=SIGNED>(Signed) Java version</a>"
		+ "<br><br>" + Jmol.jmolLink(jmol, "JSCONSOLE", "show info")
		:
		"<br><br>"
		+ Jmol.jmolButton(jmol,"write FILE ?","Save FILE")
		+ "<br>"
		+ Jmol.jmolButton(jmol,"write PNGJ jsmol.png","Save PNG")
		+ "<br><br><a href=simple2.htm?_USE=SIGNED>JAVA version</a>"
    + "<br><br><a href=javascript:Jmol.showInfo(jmol,true)>show info</a>"
    )
	);

	// lower panel:

	Jmol.setButtonCss(null,"style='width:120px'");
	var s = "<br>"
		+ Jmol.jmolButton(jmol,"wireframe -0.1 #alt:SETTING Line", "wireframe")
		+ Jmol.jmolButton(jmol,"spacefill only;spacefill 23%;wireframe 0.15 #alt:SETTING Ball and Stick","ball&stick");
		s += Jmol.jmolButton(jmol,"spacefill #alt:SETTING van der Waals Spheres", "spacefill");
		Jmol.setButtonCss(null,"style='width:100px'");

		s += "<br>"

    s += Jmol.jmolButton(jmol,"console");

    s += Jmol.jmolCommandInput(jmol);


	$("#lowerpanel").html(s);
})

//]]>

</script>
</head>
<body>
<table style="margin-left:auto; margin-right:auto;">
	<tr>
		<td><div id="leftpanel"></div></td>
		<td><div id="middlepanel"></div></td>
		<td><div id="rightpanel"></div></td>
	</tr>
	<tr>
		<td></td>
		<td style="text-align:center"><div id="lowerpanel"></div></td>
		<td></td>
	</tr>
</table>
<div id="console"></div>
</body>
</html>