Quaternion Calculator Built With Javascript Math Toolkit and Polymer


My value proposition is predicated on delivering applied math solutions to a programming team in a manner that abstracts as much of the math and complexity away from the solution as possible.   Of course, the greatest level of abstraction is for me to upload a math and/or visual component library.  Developers then run-time import the library into a project and use it without re-compiling the application.  This also allows the team to take advantage of post-release library enhancements without having to break stride on a new project just to update an older one.

I’ve been looking at Web Components as a means of duplicating the experiences I had about ten years ago with Flex.  It was easy for me to author an Actionscript math library, load it into a Flex component, and then use the Classes and Methods in that library in the Flex application.  I could even author a small Flex app. and load it into a Flash-generated application.  This allowed me to use Flex/AS exclusively to deliver a wide variety of solutions to other developers.

Jesse Warden recently got me interested in Polymer, and it does seem that technology is far enough along to warrant some experimentation on my part.  After working through a couple online tutorials, I decided to take the plunge and develop my own component from scratch.

As part of this experiment, I wanted to work out for myself how to deliver technology such as that in the Javascript Math Toolkit directly to web component developers.  So, this demo is a simple Quaternion calculator, the operation of which is controlled by the JS Math Toolkit Quaternion class (yes, I use the term class very loosely).

As an additional twist, I wanted to implement something that I have not seen in other online calculators.  In a typical calculator, inputs are entered and then an operation is selected.  If the inputs are changed, the operation must be selected again, even if it’s the same operation.  For fun, I wanted to provide the ability to leave the selected operation constant and update the result real-time when one of the quaternion elements is changed.  I’m not claiming that’s good UX; it’s simply a ripple that I hoped would force me to dig a bit deeper into Polymer since the same output process could be triggered from two different paths.

And, as a final requirement of the experiment, I wanted to use Polymer Elements as much as possible, simply to see how they work :)

Here is a screen shot of the calculator.


There really isn’t much too it – two input Quaternions and a result display.  The paper-fab buttons contain images to indicate the operation.

In terms of integrating the Javascript Math Toolkit Quaternion into the calculator, that proved to be much simpler than wrangling with handlers, scope, and subtle issues with paper-fab and flex layout.

All I had to do with the existing Quaternion source is delete the RequireJS scaffolding and enclose the ‘class’ inside a IIFE. Place the code inside <script> tags in an html file and it’s ready for import!

The only real issues I had with Polymer and Polymer Elements is the flex layout CSS not working on Safari on my Mac.  I tested in late-model Chrome/Firefox and even IE on a Windows 7 machine and the calculator displayed the paper-fab buttons in the horizontal-centered layout.  They were stacked vertically in Safari.

If you want to experiment with the code, then check out the Quaternion Calculator here.  Nothing has been minimized or obfuscated.  The code is well spaced and fully documented.  I’m also giving away an alpha version of the JS Math Toolkit Quaternion class.  That code is fully documented.

I’ve debated about putting the project up on GitHub.  I would actually like to work with someone more experienced with Polymer to resolve the Safari layout issue and make this a better example of how Polymer should work as opposed to an experiment on using sharable math libraries in a web component.  If you are interested, please contact me at theAlgorithmist [at] gmail [dot] com.

In the mean time, if you’re just starting out with Polymer (like me), then I hope you find something helpful after ‘View Source.’ :)

Comments are closed.