Tutorial > Styles
Styles define how graphics in the ChemDoodle Web Components library are rendered. Together they form a style sheet that can control your entire page in a global context, or finely control how a single atom or bond is drawn. This paradigm is true for both 2D and 3D canvases.
The Styles Object
A Styles object is automatically created for each Canvas when it is initialized. This object contains a list of styles that will define how the Canvas will render its content. These styles can be any type of data, from booleans to numbers to strings and arrays. All content rendered by the ChemDoodle Web Components library will have corresponding styles in the Styles object. This way, you have full control over the graphics. A full list of the styles is described in the API.
You can also manually create an individual Styles object by calling its constructor as shown in the following code:
<script>
let myStyles = new ChemDoodle.structures.Styles();
</script>You may be wondering why this is useful, as this new object will not be linked to any graphics. In the ChemDoodle Web Components library, styles can be linked to more than just a Canvas. Styles can be set globally for the entire webpage, for each Canvas, or to precisely define graphics for each individual graphical object.
Defining Styles Globally
To define styles globally, for an entire webpage, just set the style from the API for the ChemDoodle.DEFAULT_STYLES global variable. The following source code shows how to set the global styles to render all 2D Canvases in ACS Document 1996 style. Unless further overridden, as described in the following sections, all 2D Canvases will render their content with that definition.
<script>
ChemDoodle.DEFAULT_STYLES.bondLength_2D = 14.4;
ChemDoodle.DEFAULT_STYLES.bonds_width_2D = .6;
ChemDoodle.DEFAULT_STYLES.bonds_saturationWidthAbs_2D = 2.6;
ChemDoodle.DEFAULT_STYLES.bonds_hashSpacing_2D = 2.5;
ChemDoodle.DEFAULT_STYLES.atoms_font_size_2D = 10;
ChemDoodle.DEFAULT_STYLES.atoms_font_families_2D = ["Helvetica", "Arial", "sans-serif"];
ChemDoodle.DEFAULT_STYLES.atoms_displayTerminalCarbonLabels_2D = true;
ChemDoodle.DEFAULT_STYLES.atoms_useJMOLColors = true;
</script>Of course, we can do this for the 3D styles as well to control the WebGL Canvases in a global manner.
Defining Styles for a Canvas
A Canvas's Styles object will be created automatically when the Canvas is initialized. This Styles object can be accessed as the Canvas.styles parameter. The following source demonstrates how to set ACS Document 1996 style to an individual Canvas.
<script>
let myCanvas = new ChemDoodle.ViewerCanvas('myCanvas', 150, 150);
//the width of the bonds should be .6 pixels
myCanvas.styles.bonds_width_2D = .6;
//the spacing between higher order bond lines should be 18% of the length of the bond
myCanvas.styles.bonds_saturationWidthAbs_2D = 2.6;
//the hashed wedge spacing should be 2.5 pixels
myCanvas.styles.bonds_hashSpacing_2D = 2.5;
//the atom label font size should be 10
myCanvas.styles.atoms_font_size_2D = 10;
//we define a cascade of acceptable font families
//if Helvetica is not found, Arial will be used
myCanvas.styles.atoms_font_families_2D = ["Helvetica", "Arial", "sans-serif"];
//display carbons labels if they are terminal
myCanvas.styles.atoms_displayTerminalCarbonLabels_2D = true;
//add some color by using JMol colors for elements
myCanvas.styles.atoms_useJMOLColors = true;
myCanvas.emptyMessage = 'No Data Loaded!';
let caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n> <DATE>\n07-08-2009\n';
let caffeine = ChemDoodle.readMOL(caffeineMolFile);
//the bond lengths should be 14.4 pixels
caffeine.scaleToAverageBondLength(14.4);
myCanvas.loadMolecule(caffeine);
</script>Defining Styles for Individual Objects
For even further control, a Styles object can be defined to the styles parameter for any Atom or Bond. This can be useful if you want to highlight a portion of the structure, or finely tune the graphics rendering. In the following example, a Canvas is created to show caffeine, with double bonds colored red and with the nitrogen attached to the double bond drawn in bold.
<script>
let myCanvas = new ChemDoodle.ViewerCanvas('myCanvas', 150, 150);
// set up the styles to be assigned to the double bonds
let doubleBondStyle = new ChemDoodle.structures.Styles();
doubleBondStyle.bonds_color = 'red';
// set up the styles to be assigned to the one nitrogen
let nitrogenStyle = new ChemDoodle.structures.Styles();
nitrogenStyle.atoms_font_bold_2D = true;
// caffeine data
let caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n> <DATE>\n07-08-2009\n';
let caffeine = ChemDoodle.readMOL(caffeineMolFile);
// loop through the structure to find the objects to assign the style to
for(let i = 0, ii=caffeine.bonds.length; i<ii; i++){
let b = caffeine.bonds[i];
if(b.bondOrder===2){
// found a double bond, so assign the correct style
b.styles = doubleBondStyle;
// since we are looking for a nitrogen in a double bond, we can just check inside this loop
// if either constituent atoms are nitrogen, then set the correct style
if(b.a1.label==='N'){
b.a1.styles = nitrogenStyle;
}
if(b.a2.label==='N'){
b.a2.styles = nitrogenStyle;
}
}
}
myCanvas.loadMolecule(caffeine);
</script>3D Canvases
Styles also define 3D canvases. In this example, we render all carbon atoms in a yellow color.
<script>
let myCanvas = new ChemDoodle.TransformCanvas3D('myCanvas', 150, 150);
// set a 'Ball and Stick' representation for the canvas and set the background color to black
myCanvas.styles.set3DRepresentation('Ball and Stick');
myCanvas.styles.bonds_splitColor = true;
myCanvas.styles.backgroundColor = 'black';
// set up the styles to be assigned to carbons
// we are going to copy the style from the canvas to absorb the settings above
let carbonStyle = myCanvas.styles.copy();
// but we can also start from a brand new style by uncommenting this line
// let carbonStyle = new ChemDoodle.structures.Styles();
carbonStyle.atoms_useJMOLColors = false;
carbonStyle.atoms_color = 'yellow';
// aspirin data
let aspirinMolFile = 'Molecule Name\n CHEMDOOD06121723513D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 21 21 0 0 0 0 0 0 0 0 1 V2000\n -0.8352 0.5850 -0.7986 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.3815 0.0043 -0.4797 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.7613 0.4488 0.2377 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.5031 -1.3962 -0.4657 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.5094 0.8124 -0.1852 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4651 -0.0551 1.3169 O 0 0 0 0 0 0 0 0 0 0 0 0\n -3.1542 0.9469 0.0228 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.7235 -1.9956 -0.1533 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.3538 -2.0163 -0.6976 H 0 0 0 0 0 0 0 0 0 0 0 0\n 2.7320 0.1870 0.1275 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4250 2.3047 -0.1982 C 0 0 0 0 0 0 0 0 0 0 0 0\n -3.7794 0.7761 0.9256 H 0 0 0 0 0 0 0 0 0 0 0 0\n -3.6096 0.4117 -0.8365 H 0 0 0 0 0 0 0 0 0 0 0 0\n -3.1276 2.0347 -0.1966 H 0 0 0 0 0 0 0 0 0 0 0 0\n 2.8340 -1.2063 0.1440 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.8084 -3.0747 -0.1415 H 0 0 0 0 0 0 0 0 0 0 0 0\n 3.6111 0.7759 0.3562 H 0 0 0 0 0 0 0 0 0 0 0 0\n 0.3848 2.8639 -0.5085 O 0 0 0 0 0 0 0 0 0 0 0 0\n 2.5150 3.0747 0.1309 O 0 0 0 0 0 0 0 0 0 0 0 0\n 3.7794 -1.6752 0.3857 H 0 0 0 0 0 0 0 0 0 0 0 0\n 2.6992 2.8819 1.0867 H 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0 0 0 0\n 1 3 1 0 0 0 0\n 2 4 2 0 0 0 0\n 2 5 1 0 0 0 0\n 6 3 2 0 0 0 0\n 3 7 1 0 0 0 0\n 4 8 1 0 0 0 0\n 4 9 1 0 0 0 0\n 5 10 2 0 0 0 0\n 5 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 7 13 1 0 0 0 0\n 7 14 1 0 0 0 0\n 8 15 2 0 0 0 0\n 8 16 1 0 0 0 0\n 10 15 1 0 0 0 0\n 10 17 1 0 0 0 0\n 18 11 2 0 0 0 0\n 19 11 1 0 0 0 0\n 15 20 1 0 0 0 0\n 19 21 1 0 0 0 0\nM END';
// make sure to read the 3D mol file with a multiplier of 1
let aspirin = ChemDoodle.readMOL(aspirinMolFile, 1);
// loop through the structure to find the objects to assign the style to
for(let i = 0, ii= aspirin.atoms.length; i<ii; i++){
let a = aspirin.atoms[i];
if(a.label==='C'){
// found a carbon atom, so assign the correct style
a.styles = carbonStyle;
}
}
myCanvas.loadMolecule(aspirin);
</script>Using the Styles object in the ChemDoodle Web Components library will provide you with complete control over all aspects of your graphics.
