Content

EasyCalc Lite

With EasyCalc Lite you can create nice and powerful calculators.

Download

Insert your email address. Download link will be sent to this email address.

component
joomla 2.5

This Joomla! 2.5 component allows you to create many JavaScript calculators on your website. You can calculate installmets, mortgage, personal finance, BMi, pretty mich anything.

For a Joomla! 3 version, go to Calculoid.com

The administration of the EasyCalc is powered by jQuery UI, so creating new sliders or other elements of your calculator is fast and enjoyable. You can create as many calculators as you wish.

EasyCalc Lite is a less advanced version of EasyCalc. The Lite version lacks EasyCalc module and Meter module - this is only a part of the full version of EasyCalc.

Calculator can consist of a main formula, input elements (form fields) and constants.

Available input elements

  • Slider - users select number by sliding. Check out the demo.
  • Number - only numbers can be inserted in.
  • Text - for constants and subformulas
  • Conditions - for table data
  • Radio Buttons - for multiple choices
  • JavaScript - plain JS or jQuery code
Version Version created Version description
1.1.7 2014-04-14 09:37:36 ">" symbol problem resolved.
1.1.6 2013-12-11 15:43:42 Display only published items on front end, Added decimal places and prefixes.
1.1.5 2013-10-01 13:54:08 Repaired: Custom event caused error in mobile browsers, Added field for plain JS code, Added selectbox field, Read only bug repaired.
1.1.4 2013-07-19 11:00:27 repaired triggering JS custom event for IE9, 10, Modification for https
1.1.3 2013-07-02 14:21:40 Repaired loading jQueryUI from https, Added support for touch slides, base64 coding removed to string cuz JED
1.1.2 2013-06-28 13:01:31 Installation SQL bugs repaired, renamed - can't be called "Lite"

EasyCalc is a component and a module for Joomla! 2.5. With EasyCalc you can create nice and powerful calculators like the one on our demo website. Take a look.

The administration of the EasyCalc is powered by jQuery UI, so creating new sliders or other elements of your calculator is fast and enjoyable.

You can create as many calculators as you wish and with the module, you can display them all on one site.

EasyCalc Lite vs EasyCalc

FeatureEasyCalc LiteEasyCalc
Slider Yes Yes
Number field Yes Yes
Text field Yes Yes
Condition field Yes Yes
Predefined CSS files No Yes
Footer link can be switched off No Yes
EasyCalc module No Yes
Meter module for EasyCalc No Yes
Progress Bar module No Yes
Ruler for slider No Yes
Send results to email No Yes
Store results to database No Yes
Rresult CSV export No Yes
  Download Buy

Sending and storing results

Since version 1.2.0, EasyCalc can let your users to send results they've calculated to their email address. You can also configure that these results will be sent to other email addresses. Plus, results which your users send like this will be stored to the database and you can see them at administration.

com_easycalc_email_config.png

Exporting results

Results can be exported to CSV file from the administration. There is also feature which can send periodically (once a month, twice a year, ...) to email addresses defined for each calculator separately. If you want to do so, configure it at EasyCalc's global configuration and then set up CRON to trigger this URL:

http://{domain}/?option=com_easycalc&task=calculators.sendexports&id={calculator_id}

Replace info in curly brackets for yours. If you do not specify {calculator_id}, it will send emails with results for all calculators. Set up CRON to trigger the URL in the same period as you configure it at the component.

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, a new box will show up and you can define it. The list of available fields is below.

EasyCalc-basic.png

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). It is set as the Result Unit. The result itself will be located between these two fields and will be changing during the calculation.

EasyCalc-parameters.png

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

A slider is a typical input which you probably know from your 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 values that 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.

EasyCalc-slider.png

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.

EasyCalc-radio.png

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.

EasyCalc-number.png

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).

EasyCalc-text.png

JavaScript

JavaScript textarea field is visible only at administration. If you are familiar with JavaScritp (jQuery), you'll be able to do literaly anything you need. There are no boundaries. You can adjust calculator's behavior to your need. The code you'll insert at administration will run at frontend obviously.

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;

EasyCalc-condition.png

Themes

EasyCalc support different CSS themes. CSS themes are stored in /components/com_easycalc/assets/css. When you look at this folder, you'll see easycalc.css, shadow.css and yelowblue.css. The first one is the default CSS file which loads every time. The rest of them are themes which can be selected in the calculator configuration.

com_easycalc_theme_config.png

If you need some theme changes, it is recommended that you copy one of the predefined CSS styles and rename the file. You'll see your style automatically at the calculator's configuration so you can select it and change CSS as you need.

Examples

uverova-kalkulacka.png

vynosova-kalkulacka.png

 

comments powered by Disqus

Additional information

For our products there is:

  • no warranty!
  • no support!
  • it is as it is
  • use it on your own risk!