Implementing GeoNext as editor plugin

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -
Number of replies: 25
Marc and Matthias,

It works now with first version of TinyMCE plugin and filter - and will try tomorrow with HTMLArea...

All languages of GeoNExT are supported with a similar language file existence checking as in Dragmath (the files in lang folder are empty but their names are used in GeoNExT big grin )

I had to use square brackets [jsxgraph... instead of <jsxgraph... because editor strips < and > but we'll see what tokens we will use in the future for each graph and math type...in "common math filter" for graphs and maths...

This plugin is quite wide with applet and preview window so we might need some css solution (tabs etc) to make the window smaller - but preview is needed before inserting tags to editor and filter. And I need to add some tiny settings like width and height...

GeoNetx
Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Marc Grober -
Eureka! LOL!

Great work Mauno.... But, as I understood Matthias, this is in a sense conceptual, so are there issues to look at on Matthias' end .....

I think for 1.9.x and other uses would be most elegant if we avoided jsxgraph plugin and just implement via asciimath parsing via theme while adding jsx compression to asciimath ;) I cross posted to both groups about the possibility and will try to look at that in more detail tomorrow

Average of ratings: -
In reply to Marc Grober

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Getting Asciimathml, Geonext and Jsxgraphs to talk same language has some tiny problems - for example roots and powers...

If you add for example text `a^2+b^2` to Geonext it parses that expression first to html tags `a2+b2` before asciimathml or latex renderers.

It's not a big problem - actually the "quick html symbols" in Geonext are nice - and because teachers can add Jsxgraphs with script tags anyway - if allowed -  (with javascript code and asciimathml or latex tags) it might be better to leave it this way and use asciimathml or latex only with script based jsxgraphs written by teachers.

This new "feature" - adding graphs with applet and filter - can be used with students without worries about javascript injections and together with DragMath (with TeX filter, asciimathml or new "math filter") and Google chart plugins this is really going to be a major jump forward in adding maths to moodle.

Average of ratings: -
In reply to Marc Grober

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Another note: boxes (boards) don't have an unique id so if you add graphs to different sections of page boxes get mixed and only the first box is showing a graph. For example if you add a graph to a forum post you can add several graphs to the same post but if you reply the first graph in reply gets the same box as first box in original post and is not shown on the same page.

In resources this is not a problem and each resource can have as many graphs as you want - in one section.

Java applet is giving each graph a different board so it might be caused by this method of passing graphs to editor and pages.

Average of ratings: -
In reply to Marc Grober

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

I think I finally found also the reason why Safari breaks both with DragMath and this plugin - it's the moment of changing inner.HTML.

Safari needs a timeout to call itself after a short pause if first attempt didn’t work...and it never does work at once for Safari.

I'll keep my fingers crossed - this looks very promising now.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Keeping fingers crossed did not help - Firefox is fine but some parts of code need to be double checked. At least filter is not working exactly like it should - graphs have unique id, board and box but still filter somehow mixes some parts of graphs if there are several graphs on the page but in different sections mixed

But I have more good news - plugin for HTMLArea is in test condition too - and works just as fine as tinymce plugin at least in firefox... I'll be back tomorrow, Marc... with test file package and Big Thanks to Germany...

Attachment geohtmlarea.gif
Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Matthias Ehmann -
Hi Mauno,

width and height will be set automatically to the values of the exported GEONExT construction in the next version of JSXGraph.

Here a quick fix you can use from JavaScript by accessing the responsible Java object:

bounds = (window.document.gxt.getBoardPane().getParent().getParent().getParent().getParent()).getBounds();
window.document.getElementById("box").style.width=bounds.getWidth()+"px";
window.document.getElementById("box").style.height=bounds.getHeight()+"px";

If you change the size of the GEONExT board the resulting JSXGraph construction will also change size.

Matthias
Average of ratings: -
In reply to Matthias Ehmann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

OK - and I got also unique box and board for all graphs by adding timestamp to each graph created with plugin.

Plugin has a hidden field

<input type="hidden" id="timebox" value="<?php echo 'box'.time(); ?>" />

and insert function in tinymce init code looks like this:

insert : function(file, title) {
var ed = tinyMCEPopup.editor;
var geotex = document.getElementById('debug').innerHTML;
jgeotex ='[jsxgraph box="'+document.getElementById('timebox').value+'" board="'+document.getElementById('timebox').value+'" "width="600" height="500" filestring="' + geotex + '" /]';
tinyMCEPopup.restoreSelection();
ed.execCommand('mceInsertContent', false, jgeotex);

tinyMCEPopup.close();
}

