FlaME: Flash Molecular Editor - a 2D structure input tool for the web.

BACKGROUND: So far, there have been no Flash-based web tools available for chemical structure input. The authors herein present a feasibility study, aiming at the development of a compact and easy-to-use 2D structure editor, using Adobe's Flash technology and its programming language, ActionScript. As a reference model application from the Java world, we selected the Java Molecular Editor (JME). In this feasibility study, we made an attempt to realize a subset of JME's functionality in the Flash Molecular Editor (FlaME) utility. These basic capabilities are: structure input, editing and depiction of single molecules, data import and export in molfile format. IMPLEMENTATION: The result of molecular diagram sketching in FlaME is accessible in V2000 molfile format. By integrating the molecular editor into a web page, its communication with the HTML elements on this page is established using the two JavaScript functions, getMol() and setMol(). In addition, structures can be copied to the system clipboard.
CONCLUSION: A first attempt was made to create a compact single-file application for 2D molecular structure input/editing on the web, based on Flash technology. With the application examples presented in this article, it could be demonstrated that the Flash methods are principally well-suited to provide the requisite communication between the Flash object (application) and the HTML elements on a web page, using JavaScript functions.

Background

About the Project

At present, there are various tools available for structure input on web pages, for example Marvin Sketch [1], PubChem Sketcher [2], NIST Molecule Editor [3] or JME [4]. The latter one is very popular because of its compact footprint and intuitive use. It has been utilized by many web developers (including the authors of this article) for sites with chemical content. Recently, a comprehensive review article [5] summarized the developments in this field. Prompted by the statement that so far no Flash-based web tool for structure input is available, we decided to undertake a feasibility study, aiming at the development of a compact and easy-to-use 2D structure editor, using Adobe's Flash technology and its programming language, ActionScript. As a reference model application from the Java world, we selected the Java Molecular Editor (JME). In this feasibility study, we made an attempt to realize a subset of JME's functionality in the FlaME utility (part I, this article). These basic capabilities are: structure input, editing and depiction of single molecules, data import and export in molfile format. As this is just the beginning of the project, we intend to continue and extend this work with additional features like reaction editing and the implementation of other data exchange formats (e.g., SMILES) (part II, in planning).

Objectives and expectations

The primary objective of this work has been to demonstrate a usable Flash application (written in Flash/ActionScript) for drawing and editing molecules directly within a HTML/JavaScript web page. The goals are as follows: a) we want to achieve the convenience of common structure editors such as ISIS (Symyx) Draw [6] or Marvin Sketch [1], which are easy and intuitive to use; b) at the same time the application should be compact - in other words: small and smart. As the data exchange format (result or output format), the well-documented and proven MDL MOL format V2000 [7] was chosen. This format is still very popular for structural data exchange and it is used by many databases and cheminformatics applications, despite its inherent limitations, e.g. with respect to the maximum number of atoms. The latter aspect, however, does not affect its suitability for FlaME, as this editor is primarily designed to handle "small molecules".

Results and discussion

The FlaME Molecular Editor: features - graphical user interface and layout

As mentioned above, the authors were inspired by the JME applet written by P. Ertl [4] when designing the layout of the graphical user interface (GUI). Nevertheless, we tried to create a typical and unique look-and-feel for our new tool (Figure 1). Actually, there should be no explanation needed for a novice user of FlaME. Users should immediately feel familiar with the buttons and functions in FlaME. Furthermore, tooltips are displayed in the right bottom area of the GUI which are activated by slowly moving the mouse pointer over the various buttons, thus facilitating use of the applet.

Figure 1

FlaME graphical user interface.

GUI buttons

The FlaME GUI is simple and all icons on the buttons should be intuitively understood. Figure 2 shows the icons and a description of the individual buttons.

Figure 2

Description of the GUI buttons.

Subjects and actions

Based on the definition of operations (drawing primitives) for molecular structure diagram sketching as discussed by A. M. Clark [8], we can define the subjects in FlaME as atoms and bonds. The actions implemented so far are as follows:

- add or delete atom

- add or delete bond

- add structure fragment (as pre-defined template structure)

- set or change the atom type (as a pre-defined element or as input via X-button)

- set or change the bond order

- set or change the stereo style (stereo marking)

- set or change the ionic charge

The element or group label will change automatically depending on element and current environment of the particular structure node (node environment).

Molecular structure output

The result of molecular diagram sketching in FlaME is accessible in V2000 molfile format [7]. This result can be copied to the system clipboard (by clicking the corresponding button). On the other hand, by integrating the molecular editor into a web page, its communication with the HTML elements on this page must be established. For this purpose, two JavaScript functions are implemented which are described below.

Flash Methods - JavaScript getMol() and setMol() functions

