Perform Calculations

Fold

GoVegan 24 Jun 2011 03:23

I have wanted to do this for a long time too.

@Wikidot Team, as an idea, perhaps you could implement this with a client-based solution as opposed to creating more load on the server?

Here is a design which actually achieves this using JavaScript:

Wikidot Syntax

[[calculate]]5*6[[/calculate]]

HTML Rendering

<span class="wd-calculate">5*6</span>

Javascript

See updated JavaScript code in a newer post on this thread.

@Wikidot Team, Feel free to use my code, if you choose to accept this wish :)

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Last edited on 06 Jul 2011 14:32 by GoVegan Show more

Reply Options

Unfold by

GoVegan, 24 Jun 2011 03:23

Fold

leiger 24 Jun 2011 03:33

This could be hugely useful for so many thing, if it is at all possible to do.

It's possible. The problem is finding a way to implement it in an intuitive way, that both makes sense and is powerful enough to do what we want it to do.

James' suggestion looks promising!

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Reply Options

Unfold by

leiger, 24 Jun 2011 03:33

Fold

GoVegan 24 Jun 2011 03:54

James' suggestion looks promising!

Thank you!

You see it in action here by typing in any simple math equation:

[[calculate]]5*6[[/calculate]]

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Options

Unfold by

GoVegan, 24 Jun 2011 03:54

Fold

RobElliott 24 Jun 2011 11:52

That's really good James.

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Reply Options

Unfold by

RobElliott, 24 Jun 2011 11:52

Fold

soronlin 26 Jun 2011 10:05

It would be very useful. The only problem I can see is that it would be difficult to sanitise the formula. I don't see how the parser can differentiate:

x = sin(y)

from

x = delete_entire_site(y)

without getting very complex and requiring constant maintenance.

Reply Options

Unfold by

soronlin, 26 Jun 2011 10:05

Fold

GoVegan 26 Jun 2011 14:03

Oh it's easy. You simply have a list of “allowed inputs”.

For example, in my JavaScript code above, I've allowed only numerical digits and some simple mathematical operators (add, subtract, multiply, divide and brackets). You can not generate sinister equations with my code above.

Feel free to test out my proposed syntax.

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Options

Unfold by

GoVegan, 26 Jun 2011 14:03

Fold

GoVegan 01 Jul 2011 11:55

@ Richard, With the following code, you can now use the mathematical functions provided by the JavaScript Math Object. It is also boolean compatible. And like the code before, you can not generate sinister equations.

Javascript (Advanced Improvement)

See updated JavaScript code in a newer post on this thread.

Here are some syntax examples:

[[calculate]]6*6[[/calculate]]
[[calculate]]6*6=36[[/calculate]]
[[calculate]]sqrt(16)[[/calculate]]
[[calculate]]PI[[/calculate]]
cos(60°) = [[calculate]]cos(60*PI/180)[[/calculate]]

Please, try it out (copy and paste the examples).

Keep in mind, it IS case sensitive.

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Last edited on 06 Jul 2011 14:31 by GoVegan Show more

Options

Unfold by

GoVegan, 01 Jul 2011 11:55

Fold

Timothy Foster 04 Jul 2011 16:03

Jiminy, that is mighty impressive! I sure wish we could do this with Wikidot.

I think so far the only problem with that code is that I couldn't use decimals or any function with more than one argument.

[[calculate]]5.5+1[[/calculate]]
[[calculate]]pow(5,2)[[/calculate]]

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Options

Unfold by

Timothy Foster, 04 Jul 2011 16:03

Fold

GoVegan 04 Jul 2011 21:44

Fortunately, that is easy to implement. Done :)

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Reply Options

Unfold by

GoVegan, 04 Jul 2011 21:44

Fold

GoVegan 06 Jul 2011 14:30

@ Wikidot, in case you decide to implement my solution…

Did some final touches to the JavaScript Math engine:

Allows boolean values (true, false)
Allows testing operators
- == equals
- != not equal
- <= smaller or equal
- >= larger or equal
- && AND
- || OR
Allows Math operators
- + plus
- - minus
- * multiply
- / divide
- & modulus
Auto converts incorrect syntax
- Removes spaces
- Transforms = into ==
- Transforms <> into !=
- Prepends math functions with Math.[function]
Invalid calculations are displayed as raw text
100% safe :)

