Snehalathak at 11:49, 15 February 2023

2023-02-15T11:49:20Z

Snehalathak at 11:45, 15 February 2023

2023-02-15T11:45:13Z

Snehalathak at 11:40, 15 February 2023

2023-02-15T11:40:46Z

Snehalathak at 11:40, 15 February 2023

2023-02-15T11:40:00Z

Madhurig at 10:57, 15 February 2023

2023-02-15T10:57:39Z

Show changes

Madhurig at 10:26, 15 February 2023

2023-02-15T10:26:28Z

Show changes

Snehalathak: Created page with " {|border=1 ||'''Visual Cue''' ||'''Narration''' |- ||'''Slide Number 1''' '''Title Slide''' ||Welcome to this tutorial on '''Creating a Basic JSmol Integrated Web Page.'''..."

2023-02-15T05:33:53Z

Created page with " {|border=1 ||'''Visual Cue''' ||'''Narration''' |- ||'''Slide Number 1''' '''Title Slide''' ||Welcome to this tutorial on '''Creating a Basic JSmol Integrated Web Page.'''..."

New page

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

Open the terminal and type the following command

mv ~/Downloads/jspage ~/

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.

||Make a copy of '''example.html '''file, rename it as '''nbutane.html'''.

Save it in the same folder.

Right-click on the folder and choose rename option.

Rename as '''nbutane.html, '''click on''' rename '''button.

|-
||'''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 JS mol 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''' 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 – 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 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:

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

Press Enter.
|-
||Type

sudo gedit 000-default.conf

Press Enter.

||Next type the following command:

'''sudo gedit 000-default.conf'''

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.

'''cd /etc/apache2/ '''

Press Enter

Type the following command,

'''sudo gedit apache2.conf '''

Press Enter

|-
||Cursor on Gedit text document.

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

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

Edit the following commands as below.

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.
||Back to the terminal.

I will now clear the terminal.

Check for the permission by typing the following command

'''ls -ld ~ ~/jspage/'''

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.

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

|-
||Type,

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

press Enter
||Now we need to restart apache.

Type the following command to restart the apache.

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

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

Press enter.
|-
||http://localhost/nButane-1.HTML
||You can now see the web page you've 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"]<span style="color:#e06666;">,

["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
||Let us now add a checkbox to switch between background colours.

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

Copy the lines from 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'''”, “'''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 button.

The name of the button 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's 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 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.
|-
|}

← Older revision		Revision as of 11:49, 15 February 2023
Line 628:		Line 628:


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

← Older revision		Revision as of 11:40, 15 February 2023
Line 438:		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.

← Older revision		Revision as of 11:40, 15 February 2023
Line 438:		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 487: / Line 487: @@
 ||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.
@@ Line 522: / Line 522: @@
 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.
@@ Line 528: / Line 528: @@
 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

Jmol-Application/C4/Creating-a-Basic-JSmol-Integrated-Web-Page/English - Revision history

Snehalathak at 11:49, 15 February 2023

Snehalathak at 11:45, 15 February 2023

Snehalathak at 11:40, 15 February 2023

Snehalathak at 11:40, 15 February 2023

Madhurig at 10:57, 15 February 2023

Madhurig at 10:26, 15 February 2023

Snehalathak: Created page with " {|border=1 ||'''Visual Cue''' ||'''Narration''' |- ||'''Slide Number 1''' '''Title Slide''' ||Welcome to this tutorial on '''Creating a Basic JSmol Integrated Web Page.'''..."