ChemDoodleSpectra

Progress

The open source ChemDoodle Web Components render chemical graphics and perform cheminformatics functions in web browsers. They are written in Javascript and are based on HTML5/Canvas/WebGL. The library is lightweight, optimized for efficiency and is only 100KB in size! The technology is derived from the ChemDoodle desktop application, which is becoming increasingly popular. ChemDoodle contains an entire interface for generating ChemDoodle Web Components from your drawings.

ChemDoodle Web Components are now supported in all major browsers (Internet Explorer, Safari, Firefox, Chrome, Opera) and are supported on mobile devices (including iPhone OS Mobile Safari and Android Browser). The library is very small, pages load incredibly fast, and the algorithms and Javascript are optimized for fast and efficient performance.

Institutions from all around the world are now using ChemDoodle Web Components in their webpages and web applications. Dr. Samuel Bertrand uses them to render graphics for his siderophore database. The ChemExper database has partnered with us and is utilizing ChemDoodle Web Components for both desktop and mobile applications. ChemSpider has also partnered with us and is integrating ChemDoodle Web Components into their services. Other companies are using them for in-house applications and we are pursuing other partnerships.

In addition to being adopted by service providers, ChemDoodle Web Components are used to teach HTML5 and to demonstrate HTML5 technologies. Harvard is using them to teach website development. Vladimir Vukićević from the Mozilla (Firefox) team presents ChemDoodle Web Components as a significant application of WebGL technology. Several browser vendors even use ChemDoodle Web Components to test their development.

HTML5 is the technology of the future. It is completely platform independent, supported on mobile devices and allows for seamless integration of web services. Using the open source ChemDoodle Web Components, you can freely develop applications without worrying about rendering and you can do it quickly. For companies, ChemDoodle Web Components is a business critical tool and many companies are now considering how to employ it.

ChemDoodle Web Components 3.5

ChemDoodle Web Components have seen two major updates since the last article. For complete details of the changes, visit the ChemDoodle Web Component changelog.

1. 3.1.0, July 21st, 2010: Major additions in this release were the rendering of implicit hydrogens in 2D components and an advanced framework for handling touch events and gestures from mobile devices. iPhone OS and Android support was added.
2. 3.5.0, August 15th, 2010: Components for spectra and reactions have been added. The entire library has been optimized to significantly improve performance across browsers and to minimize size, including the removal of several external libraries. 3D ChemDoodle Web Components have also been optimized and updated to reflect recent retrospective changes to the development browsers.

Spectra

Spectra can now be displayed with ChemDoodle Web Components. All spectrum Canvases are fully customizable. Two new Canvases are provided:

1. Observers – Render a static image of a spectrum.
2. Perspectives – Display an interactive spectrum where users can zoom in on portions of the spectrum or individual peaks.

ChemDoodle Web Components contains an interpreter for reading JCAMP-DX files, which has become the standard for spectral data. All JCAMP-DX compression formats are read. Other descriptors such as title, x-axis and y-axis units are also read and displayed. The spectra are fully customizable so you can control how they appear. You can override the domain of the spectrum and any titles. Grids and integration lines can also be added with a simple setting.

Reactions

Graphics for reactions can also now be displayed using a new component type, called Layout. Layouts define how a group of related Canvases are displayed relative to each other and if any other HTML decorations will be present. For instance, reactions can contain several molecules, a reaction arrow with text and plus symbols. ChemDoodle Web Components provides a SimpleReactionLayout class which allows for adding constituent reactants and products and allows you to set the plus symbol style, reaction arrow display, and any reaction arrow text. The Layout will then take care of placing and drawing the reaction in a webpage.

Mobile Devices

Mobile devices are becoming a significant part of a scientist’s life. That being said, chemists will experience a majority of their interaction with mobile devices through web pages. ChemDoodle Web Components are fully supported on iPhone OS and Android. Rendering is perfect and the mobile browser Javascript engines are top quality. Additionally, ChemDoodle Web Components now support mobile touch events and gestures so users can interact with them on their phones. By default, the mobile touch events are mapped to mouse events so a minimal amount of code can be written. However, the system allows for much finer handling of mobile events so that any gestures (swipes, pinches, three-finger taps, etc.) can be supported through the components.

WebGL Updates

We have been making sure that the 3D ChemDoodle Web Components are kept up-to-date and work in the development browsers. WebGL technology is looking even more promising now that Java applets and Flash will not be supported on mobile devices like the iPhone and iPad. The WebGL team is trying to freeze the specification in September. This means that WebGL will likely go live in the browsers before the end of the year. Noting that iPhone OS Mobile Safari and Android Browser have been leaders in supporting HTML5, it is very likely that they will also be updated to support WebGL as soon as possible.

Performance

Since the ChemDoodle Web Components library was released one year ago, it has been improved and enhanced for performance in browsers. All Javascript source adheres to the best practices for efficiency. Our graphics are built on the low level Canvas and WebGL APIs, and no 3rd party graphics libraries will ever be used, so users do not need to worry that any dependency will bring inefficiencies, problems or will stop being supported altogether. We also implemented very efficient algorithms for ring perception, file reading and other computationally intensive functions. Altogether, ChemDoodle Web Components is a very fast, lightweight, and high quality library for rendering chemical graphics in web platforms.

Internet Explorer 9

Internet Explorer 9 will be supporting HTML5 Canvas. The IE 9 beta will be released in September, and ChemDoodle Web Components should work without issues. We will be working with the beta just in case any issues are encountered. WebGL has not yet been discussed by the IE team, but it is likely a priority for them.

Future Pursuits

In its current state, ChemDoodle Web Components v3.5 is very thorough and well supported. Our main goal is to now dedicate our efforts to serving our collaborators and customers. Other goals include a full-featured chemical sketching component that will provide an interface for web browsers and mobile devices. And as WebGL progresses towards an official release, we will ensure that the 3D ChemDoodle Web Components remain functional and efficient.

If you are interested in working with us, please contact us, as this technology is being adopted across the entire chemical industry. And if you are working with ChemDoodle Web Components, please send us a link to your project.