Depth-First: Tag jspecview

JavaScript for Cheminformatics: An Introduction to WebSpex, a Spectroscopy Tool for the Internet

Rich Apodaca — Thu, 17 Jul 2008 12:18:00 +0000

The previous article in this series discussed the untapped potential of JavaScript for building rich, chemistry-oriented Web applications. This article will describe the design of WebSpex, a spectrum viewer designed for the Web and written entirely in JavaScript.

Warning: Potential Vaporware Ahead

WebSpex can't yet be download or deployed, and it may never be finished. Articles like this one will document the tool's transition from concept to hopefully something more substantial. There may be false-starts and dead-ends along the way. But I'm hoping that there will also be feedback from readers like you. Feel free to chime in, regardless of your background.

This process will be necessarily non-linear. But I believe that being able to incorporate feedback in real-time increases the chances of creating a better product, and seeing mistakes, false-starts, and dead-ends in context can be useful to everyone.

The Problem

Of all the forms of chemical data generated in labs around the world today, spectra are one of the most common. Although several tools can display and manipulate these data, few are capable of being used on the Web. If you agree with the hypothesis that the Web is fast becoming the only information exchange platform that matters, this presents a significant problem (or opportunity, depending on your perspective).

Recently, a series of articles on the Web-based spectroscopy tool JSpecView appeared here. JSpecView is one of the only free tools currently available that enables spectra to be displayed and manipulated on the Web.

JSpecView is written in Java and deployed as an applet. In very many situations, applets are the best technology for delivering interactive Web content of the kind required by spectroscopy.

But no technology is perfect. One of the biggest limitations of applets is that they require the correct version of the Java plug-in to be installed on a users' machine (a limitation shared by all plug-in technologies, including Flash). In situations where users either can't or won't install the plugin, or in which adequate resources are not available to ensure smooth applet deployment, Java applets may not be the best technology platform.

What if there were a spectroscopy tool that worked on any browser without any plugin dependencies?

Scenarios

For a better idea of what WebSpex will be about, consider some scenarios:

Viewing Sally logs into her research group's spectroscopy archive website. She clicks on the link to her most recently-collected IR spectrum and is taken to a page displaying an image of her spectrum along with textual metadata.

Zooming Fred is viewing an IR spectrum published on a chemical supplier's Website. Wanting a better view of the fingerprint region, he uses the mouse to zoom the spectrum.

Peak Picking Victor is using a publisher website to view the IR spectrum of a compound described in a recent paper. Wanting to match the carbonyl stretching frequency of the material he prepared, he uses the mouse to pick the peak.

Data

WebSpex will use as its input format JCAMP-DX, the de facto standard for spectral data encoding. Although JCAMP-DX has been extended in many ways over the last several years, for now the goal of WebSpex will be to simply read and display error-free examples of the original format specification.

Conclusions

Good Web-based spectroscopy tools are a prerequisite for the open sharing of this important form of experimental data. WebSpex could fill this need by providing an installation-free tool that can be used in any browser without plugins. Currently consisting of nothing more than just some ideas, WebSpex successes and failures will be documented here in several installments.

Image Credit: estaticist

Hacking JSpecView: Enhancing the User Interface

Rich Apodaca — Fri, 01 Feb 2008 11:25:00 +0000

The last installment of this series showed how to set up an HTML testing harness for JSpecView. With the preliminaries taken care of, this installment will show how to enhance the user interface.

The Goal

The live applet shown above illustrates the changes that were made. As you move your mouse cursor into the spectrum area, you'll see a vertical red line appear and track the movements of the mouse. As you presss the mouse key to begin a selection, a grey rectangle will show you exactly where the selection area will be.

If you can't view the applet, be sure you system has JDK 1.5 or higher installed, and that you've enabled applets for your browser.

Clearly, these modifications need more work. For example, you can extend the selection box outside the boundary of the spectrum area. And green might be a better color for the cursor. Then again, maybe the cursor should use an alpha channel. But I digress.

One More Thing

Being a longtime Eclipse user, I prefer this tool for my Java development. So far, only the use of Ant has been described. Fortunately, Eclipse offers an elegant way to import an existing Ant project. File->New gives a dialog like the one shown below:

Selecting "Java Project from Existing Ant Buildfile" gives this dialog:

