Skip to content

Instantly share code, notes, and snippets.

@jhjensen2
Created February 3, 2013 11:13
Show Gist options
  • Save jhjensen2/4701339 to your computer and use it in GitHub Desktop.
Save jhjensen2/4701339 to your computer and use it in GitHub Desktop.
A simple JSmol example The page can be found at http://propka.ki.ku.dk/~jhjensen/jsmoltest.html JSmol can be found at http://chemapps.stolaf.edu/jmol/jsmol/test2.htm
DOCTYPE html>
<html>
<title>A simple Jsmol example</title>
<head>
<script type="text/javascript" src="jsmol/JSmoljQuery.js"></script>
<script type="text/javascript" src="jsmol/JSmolCore.js"></script>
<script type="text/javascript" src="jsmol/JSmolApplet.js"></script>
<script type="text/javascript" src="jsmol/JSmolApi.js"></script>
<script type="text/javascript" src="jsmol/j2s/j2sjmol.js"></script>
<script type="text/javascript" src="jsmol/JSmol.js"></script>
<!-- // following two only necessary for WebGL version: -->
<script type="text/javascript" src="jsmol/JSmolThree.js"></script>
<script type="text/javascript" src="jsmol/JSmolGLmol.js"></script>
<script type="text/javascript">
var Info = {
width: 300,
height: 300,
// serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php ",
serverURL: "http://propka.ki.ku.dk/~jhjensen/jsmol/jsmol.php ",
use: "HTML5",
j2sPath: "jsmol/j2s",
console: "jmolApplet0_infodiv"
}
</script>
</head>
<body>
<script type="text/javascript">
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info);
Jmol.script(jmolApplet0,"background black;load caffeine.xyz")
</script>
<br>
<a href="javascript:Jmol.script(jmolApplet0,'spin on')">spin</a>
<a href="javascript:Jmol.script(jmolApplet0,'spin off')">off</a>
</body>
@arinik2
Copy link

arinik2 commented Jul 30, 2015

Done the same on my computer - doesn't work. Is there some pecularities in files accomodation, in paths or elsewhere?

@CsongorMatyas
Copy link

CsongorMatyas commented Jul 9, 2017

It works if you add:

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

and of course have this file in the folder that contains the 'jsmol' folder. Do not confuse 'jsmol' with 'jmol'. You will find many articles, questions, examples that use 'jmol', but that gone, now we have to use 'jsmol'.

I've added some more examples that I've needed:

<!doctype html>
<html>
	<title>A simple Jsmol example</title>
<head>
	<script type="text/javascript" src="jsmol/JSmol.min.js"></script>

	<script type="text/javascript">
	var Info = {
	  width: 500,
	  height: 500,
	  j2sPath: "jsmol/j2s",
	}
	</script>
</head>
<body>
	<script type="text/javascript">
	  jmolApplet0 = Jmol.getApplet("jmolApplet0", Info);
	  Jmol.script(jmolApplet0,"background black; load 1a0k.pdb; wireframe only; spin on")
	</script>
	<br clear="all" / >
		<b>Model:</b>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'wireframe only; ');" checked="checked">Wireframe</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'cartoon only; ');">Cartoon</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'backbone only; ');">Backbone</input>
		<b>&nbsp; &nbsp; &nbsp; &nbsp; Spin:</b>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'spin off; ');" checked="checked">Off</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'spin on; ');">On</input></br>
	<br clear="all" / >
		<b>Color:</b>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color cpk; ');" checked="checked">Atom</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color structure; ');">Secondary</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color chain; ');">Chain</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color amino; ');">Residue</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color group; ');">Group</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color monomer; ');">Monomer</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color relativeTemperature; ');">Relative temp.</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color fixedTemperature; ');">Fixed temp.</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color black; ');">Black</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color white; ');">White</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'color grey; ');">Grey</input>
		</br>
	<br clear="all" / >
		<b>Background:</b>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background black; ');" checked="checked">Black</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background white; ');">White</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background red; ');">Red</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background green; ');">Green</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background blue; ');">Blue</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background yellow; ');">Yellow</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background cyan; ');">Cyan</input>
		<input name="vis" type="radio" onclick="javascript:Jmol.script(jmolApplet0,
		   'background magenta; ');">Magenta</input></br>
</body>

Thank you for sharing, it helped me ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment