Tutorial > Stoichiometry Table
The StoichiometryTable component is a fully chemically aware and self-calculating tool for performaing stoichiometry calculations. The table may be initialized from either a drawn reaction or a written chemical equation, and will automatically maintain proper balancing. It is modeled after the stoichiometry table in the ChemDoodle desktop application and optimized for both desktop browsers and mobile devices.
This tutorial will walk you through the functionality of the StoichiometryTable component. It is comprised of the following sections:
- Installation
- User Guide
- Initializing the Stoichiometry Table
- Saving/Loading Stoichiometry Table States
- iChemLabs Cloud Services
Installation
The StoichiometryTable component requires interface elements from the uis package and is therefore provided as part of the ChemDoodleWeb-uis.js plugin. In order to use the StoichiometryTable class, you need to link a few additional files as URI resources on your webpage that are provided in the uis folder of the ChemDoodle Web Components download:
<!--these two are required by the ChemDoodle Web Components library-->
<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>
<!--these two are required by the ChemDoodle UIs plugin-->
<link rel="stylesheet" href="[path]/jquery-ui-1.11.4.custom.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb-uis.js"></script>The StoichiometryTable class is provided in the ChemDoodleWeb-uis.js file. This plugin requires one library, jQuery UI, that powers its interface elements. jQuery UI requires the CSS file provided and the JavaScript library is included in the ChemDoodle scope through the ChemDoodleWeb-uis.js file.
jQuery UI Image Folder
In addition to the three additional URI resources required by the UIs plugin, there is one folder of images provided in the uis folder of the download. This folder is called images and contains the corresponding images for the jQuery UI CSS file. This folder should be placed in the same folder that the jQuery UI CSS file is placed on your server.
Button Icons
The icons for buttons used by the StoichiometryTable class are embedded directly in the ChemDoodleWeb-uis.js plugin source itself as data URIs, so there is no need to host those images. Please note that these icons (that you see for the edit components when clicking on a table cell) are iChemLabs Proprietary and may only be used in projects using ChemDoodle Web Components.
CSS
The styles defining how the stoichiometry tables are rendered are found in the same ChemDoodleWeb.css file used for the rest of the ChemDoodle Web Components. These styles match the look and feel of the default stoichiometry table tool in ChemDoodle 2D. You may change or override the settings for the stoichiometry_table CSS class to fit your application.
User Guide
The web-based stoichiometry tables produced by the StoichiometryTable class are identical to the stoichiometry tables in ChemDoodle 2D. Simply edit the cells by clicking on them and your calculations will be performed. For thorough instructions and example walkthroughs, please see section 7.9 of the ChemDoodle 2D user guide.
Initializing the Stoichiometry Table
Unlike other components in the ChemDoodle Web Components, which are children of the Canvas class and are formed from a <canvas> element, the StoichiometryTable class is instead based on a HTML <table> within a <div> element. Regardless, we can initialize a StoichiometryTable instance in a similar manner to other ChemDoodle Web Components. To initialize it, we just call its constructor, which places it into the HTML page:
let table = new ChemDoodle.StoichiometryTable('table', {});The parameters are defined as follows:
- id - is the id of the <div> element containing the StoichiometryTable component in the HTML page.
- options - is an object that contains the option name/value pairs. Currently there are no options for the StoichiometryTable class.
Just like other ChemDoodle Web Components, the StoichiometryTable instance will automatically create itself in place while the document DOM is being written. If the DOM is already closed, you can create a StoichiometryTable instance from a <div> element already in existence by sending the StoichiometryTable constructor the id of that existing <div>. Please see this tutorial page for more information on initializing ChemDoodle Web Components.
You will not yet see anything if you just create the StoichiometryTable instance as there is no reaction information. So we must next start the table with either a drawn reaction or a written chemical equation.
Drawn Reactions
To start a stoichiometry table from structural reaction data, we need to first collect it. Both reactants and products are required, as well as the reaction arrow shape. This reaction data can be from a file, like a MDL RXN file or we can have a user draw it in a ChemDoodle web sketcher. We send this data to the StoichiometryTable.serverSetup() function. For structural reaction data, this function expects an object with two parameter arrays, molecules and shapes. The shapes array must contain the reaction arrow shape. In the following example, we start the stoichiometry table using a reaction we load from a MDL RXN file:
let data = ChemDoodle.readRXN('$RXN\n\nRhea mapper 082720091452 10000\nRHEA:direction=UN; RHEA:release=5\n 2 2\n$MOL\n\n Marvin 02220718252D \n\n 3 2 0 0 0 0 999 V2000\n -0.4125 0.7145 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.0000 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4125 -0.7145 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0\n 2 1 1 0 0 0 0\n 2 3 1 0 0 0 0\nM END\n$MOL\n\n Marvin 06110600282D \n\n 7 6 0 0 0 0 999 V2000\n 0.3572 -0.2062 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.3572 0.2062 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.0717 -0.2063 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.7862 0.2062 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.0717 0.2063 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.0717 1.0313 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1.7862 -0.2063 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 1 5 1 0 0 0 0\n 1 2 1 0 0 0 0\n 5 7 1 0 0 0 0\n 2 3 1 0 0 0 0\n 3 4 1 0 0 0 0\n 5 6 2 0 0 0 0\nM END\n$MOL\n\n Marvin 09260512442D \n\n 4 3 0 0 0 0 999 V2000\n 8.2750 -5.9408 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0\n 9.2030 -6.3252 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0\n 8.9895 -5.5283 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 9.7864 -5.7418 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0\n 3 1 1 0 0 0 0\n 3 2 1 0 0 0 0\n 3 4 1 0 0 0 0\nM END\n$MOL\n\n Marvin 03240720262D \n\n 7 6 0 0 0 0 999 V2000\n -1.7862 0.2063 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.0717 -0.2062 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.3572 0.2063 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.3572 -0.2063 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.7862 -0.2063 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1.0717 0.2062 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.0717 1.0312 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 2 1 1 0 0 0 0\n 3 2 1 0 0 0 0\n 4 3 1 0 0 0 0\n 6 4 1 0 0 0 0\n 5 6 1 0 0 0 0\n 6 7 2 0 0 0 0\nM END\n');
// let's see the reaction data
let viewReaction = new ChemDoodle.ViewerCanvas('viewReaction', 600, 100);
viewReaction.loadContent(data.molecules, data.shapes);
// now let's create the stoichiometry table
let tableReaction = new ChemDoodle.StoichiometryTable('tableReaction', {});
tableReaction.serverSetup(data);Written Chemical Equations
Stoichiometry tables can be started from unbalanced written chemical equations (the stoichiometry table will automatically balance if possible, or default to using the Equivalents row). Both reactants and products are required, but the equation does not need to be balanceable. In the following example, we start a stoichiometry table from an equation by sending the String, "N2O3H4 = N2 + H2O + O2", to the StoichiometryTable.serverSetup() function:
let tableEquation = new ChemDoodle.StoichiometryTable('tableEquation', {});
tableEquation.serverSetup('N2O3H4 = N2 + H2O + O2');Layout
The stoichiometry table created will automatically center itself in the <div> defined by the id provided in the StoichiometryTable constructor. If the table is very long, it will instead be left aligned inside of a scrolling pane as shown here for the very long equation, "K4FeS6C6N6 + K2Cr2O7 + H2SO4 = Fe2S3O12 + Cr2S3O12 + CO2 + H2O + K2SO4 + KNO3":
Safari and Mobile Safari have issues with flex layouts, and on these platforms, stoichiometry tables will always be left aligned, regardless of their widths.
Saving/Loading Stoichiometry Table States
The current state of the stoichiometry table can be quickly stored and loaded, so you may save a user's session to be further edited later.
Saving the Current State
To save the current stoichiometry table state, we store the StoichiometryTable.currentTableData object:
let mySaveState = table1.currentTableData;
// we may also want to convert it to a String to be saved to a server, for instance
let savedString = JSON.stringify(mySaveState);Loading a Saved State
Once we have saved the stoichiometry table state, we can load it into any StoichiometryTable object at any time to continue it:
// if you converted to a string, you first need to turn it back into a JSON object
// let mySaveState = JSON.parse(savedString);
table2.setupStoichiometryTable(mySaveState);Reusing the Stoichiometry Table
You may load a stoichiometry table state into any StoichiometryTable object at any time, even if it is currently populated with different reaction data. Simply send the StoichiometryTable.setupStoichiometryTable() function the new data to override the current data.
iChemLabs Cloud Services
The ChemDoodle Web Components library has full access to the entire ChemDoodle API through AJAX. Therefore, any and all functionality provided in the desktop version of ChemDoodle is instantly accessible through this library. The StoichiometryTable calculations require access to iChemLabs cloud services. If you have any requests for specific functionality that is not currently provided, please view our support options.
In order to use iChemLabs cloud services, your origins (domains) must be recognized by our servers. If you are an academic organization, we will provide free access to our server resources. Otherwise, our rates are very reasonable, please contact us for options and begin accessing the ChemDoodle API today!
In addition to accessing our servers, our customers get priority feature requests, priority support and access to our development builds. Don't miss this chance to take advantage of our leading chemistry interfaces and algorithms. Contact us today.