Filling in the fields as shown should give a fully-functional Eclipse project.

Still One More Thing

If you check the HTML source for this page, you'll notice that the applet tag is used to display the applet. Yet on Internet Explorer, there is no "click to activate" message. The reason is that Depth-First is using the excellent JavaScript library JActivating, which re-writes the applet tag so that it isn't detected by the Eolas workaround. This lets us stick with plain HTML, rather than using document.write to specify the applet.

Changing the Source Code

Too many changes were made to detail individually. In general, they related to:

Removing non-applet classes such as those involved with the desktop application.
Removing code flagged by Eclipse as unused.
Editing the jspecview.common.JSVPanel source to add the UI modifications. The drawGraph, drawCursor, and drawZoomBox methods contained most of the changes.

The complete Eclipse project should be available from SourceForge shortly.

Conclusions

Given the right tools, modifying JSpecView is not that difficult. We've gone from raw souce code to a complete Eclipse project, and even added some functionality in the process.

Where would you like to take JSpecView?

Hacking JSpecView: Creating an HTML Test Harness

Rich Apodaca — Mon, 28 Jan 2008 10:37:00 +0000

The previous article in this series discussed the construction of an Ant build environment for JSpecView. This article will show how to use Ant to build an HTML harness to test the resulting Applet and jarfile.

Availability of Source Code

Robert Lancashire, the lead JSpecView developer, has kindly agreed to host the complete source code for this series of tutorials on the JSpecView SourceForge project page.

Overview

Our goal for this session is to create an Ant task that will assemble a directory of HTML pages for testing the JSpecView applet. To do this, we'll add a new demo task and some supporting files.

Editing the build.xml File

The main change we'll make is to add the demo task itself:

<target name="demo" depends="jar">
  <mkdir dir="${demo}" />
  <copy todir="${demo}">
    <fileset dir="${resources-html}" />
  </copy>
  <copy file="${build-lib}/${unix-name}-${version}.jar" tofile="${demo}/lib/${unix-name}.jar" />
</target>

This task creates a demo directory and copies into it the contents of a new resources/html directory, along with the jarfile built with the jar task.

Other changes to the build.xml file are necessary. In the interest of brevity, they have been omitted. Those interested should download the source package to be available shortly.

Creating the resources Directory

Think of the resources directory as a place to hold non-Java files that will get used by our Ant tasks. Our first addition to this directory will be a directory called html. Here, we'll create a new directory called demo1. It will contain an HTML document with an embedded JSpecView applet (index.html), along with a JCAMP-DX file (netanilineH.jdx) and the excellent JActivating JavaScript tool.

Using the `demo` Task

We can run our new demo task just like the others:

$ ant demo Buildfile: build.xml init: [mkdir] Created dir: /home/rich/devel/proj/jspecview/build [mkdir] Created dir: /home/rich/devel/proj/jspecview/build/classes [mkdir] Created dir: /home/rich/devel/proj/jspecview/build/lib compile: [javac] Compiling 48 source files to /home/rich/devel/proj/jspecview/build/classes jar: [jar] Building jar: /home/rich/devel/proj/jspecview/build/lib/jspecview-20080128.jar demo: [mkdir] Created dir: /home/rich/devel/proj/jspecview/demo [copy] Copying 3 files to /home/rich/devel/proj/jspecview/demo [copy] Copying 1 file to /home/rich/devel/proj/jspecview/demo/lib BUILD SUCCESSFUL Total time: 3 seconds

If all went well, you should see a new demo directory with the following structure:

Viewing the Result

You can view the result online here. The applet loads and displays the JCAMP-DX file netanilineH.jdx. Notice that the spectrum is interactive; zoom and display properties can be set by right-clicking in the applet Window.

Conclusions

This tutorial has show how to build a simple HTML test harness for JSpecView. With this important step complete, we can begin to customize JSpecView itself. Future tutorials will show how.

Hacking JSpecView: Getting Organized with Ant

Rich Apodaca — Wed, 23 Jan 2008 10:28:00 +0000

JSpecView is a general-purpose X-Y data viewer suitable for Web applications. The previous article in this series introduced JSpecView and discussed the importance of this kind of software in building rich, chemically-aware Web applications. This article will illustrate one way to set up the JSpecView build environment to easily enable extensions and modifications to be outlined in articles that will follow.

Prerequisites

This tutorial will use Apache Ant. For those unfamiliar with it, Ant is a platform-independent build tool like make. It automates the drudgery of compiling software and building its accessories such as documentation, jar files, and so on. Although far from perfect, Ant is the most widely-used Java build tool.

Configure Your Build Directory

Download and unpack the most recent version of the JSpecView source distribution ("2008Jan13" as of this writing) into a directory of your choice. When finished, you should end up with a directory structure like this:

Now, re-arrange the files and directories:

Create a new directory called src to hold source files and lib to hold external libraries.
Move jspecview, mdidesktop, and test into the new src directory.
Delete META-INF
Add an empty file called build.xml

When finished, your new directory structure should look like this:

Adding External Libraries

Compiling JSpecView in its current form requires two external libraries - let's add them now.

The first library is the LiveConnect JavaScript library named plugin.jar. It can be found in your Java Developer Kit. It's typically located under the jre/lib directory. Copy this file into your JSpecView lib directory.

The second library we'll need is Velocity. Copy the Velocity-1.5 jarfile into your JSpecView lib directory.

Create build.xml

All that remains is to create an Ant build.xml file. There are many ways to do this; the file presented below is but one of them:

<?xml version="1.0"?>

<project name="JSpecView" default="compile" basedir=".">
  <description>
    A JCamp-DX Viewer
  </description>
  <property name="full-name" value="JSpecView" />
  <property name="short-name" value="JSpecView" />
  <property name="unix-name" value="jspecview" />
  <property name="version" value="20080113" />
  <property name="img" location="icons" />
  <property name="src" location="src" />
  <property name="lib" location="lib" />
  <property name="build" location="build" />
  <property name="build-classes" location="build/classes" />
  <property name="build-lib" location="build/lib" />
  <property name="doc" location="doc" />
  <property name="dist" location="dist" />
  <property name="bin-dist" location="${dist}/bin" />
  <property name="src-dist" location="${dist}/src" />

  <target name="compile" depends="init" description="compile the source">
    <javac srcdir="${src}" destdir="${build-classes}" debug="on" source="1.5" target="1.5">
      <classpath>
        <fileset dir="${lib}">
          <include name="**/*.jar" />
        </fileset>
      </classpath>
    </javac>
  </target>

  <target name="jar" depends="compile">
    <jar jarfile="${build-lib}/${unix-name}-${version}.jar" basedir="${build-classes}" >
    </jar>
  </target>

  <target name="init">
    <mkdir dir="${build}" />
    <mkdir dir="${build-classes}" />
    <mkdir dir="${build-lib}" />
  </target>

  <target name="doc" depends="compile" description="create the full api documentation">
    <javadoc sourcepath="${src}" packagenames="*" destdir="${doc}" windowtitle="${short-name} API">
      <doctitle>${full-name} v${version}</doctitle>
        <header>${full-name} v${version}</header>
      <classpath>
        <fileset dir="${lib}">
          <include name="**/*.jar" />
        </fileset>
      </classpath>
    </javadoc>
  </target>

  <target name="clean" description="remove dist, doc, and build directories">
    <delete dir="${build}" />
    <delete dir="${dist}" />
    <delete dir="${doc}" />
  </target>
</project>

The purpose of this file is to create five general-purpose scripts: compile, jar, init, doc, and clean.

Compiling the Jarfile and Documentation

The build.xml file can be tested by using it to compile the JSpecView source:

$ ant
Buildfile: build.xml

init:
    [mkdir] Created dir: /home/rich/devel/proj/jspecview/build
    [mkdir] Created dir: /home/rich/devel/proj/jspecview/build/classes
    [mkdir] Created dir: /home/rich/devel/proj/jspecview/build/lib

compile:
    [javac] Compiling 48 source files to /home/rich/devel/proj/jspecview/build/classes

BUILD SUCCESSFUL
Total time: 3 seconds

If you don't get this result, make sure your libraries are installed in the lib directory and that you've moved all Java sourcecode directories into the src directory.

We can build a JSpecView jarfile just as easily:

$ ant jar
Buildfile: build.xml

init:

compile:

