View source for 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.



{|border=1
||'''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,
* Create a '''JSmol integrated HTML''' text document

* Download '''Jmol binary zip file'''

* Install '''Apache ''' software 

* Run the '''HTML''' page locally using '''HTTP server''', '''localhost ''' 80

|-
||'''Slide Number 3'''

'''System Requirement'''
||Here I am using,

* '''Ubuntu Linux '''OS version 20.04

* Firefox web browser version 100.0

* Apache version 2.4.41

* Jmol version 14.32.83

* Working Internet connection

|-
||'''Slide Number 4'''

'''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

* basic operations of Jmol

|-
||'''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'''

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

'''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 '''Ctrl + 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.


Open the '''terminal''' and type the following command,


mv ~/Downloads/jspage ~/


and press '''Enter'''.

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


Here you will see some files and folders:
* An input HTML text document, '''example.html'''.

* '''resources''' folder, which has '''mol''' files for chemical structures.

* '''files''' folder- which has all the necessary files required to create the '''HTML page'''.

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


''Jsmol''' is an open-source '''HTML5 ''' viewer for 3D chemical structures.


It is a '''JavaScript framework''' that allows web developers to create pages.

|-
||'''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'''


[https://wiki.jmol.org/index.php/JSmol https://wiki.jmol.org/index.php/JSmol]
||For more information, please refer to the link given below.

|-
||'''Slide Number 10 -12'''


'''Steps to Create a Web Page'''
||I will quickly go through the steps to create a basic JSmol integrated web page.


# Download the '''Jmol''' package and extract the contents.
# Extract '''Jsmol.zip''' file which is present inside the extracted '''Jmol''' package.
# Move the extracted '''Jsmol''' file to the '''jspage''' folder.
# Open '''nbutane.html '''file in a text editor.
# Edit the path of JSmol file in '''nbutane.html ''' document. This step will integrate the '''JSmol''' program with the web page.
# Edit the '''nbutane.html''' text document to include 3D model files and text description. 
# Run the '''HTML ''' page locally using '''HTTP server''', '''localhost 80'''.


|-
||In the '''Google search page''', type '''Jmol download '''.


Press '''Enter'''.
||Let us begin by downloading the Jmol binary zip file.


Open '''Google Search ''' page, in the search box type '''download Jmol ''' and press '''Enter'''.

|-
||Click on the link.


[https://jmol.sourceforge.net/download/ https://jmol.sourceforge.net/download/]

||The first result '''Download Jmol hyphen 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.


Here in the '''Downloading Jmol''' section, click on '''download link (.zip file)'''.


'''Sourceforge''' page opens. 


Download process begins and the zip file downloads to your '''Downloads''' folder.

|-
||Right-click and select “Extract here” option.


Double-click on the '''jmol '''folder to open it.


Right-click and from the context menu choose Copy.
||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'''


'''Installation of Apache Software.'''
||
* We need to install '''Apache''' software in order to run the '''Jmol''' web pages locally on our computers.

* '''Apache ''' is an open source software. 

* It is used as a '''http web server''' to run the '''HTML web pages.'''

* We will use the '''terminal''' to install the '''Apache 2 ''' software program.

|-
||Open the terminal by pressing Ctrl+Alt+T keys.

At the prompt type,


'''sudo apt install apache2'''

Press Enter.
||Open the terminal on your computer.


At the prompt type,


'''sudo apt install apache2'''

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


'''cd /etc/apache2/sites-enabled/'''

Press Enter.
||In the '''terminal''', type the following command:


and Press '''Enter'''. 
|-
||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.


Press Enter.

|-
||In the gedit document, cursor on line no 13.

DocumentRoot /home/spoken/jspage


Click''' Save''' and close the file.

||In the text document,

Look for the '''DocumentRoot tag'''.


Edit this line according to where you have extracted the '''jspage ''' zip file.


I have extracted and saved the folder in my '''home directory'''. So I will edit accordingly.


Give the complete path for the folder.


Save the text file and close it.

|-
|| At the prompt type, '''clear.'''
|| I will now clear the terminal,

|-
||Type '''cd /etc/apache2/''' 


Press Enter

Type 

'''sudo gedit apache2.conf '''


Press Enter

||Next type the following command to change the directory.


Press '''Enter'''.

Type the following command and press '''Enter'''.

|-
||Cursor on Gedit text document.


Edit line <Directory /''var/''www/> 
||'''Gedit''' text document opens.


In the file, search for the '''Directory''' section.


Edit the following commands.


I am giving the folder structure for the '''jspage'''.


Please give the path for your''' jspage''' directory.

|-
||Save and close the gedit file.
||Save and close the gedit file.
|-
||ls -ld ~ ~/jspage/

Press Enter.

Type '''Clear''' at the prompt.
||Back to the '''terminal'''.


I will now clear the '''terminal'''.


Check for the permission by typing the following command

and Press Enter.

|-
||'''chmod o+x ~ ~/jspage/'''

Press Enter.
||You should have the last character as '''x''', as shown here.


If not please run the following command.


|-
||Type, 


'''sudo systemctl restart apache2.service'''


press Enter
||Now we need to restart '''apache'''.

Type the following command to restart the '''apache''' and 
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”.


Click on “Select” button on the top-right corner.
||We will open the '''nbutane.html''' page in a text editor and edit it.


Right-click on '''nbutane.html,''' file.


From the context menu select '''Open with Other Application'''.


From the options choose '''Text Editor'''.


Click on '''Select ''' button on the top-right corner.
|-
||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.


Edit the title on line number 49.

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.


The buttons and checkboxes will allow us to interact with the 3D model on the web page.
|-
||Cursor on line 67-69; highlight the lines.
||The javascript commands are included in the quotes.


Here we have radio buttons to change the size of the atoms.

|-
||Cursor on line 72-74; highlight the lines.
||We have checkboxes to spin the model on and off.


And a checkbox to reset the model to the original state.


Let us leave all the buttons and checkboxes unchanged.

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


I will type '''nbutane.html''' and Press Enter.
|-
||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.


See if you are able to view the expected feature for the button or checkbox.
|-
||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.


Let us add more buttons.
|-
||On line 67, type a comma at the end of the square bracket


["spacefill 23%", "23%", "checked"]


["wireframe", "0.05"]
||Go to line 67 at the end of the square brackets and press Enter.


Add a pair of square brackets.


Type the following inside the square brackets.


'''Wireframe 0.05 ''' with in double quotes''', add a comma.


Type the name of the radio button as '''bond''' within double quotes.


Add a comma at the end of the square brackets.


This adds a new radio button for thinner bonds in the molecule.

|-
||Click the Save button in the file.
||Save the file.

Go to the browser and refresh the html page in the browser.


Check the functionality of the radio button '''bond.'''
|-
||Copy the following lines 72 and 73
||Now let's add a checkbox to switch between background colours.


Press '''Enter''' at the end of line 73 to create a new line.


Copy the lines 72 and 73.


Paste the copied lines of code in this new line 74.

|-
||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”'''


This checkbox allows us to switch between white and black background colours.
|-
||Click on the Save button on the top-right corner.


Cursor on the line "background black", "background black"
||Save the HTML page, refresh the web page.


Check for the newly added '''background''' checkbox.


If you have noticed, the first term in the quotations is the script command. The second term is the name of the check box.

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.


This can be achieved by editing the HTML page to include a script for additional 3D structures.
|-
||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.


Let us go to the web page and check the functionality of all the buttons and checkboxes.

|-
||'''Slide Number 14'''

'''Summary'''
||Let us summarise, in this tutorial, we have,

* Created a '''JSmol integrated HTML''' text document.

* Downloaded '''Jmol binary zip file'''

* Installed '''Apache '''software 

* Ran the '''JSmol''' HTML page locally using HTTP server, localhost 80


|-
||'''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'''


'''Spoken tutorial workshops '''
||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.
|-
|}