ChemDoodle Web Components updated
iChemLabs announced the release of version 8 of the ChemDoodle Web Components, the largest update of the library to date. The ChemDoodle Web Components is an industry leading HTML5 toolkit for building scientific applications for web and mobile platforms. The ChemDoodle Web Components are licensed under the open source GPLv3 license or under a commercial license.
Executive Summary: Version 8 is the largest update to the ChemDoodle Web Components library to date. The sketcher has seen significant work, with new drawing tools (rings, chains, templates, atom label tool, more). Condensed labels with abbreviations are now supported, for advanced chemistry. New 2D shapes include dynamic brackets, atom mappings and variable attachment points, while molecular surfaces (vdW, SAS, Connolly) can now be generated and rendered in 3D components. The shader system used by the 3D components has been dramatically improved for much faster performance (and new improvements added like gamma correction) and a deferred shader has been implemented to provide advanced graphics techniques like outlining, software antialiasing and screen space ambient occlusion. Shadows can now be rendered in 3D scenes. The entire website has also been improved, with new advanced tutorials for working with the sketcher to listen to user changes, or show off an advanced in browser sketcher interface that mimics the desktop software, for instance. SVG can now be exported from the ChemDoodle Web Components in addition to PNG. A new iChemLabs Cloud service allows developers to match entire mechanisms for educational eBooks and advanced reaction databases. There is a lot in this update, please see the links below for more information.
- The sketcher has been significantly developed. A new requireStartingAtom option allows you to disable to starting atom requirement while sketching. A new resizable option enables the user to resize the sketcher canvas. A new floatDrawTools option uses a floating toolbar for the drawing tools, just like the desktop software. Several new tools have been added, including an arbitrary ring size and arbitrary chain size tool. An atom label tool has been added with a text input field (like in the desktop software) to enter custom atom labels, including advanced condensed labels; space will open the text field by keyboard while the return or enter key will close it or repeat the last typed label for a hovered atom. Templates can now be added in the same manner as the desktop software using the new Templates widget; you can modify and add to the template library. The MolGrabber widget now allows the loading of any content (multiple molecules and shapes) and will insert the content in its entirety to the canvas. The MolGrabber widget will now also alert you if you press the Load button before the Show button. New buttons are available for centering the content in the sketcher as well as for horizontal and vertical flipping. The Open dialog now slides down from the toolbar as a Popover. The lasso tool and selections now use a dashed line just like in the desktop software. When using the labels tools in the sketcher, the periodic table canvas now selects oxygen by default and will revert back to label mode of the currently selected element if chosen from the toolbar. Silicon has been added to the default labels group. Placing unsaturated rings (like benzene) now better lay out double bonds to avoid overvalencing atoms. Hovering bonds are now more responsive, especially for elongated bonds. Pushers now can be set by clicking and then clicking again, no drag necessary.
- A new UIs component has been added, called Popover. A Popover is modal and can slide in from other components or appear in its own component for user input.
- Added mobile support for the UIs interface elements. For example, previously dialogs couldnt be moved on mobile devices, now they can.
- Complex labels can now be handled, with the required additional tools for parsing, formatting and rendering. With this feature, your chemical structures can contain advanced chemical labels consisting of element symbols, abbreviations (a dictionary controlled by you) and numbers and parenthesis for multiplicities. The labels are automatically formatted chemically and oriented based on least interference with surrounding bonds. Some examples include COOH, CO2Me, N3, CH2(CH2)4OH, C3H7O, Tosyl, myAbbreviation, and more. Use this to create concise publication quality figures directly in your websites.
- Added a wavy bond type.
- New shapes have been included. New 2D shapes include dynamic brackets for repeating groups, atom mappings for reactions and variable attachment points (VAPs). New 3D shapes include molecular surfaces. The ChemDoodle JSON specification has been updated to support these shapes.
- Molecular surfaces can now be generated and rendered for sets of atoms in 3D. Supported types include van der Waals, solvent accessible and solvent excluded (also known as a Connolly surface). You can control resolutions for all and the probe radius for solvent based surfaces. Rendering styles include Dots, Mesh and Solid and all colors, transparency, etc. can be controlled through visual specifications.
- The shader system for the 3D components has been redone. Several improvements in the Phong shader allow us to render higher quality graphics with lower quality meshes, leading to significant performance improvements across the entire 3D ChemDoodle Web Components.
- A deferred shader system has been developed allowing the implementation of advanced shader procedures for generating graphics. Currently implemented are outlining, screen space ambient occlusion (SSAO) and software antialiasing (FXAA). SSAO in particular is very powerful as it allows us to simulate how much ambient light is accessible to objects in crowded spaces, allowing us to shade the scene in a more accurate manner. This works on all geometries, but the feature can really be shown off in space filling all-atom models of large macromolecules.
- Shadows can now be rendered in 3D scenes. You can control the intensity of the shadows with the shadowintensity3D visual specification.
- Gamma correction has been implemented for brighter, more color accurate rendering controlled by the gammaCorrection_3D visual specification.
- The VisualSpecifications class now provides a copy() function for creating style sheet copies.
- Added a new bond visual specification for absolute saturation widths: bondsuseAbsoluteSaturationWidths2D.
- Bonds now split colors based on their substituent atom colors, with the bondssplitColor visual specification. The bondsuseJMOLColors and bonds_usePYMOLColors specifications have been removed. Use the corresponding atom specifications instead.
- Made wedge width an absolute value in line with desktop software with a default value of 6.
- Components now center 2D content much more pleasantly by calculating bounds of atom labels in addition to coordinates and using a constant internal padding.
- The preview, hover, select and error colors are now controlled by visual specifications.
- A new iChemLabs Cloud call, mechanismMatch(), is now provided to match mechanisms. You can see it in action here.
- Updated van der Waals radii data.
- Added the rest of the new elements as defined by IUPAC.
- Updated the library to use some newer standardized HTML5 functions, removing the polyfills from the ChemDoodle.extensions package.
- The PNG package has been refactored to provide both an open() function for loading the PNG into a new window and a string() method for creating a string object of the PNG content.
- A new SVG package has been added to create Scalable Vector Graphics data from the ChemDoodle Web Components, similar to the PNG package for bitmap graphics.
- Minor graphical improvements for the UIs decorations.
- Updated jQuery to version 2.2.4. Updated jQuery mousewheel to version 3.1.13.
- Updated the entire website. Added more advanced tutorials: Image Export, Initializing Components after Closing the DOM, Sketcher: Application Window, Sketcher: Listening to User Changes.
Full details of the update https://web.chemdoodle.com/installation/changelog/.