jar:
      [jar] Building jar: /home/rich/devel/proj/jspecview/build/lib/jspecview-20080113.jar

BUILD SUCCESSFUL
Total time: 1 second

As you can see from the output, the jarfile has been placed into the build/lib directory.

We can also create JavaDoc documentation:

$ ant doc
Buildfile: build.xml

init:

compile:

doc:
  [javadoc] Generating Javadoc
  [javadoc] Javadoc execution
  [javadoc] Creating destination directory: "/home/rich/devel/proj/jspecview/doc/"
  [javadoc] Loading source files for package jspecview.applet...
  [javadoc] Loading source files for package jspecview.application...
  [javadoc] Loading source files for package jspecview.common...
  [javadoc] Loading source files for package jspecview.exception...
  [javadoc] Loading source files for package jspecview.util...
  [javadoc] Loading source files for package jspecview.xml...
  [javadoc] Loading source files for package mdidesktop...
  [javadoc] Loading source files for package test...
  [javadoc] Constructing Javadoc information...
  [javadoc] /home/rich/devel/proj/jspecview/src/jspecview/util/DisplaySchemesProcessor.java:31: package org.apache.xerces.parsers does not exist
  [javadoc] import org.apache.xerces.parsers.DOMParser;
  [javadoc]                                 ^
  [javadoc] Standard Doclet version 1.6.0_01
  [javadoc] Building tree for all the packages and classes...
  [javadoc] Building index for all the packages and classes...
  [javadoc] Building index for all classes...
  [javadoc] Generating /home/rich/devel/proj/jspecview/doc/stylesheet.css...
  [javadoc] 1 warning

BUILD SUCCESSFUL
Total time: 10 seconds

The result is placed into a new doc directory. As you can see from the output above, there was a problem finding the Xerces DOMParser, a library we may need to include in the lib directory for future iterations.

To clean up the directories our script created, we simply use:

$ ant clean
Buildfile: build.xml

clean:
   [delete] Deleting directory /home/rich/devel/proj/jspecview/build
   [delete] Deleting directory /home/rich/devel/proj/jspecview/doc

BUILD SUCCESSFUL
Total time: 0 seconds

Conclusions

With a build environment configured and working, we can move on to building a test harness and making modifications. But that's a story for another time.

An Introduction to JSpecView

Rich Apodaca — Tue, 22 Jan 2008 11:14:00 +0000

Like chemical structures, X-Y graphical data such as NMRs, chromatograms, mass spectra, and IRs are a ubiquitous and essential part of the language of chemistry. Although many software tools have been developed for sharing and manipulating X-Y data, few of them are suited for use on the Web. This article, the first in a series, introduces one X-Y data tool that can be used with the Web, JSpecView.

Jean-Claude Bradley's introductory video gives a feel for what JSpecView is capable of. Another overview is available in the Chemistry Central JSpecView article written by JSpecView's project lead, Robert Lancashire. Here are some of the highlights:

Displays full range of JCAMP-DX formats and protocols.
Zoom in and out.
NMR integration.
Absorbance/Transmission toggle for IR spectra.
Multiple plot overlap.
Browser-scriptable with JavaScript.
JDK 1.5 and above.

A number of JSpecView demonstrations are available. Some of the most illustrative include:

JSpecView is Open Source software licensed under the LGPL. The SourceForge Project Page hosts the source code, documentation, and subversion repository.

Future articles will discuss JSpecView from the developer perspective, including ways to build, deploy, extend, and adapt it.

Depth-First: Tag jspecview

JavaScript for Cheminformatics: An Introduction to WebSpex, a Spectroscopy Tool for the Internet

Warning: Potential Vaporware Ahead

The Problem

Scenarios

Data

Conclusions

Hacking JSpecView: Enhancing the User Interface

The Goal

One More Thing

Still One More Thing

Changing the Source Code

Conclusions

Hacking JSpecView: Creating an HTML Test Harness

Availability of Source Code

Overview

Editing the build.xml File

Creating the resources Directory

Using the demo Task

Viewing the Result

Conclusions

Hacking JSpecView: Getting Organized with Ant

Prerequisites

Configure Your Build Directory

Adding External Libraries

Create build.xml

Compiling the Jarfile and Documentation

Conclusions

An Introduction to JSpecView

Using the `demo` Task