Works like a charm now! (I need to add still that width and height that are currently set to 600x500)

By the way, Matthias, do you have any function to pass strings back from editor to applet - I know how to send that string to applet but can applet take it if we need to edit existing graph string from editor...

I could also try to create code for showing the jsxgraphs in editor - now filter shows them on pages and preview div shows them in plugin but editor shows pretty long string... temporary selectable iframe etc...

Edit: I will let it be string - it's smaller than the actual graphs in small editor box anyway... big grin

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Matthias Ehmann -
We have a Java method for importing a construction (as a string). Unfortunately it causes problems calling this method from JavaScript and throws an exception. I will have a closer look at the new method overloading concept introduced by Sun together with Mozilla for calling ambigous Java methods from JavaScript. There may be a solution. But this new concept is work in progress.

http://www.mozilla.org/js/liveconnect/lc3_method_overloading.html

Maybe I can provide a workaround:
it is possible to add a new GEONExT applet (or to replace the existing one) with an applet tag that includes the construction string as an applet parameter.

Here is an example:

<applet name="gxt" code="geonext.Geonext" width="630" height="525" archive="geonext.jar" codebase="http://geonext.uni-bayreuth.de/data/download/">
<param name="scriptable" value="true">
<param name="geonext" value="eNrtWG1v2zYQ/hz/CgL5HEuuYyfBBAHL2zBgaIE2LdovHWSLtrnKokFJid2i/733RopukxR7wdYBSYCE9/CORx6fO5LKfrl68fzq7U0+yN5cvXz164vn+Wh4Ms4SLw2ymS1cmQ8OsrpY6/wcJTXKEpIANfXCunXRGlvnWRJL0Fl07co6wKUB0Nyu17puAfMtABe2bhvzUeejSZYEAUcvc/BlyL9gB9m62Jo1CGXeuk5nSS9j7zZPh2mWbEnYsbAj4c6U7SofTwhiAeGVNstVm49TwkUCfwk7VAo82rJr8ukJ+KIWrcO60tRFq0FUBwLki6JqNK4NBcKXzgSY2oQ2dbHxKLVxJtaZpcHA0TKepf1CcCUi81oSr4uDfbR27a1GezajyIK1UL+rTev1J/tOJrEP1kOLVrvgIdIOmtyPmlUx05VX3Ua6u6AsKqi97qrWPDwwxGll77YhUCQEfBfjMrYMyBtSt6buLO0XORD14EVkMY31lbiII/W4da+NtsDI4JVJGsxYFCvWQ4uttTtvsXz7m443ZfmOZLFhTbS5NfpuY53MsLWb/Bh3DxuEVHrR5keEUZPAmW1bIMLRaDpMj7NEROpynAjj4XiaJU7yADz2ftSBcLtnftaTGjhLs1bMV5ox7YSzTRNSgwTZoQqKwuFFir/X1zg0AtRXFs1KYkVNAjfWQG2IUqcHMGH9TLJZMf+wdLaruSSIn2v5CX6ga2EqLYxyc6Ad/pVd2E+MPi98IdkvI6GO7FcRmJV3kZl1sdT5cDiEikZNqC1KwRZEs1UEARVLg0W08UgSQQjgKnWlsYA2PkW3ssMQBFuVb7RrQJ3LOVVQimpbUIvTA8vv+0/vP92sTKMAaCDgc3Si7goAnIZNLtWdaVeKDortjcLxhp8/c7pw+cbR1hsI3noTpC2JW5G3+dF4eOqjieE8Gk2IZTtBNoXjU0EaNNskTDcrYFq3WgghAnfAJHM4Nei/rBHoknraEOIKYL9QhgUOFJxWcmgxcGsaM6u8Gy9xdrlirv0YLDBtWmc/aKYBMD4WBweBe5FqfpjCz/V1mnptSVZkjKmX2I8sxf6AkQYQqcoPz88uz08up8dELKm0XFEP0SilRIqqMK/38OIUf9EsCkASzw4KGEUiKqp9ZPoBcTeJw/1mkii5EbsOnO2PRQ9wf5PXXVUBLsXyj2YB+4F/ZcG+emKLVwOnHjAeIi0tJkHXWpHFU4TIAcXZ8bfS5J3tFPBMua6uYVdUUSsYQTt1y4Mou/B58g+lyPQpRZ5S5N9NETxt6FilY0Wu/T/7C7+SzFmO9ITzRfUJow78yXnq7wHC5OHxsb8NBM6q75P27Mcg7fhR0vas7ckVsfZr2gr7Ytp63nL3+FnE20DcNP2WuP8pc3GIvTdPDwRmSk+gJl97wvWHY7eDrRhhyHZyT0oC/e7l4vk9XJw+yEUoqvtkTIdnT1R8ouJfoeLcuHmlYy7Ofy/uYePJA2xcm5LH4+oZROl2RWng8cl0FuHP0nT8fzjmvz7nv0NTVniEpngPeIimdEf4MWj6DeXAYWBUlkTPOXyW01c3egpCZGAEes231lazAp/IKmt3G52/fnX1EnYBm4gRFV83cCW91AtTw+Pthi0CS1VW6mbuzIbuGBedw7ukut8k1hzwN4QwgayB+c7heRijeF+7Bx4MslkHUk1f1J7hV4deHGSQpxpsf8KPWtga8M2ZV534L5RfAHOe0tQ=">
</applet>

