Jmol-Application/C4/Creating-a-Basic-JSmol-Integrated-Web-Page/English
Title of script: Creating a Basic JSmol Integrated Web Page
Author: Dr. Snehalatha Kaliappan, Sunil Shetye
Keywords: Jmol, JSmol, web page, html page, JSmol integration to web pages, 3D molecular structures, Interactive features, 3D models of molecules, install apache 2, video tutorial.
Visual Cue | Narration |
Slide Number 1
Title Slide |
Welcome to this tutorial on Creating a Basic JSmol Integrated Web Page. |
Slide Number 2
Learning Objectives |
In this tutorial, we will learn to,
|
Slide Number 3
System Requirement |
Here I am using,
|
Slide Number 4
Pre-requisites |
To follow this tutorial learner should be familiar with,
|
Slide Number 5
Pre-requisites Jmol Spoken Tutorials link:\\{\color{blue} https://spoken-tutorial.org} |
Please use the link given here for Spoken Tutorials in Jmol Application series. |
Slide number 6
Code Files |
|
Show the Downloads folder, cursor on the downloaded code files.
jspage.zip |
I have downloaded the input files.
By default mine got downloaded to my Downloads folder. It is a compressed zip file. Extract the files by right-clicking and choosing “Extract here” option. You will see a folder called jspage. |
Cursor over the file.
Press Ctr l + Alt + T to open the terminal Type mv ~/Downloads/jspage ~/ Press Enter. |
I will move this folder from the Downloads folder to my Home directory.
You can move the jspage folder to the location of your choice.
|
Right-click and select “Extract here” option.
Double-click on the jspage folder to open it. Show all the files |
I am in my home directory, here you will see jspage folder.
Double-click on the extracted jspage folder to open it.
|
Right-click and choose copy option.
Again click in the folder, Right-click and choose paste option. Right-click on the folder and choose rename option. Rename as nbutane.html, click on rename button. |
Make a copy of example.html file, rename it as nbutane.html.
Save it in the same folder.
|
Slide Number 7
About JSmol |
About Jsmol
|
Slide Number 8
About JSmol |
It runs in any web browser that supports HTML5.
JSmol integrated web pages are interactive and excellent learning resources. |
Slide Number 9
About JSmol |
For more information, please refer to the link given below. |
Slide Number 10 -12
|
I will quickly go through the steps to create a basic JSmol integrated web page.
|
In the Google search page, type Jmol download .
|
Let us begin by downloading the Jmol binary zip file.
|
Click on the link. | The first result Download Jmol – SourceForge appears.
Click on the link. |
Cursor on the Download Jmol page.
Click on the link download link (.zip file) |
Download Jmol page opens.
JSmol is part of the Jmol package, hence we need to download the Jmol binary zip file.
|
Right-click and select “Extract here” option.
|
Extract the zip file. Open the extracted folder.
Locate jsmol.zip file and extract it. Copy the extracted jsmol folder. |
Right-click in the folder.
Select New Folder option. Name it as Jmol-14.32.35. Go to jspage folder in the home directory. |
Go to the jspage folder located in your home directory.
Here create a new folder and name it as Jmol hyphen followed by the version number. The version number will be the same as the one you have downloaded. In my case it is 14.32.83. |
Right-click and select Paste. | Paste the extracted jsmol file into this Jmol sub-folder. |
Cursor on the files. | Now we have all the files required to create a JSmol integrated web page. |
Slide number 13
|
|
Open the terminal by pressing Ctrl+Alt+T keys.
At the prompt type,
Press Enter. |
Open the terminal on your computer.
Press Enter. |
Type your password.
Press Enter. |
When prompted by sudo, type your password and press Enter. |
Type y
Press Enter. |
If prompted by apt to continue, type “y” and press Enter. |
Cursor on the terminal. | The installation process is complete when you see the prompt on your terminal. |
Cursor on the terminal. | Let us edit the apache2 configuration file to change the DocumentRoot. |
At the terminal prompt, type
Press Enter. |
In the terminal, type the following command:
|
Type
sudo gedit 000-default.conf Press Enter. |
Next type the following command.
Edit the file as root user using any editor. I am using gedit here.
|
In the gedit document, cursor on line no 13.
DocumentRoot /home/spoken/jspage
|
In the text document
Look for the DocumentRoot tag.
|
At the prompt type, clear. | I will now clear the terminal, |
Type cd /etc/apache2/
Type sudo gedit apache2.conf
|
Next type the following command to change the directory.
Type the following command and press Enter |
Cursor on Gedit text document.
|
Gedit text document opens.
|
Save and close the gedit file. | Save and close the gedit file. |
ls -ld ~ ~/jspage/
Press Enter. |
Back to the terminal.
and Press Enter. |
chmod o+x ~ ~/jspage/
Press Enter. |
You should have the last character as x , as shown here.
|
Type,
|
Now we need to restart apache.
Type the following command to restart the apache.
press Enter |
Type, cd and press enter. | Type cd and press Enter to go to the home directory. |
Double-click on jspage folder. | Open the jspage folder. |
Right-click on nbutane.html, from the context menu select “Open with Other Application”.
From the options choose “Text Editor”
|
We will open the nbutane.html page in a text editor and edit it.
|
Cursor on nbutane-1.HTML.
On line 12 type, “Conformations of n-butane” in place of “Title of the web page”. |
The HTML page opens in the text editor.
Scroll down to line number 12 Edit the title of the web page. Type an appropriate title depending on the content of the page. I am going to create content on Conformations of n-butane. I will type Conformations of n-butane. |
Cursor on the lines 13 and 14.
Edit the Jmol version lines 13, 14 and 15. Jmol-14.32.76/jsmol/js/Jmol2.js |
On lines 13 and 14 you can see the code to integrate JSmol to the web page.
It is important to edit the path to navigate to your Jsmol folder. The Jmol version you have downloaded may be different than shown here. Please edit the version number accordingly. I will edit the version number as 14.32.83. |
Cursor on the line 15. | The code to initialise JSmol is on line 15.
I will edit the version number here as 14.32.83 |
On line 49 type, “Conformations of n-butane” in place of “Title”. | Scroll down.
I will type `’Conformations of n-butane”. |
Scroll down to line 59, edit the file name of the 3D model to nbutane1.mol in place of TEST.mol | Scroll down to line 59.
Edit the file name of the 3D model to nbutane1.mol in place of TEST.mol. |
On line 61 edit the name of the 3D model to nbutane1.mol. | Again edit the name of the 3D model to nbutane1.mol on line 61 in place of TEST.mol. |
Cursor on line 67-69; highlight the lines. | Scroll down, here is the code for including buttons and checkboxes.
|
Cursor on line 67-69; highlight the lines. | The javascript commands are included in the quotes.
|
Cursor on line 72-74; highlight the lines. | We have checkboxes to spin the model on and off.
|
Click on the Save button on the top-right corner. | Save the document by clicking on the Save button. |
Scroll down to line 84 and edit the text. | Scroll down to line 84 and edit the structure1 as n-butane1.mol.
I will type the following lines about conformations of n-butane. |
Click on the Save button on the top-right corner. | Save the page. |
Click on the + at the top. | To view this HTML page as a web page, open a new window or tab in your web browser. |
Type,
localhost\nbutane.html Press Enter. |
In the web address field type,
localhost forward slash, followed by the name of the HTML page you have created.
|
http://localhost/nButane-1.HTML | You can now see the web page created with an interactive 3D model of n-butane. |
Click on the series of radio buttons. | I will click on the radio buttons and checkboxes one by one.
|
Go back to the HTML page. | If the expected button is not functional, go back and edit the HTML page in the text editor.
Check the Jsmol script commands for the buttons and checkboxes. |
Open n-butane.html file. | Let’s go back to the HTML page in the text editor.
|
On line 67, type a comma at the end of the square bracket
|
Go to line 67 at the end of the square brackets and press Enter.
|
Click the Save button in the file. | Save the file.
Go to the browser and refresh the html page in the browser.
|
Copy the following lines 72 and 73 | Now let's add a checkbox to switch between background colours.
|
On line 75, delete, "spin on" and type “background black”. Delete “spin off” and type “background white”
In place of the button name "Spin”" type again “background”. |
Now on line 75 edit the Jmol script command to “background black” comma, “background white”
Edit the checkbox name to ”background”
|
Click on the Save button on the top-right corner.
|
Save the HTML page, refresh the web page.
The name of the checkbox is visible on the web page. |
Cursor on the web page. | More interactive structures and descriptions can be added to this page.
|
Cursor on the web page.
Click on all buttons and check boxes. |
More buttons and checkboxes can also be added for existing 3D models.
More details will be covered in the upcoming tutorials in this series.
|
Slide Number 14
Summary |
Let us summarise, in this tutorial, we have,
|
Slide Number 15
Assignment |
Here is an assignment for you.
Add a few more lines of text in the description for the conformers of n-butane in the HTML page. Save the HTML page. Run the HTML page as localhost and view the changes. |
Slide number 16
Assignment |
Create models of conformations of n-butane using Jmol.
Save the 3D models as .mol files. |
Slide Number 17
About Spoken Tutorial Project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide Number 18
|
We conduct workshops using spoken tutorials and give certificates.
For more details, please contact us. |
Slide number 19
Answers for THIS Spoken Tutorial |
Please post your timed queries in this forum. |
Slide number 20
Acknowledgment |
Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India |
This tutorial is contributed by Snehalatha Kaliappan, Sunil Shetye and Madhuri Ganapathi from IIT Bombay.
Thank you for joining. |