Integration of the combined JSmol/JSpecView molecular viewer/spectral viewer software in the Eureka Research Workbench. Can display molecular structures, spectra and the linked version where clicking on a peak shows molecular movement (IR).

1. Integrating Jmol/JSpecView into
the Eureka Research Workbench
Israel Hurst, Matthew Morse, and Stuart J. Chalk
Department of Chemistry
University of North Florida
schalk@unf.edu
2014 Fall ACS Meeting

2. Outline
 Motivation
 What is Eureka?
 What is JSmol?
 What is JSpecView?
 Integrating Jsmol into Eureka
 Using JSpecView
 Using JCAMP-MOL files
 Generating JCAMP-MOL files
 Future Plans
 Conclusion

3. Motivation
 All Electronic Laboratory Notebooks need to display
 Molecular structures
 Instrument Data
 Jmol (a Java Applet) has be the standard, open
source molecular viewer for the last 20 years
 Jmol now incorporates JSpecView (also Java)
 Jsmol is the javascript version of Jmol -> HTML 5

4. Electronic Notebooks
 Scientists need to move to
digital notebooks…
 ...and record not just the data
but the flow and context
 How science is done
is important for searching,
aggregation, meta-analysis
 We need more than an electronic version of a notebook
 We need a science version of “Second Life” (SciLife?)

5. Eureka Research Workbench (ERW)
 Started in 2006 after getting involved in the
Analytical Information Markup Language (AnIML) project
 Store all research notes/data in a digital format
 Capture the workflow of scientists
 Writing in a lab notebook is equivalent to
“multi-type” blogging in the digital world
 How to capture information? Many data types! (ExptML)
 How to store files “online”? (Fedora-Commons)
 How to access files in the browser? (CakePHP)
 How to represent laboratory resources? (ExptML)
 How to link data together? RDF (in Fedora-Commons)

6. Experiment Markup Language (ExptML)
 A specification (written in XML) that describes different
types of information recorded during the scientific process
(http://exptml.sourceforge.net)
 Sample
 Solution
 Space
 Specimen
 Substance
 Task
 Template
 Timeline
 User
 Vendor
 Annotation
 Api
 Calculation
 Chemical
 Citation
 Customer
 Data
 Dataset
 Definition
 Element
 Equipment
 Event
 Experiment
 Group
 Message
 Project
 Protocol
 Quote
 Report
 Result

7. What is Jmol?
 Java application, applet and viewer for chemical
structures in 3D (http://www.jmol.org/)
 Developer Dr. Robert Hansen (+ many others)
 Open source, cross platform since 2001
 Display of over 30 chemical structure formats
 Animations, vibrations, surfaces, orbitals
 Support for unit cell and symmetry operations
 Measurements – distance, angle, torsion angle
 Support for RasMol/Chime scripting language
 JavaScript support library (Jmol.js)
 Exports to jpg, png, gif, ppm, pdf, …

8. What is JSpecView?
 Java based application and applet (for web viewing)
 Developer Dr. Robert Lancashire
 Licensed version 2001, open source since 2006
 Display/print JCAMP-DX, AnIML, and CMLspec files
 Highlighting, zooming, coordinate data
 Absorbance/Transmittance conversion (UV/Vis and IR)
 Predict the colour of a Visible spectrum
 Integrate H NMR spectra
 Java scripting and Live Connect support
 Export JCAMP-DX, AnIML, CML, JPG, PNG or SVG

9. Integrating Jsmol into Eureka
 Eureka is built using the CakePHP framework
 CakePHP uses the Model-View-Controller software
architecture paradigm
 Model – interaction with database/datasource
 View – display of web page
 Controller – logic to take data from model to view
 Jsmol best implemented as a plugin
 Jsmol has ‘datasource’ – file that is to be displayed

10. CakePHP MVC
 Views are made up of
base code and ‘elements’
 Elements are reusable
code snippets that can be
displayed on any page
 For optimum
functionality display
Jsmol via an element

11. Jsmol CakePHP Plugin
 Architecture of plugin the
same as the main CakePHP
application
 Issues to overcome
 Jsmol likes files in a certain
location relative to the main
javascript file (Jsmol.min.js)
 CakePHP does not allow access
to non-PHP files in folders
containing view files
 How to integrate?

12. Jsmol CakePHP Plugin
 Convoluted scheme finally allowed integration
 File in plugin ‘webroot’ folder contains Jsmol code
 This file is called by view file via an iframe
 Display parameters are sent via GET variables on
iframe URL and retrieved by javascript
 Element file uses CakePHP ‘requestAction’ function to
display view file code
 echo $this->element('Jmol.molecule’,array(…));

16. Future Plans
 Add more GUI options to control look and feel of JSmol
 Add ability to link spectral features to molecule
 Add other molecular and spectral viewers to Eureka so
users can customize the interface

17. Conclusion
 Building out Eureka with ‘plugin’ features is a great
way to enhance the usefulness of the system
 Providing a tutorial on how to build functionality into
Eureka will encourage users to add what they need
for their research
 Move Eureka code development to GitHub 

18. Questions?
 schalk@unf.edu
 Phone: 904-620-5311
 Skype: stuartchalk
 LinkedIn/Slidehare: https://www.linkedin.com/in/stuchalk
 ORCID: http://orcid.org/0000-0002-0703-7776
 ResearcherID: http://www.researcherid.com/rid/D-8577-2013