I hope this helps until I found out how to solve the mentioned problem.

Matthias


Average of ratings: -
In reply to Matthias Ehmann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

OK, Thanks Matthias - I will try it.

I uploaded to my test server the whole test file moodle package to http://korpelainen.net/moodle196.zip

It has some other stuff in addition to these test math plugins (themes and jQuery) but at least I don't forget any files this way if you want to play with these plugins.

You are free to modify any code of these plugins and scripts for your custom needs but don't use these plugins on production sites yet - they are still test versions, partly buggy and need more testing.

Default editor HTMLArea is using by default 3 plugins - GEONExT, Dragmath and Googletex and you can show or hide available plugins from settings of "math" filter in Administration > Modules > Filters ... Math filter does not need to be enabled - it still passes the settings to database.

You need to enable jsxgraph filter to be able to use graphs with filter (from  Administration > Modules > Filters).

If you want to test tinymce plugins change theme to Math from Administration >Themes > Theme selector... Math theme has also those older plugins but I haven't upgraded the old plugins. TinyMCE is the latest Version: 3.2.7

Average of ratings: -
In reply to Matthias Ehmann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -
These strings can be really long so I might test a temporary "tag holder" - for example tiny image, link, span etc that could hold the string in editor textarea and could be selected (deleted or edited) easily.

There are also lots of things that can be done differently - for example I just changed in dlg_ins_geonext.php lines

function getExportAndInsert(){
if (window.document.gxt) {
bounds = (window.document.gxt.getBoardPane().getParent().getParent().getParent().getParent()).getBounds();
window.document.getElementById("box").style.width=bounds.getWidth()+"px";
window.document.getElementById("box").style.height=bounds.getHeight()+"px";
} else {
document.getElementById("box").style.width="600px";
document.getElementById("box").style.height="500px";
}
var geotex = document.getElementById('debug').value;
jgeotex ="[jsxgraph box='"+document.getElementById('timebox').value+"' board='"+document.getElementById('timeboard').value+"' width='"+document.getElementById("box").style.width+"' height='"+document.getElementById("box").style.height+"' filestring='" + geotex + "' /]";
insert(jgeotex);

}

to

function getExportAndInsert(){
loadFromGeonext();
var geotex = document.getElementById('debug').value;
jgeotex ="[jsxgraph box='"+document.getElementById('timebox').value+"' board='"+document.getElementById('timeboard').value+"' width='"+document.getElementById("box").style.width+"' height='"+document.getElementById("box").style.height+"' filestring='" + geotex + "' /]";
insert(jgeotex);
}

so that people can add graphs directly from applet to editor without need to press preview button but they still can press graph preview button. Next I should add those tabs, some lang strings to plugins etc. Then we need help documentation and so on. Any other ideas?


Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Marc Grober -
World peace ;)

Did you load the latest into your plugin demo site?

Wish we could load applet via URL but at least we know we can load brd in GUI if saved appropriately. Is there a list of all applet parameters?

With moodle plugin what do you get if you do backticks inside jsxgraph tags?
Average of ratings: -
In reply to Marc Grober

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

1st row: Not yet...

2nd row: ?

3rd row: It depends where you are. GeoNext applet has no asciimathml parser so if you add text `root4{x}` to applet it does not render asciimathml in plugin itself - but when you get the graph and have a parser script on pages of moodle you see 4th root of x. Graphs are either SVG or VML (IE) and they both allow text with backticks...