The Flash documentation states: "A Flash method is a JavaScript function that is specific to Flash movies. Use Flash methods to send JavaScript calls to Flash movies from a scripting environment." [9]

Using the Flash methods, two functions (getMol and setMol) were written: the function getMol() ensures that the structure drawn in the molecular editor will be copied as a molfile to a textarea field (id = "mol") within the web page for further use, e.g. as a query structure for a database search. The second JavaScript function setMol() sends the molfile from the web page to the Flash object, in our case to the FlaME molecular editor. The second line in this function just ensures compatibility with all common web browsers, such as Internet Explorer, Firefox, Opera, Chrome, Safari etc.

While the purpose of the getMol() function could be described as "export as MOL file", the setMol() function could be called "import MOL file" and it can be used for structure input in textual form for further structural modification using FlaME (see example 1).

function getMol() {

var m = thisMovie("flame").GetVariable("mol");

document.getElementById("mol").value = m;

}

function setMol() {

var m = document.getElementById("mol").value;

m = m.replace(/\r\n/g, "\r");

thisMovie("flame").send2Flame(m);

}

Drawing operations and template structures

The actions of FlaME implemented so far do not reflect all of the basic primitives for molecular diagram sketching, described previously [8]. It was not the purpose of this tool to cover all these possible functionalities, but to provide users (and developers) with an opportunity to use a rather compact input tool for chemistry-related websites. The standard template structures included in FlaME are: cyclopropane, cyclobutane, cyclopentane, cyclohexane, benzene, cycloheptane, and cyclooctane. Once placed in the drawing area, these structures can be edited by changing the bond order (single, double and triple), by changing the atom type (element), or by changing the stereo style (stereo marking).

Use of a special key

The Shift key on the computer keyboard can be used to modify some of the drawing operations of FlaME: whereas ring fusion (annulation) by clicking with a ring template on an existing ring bond normally produces a fully expanded condensed system, pressing the Shift key while clicking will cause the new ring to be flipped to the opposite direction (Figure 3, structure a). Similarly, adding a ring template to an existing ring atom normally produces two rings connected by a single bond, whereas the Shift key modifies this behavior and leads to a spiro ring system (Figure 3, structure b). Furthermore, by pressing the Shift key the user can prevent the delete operation from removing terminal ("orphan") atoms when a bond is deleted (Figure 3, structure c). The latter option can be used to create disconnected structures (e.g., salts) from a single molecule, thus providing a work-around for the current limitation of FlaME to handle only a single connection table.

Figure 3

Using the Shift key while editing a molecular structure.

Features which are not yet implemented

Compared to the JME applet, FlaME still lacks a number of features which may be implemented in future versions. For instance, there is currently support for only one connection table at a time. Thus, there is no mode available for reaction input and depiction. Special definitions for query atoms are limited to A, Q, and X (see below), while R groups are not yet supported. Moreover, at present the only data exchange format is the MDL molfile format (V2000), whereas SMILES export is still on the to-do list.

Implementation

Development environment

Flash applications are frequently used for advertisements and as games. Very useful applications have been also developed and widely employed for e-learning purposes. Flash as well as Java and JavaScript can be used to add interactivity to web pages using the programming language ActionScriipt, which has a similar syntax and semantics as JavaScript (or, more generally, is a dialect of ECMAScript). The FlaME application itself was developed using Adobe Flash Professional CS4, which provides an integrated development environment. It is equipped with a compiler which can produce either compact SWF files suitable for use on web pages, or so-called Windows-projectors or Macintosh-projectors which are platform-specific executables.

FlaME is a single-file Flash application. It was written in ActionScript (AS2) and compiled as a Flash 8 SWF file. Thus, this application requires a common web browser (Firefox, IE, Opera, Chrome, Safari etc.) and the Flash Player plug-in at least in version 8. According to Adobe: "Today, over 86% of Internet-connected computers have adopted the Flash Player version 9" [10].

Whereas there should be no principal (technical) problem to make use of an Adobe Flash Player also on Apple's mobile devices (iPhone, iPad and iPod touch), Apple has decided not to support Flash on these devices and therefore, applications such as FlaME cannot be used on them. However, essentially the same restriction applies to Java on the iPhone/iPad which also prevents Java-based structure editors from being employed on these mobile devices. Although there are some "inofficial" ways to install unsupported software on Apple's mobile devices, only a change in Apple's policy would lead to a general solution of this Flash/Java lack-of-support issue. It should be noted, however, that FlaME was developed for use on typical desktop computers rather than on mobile gadgets.

Limitations

Because of the inherent limitations of the V2000 MDL molfile format (see the CTfile formats description [7]) which is used by FlaME for data exchange, the maximum number of atoms is limited to 999.

FlaME application examples

In this section, three application examples are presented which have been built around FlaME and which are freely accessible on the web. A common web development practice is to use both an