#CHEMDOODLE IN CANVAS INSTALL#
#CHEMDOODLE IN CANVAS CODE#
#CHEMDOODLE IN CANVAS SERIES#

So I chose a simpler route where a button will trigger evaluation - in this case with the help of the dommy library and a nice blog post on it’s usage.ĭommy listens for the button click and calls the smiles-to-chemdoodle function which will pull the smiles string and depict it. My initial idea to use a react-based solution fell short when I encountered lot of callback errors for incomplete smiles strings. Now we have just about everything we need on the chemistry side - a smiles parser, a coordinate generator, and a way to depict the compounds but we need some control code. (let [viewer (new ChemDoodle.ViewerCanvas id 500 500)Ĭhemmol (-> (new ChemDoodle.io.JSONInterpreter) 'put your chemdoodle JSON into Chemdoodle' Chemdoodle needs the ID of an html canvas or it will create a new canvas where it is called. We make a molecule, chemmol and associate it with the viewercanvas while setting the bond width (we can add more options at a later point). Once we have chemdoodle-compatible json, we can use chemdoodle to parse the JSON and associate the newly created ChemDoodle molecule with a viewer canvas. 'b' (map #(process_bond % Mol) bonds)}))) 'take a kemia Bond and return json ready for chemdoodle' 'take a kemia Atom and return json ready for chemdoodle' Note the clj->js function at the end which will convert the clojurescript data structures into pure JS. Kemia has already calculated x/y positions for each atom so we are simply feeding chemdoodle the atom positions and the bond information. Fortunately the chemdoodle and kemia documentation make it a straightforward problem. To do so I would need to convert kemia’s molecule information into the ChemDoodle-ready JSON. I wanted to use it instead of Kemia’s drawing methods. Mol2 ( mol)]ĬhemDoodle is a great opensource library for drawing molecules. You can see how this is done below - all in a single function, parsesmiles. Once kemia was packaged I needed to use it to generate coordinates from a smiles string which would require using the smiles parser and the coordinate generation. Google Closure library, the source is included using the :libs option - which allows kemia modules and namespaces to be used just as if they were cljs files.

#CHEMDOODLE IN CANVAS INSTALL#

(right now they are pull requests - if you need them you can install them from my clsjsjs/packages branches) Because kemia uses the I decided to package both the kemia and chemdoodle webcomponents libraries for cljsjs. By providing a standardĬonvention for packaging, these libraries can be included in new clojure/clojurescript projects using a simple :require The cljsjs team is working to provide an easy way to use JS libraries. Try entering the following or type your own smiles tring into the box and click:.The rest of this post documents how i made the widget below. Try your own smiles string, or paste in an example from below. The result is below (code here) and it is a pure-browser smiles-parsing widget. clojurescript for all the glue code, DOM handling etc, ideally via React/ reagent.ChemDoodle WebComponents for a nice-looking frontend.kemias' smiles-parsing functionality as well as its structure- diagram generation facilities.

#CHEMDOODLE IN CANVAS CODE#

On the technical side, clojurescript offers the advantage of using Google’sĬlosure compiler, which, among other things, allows for dead code elimination. Inspired by clojure that has a vibrant and innovative community. To carry out this project I wanted to use clojurescript, a compile-to-javascript, lisp I was still interested in trying to generate images in the browser, however, and in his final post, Noel points the way by mentioning the kemia project, a javascript chemistry library that aims to be “the world’s first open source, 100% javascript chemistry toolkit.” The rest of this post is how I used kemia, ChemDoodle, and clojurescript to make pure-browser smiles-to-canvas widget. The JS file in order to call the smiles-to-svg function in another context but started running into errors with the generated code. However, upon attempting to reuse his smiles-to-svg functions on a different webpage I discovered that output of Emscripten is difficult to reuse (or at least not obvious to someone unfamiliar with ASM.js.

#CHEMDOODLE IN CANVAS SERIES#

As someone interested in using the browser to interact with molecules, I thought this was a great series of posts and thought I might even be able to reuse some of the javascript he had generated.

To compile a number of chemoinformatics toolkits to Javascript including OpenBabel, A few months back Noel O’Boyle wrote a series of blog posts wherein he used Emscripten

Chemdoodle in canvas