JavaScript Code

function ClientMathCalcuation() {
    <!-- © James Kanjo 2011 -->
    var body = document.getElementById('html-body').innerHTML;
    <!-- Client Math Extractor -->
    var exp_allowed = /<span class=\"wd-calculate\">(([ \d.\*\+\-\/%\(\)=!,]|&lt;|&gt;|true|false|&amp;&amp;|\|\||Math\.|E|LN2|LN10|LOG2E|LOG10E|PI|SQRT1_2|SQRT2|(abs|acos|asin|atan|atan2|ceil|cos|exp|floor|log|max|min|pow|random|round|sin|sqrt|tan)\()+)<\/span>/i;
    var arr_calc = new Array();
    while (exp_allowed.test(body)) {
        body = body.replace(exp_allowed,'�calc' + arr_calc.push(exp_allowed.exec(body)[1]) + '�');
    }
    <!-- Client Math Calculator -->
    for (index=arr_calc.length-1;index>=0;index=index-1) {
        str_tmp = arr_calc[index];
        arr_calc[index] = arr_calc[index].replace(/ /gi,'');
        arr_calc[index] = arr_calc[index].replace(/<>/gi,'!=');
        arr_calc[index] = arr_calc[index].replace(/([^<!>])=/gi,'$1==');
        arr_calc[index] = arr_calc[index].replace(/====/gi,'==');
        arr_calc[index] = arr_calc[index].replace(/&lt;/gi,'<');
        arr_calc[index] = arr_calc[index].replace(/&gt;/gi,'>');
        arr_calc[index] = arr_calc[index].replace(/&amp;/gi,'&');
        arr_calc[index] = arr_calc[index].replace(/(E|LN2|LN10|LOG2E|LOG10E|PI|SQRT1_2|SQRT2|abs|acos|asin|atan|atan2|ceil|cos|exp|floor|log|max|min|pow|random|round|sin|sqrt|tan)/g,'Math.$1');
        arr_calc[index] = arr_calc[index].replace(/Math\.Math\.(E|LN2|LN10|LOG2E|LOG10E|PI|SQRT1_2|SQRT2|abs|acos|asin|atan|atan2|ceil|cos|exp|floor|log|max|min|pow|random|round|sin|sqrt|tan)/gi,'Math.$1');
        try {arr_calc[index] = eval(arr_calc[index]);}
        catch(originalstring) {arr_calc[index] = str_tmp;}
        body = body.replace('�calc'+ (index + 1) +'�',arr_calc.splice(index,1));
    }
    document.getElementById('html-body').innerHTML = body;
}

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Last edited on 06 May 2014 09:17 by GoVegan Show more

Reply Options

Unfold by

GoVegan, 06 Jul 2011 14:30

Fold

GoVegan 29 Dec 2011 12:11

Ahem, developers…

I have done the hard work for you :)

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Options

Unfold by

GoVegan, 29 Dec 2011 12:11

Fold

GoVegan 10 May 2012 22:00

BUMP!

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Reply Options

Unfold by

GoVegan, 10 May 2012 22:00

Fold

HobStarCS 14 Nov 2011 06:29

So happy to see progress on this wish.

Reply Options

Unfold by

HobStarCS, 14 Nov 2011 06:29

Fold

HobStarCS 10 May 2012 12:31

*Bump*

Any news on this? :)

Reply Options

Unfold by

HobStarCS, 10 May 2012 12:31

Fold

Helmut_pdorf 10 May 2012 13:58

I am not sure - but is it not easier ( and more secure) to use mathjax with the variables from the live template- "dataform fields"?

I need to test this ..

EDIT:. AUA! - Mathjax is not a calculator - only render beautiful LaTeX equations…
Sorry!

What a mistake….

Please - forget my post…

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 10 May 2012 14:59 by Helmut_pdorf Show more

Reply Options

Unfold by

Helmut_pdorf, 10 May 2012 13:58

Comments

Wikidot Syntax

HTML Rendering

Javascript

Javascript (Advanced Improvement)

JavaScript Code