Jmol Jsmol applets working in Jupyter notebooks

This notebook shows how to run Jmol/ Jsmol applets in Jupyter notebook a couple of ways.

For the second one, using jupyter-jsmol, to work you have to run this notebook in sessions launched from my repo with jupyter-jsmol listed or the jupyter-jsmol extension development repo.

If not sorely using the jupyter-jsmol method:
First, separately as another notebook on the same MyBinder session, I ran the first several cells of Jmol served via a MyBinder remote session.ipynb to get Jmol and place a directory jsmol in the root directory of the running session. This step is important to put in place the jsmol directory with the javascript that the applet needs.

In [ ]:
Old(?) versions of these steps are listed below for convenience.

```bash
!curl -L -o Jmol-14.31.20-binary.tar.gz https://sourceforge.net/projects/jmol/files/Jmol/Version%2014.31/Jmol%2014.31.20/Jmol-14.31.20-binary.tar.gz/download
!tar xzf Jmol-14.31.20-binary.tar.gz
!unzip jmol-14.31.20/jsmol.zip
```

Applet and Jmol/Jsmol examples in Jupyter notebook cells

I was hoping to get it to work in a notebook and found the original source of this code by searching 'simple jmol page' and seeing the 3rd one listed was on sourcrforge and had text saying 'HTML5', clicking on it took me to http://jmol.sourceforge.net/ which listed a link to demos under 'Samples' that took me to Demonstration page that had a link to 'Very simple page, with source code and explanations' at http://jmol.sourceforge.net/demo/jssample0.html ,but it didn't seem to work even when I edited it like below to get javascript from other places (but see next cell for more about applets encoded in notebook cell attempt that lead me to try this again): (NEXT CELL DOESN'T WORK, ONES BELOW DO!! But detailing process so if something breaks can more easily troubleshoot)

In [ ]:
%%HTML
<script src="http://jmol.sourceforge.net/jmol/JSmol.min.js" type="text/javascript"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 serverURL:'https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php',
 use:'html5'
}
$(document).ready(function(){
  $('#JmolDiv').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
  Jmol.script(myJmol, 'load $caffeine');
});
</script>
<div id="JmolDiv" style="width:30vmin; height:30vmin;"></div>

Note the unedited (original source) version of that from http://jmol.sourceforge.net/demo/jssample0.html was:

<head>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath:'../jmol/j2s',
 serverURL:'../jmol/php/jsmol.php',
 use:'html5'
}
$(document).ready(function(){
  $('#JmolDiv').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
  Jmol.script(myJmol, 'load ../model/caffeine.xyz');
});
</script>
</head>
<body>
<div id="JmolDiv" style="width:30vmin; height:30vmin;"></div>
</body>

So after that failure I showed following procedure and code in trying Jmol applet in a Jupyter notebook.ipynb that I could at least get Jsmol code to run inside jupyter's %%HTML magics. It had issues though that it took over the page and oddly didn't load what it was supposed to and when it did it was zoomed out invisible and couldn't be moved by mouse.

So rexamined the code that I used trying Jmol applet in a Jupyter notebook.ipynb (from https://stackoverflow.com/a/44995828/8508004 ) in comparison to the simple code I was trying in the notebook because I knew I got a white space and because of effort with trying Jmol applet in a Jupyter notebook.ipynb, I sort of wondered if molecule was there but too zoomed out to see. Maybe the javascript set up that at least causes something to work could inform me and I could get the code pasted in working. Worth a shot. So I edited above again, this time tried following and it worked with the adpatations based on code from https://stackoverflow.com/a/44995828/8508004 that almost worked but took over page:

In [ ]:
%%HTML
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath: "jsmol/j2s",
 use:'html5'
}
$(document).ready(function(){
  $('#JmolDiv').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
  Jmol.script(myJmol, 'load $caffeine');
});
</script>
<div id="JmolDiv" style="width:30vmin; height:30vmin;"></div>

I don't honestly even know where it is getting caffeine molecule from because I don't see cafffein listed in jsmol directory, but very pleased to see IT WORKS and can spin caeffeine molecule with mouse in notebook cell.
(Note that given https://chemapps.stolaf.edu/jmol/jsmol/jsmolgl.htm I think it means the load with dollar sign defaults to getting structure details from NCI and so this would mean this applet running in the cell can load structures from other places on web, too.)

I'm noticing though that I cannot fully use console it seems. For example, I was trying to type in set antialiasDisplay and as I started typing with the s it kept triggering a notebook save step and not prinitng the s but prinint just et. Still major progress that this simple code works in the notebook.

Note that WebGL can be used, too, based on https://chemapps.stolaf.edu/jmol/jsmol/jsmolgl.htm to get better lighting:

In [ ]:
%%HTML
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript" src="jsmol/JSmol.GLmol.min.js"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath: "jsmol/j2s",
 use: "WEBGL HTML5",
}
$(document).ready(function(){
  $('#JmolDiv').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
  Jmol.script(myJmol, 'load $caffeine;set antialiasDisplay;');
});
</script>
<div id="JmolDiv" style="width:30vmin; height:30vmin;"></div>

