ChemDoodle 3 has the ability to generate ChemDoodle Web Components for you, so you do not need to master Javascript to build dynamic and interactive chemical structures and components for your web pages. Before I continue, I would like to reiterate that ChemDoodle 3 is a free upgrade to all customers that purchased ChemDoodle 1 or 2. As the release date approaches, I will publish more stories about new features and improvements.
ChemDoodle already allows you to create beautiful graphics for chemical websites. Even better, ChemDoodle can generate scalable vector graphics that look wonderful at any resolution on the web. Now in addition to static images, ChemDoodle 3 contains a sub-application for customizing, previewing and creating ChemDoodle Web Components for even more advanced and engrossing websites. ChemDoodle Web Components are pure Javascript objects derived from ChemDoodle to solve common chemistry related tasks on the web. They allow you to display a wide range of chemically relevant dynamic components, including structures, animations, and interactive panels (you will see a sketcher on our frontpage and a twistable molecule on the bottom of this page). In ChemDoodle 3, you just need to draw or load a structure on the main sheet, lasso it, and use the new Web Components menu function to customize, preview and generate the web components.
In the File menu, as the next image illustrates, there is a new submenu titled Web Components. Within this submenu, there are three items: Save As Javascript Data File…, Generate Component… and About. Save As Javascript Data File… will output all selected molecules to a Javascript file that can be input on your webpage so that those molecules can be used in ChemDoodle Web Components you write. Generate Component… is the item this post covers and will allow you to select the type of component, set Javascript placeholders, customize your graphics, and preview/generate the Javascript you will paste into your webpage. The About menu item will bring you to the ChemDoodle Web Components homepage.
Web Components Menu Item
When the Generate Component… menu item is selected, a mini application will appear, allowing you to create any kind of ChemDoodle Web Component as well as fully customize it as is shown in the next image.
Mini Application to Generate Component
After setting up your component, press the Preview button to see it in your default browser. The 2D ChemDoodle Web Components will work in all browsers, including Apple Safari, Mozilla Firefox, Google Chrome and Microsoft Internet Explorer (IE requires the Google Chrome Frame add-on).
Preview your component
If you are satisfied with the preview, press the Generate button, copy the generated Javascript into your webpage, and you are done! You now have dynamic and interactive chemical components in your web page with little to no effort. Keep in mind that ChemDoodle Web Components require a free Javascript library we provide to work, so make sure to install the ChemDoodle Web Components library first. Enjoy!
ChemDoodle Web Component Javascript Generation