Tutorial > Animations

Frequently Asked Questions (FAQ)

• How do I change the default JMol colors? (Generally modify the element data)

  Sometimes, default JMol colors may not be suitable for your graphics, as hydrogen is white (will disappear on a white background) and some elements have very pale colors and are hard to see on bright backgrounds. To change the default JMol colors, just set the Element.jmolColor variable for the given Element in the ChemDoodle.ELEMENT array.

  //set the color for hydrogen to black
  ChemDoodle.ELEMENT['H'].jmolColor = 'black';
  //set the color for sulfur to a darker amber
  // you can also use the object property syntax
  ChemDoodle.ELEMENT.S.jmolColor = '#B9A130';
  

  There is other useful data in the ChemDoodle.ELEMENT array, such as the van der Waals radii used in 3D scenes. See the API for more information.

• How can I tell if the webpage is being viewed through a mobile device?

  Use the ChemDoodle.featureDetection.supports_touch() function.

  However, be careful of touch capable hybrid PCs. Those will be able to support both keyboard and mouse events as well as touch events and maybe gestures. Because of this, the supports_touch() will only return true on mobile operating systems.

• How do I access the underlying HTML <canvas> element that the JavaScript Canvas object manages?

  Use the document.getElementById() function to select the element with id you defined by the Canvas constructor.

  let canvas = new ChemDoodle.ViewerCanvas('my_canvas', 100, 100);
  let underlyingElement = document.getElementById('my_canvas');
  

• How do I change the default Canvas3D message when WebGL is unavailable?

  Use the following code:

  // check if the WebGL context was properly created. If not, then the browser does not support WebGL.
  if(!canvas3d.gl){
      // set the empty message to the desired message
      canvas3d.emptyMessage='This overrides the default WebGL warning.';
      // tell the canvas to display the message
      canvas3d.displayMessage();
  }
  

• How do I remove the black border around components?

  Edit the ChemDoodleWeb.css file that is provided in the download. You can change the border to something else or just remove it. Since ChemDoodle Web Components are just HTML elements, you can also use this CSS file to set properties for all components in a webpage.

  canvas.ChemDoodleWebComponent {
  /* no border */
  border: none;
  }
  

• What is the best way to (a) determine if a browser supports a certain HTML5 feature and (b) provide an alternative to a ChemDoodle Web Component if that feature is not supported?

  All features should be supported in the most recent browsers. That being said, many users may choose to use older versions of browsers for whatever reason. It would be a pain to provide a different website for each different version of each different browser. Luckily, there is a ChemDoodle.featureDetection package that will help you determine whether HTML5 features that the ChemDoodle Web Components require are provided. Currently, only 4 features are required and 4 functions are provided to check for these features:

  • ChemDoodle.featureDetection.supports_canvas() - Checks if the running browser supports <canvas>
  • ChemDoodle.featureDetection.supports_canvas_text() - Checks if the running browser supports <canvas> text rendering
  • ChemDoodle.featureDetection.supports_webgl() - Checks if the running browser supports WebGL for 3D graphics rendering
  • ChemDoodle.featureDetection.supports_xhr2() - Checks if the running browser supports XMLHttpRequest Level 2 for remote access to iChemLabs cloud services

  Using these functions will allow you to provide alternate content if a given feature is not supported:

  // for instance
  // check if <canvas> is supported
  if(ChemDoodle.featureDetection.supports_canvas()){
      // setup a ChemDoodle Web Component
      let component = new ViewerCanvas('component', 100, 100);
  }else{
      // insert a placeholder image
      document.write('<img src="path/imageOfMolecule.png" alt="" width="100" height="100" />');
  }