Jmol-Application/C4/Editing-the-JSmol-Integrated-Web-Page/English
Visual Cue | Narration |
Slide Number 1
Title Slide |
Welcome to this tutorial on Editing the JSmol Integrated Web Page. |
Slide Number 2
Learning Objectives |
In this tutorial, we will learn to,
|
Slide Number 3
Learning Objectives |
|
Slide Number 4
System Requirement |
Here I am using
|
Slide Number 5
Pre-requisites |
To follow this tutorial learner should be familiar with,
|
Slide Number 6
Pre-requisites Jmol Spoken Tutorials link:\\{\color{blue} https://spoken-tutorial.org}
|
Please use the link given here for Spoken Tutorials in the Jmol Application series.
|
Slide number 7
Code Files
|
|
Show the Downloads folder, cursor on the downloaded Code files.
|
I have downloaded the input file jspage.
|
Right-click on the file and Select Move to. | I will move this file from the Downloads folder to the Home directory. |
Show Home directory.
Double-click on jspage folder. Cursor on the files. Click on the files to open the files and show the content. |
I will open the jspage folder by double-clicking on it.
The resources folder has .mol files for the three conformers of n-butane. These structures were drawn using Jmol and saved in .mol file format. Files folder has all the necessary files required for the HTML page. |
Cursor on jmol-14.32.83 file.
|
Here, I also have a jmol-14.32.83 folder. Inside this folder I have jsmol folder.
|
Slide Number 8
About the Web Page |
|
Right-click and select the text editor option. | Open example2.html file in the text editor.
|
Cursor on the text editor, example2.html file. | We will edit this document to add 3D models.
|
Open the resources folder and show the .mol files. | In the resources folder 3D model files of n-butane conformations are provided. |
Cursor on the text editor.
|
Back to the text editor.
|
Cursor on line 15. | On line 15 change the Jmol version number to reflect your downloaded Jmol version. |
On line 49 replace title with conformations of nbutane. | Scroll down to line 49, edit the topic name to Conformations of nbutane. |
Scroll down, highlight line 54. | Scroll down, from line 54, the javascript block to include the 3D models begins. |
Cursor on lines of code in Structures block. | Here, we are planning to include 3 structures. The code for 3 structures needs to be edited. |
Cursor on line 58. | For structure 1, the lines of code start from line 58.
The id is 1. |
On line 58, Type nbutane1.mol in place of test1.mol.
|
On line 59, edit the name of the mol file for structure 1.
|
On line 61, in load resources script, change test1.mol to nbutane1.mol. | On line 61, in load resources script, change test1.mol to nbutane1.mol. |
Cursor on line 79. | Scroll down to line 79, here javascript for structure2 begins. |
On line 80, in place of test2.mol, type, nbutane2.mol.
|
Same way as we edited previously for structure 1, we edit the name of structure2.
|
On line 82, again change test2.mol to nbutane2.mol. | On line 82, again change test2.mol to nbutane2.mol. |
Cursor on ine 98. | Scroll down, Similarly, javascript block for structure 3 begins from line 98. |
On line 99, in place of test3.mol, type, nbutane3.mol.
|
On line 99, in place of test3.mol, type, nbutane3.mol.
|
On line 102, again change test3.mol to nbutane3.mol. | On line 101, again change test3.mol to nbutane3.mol. |
Click on the 3 lines button at the top-right corner. | Save the modifications made by clicking on the 3 lines button at the top-right corner. |
In the options choose Save as option . Give the file name as conformations_nbutane. Save the file in jspage folder.
Click on Save button. |
In the options choose Save as option .
Save the file in jspage folder. Give the file name as conformations_nbutane. Click on Save button. |
Scroll down. Cursor on line 118. | Now we will scroll down to stucture_content javascript block.
This begins from line 118. |
On line 121 type nbutane1.mol in place of test1.mol.
|
Edit test 1.mol on line 121 to nbutane1.mol.
Edit the text on line 122 to something related to Anti-butane. |
Cursor on conformations of nbutane. document in Downloads folder.
|
I have opened a word document with the information for the Anti-butane.
|
Copy the information for Structure 1 from conformations of nbutane.
|
I have copied the information for Structure 1 from this document.
Alternatively, you can type your own content here.
|
On line 127, change the name of the structure from test2.mol to nbutane2.mol. | Similarly, on line 127, change the name of the structure from test2.mol to nbutane2.mol. |
On line 128, copy and paste the information for eclipsed butane from the text document. | On line 128, copy and paste the information for eclipsed-butane from the text document. |
On line 133, change test3.mol to nbutane3.mol | On line 133, change test3.mol to nbutane3.mol. |
On line 134, change the text. Copy and paste the information from the document. | On line 134, change the text.
You can copy and paste the information from the document. |
Click on the Save button on the top-right corner.
|
Save the document by clicking on the Save button on the top-right corner. |
Open a new window or tab in your web browser.
|
View this page in the browser.
Open a new window or tab in your web browser. Please ensure that Apache2 is running in your system. |
In the address field, type localhost\conformations_nbutane.html
|
In the web address field type,
localhost forward slash, followed by the name of the HTML page you have created.
|
Check the web page, scroll down. | Check to see if the newly added models of butane are visible on page. |
Click on the radio buttons and checkboxes. Observe the result, | Click on the radio buttons and checkboxes. Check if they perform the desired function.
Similarly check all the models on the page. |
Cursor on the checkbox script. | Let us add one more checkbox to this page.
|
Go to line 71, copy lines 71-72.
<script type="text/javascript">Jmol.jmolCheckbox(a_myJmol, "spin on", "spin off", "spin");</script> |
Go to the javascript block for Structure1.
Copy lines 71 and 72.
|
Copy the script on line no71 and 72. |
To create a new line press Enter at the end of the script on line 72. Now in the new line, paste the copied lines.
|
Type, “label on” “label off” in the place of “spin on” and “spin off” on line 74. |
On line 74, edit the script to label on, label off in the place of spin on and spin off.
|
Click on Save.
|
Save the file.
|
Cursor on the text editor.
Line 91 |
Now let us add an animation button to eclipsed-nbutane which is Structure2.
|
Line 91, “spacefill 100%” button. at the end of the script, after the square bracket type a comma.
|
On line 91, at the end of the script after the square brackets type a comma.
|
Type,
|
Within the square brackets, within double quotes type the following script to animate a bond rotation process.
|
Click on Save.
|
Save the file.
|
Cursor on the test editor. | You can modify the html page to add more models, buttons, animations and content.
|
Slide Number 9 and 10
Summary |
Let's summarize, In this tutorial we have,
|
Slide Number 11
Assignment slide. |
As an assignment,
|
Slide Number 12
|
|
Slide Number 13
|
|
Slide Number 14
|
|
Slide Number 15
|
The Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India |
The script for this tutorial is contributed by Snehalatha Kaliappan and Sunil Shetye.
This is Madhuri Ganapathi from IIT Bombay signing off. Thank you for joining. |