Calculators are the main type of tools within CalcKit. They are very easy to build and represent the largest portion of tools in CalcKit
Below I’ll try to explain all components of the calculators and how to build them, with some examples.
Each calculator is built using multiple required and optional components.
The only required components are
Icon / Title / Category / Tags
The Title and the Icon are self-explanatory.
The Icon can be changed by simply clicking on it. After you click it, a window will pop-up where you’ll see a list with pre-made icons to choose from and also a field where you can type URL to your own icon.
The Category could be useful when you add multiple calculators from different branches in the same folder and you want to know to which branche each of them belongs. Take for example our Library. There are over one-hundred calculators in it, for mathematics, electronics, converters and so on. To find all electronics calculators you would, for example, type
Electronics in the Search Bar and only the electronics tools will be displayed.
The Tags (separated by space) are also used for searching, but (unlike the Title and Category) they are not visible to the user. Using a correct combination of tags you can create some very nice search queries. For example, in the
Length converter we have added the units
cm etc. in the tags and we’ve also included the word
to. Now, when you open the Library and search for
km to cm the
Length converter will be right there on top.
Header / Footer
The Header is a text box displayed on the top of your calculator, above the image and variables.
The Footer is a text box displayed on the bottom of your calculator, below the variables.
Both Header and Footer are optional fields. If you leave them empty, they will automatically be hidden in your calcualator.
Both fields can contain one or multiple lines of text.
You can also apply some basic styling on the text (as you can see on the image above) making portions of it
__underlined__, or also mixing them
Image / Image Description
CalcKit gives you the possibility to insert an Image in your calculator.
If included, the Image is displayed between the Header and the Variables.
As you might know, CalcKit has two themes, light and dark, so if you are using a transparent image, you might want to include two versions of it. You can do that by filling the two fields:
Image URL Dark for the dark theme and
Image URL Light for the light theme.
If you fill only one of the URL fields, the same image will be displayed on both themes. If you leave both fields empty, the image box will be automatically hidden in your calculator.
Together with the Image, you can add an Image Description as well.
Same as the Header and Footer, the Image Description can have one or multiple lines of text and you can also apply the same text styling that is available for the Header and Footer (
Note: If you do not include an image, the image description will be automatically hidden, regardless of what you have written in it.
If you include an image, but you leave the image description field empty, the image will take the full width of the page (see picture right). Otherwise, if you write something in the image desciption, the image and it’s description will be displayed in the same line, with the image taking around 60% and the description around 40% of the page width (see picture left).
The Calculators can contain any number of Variables, with each Variable having four elements: Identifier, Name, Equations and Unit(s).
All Calculators in CalcKit use a unique Circular Reference Algorithm, which allows each Variable to act as both Input and Output.
Identifier is basically a unique name/word that you’ll use to reference this variable in other variables’ equations.
It must begin with a letter
A-Z or underscore
It can contain letters
0-9 and underscores
Name is a Label for the variable that you see on-screen when you use the Calculator.
Each variable can have any number of equations. It might also have 0 equations in which case the variable is considered to be an input.
In the Equations field you can put as many equations as you need to. Each equation needs to be put on a new row.
For example, in the Length Converter you’ll find the following equations for the
_mm * 0.001 _cm * 0.01 _km * 1000 _in * 0.0254 _ft * 0.3048 _mi * 1609.344
_mi are the Identifiers for
The Unit appears on the right side of the variable’s input field.
It is not required. You can leave it completely empty, in which case, the input field will expand to the end of the line in the calculator.
You can add a single unit that will be displayed as simple text, or you may add multiple units that will be displayed as dropdown menu when using the calculator.
To add a single unit as text, you just need to type it in the
Just make sure to type it on the first line and do not create a second line.
To add a dropdown of multiple units, you need to put each unit on a new row.
You also need to include a multiplier for each unit, so that CalcKit can calculate the value.
Let’s look at our Electricity Cost Calculator. There we have multiple variables that have dropdowns on the right side.
You can see that for the
Running time variable, we have the dropdown with units:
Weeks etc. To create it we use the following code in the
60 Minutes 1 Hours 0.0416666666666667 Days 0.005952380952381 Weeks
Hours have a multiplier of
Hours is our base unit. That means when you select minutes, internally they are converted to hours and all equations for this variable are using the unit
To calculate the multiplier for the other units we do the following:
- Minutes: There are 60 minutes in one hour, so the multiplier for minutes is
- Days: There are 24 hours in a day, so that is 1/24 days in one hour, which comes to
- Weeks: There are 24*7 hours in a week, so 1/(24*7) weeks in one hour, which is
At time of writing this, there are two extra Options that you can Enable for each of your calculators.
Long Variable Names
With this option enabled, each variable will spread on two lines.
Name of the variable will be put on the first line and will take the full width.
The Input Field and the
Unit(s) will be displayed on the second line.
This is useful when you have names for the variables that are longer than 2-3 words.
Unit inside Input
When you have this option enabled, in all variables that have a single text unit, the
Unit will be displayed as a placeholder for the input field and the input field will expand to the end of the line.
This option will effect only the variables that have simple text unit, that means variables with multiple units (dropdown) will not be affected and will be displayed same as before enabling this option.