Biol 6312

20 Mar 2018

Lesson 6: Jmol and HTML files

You will need BlueGriffon and Firefox for this lesson.

Look for your jmol folder

1. Click the icon to open this folder.

2. Check to see that it contains a folder called "jsmol". You might have it in a zip format, in which case, expand it.

3. Check that your jmol folder contains a folder called "jmol_pages".

4. Check that your jmol folder also contains a folder called "pdb_files", with the file "1xme.pdb1.gz".

5. Download the "template2018.html" file and place it in the "jmol_pages" folder. To do this: for example, right-click (Control-click) and "Save Link As..." to the new "jmol_pages" folder. Or save it anywhere, and then drag and drop the file in the folder.

6. Move the "jsmol" folder and the "pdb_files" folder into the jmol_pages folder.

7. Open the "template2018.html" file in a text editor or html editor application. (Try right-click) I recommend BlueGriffon. (download page)

8. Save this file as "1template2018.html", "XYZtemplate2018.html" or some other name. That will preserve the template file in its original state, in case you need to come back to it later. This is a useful strategy. Or, you can always download the original again.

9. To see how this page looks in a browser, click the globe-like button in BlueGriffon. Select Firefox and check the box to remember this choice. (Unfortunately, the current Chrome or Safari will probably not work to load local files. You are free to check this later.)

10. This is one way to make a Jmol page: First load a pdb file into the correct folder: "pdb_files". Then edit the "template2018.html" page to use that pdb file. Any text editor will work, and a dedicated web page editor, such as Blue Griffon has some very useful features.

11. The template file is initially set up to use the pdb file 1xme.pdb1.gz.

12. Now, let's examine the html code. In BlueGriffon, look at the bottom of the page where it says WYSIWYG/Source. If you click "Source" you will see the html code. Lines that begin with exclamation marks "!" or "//" are for comments-they are not displayed by the browser.

13. First comes the <html> tag. This identifies the file as an HTML file. Look at the last line. It has the corresponding closing tag </html>. So everything between will be defined by this tag. This format works for all tags (almost).

14. Within the <head></head> tags are the <title></title> tags. The title is displayed at the top of any webpage. The title of this page is "Name of page". You should rename it when you make a new page.

15. Also in this <head></head> is a path to the javascript file called "JSmol.min.js". This allows buttons and other special items to be incorporated into the page. Here the correct pathway to the file is essential. If JSmol.min.js is in the same folder as the template.html file, then just the name of the file is given. In this case, the Jmol.js file is in the "jsmol" folder, which is in the "jmol" folder, as is your template1018.html file. Therefore, the path is given by "jsmol/JSmol.min.js".

16. Also in the <head> is the basic jmol information. There are 3 important things following this tag: <script type="text/javascript">

First, the dimensions of the jmol box, shown here in pixels: width: 800, height: 800,

Second the background color of the jmol box: color: "#ffffff", which is White. You have complete control of the background color. javascript colors

Third, the jmol loading and script information: script: "load pdb_files/1xme.pdb1.gz",

17. Next is the <body></body> tag. Here one can code the background color of the html page: bgcolor="#000088". This is a very dark blue.

18. The jmol applet will be in one cell of a Table, and the text describing it will be in the other cell.

19. The code for a table with 2 cells is a little complicated to understand. This is a Table that has 1 row and 2 columns. It is specified in this way:


Where "X" and "Y" are the text or items in the table cells.

20. This Table has other formatting information: width="1200" border="1" cellspacing="3" cellpadding="3"> (you can play with these values to see their effects.)

You can also creat or modify Tables in the "WYSIWYG" view of BlueGriffon

21. In this Table, X, the left cell, is the jmol "applet", and Y, the right cell, is the text describing it. Text is easiest to add in the "WYSIWYG" view.

22. In the Y cell are references to the PubMed entry and the Protein DataBank file.

23. These use the <a></a> tags to reference a URL:

<a href="" target="_blank">PubMed</a>

where ????? is the pubmed id

<a href="" target="_blank">PDB</a>

where ???? is the 4 digit pdb id number

24. Any URL can be linked in this way. The target="_blank" will cause the page to open in a new window.

25. In the first cell, X, :

<div><script type="text/javascript">
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info);


26. To change the jmol script, go back to the <head>, for example, copy and past this:

"load pdb_files/1xme.pdb1.gz;cartoons only;select :a;color red;select :b;color blue;select :c;color yellow;moveto /* time, axisAngle */ 1.0 { -432 901 -27 179.67} /* zoom, translation */ 100.0 15.17 -8.5 /* center, rotationRadius */ {67.983 20.813 -1.511} 50.96609 /* navigation center, translation, depth */ {0.0 0.0 0.0} 72.433464 -47.33075 0.0;spin y 10;delay 10;spin off"

Each item must be closed with a semicolon (typical jmol commands; spaces are optional)

27. Now we will switch between the file and viewing it in a browser.

28. Now edit the script: for example, change one of the colors.

Save the file again. Reload the file in the browser and see how it looks

The file can be re-loaded from either the browser or from BlueGriffon.

29. To get a particular orientation of the molecule, here is one way: Use Jmol to rotate and zoom to get the proper view. Then, in the Jmol pop-up menu, select "Show-orientation" (Or open the console and type "show orientation"). It will show you moveto information. This information can be copied, and pasted into the template file. Try it, but be sure to get the formatting correct.

30. I have "spin off" at the end of the list of commands. "Show orientation" doesn't work well when the molecule is spinning.When you are finished, you can try changing it to "spin on". It will start spinning after a 10 second delay.

31. For the reference for all jmol commands see this webpage

32. A new command I have learned is delete. For example, to remove water molecules from view, type "delete water". This can be reversed in the next command by "undo", but otherwise the water atoms are gone, and cannot be returned. I would say it is a command to use at the end of a script to eliminate atoms that are obstructing the view.

33. Your homework exercise #5 will be to send me a new file based on the template to show that the page works. Also send the pdb file. (Details of the assignment) due Tuesday March 27, 2018.

Comments/questions: email me

Copyright 2018, Steven B. Vik, Southern Methodist University

Last modified March 18, 2018