Attachment exampleg.gif
Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Marc Grober -
Result with asciimath is what I had hoped for

I was asking whether you had installed the htmlarea tweaks in your plugindemo moodle
Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Alfred Wassermann -
you can see the newest version of JSXGraph here:
http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.80/examples/hsvFlower.html

Now, there are two possible types of text: HTML and internal texts (SVG/VML texts).
For HTML texts we added the option useASCIIMathML=true/false. If true the texts are piped through ASCIIMathML.
At the moment, it is not possible to change the options outside of the source code easily, but we will change this.
I just had a quick look at ASCIIMathML and the documentation is hard to read: Can ASCIIMathML be used with the IE? Do we need the MathPlayer plugin for the IE in any case?

Best wishes,
Alfred





Average of ratings: -
In reply to Alfred Wassermann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Great!

I will test them as soon as possible.

AsciiMathML can be used with IE - we have several fallback scripts for ASCIImathML that do not require MathPlayer - they render MathML for FF and png or gif images for other browsers that do not support MathML and you can change most settings (variables) like fallback renderers from script itself or with external script tags.

I have actually planned to totally remove MathPlayer detection code from my custom Asciimathml scripts. The only problem with image fallback scripts has been the need for external renderer and we have used mostly Mimetex - and I have tested for example MathTex with TexLive fallback, MathTran and tex of GoogleChart API (modified mimetex).

Average of ratings: -
In reply to Alfred Wassermann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Alfred,

here you see the same example with custom asciimathml script:

http://korpelainen.net/hsvFlower2.html

Test it with IE and other browsers. This SVG/VML text is interesting - can we use all unicode characters there?

Edit:

Just to avoid conflicts if you try my test version script (check source)

var avoidinnerHTML = true; //editor plugins may have problems if this is false
var translateLaTeX = false; //unless $ problem does not exist with jQuery

EDIT 2: Just noticed that my demo script is broken if MathPlayer is installed - it's because part of the code is cleaned about MathPlayer check and part is not... would not have noticed without your question.

Average of ratings: -
In reply to Alfred Wassermann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

In addition to cleaning (away) MathPlayer and Adobe SVG viewer code we should probably rearrange also all input/output values of asciimathml to be more fallback dependent - Mathtran needs Mathtran tags, Mimetex mimetex tags, Google Chart api some custom tags, Mathtex needs custom tags...and they could be given in separate files according to each fallback renderer.

If ANSI is changed to UTF-8 in the actual asciimathml script we could replace javascript escapes with actual unicode characters, some parts of scripts can be moved to php scripts and so on.

Many things in asciimathml scripts could be made much simpler and combination of JSXGraphs and AsciimathML without any external browser plugins might be cool. We can use also latex / images directly added to JSXGraphs which is a super nice feature (you can for example add the logo of your school to each graph). We don't need to drop any old features but we could allow selection of those parts of scripts that we want to use in different places and with different renderers.

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

I'm not sure if we should have different posts about JSXGraphs and GeoNEXT but one thing that worries me is what happens if the PC does have Adobe SVG Player installed and Graphs offer both SVG and VML tags. It looks like VML is first chosen for IE for JSXGraphs but if ASCIIMathML script adds also SVG tags if Adobe SVG Player is recognized the we have mixed VML and SVG on pages together with some same variable names... ??? Can Adobe SVG Player handle both or should ASCIISVG be disabled if JSXGraphs are enabled?

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

Alfred, Matthias, Marc et al,

http://korpelainen.net/mediawiki/index.php/JSXGraph is using file http://korpelainen.net/js/AM3u.js set to JSXGraph extension of Mediawiki and other parts of mediawiki are using http://korpelainen.net/plugindemo/lib/editor/common/AM3u.js from mediawiki skin MonoBook.php

I cleaned all MathPlayer and Adobe SVG viewer tags from these files and changed plugin check of mathplayer to

var isIE = !(navigator.oscpu && document.getElementsByClassName);

and these scripts look more crossbrowser compatible now. Firefox 3+ is the only browser that can output correct MathML and now the script does not care about MathPlayer anymore - IE gets only image fallback. In addition to Firefox also Opera, Safari and  Chrome support SVG and script does not care about Adobe SVG Viewer - IE gets normal VML from JSXGraphs even if ASVGV is installed.

