Tank volume

One of users asks for a calculator, which can compute tank volume given its length, diameter and walls depth. Here it is.

Tank volume

Length in meters

Diameter in meters

Walls depth in millimeters

Calculation precision

Digits after the decimal point: 3

Calculate

Used volume in cubic meters

 

Walls volume in cubic meters

 

Total volume in cubic meters

 

 Link  Save  Widget

Since it is quite simple, I decided to use it as example and eventually write

Step-by-step guide: How to create online calculator

cause this site is GUI and engine for online calculators, that is - calculators authoring tool.
There are only two prerequisites for author: first, he should be registered user, second, he should be able to code what he wants to compute in Javascript.

Step 1

Go to "My calculators" page and choose "Create new..." -> "Calculator". This will open calculator editor.

Step 2

First, fill "Name" and "Description" fields. Description is used in lists.

Step 3

Now, we should add input parameters, which are (in our case) length, diameter and walls depth. Toolbar is used for adding and removing various calculators parameters, but now we need only simple input parameters. Press the button with "in" mark. This will open parameter editor dialog. Fill it like on the picture below. Note that "Variable" field is the name of the variable, which then will be available in Javascript. I hope that other fields are self-descriptive.

Step 4

Repeat the same for the "diameter" parameter

Step 5

And for the "depth" parameter

Step 6

Now we should add simple output parameters. In our case these are used volume, total volume and walls volume. Press the button with "out" mark. This will open parameter editor dialog.

Step 7

Fill dialog for the "used" parameter like on the picture below.

Step 8

Repeat the same for the "walls" parameter

Step 9

And for the "total" parameter

Step 10

Now, when all ins and outs are in place, we can start coding. Those who knows Javascript should have no problem with the code on the picture below except one thing - how output parameters are handled. You can't just assign computed values to them, that won't do the trick. You have to use special method SetValue and pass computed value as parameter of this method. These are last three lines of code. Except that it is plain Javascript.

Step 11

Now you can fill in some tags for better classification and press "Preview" button

Step 12

On preview page you can check how it is working and return to editing or decide to publish it. If later, press "Publish" button

Step 13

After publishing, calculator receives unique URL.

Step 14

Now, each calculator, like this one, needs couple of words for other visitors like why it is done and how to use it, etc. This is done with article. Note that it is not a calculators, it is articles, which are listed on site. So, choose "Create new..." -> "Article" and this will open article editor.

Step 15

In article editor, write couple of words about calculator, and press first toolbar button to insert calculator into article

Step 16

Locate and choose your newly created calculator

Step 17

It will be pasted into article text with brackets.

Step 18

Press "Save". On save page you can preview your article and decide that it is ready for publishing. Article publishing assigns unique URL to the article and lists it on site navigation.

The end.