Organic chemistry
reactions online
Melanie Burger
M. Corrin, J. Jenkinson, G. Deslongchamps
link to slides: http://slides.com/mbrgr/icce2014
Lab3D.io
1. What are CWCs?
// ChemDoodle Web Components 6.0.1
var ChemDoodle = function {
var ChemDoodle = {};
//make cool stuff!!!
return ChemDoodle;
}- 2D, 3D chemical graphics
- HTML5 <canvas>, WebGL
- High-level API
- Cloud services
- GPLv3 license
1.1 Demo no. 1
var transform = new ChemDoodle.TransformCanvas('transformer', 350, 350, true);
ChemDoodle.io.file.content('assets/af.mol', function(fileContent){
transform.loadMolecule(ChemDoodle.readMOL(fileContent));
});1.2 Demo no. 2
2. What can you do with them?
- Scientific apps
- Educational publishing
- Teaching tools
2.1 Lab3D
2.2 Technology stack
2.3 Motivation
"Visualizations help make complex information cognitively tractable."
Uttal, D. H., and K. O. Doherty. 2008. "Visualization: Theory and practice in science education"
2.4 Molecular representations
2.5 Multiple representations
Ainsworth, S. 2008. "Visualization: Theory and practice in science education"
- more familiar informs less
- compare & contrast
- build representational insight
Lab3D.io
2.6 Future development
- 2D animations?
- Meet ON accessibility guidelines
- Performance optimize
- Enable contributions
- Create a public API
Thank you
Further questions?
ICCE exhibition booth #4
Further reading?
Support
3. Getting started
CWC installation
<script src="http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.js">
</script>
See also: WordPress install tutorial
3.1 Placing in a HTML page
<script>
//1. Instantiate component
var viewer = new ChemDoodle.ViewerCanvas( 'viewer', 100, 100 );
//2. Optional: Set visual specifications (if different from defaults)
viewer.specs.backgroundColor = 'blue';
//3. Read and load data into the component
var methaneMolFile = 'Molecule Name\n CHEMDOOD07051400583D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 1 0 0 0 0 0 0 0 0 0 1 V2000\n 0.0000 -0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\nM END';
var molecule = ChemDoodle.readMOL( methaneMolFile );
viewer.loadMolecule( molecule );
//Component is generated!
</script>
2.1b Org. Chem. Flashware
2.1c ChemTube3D
