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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {|border=1 ||'''Visual Cue''' ||'''Narration''' |- ||'''Slide Number 1''' '''Title Slide''' ||Welcome to this tutorial on '''Editing the JSmol Integrated Web Page.''' |- ||...")
 
Line 33: Line 33:
  
 
* '''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
−
 
  
 
* '''Gedit''' version 3.36.2
 
* '''Gedit''' version 3.36.2
−
 
  
 
* '''Jmol/ Jsmol''' version 14.32.83
 
* '''Jmol/ Jsmol''' version 14.32.83
Line 55: Line 51:
  
 
* 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.
−
 
  
 
* script commands in '''Jmol'''  
 
* script commands in '''Jmol'''  
Line 84: Line 77:
  
  
−
||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.
 
|-
 
|-
 
||Show the Downloads folder, cursor on the downloaded Code files.  
 
||Show the Downloads folder, cursor on the downloaded Code files.  
Line 117: Line 112:
 
|-
 
|-
 
||Show Home directory.
 
||Show Home directory.
−
 
  
 
Double-click on '''jspage''' folder.
 
Double-click on '''jspage''' folder.
−
 
−
 
−
 
  
 
Cursor on the files.
 
Cursor on the files.
−
 
−
 
−
 
  
 
Click on the files to open the files and show the content.  
 
Click on the files to open the files and show the content.  
−
 
−
 
  
 
|| I will open the '''jspage''' folder by double-clicking on it.
 
|| I will open the '''jspage''' folder by double-clicking on it.
Line 188: Line 174:
  
 
I will also add some script commands to animate the 3D models.
 
I will also add some script commands to animate the 3D models.
−
 
  
  

Revision as of 17:33, 2 March 2023

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


Double-click on jmol-14.32.83 file.


Cursor on jsmol file.

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


On line 80, in place of test2.mol, type, 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. 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 102, 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 word 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 label checkbox.

Cursor on the text editor.


Line 91

Now let us add an animation button to eclipsed-nbutane 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=56184"