Tutorial > Slideshow Canvas
While very complex programmatically, the SlideshowCanvas component simply displays multiple molecules, one at a time, with transitions in between. The SlideshowCanvas constructor takes the same parameters as the ViewerCanvas constructor.
new ChemDoodle.SlideshowCanvas(name, width, height);After initialization, you add frames to the slideshow with the SlideshowCanvas.addFrame() function. The addFrame() function takes two parameters, the first an Array of Molecule data structures, and the second an Array of 2D Shape data structures. The order that you add the frames is retained during the animation. As with the RotatorCanvas, the SlideshowCanvas is a child of the AnimatorCanvas class, which in turn, is a child of the Canvas class.
So, the animation speed (time between transitions) can also be set by specifying the AnimatorCanvas.timeout variable in milliseconds. The default is 5000ms, which will swap molecules every 5 seconds. The transition is 1 second by itself, so for best results, choose a timeout of at least 2 seconds. When everything is ready, the AnimatorCanvas.startAnimation() function will start the slideshow while the AnimatorCanvas.stopAnimation() function will stop it.
Examples
Four molecules are loaded into the slideshow, which is given a creative marker-drawn style:
<script>
let slideshow = new ChemDoodle.SlideshowCanvas('slideshow', 250,250);
slideshow.styles.backgroundColor = '#FFD6CC';
slideshow.styles.bonds_width_2D = 2;
slideshow.styles.bonds_useAbsoluteSaturationWidths_2D = false;
slideshow.styles.bonds_saturationWidth_2D = .3;
slideshow.styles.atoms_useJMOLColors = true;
slideshow.styles.atoms_font_size_2D = 18;
slideshow.styles.atoms_font_families_2D[0] = "Comic Sans MS";
slideshow.styles.atoms_font_families_2D[1] = "Chalkboard";
slideshow.styles.atoms_font_families_2D[2] = "Marker Felt";
slideshow.styles.atoms_font_families_2D[3] = "cursive";
slideshow.styles.atoms_font_families_2D[4] = "sans-serif";
slideshow.styles.atoms_displayTerminalCarbonLabels_2D = true;
let mol1 = ChemDoodle.readMOL('Molecule Name\n CHEMDOOD09200915093D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 23 26 0 0 0 0 0 0 0 0 1 V2000\n -3.0614 1.0000 0.0000 O 0 0 0 2 0 0 0 0 0 0 0 0\n 0.4829 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 1.0665 -0.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.4633 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -0.4633 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.4829 0.8047 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.7936 1.7553 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.7936 -1.7553 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.3292 1.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -1.3292 -1.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7721 1.9615 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -2.1953 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.1953 -0.5000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 0.1258 2.4996 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 2.0828 2.9120 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.7721 -1.9615 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 0.1258 -2.4996 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 0.4365 3.4501 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.4149 3.6563 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 3.0613 3.1182 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 2.0828 -2.9120 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 0.4365 -3.4501 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.4149 -3.6563 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1 12 1 0 0 0 0\n 2 3 1 0 0 0 0\n 2 5 1 0 0 0 0\n 2 8 1 0 0 0 0\n 3 6 2 0 0 0 0\n 4 5 2 0 0 0 0\n 4 6 1 0 0 0 0\n 4 9 1 0 0 0 0\n 5 10 1 0 0 0 0\n 6 7 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 14 2 0 0 0 0\n 8 16 2 0 0 0 0\n 8 17 1 0 0 0 0\n 9 12 2 0 0 0 0\n 10 13 2 0 0 0 0\n 11 15 2 0 0 0 0\n 12 13 1 0 0 0 0\n 14 18 1 0 0 0 0\n 15 19 1 0 0 0 0\n 15 20 1 0 0 0 0\n 16 21 1 0 0 0 0\n 17 22 2 0 0 0 0\n 18 19 2 0 0 0 0\n 21 23 2 0 0 0 0\n 22 23 1 0 0 0 0\nM END');
slideshow.addFrame([mol1], []);
let mol2 = ChemDoodle.readMOL('Molecule Name\n CHEMDOOD07080900233D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 29 32 0 0 0 0 0 0 0 0 1 V2000\n -0.7158 2.2500 0.0000 Cl 0 0 0 1 0 0 0 0 0 0 0 0\n 2.8284 -1.9454 0.0000 S 0 0 0 1 0 0 0 0 0 0 0 0\n 5.9121 -3.6160 0.0000 S 0 0 0 2 0 0 0 0 0 0 0 0\n -5.0460 3.7500 0.0000 F 0 0 0 1 0 0 0 0 0 0 0 0\n -2.4480 1.2499 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n 1.0161 -0.7500 0.0000 N 0 0 0 2 0 0 0 0 0 0 0 0\n 1.0161 -3.7500 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1501 -2.2500 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 1.8822 -2.2500 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 3.4120 -2.7499 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.8822 -3.2501 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 4.4121 -2.7499 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 2.8284 -3.5548 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.0161 -1.7501 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1501 -0.2501 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 4.9120 -3.6160 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n -1.5819 0.7500 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1501 0.7500 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.7158 -0.7500 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.7158 1.2499 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.5819 -0.2501 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -3.3140 0.7500 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n -4.1799 1.2499 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1501 -3.2501 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -4.1799 2.2500 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -5.0460 0.7500 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -5.0460 2.7499 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -5.9121 1.2499 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -5.9121 2.2500 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1 20 1 0 0 0 0\n 2 9 1 0 0 0 0\n 2 10 1 0 0 0 0\n 3 16 1 0 0 0 0\n 4 27 1 0 0 0 0\n 5 17 1 0 0 0 0\n 5 22 1 0 0 0 0\n 6 14 1 0 0 0 0\n 6 15 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 24 2 0 0 0 0\n 8 14 2 0 0 0 0\n 8 24 1 0 0 0 0\n 9 11 2 0 0 0 0\n 9 14 1 0 0 0 0\n 10 12 1 0 0 0 0\n 10 13 2 0 0 0 0\n 11 13 1 0 0 0 0\n 12 16 1 0 0 0 0\n 15 18 2 0 0 0 0\n 15 19 1 0 0 0 0\n 17 20 2 0 0 0 0\n 17 21 1 0 0 0 0\n 18 20 1 0 0 0 0\n 19 21 2 0 0 0 0\n 22 23 1 0 0 0 0\n 23 25 2 0 0 0 0\n 23 26 1 0 0 0 0\n 25 27 1 0 0 0 0\n 26 28 2 0 0 0 0\n 27 29 2 0 0 0 0\n 28 29 1 0 0 0 0\nM END');
slideshow.addFrame([mol2], []);
let mol3 = ChemDoodle.readMOL('Molecule Name\n CHEMDOOD09200915103D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 26 30 0 0 0 0 0 0 0 0 1 V2000\n -2.5562 2.6492 0.0000 S 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0274 1.8444 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n 3.7345 -1.1124 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -5.2345 2.3444 0.0000 N 0 0 0 2 0 0 0 0 0 0 0 0\n -2.5562 1.0397 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 3.2345 -0.2463 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 2.2686 0.0125 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 3.4933 0.7196 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 2.5274 0.9784 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 3.2345 -1.9784 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 4.7345 -1.1124 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 3.7345 -2.8444 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 5.2345 -1.9784 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 4.7345 -2.8444 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 1.0274 1.8444 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5274 0.9784 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 0.5274 2.7104 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.4726 0.9784 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.4726 2.7104 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.9726 1.8444 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -3.5024 1.3444 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -4.3684 0.8444 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n -1.9726 1.8444 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -3.5024 2.3444 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -5.2345 1.3444 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n -4.3684 2.8444 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 1 23 1 0 0 0 0\n 1 24 1 0 0 0 0\n 2 9 1 0 0 0 0\n 2 15 1 0 0 0 0\n 3 6 1 0 0 0 0\n 3 10 1 0 0 0 0\n 3 11 1 0 0 0 0\n 4 25 1 0 0 0 0\n 4 26 1 0 0 0 0\n 5 21 1 0 0 0 0\n 5 23 2 0 0 0 0\n 6 7 1 0 0 0 0\n 6 8 1 0 0 0 0\n 7 9 1 0 0 0 0\n 8 9 1 0 0 0 0\n 10 12 1 0 0 0 0\n 11 13 1 0 0 0 0\n 12 14 1 0 0 0 0\n 13 14 1 0 0 0 0\n 15 16 2 0 0 0 0\n 15 17 1 0 0 0 0\n 16 18 1 0 0 0 0\n 17 19 2 0 0 0 0\n 18 20 2 0 0 0 0\n 19 20 1 0 0 0 0\n 20 23 1 0 0 0 0\n 21 22 1 0 0 0 0\n 21 24 2 0 0 0 0\n 22 25 1 0 0 0 0\n 24 26 1 0 0 0 0\nM END');
slideshow.addFrame([mol3], []);
let mol4 = ChemDoodle.readMOL('Molecule Name\n CHEMDOOD09200915113D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 25 26 0 0 0 0 0 0 0 0 1 V2000\n 0.3222 -0.1739 0.0000 S 0 0 0 1 0 0 0 0 0 0 0 0\n 0.6882 3.8649 0.0000 S 0 0 0 1 0 0 0 0 0 0 0 0\n -2.2759 -4.6739 0.0000 F 0 0 0 1 0 0 0 0 0 0 0 0\n 1.3221 -0.1739 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.6779 -0.1739 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -1.4100 -3.1739 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n 0.3222 0.8261 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 1.1882 -2.6739 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -2.2759 -0.6739 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 1.1882 1.3261 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.1882 2.3261 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0542 0.8261 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 0.3792 2.9139 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.9971 2.9139 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -0.5438 1.3261 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 0.3222 -1.1739 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.6882 3.8649 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -0.5719 2.6048 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n -0.5438 -1.6739 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.1882 -1.6739 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 2.2759 4.6739 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n -0.5438 -2.6739 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.3222 -3.1739 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n -1.4100 -1.1739 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.4100 -4.1739 0.0000 C 0 0 0 3 0 0 0 0 0 0 0 0\n 1 4 2 0 0 0 0\n 1 5 2 0 0 0 0\n 1 7 1 0 0 0 0\n 1 16 1 0 0 0 0\n 2 13 1 0 0 0 0\n 2 17 1 0 0 0 0\n 3 25 1 0 0 0 0\n 6 22 1 0 0 0 0\n 6 25 1 0 0 0 0\n 7 10 1 0 0 0 0\n 7 15 1 0 0 0 0\n 8 20 2 0 0 0 0\n 8 23 1 0 0 0 0\n 9 24 3 0 0 0 0\n 10 11 1 0 0 0 0\n 10 12 1 0 0 0 0\n 11 13 2 0 0 0 0\n 11 14 1 0 0 0 0\n 13 18 1 0 0 0 0\n 14 17 2 0 0 0 0\n 16 19 2 0 0 0 0\n 16 20 1 0 0 0 0\n 17 21 1 0 0 0 0\n 19 22 1 0 0 0 0\n 19 24 1 0 0 0 0\n 22 23 2 0 0 0 0\nM END');
slideshow.addFrame([mol4], []);
slideshow.startAnimation();
</script>
