##concept example (of minimal) usage:
<html>
<head>
<!-- 1. include the library -->
<script type="text/javascript" src="SMILES.js" />
</head>
<body>
<!-- 2. use it -->
<canvas data-smiles="COc1c(Cl)cc(Cl)cc1Cl" width="320" height="200"></canvas>
</body>
</html>That should produce/render an image (of 2,4,6-trichloroanisole molecule) looking something like:
(This one was made/generated from the above SMILES in BKChem and edited with GIMP)
##design & impl
- Read the input SMILES (one can add other input formats later).
- Parse/interpret the input into some internal format/representation of the molecule/graph (for example adjacency matrix/list or incidence matrix, etc.).
- From the internal format (adjacency matrix) calculate the coords for each node and edge ("model space"). Translate and render from "model space" into the viewport (in the above example/snippet set by the user in the canvas element attributes width and height).
##notes
- minimalist
- modular (modules can be used in client AND on server, i.e. they do not make any assumption/restriction about the environment they run within), platform specific features are clearly separated from the 'generic' ones
- default config / global settings (canvas width, height)
- custom config (line thickness, colors, fonts, display of hydrogens), HTML5 canvas (2d, webgl), SVG
- engine config - configuration does not have to be restricted to visualization only, but for example we can let the user to chose 'single-threaded' OR 'multi-threaded' mode (Web Workers); 'multi-threaded' mode is suitable for processing large amount of (complex) input
- pluggable molecule/graph layouts/styles
- optimization, caching (local storage, webworkers, etc.)
- 3rd party libs
##misc I wanted a real/usable JavaScript/HTML5 project/experiment/playground/demo as I read:
- "JavaScript: The Good Parts" by Douglas Crockford
- "Supercharged JavaScript Graphics" by Raffaele Cecco