|
|
Tigra Calculator PRO is flexible JavaScript calculator offering high reliability and wide browsers support. This script allows your visitors to perform necessary mathematical calculations quickly and easily without any additional means. Result is returned in single field with user defined name. Tigra Calculator PRO suits well for applications where quick arithmetical calculations are required. Script setup will take 5 minutes in most cases
Tigra Calculator PRO can work with any browser capable of generic DHTML.
Script was successfully tested with these browsers:
| |||||||||||||||||||||||||||||
* - except popup mode
** - except modal mode
Tigra Calculator PRO script consists of several files. This makes calculator maintenance easier and reduces network load.
Default distribution package contains:
Script files should be attached to HTML document with appropriate tags in header:
<head> <!-- some header data --> <script language="JavaScript" src="calc_files/default/settings.js"></script> <script language="JavaScript" src="calc_files/calculator.js"></script> <link rel="stylesheet" href="calc_files/default/calculator.css"> </head>
Make sure your HTML document has valid form with some unique name:
<form name="some_form_name" ... > <!-- some inner HTML of the form --> </form>
Note: '...' in the code sample means 'other form attributes here'. Remove those dots when copying that code to your HTML document.
All further examples in this documentation substitute a name of the form field to which a calculator should be attached for "some_form_name".
There are 3 different ways of Tigra Calculator PRO instance can appear to a site visitor, those are called modes. All modes are available in product distribution package. Calculator initialization differs a bit for different calculator modes:
In popup mode Tigra Calculator PRO is displayed in a new browser window that can be moved on the screen.
To initialize calculator in this mode the following steps should be done.
Firstly, calculator constructor should be called as it is shown below:
<script language="JavaScript"> <!-- // var TCR = new TCalculator(addParams); // --> </script>
where TCR substitutes for calculator object instance reference and can be any valid JavaScript variable name. The only parameter to be supplied to the constructor call in popup mode is calculator scope settings structure.
Secondly, calculator popup function - TCRPopup() - call should be attached to an input field to which calculation results are needed to be passed to. The most common way to do this is to handle the popup call on a link click. Here is the code example:
<form name="some_form_name" ... > <!-- some inner HTML of the form --> <input type="Text" size="24" name="some_text_name"> <a href="javascript:TCR.TCRPopup(document.forms['some_form_name].elements['some_text_name'])"> <img width="15" height="13" border="0" alt="Click here to see the calculator" src="calc.gif"></a> </form>
The above code makes calculator appear each time a visitor clicks calc.gif image and return calulations results to "some_text_name" field of "some_form_name" HTML form.
As it can be seen you should supply to TCRPopup() method of TCalculator object only one but required parameter - a reference to control form element to which calculation results are needed to be passed to.
In modal mode Tigra Calculator PRO also can be accessed clicking on the image attached to the form field. But if calculator is visible clicking on the same image will hide it. Calculator instance is build in page layers, contains an input field itself and shows calculator just below the form field it is attached to, over primary page layer content. The mode is useful for ones who wish to save a valuable page space but not to make a visitor wait till calculator loads.
To install calculator in this mode there should first object instance (or instances if multiple) be created as it is shown below.
<script language="JavaScript">
<!-- //
var TCP = new TCalculator('some_form_name', 'input_calc', addParams);
// -->
</script>
There are three parameters that can be passed to calculator constructor function in the mode:
Note: Specify null for omitted parameters to keep correct order of specified ones:
new TCalculator('some_form_name', null, addParams);
To initialize created calculator(s) it is needed to call TCRinit() method of calculator object. The call should be placed at the end of the document directly before closing </BODY> tag:
<script language="JavaScript"> <!-- // TCP.TCRinit(); // --> </script>
If you have followed all instructions thoroughly your calculator is ready to use.
In this mode calculator always stays visible and ready to use on your web application, so a visitor does not need to make extra clicks to see it. You can configure your own unique appearance so it perfectly matches feel and look of your site.
Calculator installation for onpage mode is performed as it is shown below. The calculator will be drawn out in a place where its constructor function is called, hence the call has to be executed directly inside a form which the calculator is attached to:
<script language="JavaScript">
<!-- //
new TCalculator("tc_test", "input_calc", addParams);
// -->
</script>
Parameter set used for calculator initialization in onpage mode is the same as for modal mode:
Note: Specify null for omitted parameters to keep correct order of specified ones:
<script language="JavaScript">
<!-- //
new TCalculator("tc_test", null, addParams);
// -->
</script>
By calculator initialization you can assign calculator scope settings structure as the third parameter (the first for popup mode). It is used to change calculator's design and is optional. Below is a table of keys supported by the structure.
|
Here is default notation of calculator scope setting structure:
var addParams = {
'matrix' : TCP_def_matrix,
'img_path' : 'calc_files/default/img/',
'body_css' : 'calcBody',
'font_css' : 'calcLabl',
'text_css' : 'calcLCD',
'btn_width' : 30,
'btn_height' : 21,
'win_width' : 305,
'win_height' : 145
}
There is a way to add to or exclude from calculator panel any button of the predefined set or any button you build on internal calculator functions and place them where they suit the most. Buttons number and positioning are based on descriptive matrix, bi-dimensional JavaScript array which elements are positioned exactly like calculator buttons.
Here is a sample of calculator matrix.
var TCP_def_matrix = [ [TCPbtn_7, TCPbtn_8, TCPbtn_9, TCPbtn_d, TCPbtn_bk], [TCPbtn_4, TCPbtn_5, TCPbtn_6, TCPbtn_mult, TCPbtn_c], [TCPbtn_1, TCPbtn_2, TCPbtn_3, TCPbtn_mins, TCPbtn_eql], [TCPbtn_0, TCPbtn_z, TCPbtn_pnt, TCPbtn_pls], [TCPbtn_mc, TCPbtn_mr, TCPbtn_ms, null, TCPbtn_mst], [TCPbtn_sin, TCPbtn_cos, TCPbtn_tan, TCPbtn_pi] ];
Calculator keyboard is described line by line, button by button in a line. Each matrix cell corresponds to one calculator button. For example, according to the above matrix, TCPbtn_6 is a third button of the second from top calculator keyboard row.
To remove a button from a matrix just place JavaScript null instead of it (optional if last in a row).
The default Tigra Calculator PRO descriptive matrix is:
var TCP_def_matrix = [ [TCPbtn_sin, TCPbtn_mc, TCPbtn_7, TCPbtn_8, TCPbtn_9, TCPbtn_d, TCPbtn_bk], [TCPbtn_cos, TCPbtn_mr, TCPbtn_4, TCPbtn_5, TCPbtn_6, TCPbtn_mult, TCPbtn_c], [TCPbtn_tan, TCPbtn_ms, TCPbtn_1, TCPbtn_2, TCPbtn_3, TCPbtn_mins, TCPbtn_eql], [TCPbtn_pi, TCPbtn_mpl, TCPbtn_0, TCPbtn_z, TCPbtn_pnt, TCPbtn_pls, TCPbtn_mst] ];
Elements to build the matrix of are JavaScript arrays:
var TCPbtn_sin = ["sin", "sin calculation", "sin"];
Each such array has 3 cells meaning:
Each calculator button includes 3 images for various states: normal (default), mouseovered and pressed as it is illustrated on figure#1 below. Those images names are made up of the prefix component of image file name and "_0.gif", "_1.gif" and "_2.gif" for pressed, normal and mouseovered state respectively. Hence to be displayed correctly above described button requires sin_0.gif, sin_1.gif and sin_2.gif image files located in a directory which name is specified as a value for img_path.
Below is a list of predefined calculator buttons that can be used to form the descriptive matrix
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Above names can be used in any variations to build calculator descriptive matrixes. There can be any custom buttons defined as well. For instance you need a button to calculate arithmetic square root but predefined TCPbtn_sqrt does not satisfy you: it has wrong pictures and hint text.
If so, just declare a new button:
var myQSRT = ["mysqrt", "Arithmetical square root", "sqrt"];
To display that button three images are needed: mysqrt_0.gif, mysqrt_1.gif and mysqrt_2.gif. Create them and place in a directory which name is specified as a value for img_path key of calculator scope settings structure.
After that the one thing left to see the button working on a calculator is to define your own descriptive matrix (if none) with the button included into a proper place:
var myMatrix = [
[.........],
.....
[....., myQSRT, .....],
.....
[.....]
];
and supply a refference to the matrix as a value for matrix key of calculator scope settings structure.
Visual aspects of Tigra Calculator PRO (colors, fonts, distances) can be set in the way familiar to most web developers - Cascading Style Sheets. Most of calculator elements are assigned CSS classes that developer can define rules for.
Below is the default calculator stylesheet with classes descriptions:
/* text labels of "Invert", "Radians" and "Degrees" - TD elements */
.calcLabl{
color: #00008B;
font-size: 10px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
cursor: default;
}
/* indicator - INPUT TYPE="TEXT" element */
.calcLCD {
background-color: White;
width: 186px;
}
/* calculator panel - BODY or TABLE element */
.calcBody{
background-color: #BDD7EF;
}
One Regular Tigra Calculator PRO script license gives the right to use one copy of the script file (calculator.js) within single domain boundaries.
| Demo of Licensing Cases: | |||||||||||||
|
To finalize registration process owner of the script license should provide SoftComplex Inc. with domain name which license is associated with.
Developer license gives the right to include unlimited number of Tigra Calculator PRO instances in the products of license owner. Such kind of license is obtained automatically by those who have 9 or more regular licenses.
We offer 50% discount for the script starting from second license. To take advantage of this discount use the link sent with every order confirmation message.
Same discount initially applies to educational and religious organizations.
As owner of the Tigra Calculator PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:
You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full Calculator customization services are provided on customer's request at additional charge.
Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.