EasyCalc

EasyCalc Lite vs EasyCalc

Setting Up the Calculator

After clicking on the well-known Joomla "New" button to add a new calculator, you'll see the panel in the picture. There you enter the calculator title. The next input field is the main formula. You can enter any JavaScript function you need. There is also a link to a list of available Math functions and an example. Then there is a wel-known Un/Publish option. With the select box "Add new field" you can select which field you want to add to this calculator. After you select some option, new box will show up and you can define it. The list of available fields is below.

In the next Parameter you create the Result label. In the picture, you can see that the Result Label is "Měsíční splátka:" (Monthly Payment) and "Kč" (CZK - Czech crown) is set as the Result Unit . The result itself will be located between these two fields and will be changing during the calculation.

Available EasyCalc Inputs

All inputs always have these fields:

• Label ... the name which will be displayed in the front-end calculator.
• Alias ... the name of the input which is used in the formulas. It must be ascii chars without spaces and can't start with a number.
• Value ... the default value after the calculator is loaded.
• Unit ... the text that will be displayed at the end of the input. Usually currency.

Slider

Slider is a typical input which you probably know from desktop applications. Unfortunately, it is not supported by HTML yet. On the other hand, it is a very valuable input in the calculator so we used the slider from jQuery UI. In the picture you can see the slider parameters. It is necessary to set the Max and Min value which a user can select. Then there is a Step field which allows you to define how precisely can the values be set during sliding. You can use the Scale JavaScript formula if you do not want a linear slider. Another great thing is the Ruler step field. EasyCalc will create a ruler above the slider and you can define how many values should be displayed. The gaps between these values will be calculated automatically.

Radio Select

Radio select is another great input. You see you can define there as many radio buttons as you like. Each can have different label and different value.

Number

Number is meant for numeric inputs. In modern browsers which support HTML5, they will allow to insert only numbers. Google Chrome also adds Up and Down buttons behind the input field so users can control the number just by clicking on these buttons. When using mobile devices with software keyboards, the numeric keyboard will show up immediately so it is more user friendly. Use this input if you can. In the picture, you can notice that there is an intermediate calculation formula so the value can be calculated from other inputs as well.

Text

Text input is a typical input you know from every form. In our example it is used to display a constant decimal number. There is also Read Only select option where you can select Yes (normal input), No (input which can't be changed by a user), Span (text will be wrapped by a span and it will look like a normal text).

Condition

Condition input was designed to put some table data into the calculation. The table data must be retyped to the system of conditions. An example of conditions is shown below.

var pc;

if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 0 && c [smllr] 14) {pc = 0.55;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 14 && c [smllr] 30) {pc = 1.45;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 30 && c [smllr] 91.25) {pc = 2.85;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 91.25 && c [smllr] 182.5) {pc = 4.45;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 182.5 && c [smllr] 273.75) {pc = 5.85;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 273.75 && c [smllr] 365) {pc = 6.05;}

else if(v [bggr]= 0 && v [smllr] 100000 && c [bggr]= 365) {pc = 7.15;}

else{pc = 0.1;}

return pc;

Examples