Mechanomy

Software for Pre-CAD systems design

UnitConverter

The UnitConverter library enables unit converters to be defined and used within webpages, allowing visitors to immediately convert quantities into their preferred unit system.

If your website is written in WordPress, see our WordPress demonstration website.

inOutBox

The inOutBox converter format receives an input number in the left text box and unit selector, converting that number into the unit selected in the right selector.

To load this library from Mechanomy's server and make the UnitConverter library available on your page, add this line anywhere on the page in whichever 'raw HTML' format your website prefers:

<script defer src="https://dist.mechanomy.com/UnitConverterWeb/unitConverter.js"></script>

Then, at the location you want the inOutBox converter, add this line also as raw HTML:

<div class="unitConverter" format="inOutBox" id="forceConversionInOut"
units="N:1, kN:1e-3, lbf:0.2248" style="margin:auto;"></div>

The element is customized by these attributes:

  • class="unitConverter" is necessary for the library to locate the inOutBox converter and read its attributes
  • format="inOutBox" specifies the inOutBox converter format
  • id="forceConversionInOutBox" uniquely identifies this unitConverter
  • units="N:1, kN:1e-3, lbf:0.2248" provides the unit labels and their conversion factors, as below
  • style="margin:auto;" centers the element on the page, alongside other CSS styling

The units and conversion factors are specified by the units argument, with the simple format of [unit symbol]:[value][comma]. For the conversion to be valid, the values of each unit need to be consistent.

In the above force conversion example, 1 N = 1e-3 kN = 0.2248 lbf. The first unit given will be the default of the input, and the second the default output unit displayed on page load.

If we desired the default to be '13 kN = 292 lbf' with an option to convert to Newton, the units attribute would be: units="kN:13, lbf:292, N:1300".

By default the element will inherit the existing page style, but this can be overridden through the style argument. Some possibilities:

  • style="color:#002244; font-size:large; background-color:#eeeeff; font-family:Times New Roman, serif; margin:auto; width:100%;"
  • style="color:#555; background-color:#eed; font-family:Helvetica, sans; font-size:large; width:100%;"
  • style="color:#ff5555; font-size:small; font-family:Consolas, mono; margin:auto; width:100%;"

table

The table converter format displays all of the units at the same time, with the input taken from whichever box was last changed.

This element is created in the same way as the inOutBox, with the first line loading the converter and the second specifying its format:

<script defer src="https://dist.mechanomy.com/UnitConverterWeb/unitConverter.js"></script>
<div class="unitConverter" format="table" id="forceConversionTable" units="N:1, kN:1e-3, lbf:0.2248"
style="color:blue; font-family:serif; font-size:large; width:100%; margin:auto;"></div>
  • class="converter" is necessary for the library to add the converter table
  • format="table" specifies the table converter format
  • id="forceConversionTable" should be changed to uniquely identify the element on the page
  • units="N:1, kN:1e-3, lbf:0.2248" provides the unit labels and their conversion factors, as above
  • style="" styles the element

Some styling possibilities:

  • style="font-family:Serif; font-size:large; color:gray; background-color:#f4f4f4; padding:8px; margin:auto;"
  • style="font-family:Arial; font-size:small; color:green; margin:auto;"
  • style="font-family:Consolas; font-size:medium; color:black; border:2px dashed magenta; margin:auto;"

Development Status

This library is under continued development and is availiable under the MIT License.

On third-party JavaScript

No two websites are written or hosted the same way, and the various organizations responsible for these will have a variety of policies on the use of third-party libraries. Our Javascript libraries are cleanly written to provide only the capabilities described. They do not accept personally-identifiable information from your users, nor do they utilize cookies or other local storage technologies to function and generally will not require you to display a cookie banner or other notice (understanding that compliance with any applicable authority remains your duty).

Mechanomy respects you and your users and does not perform any fingerprinting or usage tracking in these libraries. When you place one of our <script> tags on your page, the browsers of visitors to your website will download our library; this request is the only information Mechanomy receives from you or your users.

These libraries are written in vanilla JavaScript and bundled via WebPack. External dependencies are Plotly.js for SimpleGraph and three.js for ViewModel.

Please note that libraries loaded from dist.mechanomy.com, as described above, may change at any time according to our development and maintenance needs. While we will endeavor to not change functionality, this cannot always be avoided. If you would like to receive notice of these changes, please email us.

We are also happy to assist you in evaluating these libraries by creating a static prototype of your website for your internal evaluation, please send us a link to the exact page, the desired library and functionality, and any details you know about your web framework or host.