Note WebGL doesn't render the background color.

Can use = in front of PDB id to to fetch a structure from PDB/RCSB online as illustrated here. Trying that with some other variations. (Do I need to clear output first or can multiple run on page?)

In [ ]:
%%HTML
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath: "jsmol/j2s",
 use: "html5",
}
$(document).ready(function(){
  $('#JmolDivProtein').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
  Jmol.script(myJmol, 'load =1ehz; spacefill off; wireframe off; backbone off; cartoon on; color structure; set antialiasDisplay; moveto 0.0 { -667 -744 -36 75.21} 100.0 0.0 0.0 {60.993 51.431 25.1785} 51.865986946675356 {0 0 0} 0 0 0 3.0 0.0 0.0;');
});
</script>
<div id="JmolDivProtein" style="width:400px; height:400px;"></div>

First try moving script location to be like source at https://chemapps.stolaf.edu/jmol/jsmol/jsmolgl.htm because I think script farther on left will be easier to edit.

In [ ]:
%%HTML
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath: "jsmol/j2s",
 use: "html5",
 script: 'load =1ehz; spacefill off; wireframe off; backbone off; cartoon on; color structure; set antialiasDisplay; moveto 0.0 { -667 -744 -36 75.21} 100.0 0.0 0.0 {60.993 51.431 25.1785} 51.865986946675356 {0 0 0} 0 0 0 3.0 0.0 0.0;',
}
$(document).ready(function(){
  $('#JmolDivProtein').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
});
</script>
<div id="JmolDivProtein" style="width:400px; height:400px;"></div>

Can WebGL be used with proteins, too?

In [ ]:
%%HTML
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<script type="text/javascript" src="jsmol/JSmol.GLmol.min.js"></script>
<script type="text/javascript">
 var myJmol = 'myJmol';
 var JmolInfo = {
 width:'100%',
 height:'100%',
 color:'#E2F4F5',
 j2sPath: "jsmol/j2s",
 use: "WEBGL HTML5",
 script: 'load =1ehz; spacefill off; wireframe off; backbone off; cartoon on; color structure; set antialiasDisplay; moveto 0.0 { -667 -744 -36 75.21} 100.0 0.0 0.0 {60.993 51.431 25.1785} 51.865986946675356 {0 0 0} 0 0 0 3.0 0.0 0.0;',
}
$(document).ready(function(){
  $('#JmolDivProteinGL').html( Jmol.getAppletHtml(myJmol, JmolInfo) );
});
</script>
<div id="JmolDivProteinGL" style="width:400px; height:400px;"></div>

Amazing jupyter-jsmol

(I had a whole folder on my computer wondering how to do this and I had even contact Bob Hanson to floar the idea. I need to update my own documents in light of finding this.)

Searching 'jsmol jupyter notebook' to hopefully find source of simple applet I had tried in notebook, I saw:

https://pypi.org/project/jupyter-jsmol/

Under Project Links on the right, is a link to the 'Homepage' which takes you to: https://github.com/fekad/jupyter-jsmol

And it has a launch binder badge that launched where it seems to work!!! Fairly recent commits from 4 months ago when I found it January 2021.

In [ ]:
#%pip install ipywidgets
#%pip install jupyter_jsmol
In [ ]:
from jupyter_jsmol import JsmolView
from ipywidgets import Layout, widgets, interact
In [ ]:
!curl -OL https://raw.githubusercontent.com/fekad/jupyter-jsmol/master/examples/data/c2h410.xyz
In [ ]:
view1 = JsmolView.from_file("c2h410.xyz") 
# view1 = JsmolView.from_file("data/c2h410.xyz", inline=False) 
view1
In [ ]:
view1.close()
In [ ]:
view2 = JsmolView.from_file("c2h410.xyz", inline=True) 
view2
In [ ]:
view2.close()
In [ ]:
view5.close_all()
In [ ]:
import time

def executeSomething():
    #code here
    print ('.')
    time.sleep(480) #60 seconds times 8 minutes

while True:
    executeSomething()
In [ ]: