Difference between revisions of "Jmol-Application/C4/Creating-a-Basic-JSmol-Integrated-Web-Page/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(4 intermediate revisions by 2 users not shown)
Line 22: Line 22:
 
||In this tutorial, we will learn to,
 
||In this tutorial, we will learn to,
 
* Create a '''JSmol integrated HTML''' text document
 
* Create a '''JSmol integrated HTML''' text document
 +
 
* Download '''Jmol binary zip file'''
 
* Download '''Jmol binary zip file'''
 +
 
* Install '''Apache ''' software  
 
* Install '''Apache ''' software  
 +
 
* Run the '''HTML''' page locally using '''HTTP server''', '''localhost ''' 80
 
* Run the '''HTML''' page locally using '''HTTP server''', '''localhost ''' 80
  
Line 33: Line 36:
  
 
* '''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
 +
 
* Jmol version 14.32.83
 
* Jmol version 14.32.83
 +
 
* Working Internet connection
 
* Working Internet connection
  
Line 45: Line 52:
  
 
* undergraduate chemistry
 
* undergraduate chemistry
 +
 
* basic skills in using a computer
 
* basic skills in using a computer
 +
 
* using a computer terminal for typing commands
 
* using a computer terminal for typing commands
 +
 
* basic operations of Jmol
 
* basic operations of Jmol
  
Line 65: Line 75:
 
||
 
||
 
* 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.
 +
 
* Please download and extract the files.
 
* Please download and extract the files.
 +
 
* 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  
  
Line 85: Line 97:
 
||Cursor over the file.
 
||Cursor over the file.
  
−
Press Ctr l + Alt + T to open the terminal  
+
Press '''Ctrl + Alt + T''' to open the terminal  
  
 
Type '''mv ~/Downloads/jspage ~/'''
 
Type '''mv ~/Downloads/jspage ~/'''
Line 95: Line 107:
  
  
−
Open the terminal and type the following command,
+
Open the '''terminal''' and type the following command,
  
  
Line 101: Line 113:
  
  
−
and press Enter.
+
and press '''Enter'''.
  
 
|-
 
|-
Line 109: Line 121:
  
 
Show all the files
 
Show all the files
−
||I am in my home directory, here you will see '''jspage ''' folder.
+
||I am in my '''home directory''', here you will see '''jspage ''' folder.
  
 
Double-click on the extracted '''jspage''' folder to open it.
 
Double-click on the extracted '''jspage''' folder to open it.
Line 116: Line 128:
 
Here you will see some files and folders:
 
Here you will see some files and folders:
 
* An input HTML text document, '''example.html'''.
 
* An input HTML text document, '''example.html'''.
 +
 
* '''resources''' folder, which has '''mol''' files for chemical structures.
 
* '''resources''' folder, which has '''mol''' files for chemical structures.
 +
 
* '''files''' folder- which has all the necessary files required to create the '''HTML page'''.
 
* '''files''' folder- which has all the necessary files required to create the '''HTML page'''.
  
Line 126: Line 140:
 
Right-click on the folder and choose rename option.
 
Right-click on the folder and choose rename option.
  
−
Rename as '''nbutane.html, '''click on''' rename '''button.
+
Rename as '''nbutane.html''', click on''' rename ''' button.
  
 
||Make a copy of '''example.html ''' file, rename it as '''nbutane.html'''.
 
||Make a copy of '''example.html ''' file, rename it as '''nbutane.html'''.
Line 140: Line 154:
  
  
−
''Jsmol is an open-source '''HTML5 '''viewer for 3D chemical structures.''
+
''Jsmol''' is an open-source '''HTML5 ''' viewer for 3D chemical structures.
  
  
Line 152: Line 166:
 
||It runs in any web browser that supports '''HTML5'''.
 
||It runs in any web browser that supports '''HTML5'''.
  
−
JSmol integrated web pages are interactive and excellent learning resources.
+
'''JSmol''' integrated web pages are interactive and excellent learning resources.
  
 
|-
 
|-
Line 172: Line 186:
  
 
# Download the '''Jmol''' package and extract the contents.
 
# Download the '''Jmol''' package and extract the contents.
−
# Extract '''Jsmol.zip''' file which is present inside the extracted Jmol package.
+
# Extract '''Jsmol.zip''' file which is present inside the extracted '''Jmol''' package.
−
# Move the extracted Jsmol file to the '''jspage''' folder.
+
# Move the extracted '''Jsmol''' file to the '''jspage''' folder.
 
# Open '''nbutane.html '''file in a text editor.
 
# 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 path of JSmol file in '''nbutane.html ''' document. This step will integrate the '''JSmol''' program with the web page.
−
# Edit the '''nbutane.html''' to include 3D model files and text description.  
+
# Edit the '''nbutane.html''' text document to include 3D model files and text description.  
 
# Run the '''HTML ''' page locally using '''HTTP server''', '''localhost 80'''.
 
# Run the '''HTML ''' page locally using '''HTTP server''', '''localhost 80'''.
  
Line 188: Line 202:
  
  
−
Open '''Google Search '''page, in the search box type '''download Jmol ''' and press '''Enter'''.
+
Open '''Google Search ''' page, in the search box type '''download Jmol ''' and press '''Enter'''.
  
 
|-
 
|-
Line 196: Line 210:
 
[https://jmol.sourceforge.net/download/ https://jmol.sourceforge.net/download/]
 
[https://jmol.sourceforge.net/download/ https://jmol.sourceforge.net/download/]
  
−
||The first result '''Download Jmol – SourceForge ''' appears.
+
||The first result '''Download Jmol hyphen SourceForge ''' appears.
  
 
Click on the link.
 
Click on the link.
Line 225: Line 239:
  
 
Right-click and from the context menu choose Copy.
 
Right-click and from the context menu choose Copy.
−
||Extract the zip file. Open the extracted folder.
+
||Extract the zip file.  
  
−
Locate jsmol.zip file and extract it.
+
Open the extracted folder.
 +
 
 +
Locate '''jsmol.zip''' file and extract it.
  
 
Copy the extracted '''jsmol''' folder.
 
Copy the extracted '''jsmol''' folder.
Line 237: Line 253:
 
Go to '''jspage''' folder in the home directory.
 
Go to '''jspage''' folder in the home directory.
  
−
||Go to the '''jspage''' folder located in your 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.
+
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.
 
The version number will be the same as the one you have downloaded.
Line 247: Line 263:
 
|-
 
|-
 
||Right-click and select''' Paste'''.
 
||Right-click and select''' Paste'''.
−
||Paste the extracted '''jsmol''' file into this Jmol sub-folder.
+
||Paste the extracted '''jsmol''' file into this '''Jmol''' sub-folder.
  
 
|-
 
|-
Line 259: Line 275:
 
'''Installation of Apache Software.'''
 
'''Installation of Apache Software.'''
 
||
 
||
−
* We need to install '''Apache''' software in order to run the Jmol web pages locally on our computers.
+
* We need to install '''Apache''' software in order to run the '''Jmol''' web pages locally on our computers.
  
 
* '''Apache ''' is an open source software.  
 
* '''Apache ''' is an open source software.  
Line 265: Line 281:
 
* It is used as a '''http web server''' to run the '''HTML web pages.'''
 
* 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.
+
* We will use the '''terminal''' to install the '''Apache 2 ''' software program.
  
 
|-
 
|-
Line 298: Line 314:
 
|-
 
|-
 
||Cursor on the terminal.
 
||Cursor on the terminal.
−
||The installation process is complete when you see the prompt on your terminal.
+
||The installation process is complete when you see the prompt on your '''terminal'''.
  
 
|-
 
|-
 
||Cursor on the terminal.
 
||Cursor on the terminal.
−
||Let us edit the apache2 configuration file to change the '''DocumentRoot'''.  
+
||Let us edit the '''apache2 configuration''' file to change the '''DocumentRoot'''.  
  
 
|-
 
|-
Line 311: Line 327:
  
 
Press Enter.
 
Press Enter.
−
||In the terminal, type the following command:
+
||In the '''terminal''', type the following command:
  
  
−
and Press Enter.  
+
and Press '''Enter'''.  
 
|-
 
|-
 
||Type
 
||Type
Line 323: Line 339:
  
 
||Next type the following command.
 
||Next type the following command.
−
 
  
  
Line 341: Line 356:
 
Click''' Save''' and close the file.
 
Click''' Save''' and close the file.
  
−
||In the text document
+
||In the text document,
  
 
Look for the '''DocumentRoot tag'''.
 
Look for the '''DocumentRoot tag'''.
  
  
−
Edit this line according to where you have extracted the '''jspage '''zip file.
+
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.
+
I have extracted and saved the folder in my '''home directory'''. So I will edit accordingly.
  
  
Line 362: Line 377:
  
 
|-
 
|-
−
||Type cd /etc/apache2/  
+
||Type '''cd /etc/apache2/'''
  
  
Line 377: Line 392:
  
  
−
Press Enter
+
Press '''Enter'''.
  
−
Type the following command and press Enter
+
Type the following command and press '''Enter'''.
  
 
|-
 
|-
Line 386: Line 401:
  
 
Edit line <Directory /''var/''www/>  
 
Edit line <Directory /''var/''www/>  
−
||Gedit text document opens.
+
||'''Gedit''' text document opens.
  
  
Line 407: Line 422:
  
 
Press Enter.
 
Press Enter.
−
||Back to the terminal.
 
  
 +
Type '''Clear''' at the prompt.
 +
||Back to the '''terminal'''.
  
−
I will now clear the terminal.
+
 
 +
I will now clear the '''terminal'''.
  
  
Line 421: Line 438:
  
 
Press Enter.
 
Press Enter.
−
||You should have the last character as x , as shown here.
+
||You should have the last character as '''x''', as shown here.
  
  
Line 435: Line 452:
  
 
press Enter
 
press Enter
−
||Now we need to restart apache.
+
||Now we need to restart '''apache'''.
  
−
Type the following command to restart the apache.
+
Type the following command to restart the '''apache''' and
−
 
+
press '''Enter'''.
−
 
+
−
 
+
−
press Enter
+
 
|-
 
|-
 
||Type, cd and press enter.
 
||Type, cd and press enter.
Line 448: Line 462:
 
|-
 
|-
 
||Double-click on''' jspage''' folder.
 
||Double-click on''' jspage''' folder.
−
||Open the''' jspage '''folder.
+
||Open the ''' jspage '''folder.
  
 
|-
 
|-
 
||Right-click on '''nbutane.html''', from the context menu select “Open with Other Application”.
 
||Right-click on '''nbutane.html''', from the context menu select “Open with Other Application”.
  
−
From the options choose “Text Editor”  
+
From the options choose “Text Editor”.
  
  
Line 469: Line 483:
  
  
−
Click on '''Select '''button on the top-right corner.
+
Click on '''Select ''' button on the top-right corner.
 
|-
 
|-
 
||Cursor on nbutane-1.HTML.
 
||Cursor on nbutane-1.HTML.
  
−
On line 12 type, “Conformations of n-butane” in place of “Title of the web page”.
+
On line 12 type, '''Conformations of n-butane''' in place of '''Title of the web page'''.
 
||The '''HTML''' page opens in the text editor.
 
||The '''HTML''' page opens in the text editor.
  
−
Scroll down to line number 12
+
Scroll down to line number 12.
  
 
Edit the title of the web page.
 
Edit the title of the web page.
Line 492: Line 506:
  
 
Jmol-14.32.76/jsmol/js/Jmol2.js
 
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.
+
||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.
+
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.  
+
The '''Jmol''' version you have downloaded may be different than shown here.  
  
 
Please edit the version number accordingly.
 
Please edit the version number accordingly.
Line 506: Line 520:
 
||The code to initialise '''JSmol''' is on line 15.  
 
||The code to initialise '''JSmol''' is on line 15.  
  
−
I will edit the version number here as 14.32.83
+
I will edit the version number here as 14.32.83.
 
|-
 
|-
−
||On line 49 type, “Conformations of n-butane” in place of “Title”.
+
||On line 49 type, '''Conformations of n-butane''' in place of '''Title'''.
 
||Scroll down.
 
||Scroll down.
  
Line 514: Line 528:
 
Edit the title on line number 49.
 
Edit the title on line number 49.
  
−
I will type `’'''Conformations of n-butane'''”.
+
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
Line 587: Line 601:
 
|-
 
|-
 
||Go back to the HTML page.
 
||Go back to the HTML page.
−
 
 
||If the expected button is not functional, go back and edit the HTML page in the text editor.
 
||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.
+
Check the '''Jsmol script''' commands for the buttons and checkboxes.
  
 
|-
 
|-
Line 615: Line 628:
  
  
−
'''Wireframe 0.05 ''' with in double quotes''', '''add a comma.
+
'''Wireframe 0.05 ''' with in double quotes, add a comma.
  
  
Line 639: Line 652:
  
  
−
Press Enter at the end of line 73 to create a new line.
+
Press '''Enter''' at the end of line 73 to create a new line.
  
  
Line 651: Line 664:
  
 
In place of the button name "Spin”" type again “background”.
 
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'''”
+
||Now on line 75 edit the '''Jmol script''' command to “'''background black'''” comma, “'''background white'''”
  
 
Edit the checkbox name to ”'''background”'''
 
Edit the checkbox name to ”'''background”'''
Line 668: Line 681:
  
  
−
If you have noticed, the first term in the quotations is the script command. The second term is the name of the button.
+
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.
 
The name of the checkbox is visible on the web page.
Line 696: Line 709:
  
 
* Created a '''JSmol integrated HTML''' text document.
 
* Created a '''JSmol integrated HTML''' text document.
 +
 
* Downloaded '''Jmol binary zip file'''
 
* Downloaded '''Jmol binary zip file'''
 +
 
* Installed '''Apache '''software  
 
* Installed '''Apache '''software  
 +
 
* Ran the '''JSmol''' HTML page locally using HTTP server, localhost 80
 
* Ran the '''JSmol''' HTML page locally using HTTP server, localhost 80
  
Line 716: Line 732:
  
 
'''Assignment '''
 
'''Assignment '''
−
||Create models of conformations of n-butane using Jmol.
+
||Create models of conformations of n-butane using '''Jmol'''.
  
 
Save the 3D models as .mol files.
 
Save the 3D models as .mol files.

Latest revision as of 17:19, 15 February 2023

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

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.


  1. Download the Jmol package and extract the contents.
  2. Extract Jsmol.zip file which is present inside the extracted Jmol package.
  3. Move the extracted Jsmol file to the jspage folder.
  4. Open nbutane.html file in a text editor.
  5. Edit the path of JSmol file in nbutane.html document. This step will integrate the JSmol program with the web page.
  6. Edit the nbutane.html text document to include 3D model files and text description.
  7. 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/

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.

Contributors and Content Editors

Madhurig, Snehalathak

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Jmol-Application/C4/Creating-a-Basic-JSmol-Integrated-Web-Page/English&oldid=56171"