Difference between revisions of "Jmol-Application/C4/Editing-the-JSmol-Integrated-Web-Page/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
'''Title of script''': Editing the JSmol Integrated Web Page
 +
 +
'''Author''':  Dr.Snehalatha Kaliappan, Sunil Shetye
 +
 +
'''Keywords''':  JSmol, web page, html page, JSmol integration to web pages, 3D molecular structures, Interactive features, 3D models of molecules, video tutorial.
 +
 +
  
 
{|border=1
 
{|border=1
Line 7: Line 14:
  
 
'''Title Slide'''
 
'''Title Slide'''
−
||Welcome to this tutorial on '''Editing the JSmol Integrated Web Page.'''
+
||Welcome to this tutorial on '''Editing the JSmol Integrated Web Page'''.
  
 
|-
 
|-
Line 15: Line 22:
 
||In this tutorial, we will learn to,  
 
||In this tutorial, we will learn to,  
  
−
* Edit the '''HTML''' page to add '''3D models '''of chemical structures
+
* Edit the '''HTML''' page to add '''3D models ''' of chemical structures
−
* Add interactive '''radio buttons''' and '''checkboxes'''
+
* Add interactive '''radio buttons''' and '''checkboxes'''.
  
 
|-
 
|-
Line 24: Line 31:
 
||
 
||
 
* Add '''script commands '''to show '''animations'''
 
* Add '''script commands '''to show '''animations'''
−
* Run the edited '''HTML '''page locally using HTTP server localhost 80.  
+
* Run the edited '''HTML ''' page locally using HTTP server localhost 80.  
  
 
|-
 
|-
Line 32: Line 39:
 
||Here I am using
 
||Here I am using
  
−
* '''Ubuntu Linux '''OS version 20.04
+
* '''Ubuntu Linux OS''' version 20.04
  
−
* '''Firefox web browser '''version 100.0
+
* '''Firefox web browser ''' version 100.0
  
 
* '''Apache''' version 2.4.41
 
* '''Apache''' version 2.4.41
Line 48: Line 55:
 
'''Pre-requisites'''
 
'''Pre-requisites'''
 
||To follow this tutorial learner should be familiar with,
 
||To follow this tutorial learner should be familiar with,
−
 
−
 
 
* undergraduate chemistry
 
* undergraduate chemistry
  
Line 65: Line 70:
  
 
Jmol Spoken Tutorials link:\\{\color{blue} https://spoken-tutorial.org}
 
Jmol Spoken Tutorials link:\\{\color{blue} https://spoken-tutorial.org}
−
 
−
 
  
 
||Please use the link given here for Spoken Tutorials in the '''Jmol Application''' series.
 
||Please use the link given here for Spoken Tutorials in the '''Jmol Application''' series.
−
 
  
 
|-
 
|-
Line 78: Line 80:
  
 
||
 
||
−
 
 
* The input files required for this tutorial are available in the '''Code files''' link.
 
* The input files required for this tutorial are available in the '''Code files''' link.
  
Line 84: Line 85:
  
 
* Make a copy of all the files and then use them for practising.
 
* Make a copy of all the files and then use them for practising.
 +
 
|-
 
|-
−
||Show the Downloads folder, cursor on the downloaded Code files.  
+
||Show the '''Downloads''' folder, cursor on the downloaded '''Code files'''.  
  
  
Line 94: Line 96:
 
|| I have downloaded the input file '''jspage.'''
 
|| I have downloaded the input file '''jspage.'''
  
 +
By default mine got downloaded to my '''Downloads ''' folder.
  
−
By default mine got downloaded to my '''Downloads '''folder.
+
It is a compressed '''zip file'''.  
−
 
+
−
 
+
−
It is a compressed zip file.  
+
−
 
+
  
 
Extract the file by right-clicking and choosing the '''Extract Here''' option.
 
Extract the file by right-clicking and choosing the '''Extract Here''' option.
  
−
 
+
You will see a folder '''jspage'''.
−
You will see a folder '''jspage.'''
+
  
 
|-
 
|-
Line 120: Line 118:
  
 
|| I will open the '''jspage''' folder by double-clicking on it.
 
|| I will open the '''jspage''' folder by double-clicking on it.
−
 
  
 
Here you can see some files.
 
Here you can see some files.
  
 +
The input '''HTML page''', '''example2.html'''.
  
−
The input '''HTML page''', '''example2.html.'''
+
The '''resources''' folder has '''.mol''' files for the three '''conformers ''' of '''n-butane'''.  
−
 
+
−
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.
+
These structures were drawn using '''Jmol''' and saved in''' .mol file ''' format.
  
−
'''Files''' folder has all the necessary files required for the''' HTML page.'''
+
'''Files''' folder has all the necessary files required for the''' HTML page'''.
 
|-
 
|-
−
||Cursor on jmol-14.32.83 file.
+
||Cursor on '''jmol-14.32.83''' folder.
  
  
−
Double-click on jmol-14.32.83 file.
+
Double-click on '''jmol-14.32.83''' folder.
  
  
−
Cursor on jsmol file.
+
Cursor on '''jsmol''' folder.
−
||Here, I also have a '''jmol-14.32.83''' folder. Inside this folder I have '''jsmol''' folder.
+
||Here, I also have a '''jmol-14.32.83''' folder.  
  
 +
Inside this folder I have '''jsmol''' folder.
  
−
Please see the prerequisite video on how to download Jmol.
+
 
 +
Please see the prerequisite video on how to download '''Jmol'''.
  
 
|-
 
|-
Line 150: Line 148:
 
'''About the Web Page'''
 
'''About the Web Page'''
 
||
 
||
−
* The web page we will be creating will have content on '''conformations of nbutane.'''
+
* The web page we will be creating will have content on '''conformations of nbutane'''.
  
−
* The web page will have interactive 3D models of conformations of n-butane:
+
* The web page will have interactive 3D models of '''conformations of n-butane''', '''anti''', '''gauche''' and '''eclipsed'''
−
 
+
−
 
+
−
'''anti, gauche''' and '''eclipsed'''
+
 
|-
 
|-
 
||Right-click and select the text editor option.
 
||Right-click and select the text editor option.
Line 161: Line 156:
  
  
−
'''Windows''' and '''Mac''' users can choose to edit using Notepad.
+
'''Windows''' and '''Mac''' users can choose to edit using '''Notepad'''.
  
  
Line 168: Line 163:
 
||Cursor on the text editor, '''example2.html '''file.
 
||Cursor on the text editor, '''example2.html '''file.
 
||We will edit this document to add 3D models.
 
||We will edit this document to add 3D models.
−
 
  
 
I will add more interactive buttons.
 
I will add more interactive buttons.
−
 
  
 
I will also add some script commands to animate the 3D models.
 
I will also add some script commands to animate the 3D models.
−
 
  
 
|-
 
|-
 
||Open the resources folder and show the .mol files.
 
||Open the resources folder and show the .mol files.
−
||In the '''resources''' folder 3D model files of '''n-butane '''conformations are provided.  
+
||In the '''resources''' folder 3D model files of '''n-butane conformations''' are provided.  
 
|-
 
|-
 
||Cursor on the text editor.
 
||Cursor on the text editor.
Line 187: Line 179:
  
  
−
On lines 13 and 14, edit the version and path to the '''JSmol.min.js '''file and '''jmol2.js '''file.
+
On lines 13 and 14, edit the version and path to the '''JSmol.min.js ''' file and '''jmol2.js ''' file.
 
|-
 
|-
 
||Cursor on line 15.
 
||Cursor on line 15.
−
||On line 15 change the Jmol version number to reflect your downloaded Jmol version.
+
||On line 15 change the '''Jmol''' version number to reflect your downloaded '''Jmol''' version.
 +
 
 
|-
 
|-
 
||On line 49 replace '''title''' with '''conformations of nbutane'''.
 
||On line 49 replace '''title''' with '''conformations of nbutane'''.
 
||Scroll down to line 49, edit the topic name to '''Conformations of nbutane'''.
 
||Scroll down to line 49, edit the topic name to '''Conformations of nbutane'''.
 +
 
|-
 
|-
 
||Scroll down, highlight line 54.
 
||Scroll down, highlight line 54.
−
||Scroll down, from line 54, the javascript block to include the 3D models begins.
+
||Scroll down, from line 54, the '''javascript block''' to include the 3D models begins.
 +
 
 
|-
 
|-
 
||Cursor on lines of code in Structures block.
 
||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.
+
||Here, we are planning to include 3 structures.  
 +
 
 +
The code for 3 structures needs to be edited.
 +
 
 
|-
 
|-
 
||Cursor on line 58.
 
||Cursor on line 58.
 
||For structure 1, the lines of code start from line 58.
 
||For structure 1, the lines of code start from line 58.
  
−
The id is 1.
+
The '''id''' is 1.
 
|-
 
|-
 
||On line 58, Type '''nbutane1.mol''' in place of '''test1.mol.'''
 
||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 59, edit the name of the mol file for '''structure 1.'''  
+
We have named structure 1 as '''nbutane1.mol'''.
  
−
 
+
Type '''nbutane1.mol''' in place of '''test1.mol'''.
−
We have named structure 1 as '''nbutane1.mol.''' Type '''nbutane1.mol''' in place of '''test1.mol.'''
+
 
|-  
 
|-  
 
|| 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.'''
−
|| 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.
 
||Cursor on line 79.
−
||Scroll down to line 79, here javascript for '''structure2''' begins.
+
||Scroll down to line 79, here '''javascript''' for '''structure2''' begins.
 +
 
 
|-
 
|-
 
||On line 80, in place of '''test2.mol''', type, '''nbutane2.mol.'''
 
||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 '''structure 2'''.
−
 
+
−
 
+
−
||Same way as we edited previously for '''structure 1''', we edit the name of structure2.
+
  
  
 
On line 80, in place of '''test2.mol''', type, '''nbutane2.mol.'''
 
On line 80, in place of '''test2.mol''', type, '''nbutane2.mol.'''
−
 
  
  
 
|-
 
|-
−
||On line 82, again change '''test2.mol''' to '''nbutane2.mol.'''
+
||On line 82, change '''test2.mol''' to '''nbutane2.mol.'''
 
||On line 82, again change '''test2.mol '''to '''nbutane2.mol'''.
 
||On line 82, again change '''test2.mol '''to '''nbutane2.mol'''.
 +
 
|-
 
|-
−
||Cursor on ine 98.
+
||Cursor on line 98.
−
||Scroll down, Similarly, javascript block for structure 3 begins from line 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 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'''.
−
|| On line 101, 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.
 
||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.
 
||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.
+
||In the options choose '''Save as''' option .  
 +
 
 +
Give the file name as '''conformations_nbutane'''.  
 +
 
 +
Save the file in '''jspage '''folder.
  
 
Click on '''Save''' button.
 
Click on '''Save''' button.
Line 266: Line 268:
 
|-
 
|-
 
||Scroll down. Cursor on line 118.
 
||Scroll down. Cursor on line 118.
−
||Now we will scroll down to '''stucture_content '''javascript block.  
+
||Now we will scroll down to '''stucture_content javascript block'''.  
  
 
This begins from line 118.
 
This begins from line 118.
 +
 
|-
 
|-
 
||On line 121 type '''nbutane1.mol''' in place of test1.mol.
 
||On line 121 type '''nbutane1.mol''' in place of test1.mol.
Line 277: Line 280:
  
 
Edit the text on line 122 to something related to '''Anti-butane'''.
 
Edit the text on line 122 to something related to '''Anti-butane'''.
 +
 
|-
 
|-
 
||Cursor on '''conformations of nbutane. '''document in '''Downloads''' folder.
 
||Cursor on '''conformations of nbutane. '''document in '''Downloads''' folder.
Line 282: Line 286:
  
 
Double-click to open it.
 
Double-click to open it.
−
||I have opened a word document with the information for the '''Anti-butane'''.
+
||I have opened a text document with the information for the '''Anti-butane'''.
  
  
−
This document is provided in the''' Additional Reading Material''' as '''conformations of nbutane.'''
+
This document is provided in the ''' Additional Reading Material''' as '''conformations of nbutane'''.
 +
 
 
|-
 
|-
 
||Copy the information for Structure 1 from '''conformations of nbutane.'''
 
||Copy the information for Structure 1 from '''conformations of nbutane.'''
Line 291: Line 296:
  
 
Paste the information on line 122 in the text document.
 
Paste the information on line 122 in the text document.
−
 
−
 
  
 
||I have copied the information for '''Structure 1''' from this document.
 
||I have copied the information for '''Structure 1''' from this document.
Line 301: Line 304:
 
Alternatively, you can type your own content here.
 
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 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 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 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.  
 +
 
 +
Copy and paste the information from the document.  
 
||On line 134, change the text.  
 
||On line 134, change the text.  
  
 
You can copy and paste the information from the document.  
 
You can copy and paste the information from the document.  
 +
 
|-
 
|-
−
||Click on the Save button on the top-right corner.
+
||Click on the '''Save''' button on the top-right corner.
  
 +
||Save the document by clicking 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.
 
||Open a new window or tab in your web browser.
−
 
−
 
  
 
||View this page in the browser.
 
||View this page in the browser.
Line 333: Line 338:
  
 
Please ensure that '''Apache2''' is running in your system.
 
Please ensure that '''Apache2''' is running in your system.
 +
 
|-
 
|-
−
||In the address field, type localhost\conformations_nbutane.html
+
||In the address field,  
−
 
+
  
 +
type localhost\conformations_nbutane.html.
  
 
||In the web address field type,
 
||In the web address field type,
Line 343: Line 349:
  
  
−
I will type,''' localhost\conformations_nbutane.html '''and press '''Enter'''.
+
I will type, ''' localhost\conformations_nbutane.html ''' and press '''Enter'''.
−
 
+
−
 
+
  
 
|-
 
|-
 
||Check the web page, scroll down.
 
||Check the web page, scroll down.
 
||Check to see if the newly added models of butane are visible on page.
 
||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.  
−
||Click on the '''radio buttons''' and '''checkboxes.''' Check if they perform the desired function.
+
 
 +
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.
 
Similarly check all the models on the page.
 +
 
|-
 
|-
 
||Cursor on the checkbox script.
 
||Cursor on the checkbox script.
Line 361: Line 371:
  
 
I would like to add a '''checkbox''' to show '''labels''' for atoms.
 
I would like to add a '''checkbox''' to show '''labels''' for atoms.
−
 
  
  
Line 370: Line 379:
  
 
<script type="text/javascript">Jmol.jmolCheckbox(a_myJmol, "spin on", "spin off", "spin");</script>
 
<script type="text/javascript">Jmol.jmolCheckbox(a_myJmol, "spin on", "spin off", "spin");</script>
 +
 
||Go to the '''javascript''' block for '''Structure1'''.
 
||Go to the '''javascript''' block for '''Structure1'''.
  
 
Copy lines 71 and 72.
 
Copy lines 71 and 72.
−
 
  
  
 
|-
 
|-
 
||Copy the script on line no71 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.
−
 
+
−
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.
 
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.
 
||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'''.
−
 
+
−
On line 74, edit the script to '''label on''', '''label off '''in the place of '''spin on''' and '''spin off'''.
+
  
  
Line 402: Line 406:
  
  
−
Refresh the web page and check for the newly '''label '''checkbox.
+
Refresh the web page and check for the newly added '''label '''checkbox.
 
|-
 
|-
 
||Cursor on the text editor.
 
||Cursor on the text editor.
−
 
  
  
 
Line 91
 
Line 91
−
||Now let us add an animation button to '''eclipsed-nbutane''' which is '''Structure2'''.
+
||Now let us add an animation button to '''eclipsed-butane''' which is '''Structure2'''.
  
  
−
To add a radio button, go to the radio button section for '''Structure2'''.
+
To add a radio button, go to the '''radio button''' section for '''Structure2'''.
  
  
  
 
|-
 
|-
−
||Line 91, “spacefill 100%” button. at the end of the script, after the square bracket type a comma.
+
||Line 91, “spacefill 100%” button.  
  
 +
at the end of the script, after the square bracket type a comma.
  
−
Press enter, it takes you to the next line. On this new line type a pair of square brackets.
+
 
 +
Press Enter, it takes you to the next line.  
 +
 
 +
On this new line type a pair of square brackets.
  
  
Line 427: Line 434:
  
  
−
Press Enter, it takes you to the next line.  
+
Press '''Enter''', it takes you to the next line.  
  
  
Line 448: Line 455:
  
  
−
Type a '''comma''' and within double quotes type the name of the button as '''anticlinal.'''
+
Type a '''comma''' and within double quotes type the name of the button as '''anticlinal'''.
  
  
−
This animation will show the anticlinal conformation for '''eclipsed-nbutane.'''
+
This animation will show the anticlinal conformation for '''eclipsed-nbutane'''.
 
|-
 
|-
 
||Click on Save.
 
||Click on Save.
Line 461: Line 468:
  
 
Refresh the web page and check the newly added animation.
 
Refresh the web page and check the newly added animation.
 +
 
|-
 
|-
 
||Cursor on the test editor.
 
||Cursor on the test editor.
 
||You can modify the '''html page''' to add more models, buttons, animations and content.  
 
||You can modify the '''html page''' to add more models, buttons, animations and content.  
−
 
  
 
After modification, save the page.
 
After modification, save the page.
−
 
  
 
Refresh the web page in the browser to see the modifications.  
 
Refresh the web page in the browser to see the modifications.  
Line 475: Line 481:
 
'''Summary'''
 
'''Summary'''
 
||Let's summarize, In this tutorial we have,  
 
||Let's summarize, In this tutorial we have,  
−
 
  
 
* Edited the '''html page''' to add '''3D models'''
 
* Edited the '''html page''' to add '''3D models'''
Line 483: Line 488:
 
* Added''' script commands''' to show '''animations'''
 
* Added''' script commands''' to show '''animations'''
  
−
* Ran the edited''' HTML page''' locally using''' HTTP server localhost 80.'''
+
* Ran the edited''' HTML page''' locally using''' HTTP server localhost 80'''.
  
  
Line 491: Line 496:
 
'''Assignment slide.'''
 
'''Assignment slide.'''
 
||As an assignment,
 
||As an assignment,
−
 
  
 
Using the input file, '''example2.html''', as a template:
 
Using the input file, '''example2.html''', as a template:
  
−
 
+
* Create a '''JSmol''' integrated web page with the content of your choice.
−
* Create a JSmol integrated web page with the content of your choice.
+
  
 
* Add interactive buttons and animations.
 
* Add interactive buttons and animations.

Latest revision as of 16:31, 6 March 2023

Title of script: Editing the JSmol Integrated Web Page

Author: Dr.Snehalatha Kaliappan, Sunil Shetye

Keywords: JSmol, web page, html page, JSmol integration to web pages, 3D molecular structures, Interactive features, 3D models of molecules, video tutorial.


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,
  • Edit the HTML page to add 3D models of chemical structures
  • Add interactive radio buttons and checkboxes.
Slide Number 3

Learning Objectives

  • Add script commands to show animations
  • Run the edited HTML page locally using HTTP server localhost 80.
Slide Number 4

System Requirement

Here I am using
  • Ubuntu Linux OS version 20.04
  • Firefox web browser version 100.0
  • Apache version 2.4.41
  • Gedit version 3.36.2
  • Jmol/ Jsmol version 14.32.83


Slide Number 5

Pre-requisites

To follow this tutorial learner should be familiar with,
  • undergraduate chemistry
  • basic skills in using a computer
  • using a computer terminal for typing commands.
  • script commands in Jmol


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


  • The input files required for this tutorial are available in the Code files link.
  • Please download and extract the files.
  • Make a copy of all the files and then use them for practising.
Show the Downloads folder, cursor on the downloaded Code files.


Right-click on jspage.zip and choose the “Extract Here” option.


Cursor on jspage folder.

I have downloaded the input file jspage.

By default mine got downloaded to my Downloads folder.

It is a compressed zip file.

Extract the file by right-clicking and choosing the Extract Here option.

You will see a folder 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.

Here you can see some files.

The input HTML page, example2.html.

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 folder.


Double-click on jmol-14.32.83 folder.


Cursor on jsmol folder.

Here, I also have a jmol-14.32.83 folder.

Inside this folder I have jsmol folder.


Please see the prerequisite video on how to download Jmol.

Slide Number 8

About the Web Page

  • The web page we will be creating will have content on conformations of nbutane.
  • The web page will have interactive 3D models of conformations of n-butane, anti, gauche and eclipsed
Right-click and select the text editor option. Open example2.html file in the text editor.


Windows and Mac users can choose to edit using Notepad.


I will right-click and open the file in gedit.

Cursor on the text editor, example2.html file. We will edit this document to add 3D models.

I will add more interactive buttons.

I will also add some script commands to animate the 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.


Cursor on lines 13 and 14.

Back to the text editor.


On lines 13 and 14, edit the version and path to the JSmol.min.js file and jmol2.js file.

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.


We have named structure 1 as nbutane1.mol.

Type nbutane1.mol in place of test1.mol.

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 structure 2.


On line 80, in place of test2.mol, type, nbutane2.mol.


On line 82, change test2.mol to nbutane2.mol. On line 82, again change test2.mol to nbutane2.mol.
Cursor on line 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 101, 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.


Cursor on line 122.

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.


Double-click to open it.

I have opened a text document with the information for the Anti-butane.


This document is provided in the Additional Reading Material as conformations of nbutane.

Copy the information for Structure 1 from conformations of nbutane.


Paste the information on line 122 in the text document.

I have copied the information for Structure 1 from this document.


I will paste the information on line 122 in the text file.

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.


I will type, localhost\conformations_nbutane.html and press Enter.

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.


I would like to add a checkbox to show labels for atoms.


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.


Edit the checkbox name in place of spin as label.

Click on Save.


Refresh the web page and click on the label checkbox.

Save the file.


Refresh the web page and check for the newly added label checkbox.

Cursor on the text editor.


Line 91

Now let us add an animation button to eclipsed-butane which is Structure2.


To add a radio button, go to the radio button section for Structure2.


Line 91, “spacefill 100%” button.

at the end of the script, after the square bracket type a comma.


Press Enter, it takes you to the next line.

On this new line type a pair of square brackets.


On line 91, at the end of the script after the square brackets type a comma.


Press Enter, it takes you to the next line.


On this new line type a pair of square brackets.


Type,


“select connected (C1) and not (C2); rotate BRANCH {C1} {C2} 120 30”,


Type, “anticlinal”


Within the square brackets, within double quotes type the following script to animate a bond rotation process.


Type a comma and within double quotes type the name of the button as anticlinal.


This animation will show the anticlinal conformation for eclipsed-nbutane.

Click on Save.


Refresh the web page and click on the label button.

Save the file.


Refresh the web page and check the newly added animation.

Cursor on the test editor. You can modify the html page to add more models, buttons, animations and content.

After modification, save the page.

Refresh the web page in the browser to see the modifications.

Slide Number 9 and 10

Summary

Let's summarize, In this tutorial we have,
  • Edited the html page to add 3D models
  • Added interactive radio buttons and checkboxes
  • Added script commands to show animations
  • Ran the edited HTML page locally using HTTP server localhost 80.


Slide Number 11

Assignment slide.

As an assignment,

Using the input file, example2.html, as a template:

  • Create a JSmol integrated web page with the content of your choice.
  • Add interactive buttons and animations.
Slide Number 12


About Spoken Tutorial Project

  • The video at the following link summarizes the Spoken Tutorial project.
  • Please download and watch it.


Slide Number 13


Spoken tutorial workshops

  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please contact us.
Slide Number 14


Answers for THIS Spoken Tutorial

  • Please post your timed queries in this forum.
Slide Number 15


Acknowledgement

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.

Contributors and Content Editors

Madhurig, Snehalathak

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Jmol-Application/C4/Editing-the-JSmol-Integrated-Web-Page/English&oldid=56205"