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.
1 | new ChemDoodle.SlideshowCanvas(name, width, height); |
After initialization, you add molecules to the slideshow with the SlideshowCanvas.addMolecule() function. The order that you add the molecules in 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script> var slideshow = new ChemDoodle.SlideshowCanvas('slideshow', 250,250); slideshow.specs.backgroundColor = '#FFD6CC'; slideshow.specs.bonds_width_2D = 2; slideshow.specs.bonds_saturationWidth_2D = .3; slideshow.specs.bonds_atomLabelBuffer_2D = .35; slideshow.specs.atoms_useJMOLColors = true; slideshow.specs.atoms_font_size_2D = 18; slideshow.specs.atoms_font_families_2D[0] = "Comic Sans MS"; slideshow.specs.atoms_font_families_2D[1] = "Chalkboard"; slideshow.specs.atoms_font_families_2D[2] = "Marker Felt"; slideshow.specs.atoms_font_families_2D[3] = "cursive"; slideshow.specs.atoms_font_families_2D[4] = "sans-serif"; slideshow.specs.atoms_displayTerminalCarbonLabels_2D = true; var 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.addMolecule(mol1); var 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.addMolecule(mol2); var 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.addMolecule(mol3); var 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.addMolecule(mol4); slideshow.startAnimation(); </script> |
