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

From Script | Spoken-Tutorial
Jump to: navigation, search

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"