File http://korpelainen.net/js/AM3u.js is using Google Chart API tex fallback and we should probably make it the preferred fallback - the other script is using mathtex fallback to TeX Live on my test server and it has of course more possible packages and symbols for my needs but for "universal use" Google gives better support with Mimetex based syntax of Google Chart API tex - and the third option should be MathTran. There is no fallback based input/output  selector yet - on the contrary I cleaned away my JeM code that was ment to be used in cases where we could have needed "forced fallback" for all browsers. We dont need it anyway because we can as well use image tags and previous external (or other) TeX renderers or Tex filters for that purpose.

I will clean later next week also the code we used for adding asciimathml to asciisvg graphs and most likely I will take away the whole asciisvg code from this script and we can use 2 versions of asciisvg (old and new) from different script (need to check those sometimes later too). Next I will change all input/output arrays to use the actual unicode characters instead of javascript escapes ( for example \u03B1 becomesthe character itself - α )

And then it's time to clean the plugin code... attached the only (well-known) problems seen with IE6 - all other main browsers except IE6 can show transparent pngs of Google Chart API tex - but it is also possible to set background color for google chart api tex and even IE6 can that way use non transparent pngs...

Attachment ietest.gif
Average of ratings: -
In reply to Marc Grober

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

The applet could be loaded also to some (new) activity with an option to save students work to database like answers to quizzes.

It is possible to load those applets like any tags from/to editor too - the example that Matthias gave worked nicely. It might be also interesting to test some kind of "clickable graphs" (like AM/AMEdit spans in Peter's and David's scripts that could "boot" the applet or graph depending on the class that changes when you click the span) - in editor. I'm not sure if I can do it but I can try...

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

One odd thing is that sometimes graphs mix properties from each other:

I modified the filter a little and was able to add also gxt files from moodledata with tags like

[jsxgraph board="board1" box="jxgbox1" filename="http://127.0.0.1/moodle196/file.php/1/demo.gxt"][/jsxgraph]

[jsxgraph board="board2" box="jxgbox2" filename="http://127.0.0.1/moodle196/file.php/1/demo2.gxt"][/jsxgraph]

and in source everything looks ok with default height and width (can use custom width and height as well):

<p><div id='jxgbox1' class='jxgbox' style='width:600px; height:500px;'></div><script type='text/javascript'>  var board1 = JXG.JSXGraph.loadBoardFromFile('jxgbox1', 'http://127.0.0.1/moodle196/file.php/1/demo.gxt', 'Geonext');</script></p>

<p><div id='jxgbox2' class='jxgbox' style='width:600px; height:500px;'></div><script type='text/javascript'>  var board2 = JXG.JSXGraph.loadBoardFromFile('jxgbox2', 'http://127.0.0.1/moodle196/file.php/1/demo2.gxt', 'Geonext');</script></p>

but somehow graphs can still mix colors or points from each other on the same page.

Matthias & Alfred, does it mean that we need to give different names for points and other properties of graphs in GeoNext applet or is the problem in jsxgraph script that can't handle several gxt string or file graphs on the same page?

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Alfred Wassermann -
This should not happen. Can you send us the examples?
Alfred
Average of ratings: -
In reply to Alfred Wassermann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

I can but I am not at home right now - I will test first the possible cause of this behaviour with different examples and try to reproduce it with files from your online system...and send you the examples later tonight.

I saw the same problem with both types of gxt graphs - strings and files - but need to be sure before sending the files...

Original strings and gxt files were saved from an applet inside moodle and used inside moodle with filter so I try to test these also without moodle and other scripts.

Average of ratings: -
In reply to Alfred Wassermann

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

It really does not matter if you use moodle or not...

For example I took one of your example graphs to a html file and copied the existing string code, changed box and board for the clone and look what happens (attached file new1.html)

If you use only one graph it does not matter if box/board is named 3 or 33 - they both work separately ok - but on the same page some variable names from graph code itself might get mixed ???

Average of ratings: -
In reply to Mauno Korpelainen

Re: Implementing GeoNext as editor plugin

by Mauno Korpelainen -

And I suspect that it happens only with geonext code - attached new22.html has three different jsxgraphs and 4th clone of 3rd graph and they all seem to work ok (Edit: 3rd graph does get code from graph 4) 

Probably the file parsing geonext code to jsxgraphs has some bug in the case of multiple graphs...or should we use only the same boards and boxes as in original applet creating geonext strings and files - are they hardcoded to strings and files???

EDIT: I tested those graphs again and sliders of original graph 3 do not work like sliders of clone 4 so the problem must come from use of same names / variables in graphs (originally I noticed the problem from colors in a "wrong graph").

Average of ratings: -