How to run interactive jmol or jsmol object in ipython notebook
Question
I want to make a presentation for a seminar and I would like to show a protein structure interactively (3D rotation, maybe even changing the model it is shown in, like cartoon, wireframe, ball & stick, ...)
I want this to be inline, not in separate window or file.
I can think about two possible solutions.
One would be to just call a software that outputs inline to the notebook, so let's say I run Jmol with my input file through bash and then manipulate the whole thing from the notebook (Note that I'm using ipython notebook, but I'm willing to install jupyter or any other stuff if that's needed for the solution). This would be awsome especially if I could use it with any other software, but I don't think it easy and it might not even be possible.
The other way would be to link to an already running jmol or jsmol object in the same browser, different tab, and show the same thing in notebook inline and rotate it from there as I present. I'm thinking that this is more likely to be possible, since both are running in the same browser and both know html and javascript so there is a common language. (I don't know too much about HTML, javascript or php, but I think it is possible to do it)
If you open this link:
http://www.rcsb.org/pdb/explore/jmol.do?structureId=1A0K&bionumber=1
You will see the rotatable object. If I run Firebug to examine this object it gives me:
canvas id="jmolApplet0_canvas2d" style="width: 100%; height: 100%; z-index: 9002; cursor: default;" width="600" height="600"
but this is not much of use for me, because I don't understand it. It looks like XML code and like input to a function or a class, but I have no idea how I could run this inside my notebook presentation.
I was also trying to save the object and then parse it using python, but that only gives me the points of the 3D object, and will not colour it or give surface to the objects, or at least I don't know how to that. (I'm talking about VRML)
For running inline things in ipython notebook, I've found:
%matplotlib nbagg
to be working, but nothing else.
Any help is appreciated.
I'm using python3, ipython3 notebook, ubuntu 16.04, firefox but I can install anything that would solve my problem, even use windows in virtualbox if I have to.
2 answers
solution1
2 2017-07-09 11:20:51
I've searched a lot and I found a working example on Oliver Stueker's github site: https://github.com/ostueker/simple_jmol_demo
The only problem I had with it that I've needed .pdb files, not cml, because cml doesn't contain the secondary structure information. I've searched some more, and found another almost working example posted by jhjensen2: https://gist.github.com/jhjensen2/4701339
So I came up with this:
%%html
<!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> 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>
You can use this as ipython notebook magic.
Edit: Well at the moment only if the file you are loading is not a .pdb file, but it will load a .cml file, which you can make with Avogadro. The code will load .pdb files in a browser only, not in ipython notebook. There might not be a way to combine the two. If I use the load inline in Jmol.getApplet it doesn't work for me, but it does work in Jmol.getApplethtml but only with .cml files and does not work with .pdb files. :(
solution2
0 2021-01-08 14:30:33
I've consolidated the two modern ways I've pieced together or come across in the repo here (nbviewer 'cleaner' view of same notebook: here ).
Launch a Jupyter session with that notebook running actively, backed by MyBinder.org, in your browser via this launch link .
I hope to expand the repo it is in to see what can be done to interact with macromolecular structures using the jupyter-jsmol extension developed by others.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.