Sketcher: Application Window

The SketcherCanvas interface can be easily inserted into web interfaces, but sometimes a more advanced look and feel is necessary. This page demonstrates how to create a application window for the sketcher, similar to working with the desktop version of ChemDoodle. This window can be moved and resized and provides several areas of customization to engage your users within your interface.

Using the Sketcher Application Window

The application window enhances the utility of the sketcher. You can try it right here. It works on both traditional desktop devices and on mobile devices.

MyCompany Chemical Search – Use ChemDoodle to draw your query!

Include some updating calculations hereCopyright © 2000- MyCompany. All Rights Reserved.


  1. The interface is movable by the user by pressing the mouse or a finger and dragging on the title bar. If the user moves the main interface, all floating tools will also move with it.
  2. You can include your product logo and a welcome message at the top, and change the color to match your theme. This demo uses a Century Gothic web safe font for thinner, accentuated sans-serif text that matches the bond strokes in chemical structures.
  3. The main toolbar is located above the sketcher and contains global functions for the user.
  4. We employ the floating palette option (this can be turned on and off depending on the use case) containing the drawing tools for the user. This palette can be moved independently of the main window.
  5. Some drawing tools have multiple choices, which appear in sticky trays next to the drawing palette. This is a hallmark of ChemDoodle software. The trays follow the palette if moved and will flip/orient accordingly if pushed off the page viewport bounds.
  6. The help button directs users to our sketcher instructions.
  7. The sketcher canvas can be resized by the user by dragging the anchor at the bottom-right of the canvas. The user may also drag on the bottom or right borders. The user’s drawings will recenter and resize accordingly.
  8. The footer allows space for some dynamic feedback for users on the bottom-left, such as the current molecular mass of the drawn molecule.
  9. The footer provides area to include a copyright for your product on the bottom-right.

Creating the Sketcher Application Window

Use the following template to implement the application interface for the ChemDoodle Web Components sketcher in your product. Please remember to preserve the ChemDoodle trademark on the bottom right of the sketcher canvas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- for best results, center the entire wrapper -->
<center>
  <!-- the chemdoodle div wraps the entire sketcher and forms the application window, we set the font to be used in the window here as well as render a nice gradient -->
  <div id="chemdoodle" style="font-family:Century Gothic, Tahoma, Geneva, sans-serif;font-size:12px;text-align:left;text-shadow:none;display:inline-block;padding:5px;border-radius:3px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);background:linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);">
    <!-- the title bar contains the welcome message and the logo, we use a data URI to avoid an additional resource download -->
    <div id="titlebar" style="font-size:16px;font-weight:bold;cursor:move;padding:5px;padding-left:40px;border-radius:3px;color:#004E19;background:url(data:image/png;base64,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) no-repeat left center;">
      MyCompany Chemical Search - Use ChemDoodle to draw your query!
    </div>
    <script>
      // the sketcher is initialized here, setting the resizable and floatDrawTools options to true
      var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 650, 400, {resizable:true, floatDrawTools:true});
      // we don't load any content, so we have to manually call the repaint method to show the sketcher, alternatively, you can preload content into the sketcher
      sketcher.repaint();
    </script>
    <!-- the footer bar contains two spans for the left and the right -->
    <div id="footerbar" style="padding:5px;margin:-5px;border-radius:0 0 3px 3px;background:#004E19;color:white;"><span>Include some updating calculations here</span><span style="float:right;font-size:8px;">Copyright &copy; 2000-<script>document.write(new Date().getFullYear())</script> MyCompany. All Rights Reserved.</span></div>
  </div>
</center>
<script>
  // to finish setting everything up
  var cdwindow = ChemDoodle.lib.jQuery('#chemdoodle');
  // we make the application window draggable to it can be moved
  cdwindow.draggable({ handle:'#titlebar', stop:function(){ cdwindow.css({width:'auto', height:'auto'}); }, containment:'document'});
</script>