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 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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.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.addFrame([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.addFrame([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.addFrame([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.addFrame([mol4], []);
  slideshow.startAnimation();
</script>