Site news

Chemical Structure/Equation Editor and Filter based on EasyChem.js

 
Picture of Carl LeBlond
Chemical Structure/Equation Editor and Filter based on EasyChem.js
by Carl LeBlond - Friday, January 9, 2015, 2:44 PM
 

I stumbled across Peter Win's easychem.js a while back and was immediatley impressed with its simplicity, the variety of structures it can render and its relatively small size (~50K).  Easychem.js is a method for describing chemical formulas and structures and a javascript library for displying them in HTML5.   The following table summarizes some of the capabilities of easychem.js.

EasyChem Code

Output
 Fe(iii)4[Fe(ii)(CN)6]3                        
 
Fe(iii)4[Fe(ii)(CN)6]3
/\/\  
/\/\
 $M(235)U   
$M(235)U
  _p3_p3_p3
  
_p3_p3_p3
 -_pp_pO_p_pp   
-_pp_pO_p_pp
 CH3-C-CH3; CH3|#C|OH 
 
CH3-C-CH3; CH3|#C|OH


The Easychem syntax is not extremely difficult to understand, but it takes some practice.  Fortunately common structural motifs and equations are relatively easy.  easyChem syntax is not as obvious as smiles but its not as cryptic as InChI.  Here is the code for coronene and a few chemical equations.  You can also control color of elements as seen in the example below.

EasyChem Code
Output
 |\/`/|\`\`/|`|`\`|/`/`\`||/\\/\\|\||`/|`//`\`/`\\`|/`/`\`||/    
|\/`/|\`\`/|`|`\`|/`/`\`||/\\/\\|\||`/|`//`\`/`\\`|/`/`\`||/
CaCO3 "1000^oC" -> CaO + CO2"|^"  
CaCO3 "1000^oC"-> CaO + CO2"|^"
 2$itemColor1(red)NaOH + $atomColor(blue)2H2SO4$atomColor() = $itemColor1(#F00)Na2SO4 + $color(#00F)H2"|^"    
2$itemColor1(red)NaOH + $atomColor(blue)2H2SO4$atomColor() = $itemColor1(#F00)Na2SO4 + $color(#00F)H2"|^"

I decided to implement a Moodle text filter that would replace easychem code between % symbols on a given page with easychem images.  The table above utilzes this filter.  You can download the most stable release at my GitHub site here.  If you don't have the patience to learn the syntax you can go to the EasyChem Substance Reference and search for compounds of interest and copy the code.  Finaly I created a Moodle Atto HTML editor plugin to build and insert structures.  It's very similar to the Moodle equation editor.  I packed it full of example chemical equations and structures.  This plugin is available here.

EasyChem Editor ScreenShot


(Edited by Admin Account - original submission Friday, January 9, 2015, 9:19 AM)

(Edited by Admin Account - original submission Friday, January 9, 2015, 9:29 AM)