First version of AsciiSVG plugin ready for testing

First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -
Number of replies: 17

David Lippman created nice asciimathml and asciisvg plugins for tinymce http://www.imathas.com/editordemo/demo.html  and I have modified them to work in moodle. First version of AsciiSVG plugin Iconwith the latest version of TinyMCE included with theme based integration is now ready, can be translated to any language of moodle and new features will be added later. This package should work with all versions of moodle 1.7-1.9, all modern browsers including Safari and Opera.

Download the package from http://korpelainen.net/asciisvg.zip and unzip it. Move the files from folder asciisvg to corresponding folders inside your moodle - no files of moodle get overwritten.

Folder lib/editor/tinymath has the latest version of TinyMCE - all plugins are not included but you can download the full package from http://tinymce.moxiecode.com/ and I will add new plugins like asciimaths, dragmath, latexmaths, unicode and media later.

Folder lib/editor/common is the place for common files, theme/math has math theme (you can for example select this theme to your course theme - check Administration > Appearance > Themes > Theme settings - or modify your custom theme with following code.
Files lang/en_utf8/asciisvg.php and lang/en_utf8/colors.php are language files that need to / can be translated to any language of moodle from Administration > Language > Language editing > (Choose your language) Edit words or phrases > asciisvg.php ... and colors.php

In theme/math/config.php $CFG->htmleditor = false; turns HTMLArea off and $CFG->emoticons = '...';
 sets emoticons to avoid smiley coflicts. $THEME->metainclude = true; sets math theme to read meta.php.

In theme/math/footer.html <?php
 if (!empty($USER->id)) {$eprof = intval($USER->htmleditor); if (!empty($COURSE->id) and has_capability('moodle/course:managefiles', get_context_instance(CONTEXT_COURSE, $COURSE->id))) {include_once($CFG->dirroot .'/theme/math/editor'.$eprof.'t.php');} else {include_once($CFG->dirroot .'/theme/math/editor'.$eprof.'s.php');}} ?>
 selects the correct tinymce configuration for those people who have capability to manage course files (integration files editor1t.php and editor1s.php - init code is here)

In theme/math/meta.php you need

<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/editor/common/ASCIIsvgPI.js"></script>

<script type="text/javascript">
var AScgiloc = "<?php echo $CFG->wwwroot ?>/lib/editor/common/php/svgimg.php";
</script>

to tell moodle where renderers for asciisvg ASCIIsvgPI.js and svgimg.php are. Don't use the old version of asciisvg or asciimathml together with these plugin graphs - depending on order of scripts either old one or the new one works but not both at the same time because they use same functions in a different way.  If you want to use this theme based integration with your custom themes you can copy the previous code to your custom theme (just use name of your theme instead of math)

One problem with current code is <embed> tags that are not valid XHTML tags - we should use object tags instead of them to add any svg files. I will add later the modified media plugin (that should be also moodle 2.0 compatible) - therefore current TinyMCE does not have plugin media included. Capability to add svg tags can be given to teachers only - not for students (security issue)

---------------------------------------------------------------

Before you start testing there is another important security issue that you need to take care:

Open lib/editor/common/php/svgimg.php and change the imgdir (second row)

 $imgdir = 'imgs/'; //relative to current dir, CHANGE ME!!!

to something like

 $imgdir = 'shdtrgrkgfidlofjd/'; //relative to current dir, CHANGE ME!!!

and rename folder lib/editor/common/php/imgs to 'shdtrgrkgfidlofjd'

You most likely need to give this folder permissions 777 but the script does not show the folder name anywhere so the only way to find that folder name is to guess it somehow. So don't use imgs/  !!!

You can also change in meta.php

var AScgiloc = "<?php echo $CFG->wwwroot ?>/lib/editor/common/php/svgimg.php";

to

var AScgiloc = "http://korpelainen.net/plugindemo/lib/editor/common/php/svgimg.php";

and

if you want to fill my test site with nice graphs... this graph image folder should be moved to moodledata but for some reason I got only empty graphs when I tested moving the folder outside web root - if I can't find a good solution I hope someone of core developers has time to look at code of those files in /lib/editor/common/php.

---------------------------------

It would be nice if some moodlers had time to test this marvellous plugin originally created by David Lippman and send me some translations of asciisvg.php and colors.php - an open demo is available in http://korpelainen.net/plugindemo/ with limited functionalities (some activities available for testing). Username 'test' and 'password 'test' are well known...

I will start writing some documentation next week and try to finish first versions of those other plugins. They should work on all environments and with all modern browsers (also in moodle 2.0 with different setup later) but not necessarely using the same files in IE and other browsers.

Average of ratings: -
In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by Marc Grober -
WOW... but a bit more explanation would be handy.....
a) package it so that it can be exploed from /moodle as I did with dragmath?
b) explain about mods to files vis-a-vis theme (are they already made and since the math theme would be dedicated to this, if not this is confusing)
c) does this include all tinymce and how does this address use of htmlarea in non-math theme....

Also, have you seen the version of asciimath at fullxml.org (just came through on the asciimath group list
In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -
I just quickly read those posts from asciimath group and will test those new features next week...
In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by Marc Grober -
Mauno,

I have been playing with your demo site and wondered what your plans were for asciimath and agraph


In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

While there are about 20 different versions of AsciiMathML/LatexMathML/AsciiSVG scripts I have tested a combination (not in this package - I will send a download link later) where I have

- normal old version (ASCIIMathMLwFallback.js) where asciimathml is rendered inside `...` and image fallback is by default made with Mimetex (cgi). Changed AMdelimiter2 to 'TEXTEX' so that this script does not render anything between $...$ ... script 1

- latexmathml is rendered inside $...$ with a modified script and image fallback can be made with Mimetex but I have used Mathtex with Tex Live (all latex commands possible) and as a third option also modified texdebug script to render image fallback. Both of these require some distribution of latex installed and either Ghostscript or ImageMagick for png conversion but the result is better than with mimetex and we are not limited to commands of mimetex. Slower than Mimetex externally but originally Asciimathml was ment to be used with MathML (FF)... but this script can also be used to force FF to use images mainly to solve some font issues with FF. I combined LatexMathML code by Jeff Knisley and larger image fallback version by Peter and David to one script and changed delimiter1 to 'TTTTTT' - latexmathml is rendered with delimiter2...  script 2

- tex filter can be used with doubledollars to render local latex

- AsciiSVG from graph plugin is rendered with ASCIIsvgPI.js (no changes) and this modified plugin by David gives graphs that work on all browsers, all environments and is easy to use but is not compatible with the larger version of AsciiSVG that on the other hand requires FF or Adobe SVG viewer. I have not tried to combine these two scripts but have used them separately - the plugin script in one theme and the other script in another theme (different course with different course theme only for FF users). Personally I think all our scripts should work on all browsers and in the long run this plugin script should be modified to allow larger variety of graphs... scripts 3 and 4

- I have tested and modified code for asciimathml, latexmathml, latex, dragmath, unicode, media (svg support) and preview plugins... all of these are tinymce plugins but with this theme based integration, with moodle 2.0 later and most likely with Martin's clean port all of these can be used. IE requires some different code and therefore I had to create different versions for IE - separation is done already in theme footer (different files). I will publish these in the coming weeks.

- Although this is a TinyMCE plugin you can use it with HTMLArea. The idea is that TinyMCE is used only in one theme (or two if you need one for FF AsciiSVG) and code in theme config.php drops HTMLArea and code in footer.html, meta.php and editorxx.php gives TinyMCE with new plugins (according to required capabilities). This way it is possible to limit use of AsciiMathML to certain courses and allow others to use HTMLArea with other courses and other course theme. It is also possible to use math theme as user theme when you edit graphs etc and use otherwise normal themes with the code in meta.php that renders asciimathmal, latexmathml and graphs but not the editor itself for normal viewers.

- My future plans: To combine all these scripts/issues to minimal number of crossbrowser compatible plugins and scripts... wink

In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by Marc Grober -
Link to your demo package rezipped so that it can be placed in/ moodle and unzipped (no moving anything around.....
http://moodle.alaskapolicy.net/downloads/MK_PLUGIN_DEMO_asciisvg.zip

One of the issues I mentioned to you with the grapher is the need to have handy help as far as how to do things like $$\sqrt[3]27 $$ and as I recall there were issues with the grapger using different syntax than asciimath, or was that a different browser?

By the way, have you noticed the Tex error messages today??? Also note that the radical is not co extensive with the base?? I tested with parens and that did not help.....
Attachment tex_error.png
In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

I haven't noticed such errors but it looks like tex settings code - I could check my logs...

I have used different packages with mathtex and commands like

http://korpelainen.net/cgi-bin/mathtex.cgi?\png\dpi{600}\gammacorrection{0.4}\displaystyle\sum_{m=1}^\infty\sum_{n=1}^\infty\frac{m^2\,n}{3^m\left(m\,3^n+n\,3^m\right)} to produce test images like

Example

- maybe my test server is just busy mixed

I found at least one way to get old asciisvg rendered at the same time with new plugin code - by embed tags like

<p><embed height="117" src="http://korpelainen.net/d.svg" script="initPicture(-2.5,2.5);circle([0,0],1);marker='arrowdot';line([-2,2],[2,-2]);axes();grid;" width="117"></embed></p>

but I really don't like the fact that IE shows blank boxes with old asciisvg.

It would be possible to use also attachments (see the attached file - but not with IE - somehow IE can mess it up even with adobe svg viewer...) or to create new resourse type for old version of asciisvg...

In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Marc Grober -
Current status?

$$\sqrt4=2$$ and $$\sqrt[3]27=3$$
In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

Ah - this seems to be a new issue with TeX filter - most likely caused by recent security addons in code of TeX filter (latest files)

If you leave for example space before \alpha in

$ $ (space here) \alpha $ $

or use square brackets tex filter here in moodle.org gives those package tags.

-------------------------------------------------

I have almost finished my step 2 of math plugins - and will send you those download links to new packages tomorrow (should do the packing and checking of files today - only the necessary files among 100 test packages...)

My recent package on test server does allow also automathrecognize and uses now by default

`...` for asciimathml with mimetex fallback
$...$ for latexmathml with mathtex fallback (lots of extra features)

and as a new delimiter I took double @:s of algebra filter for better use and using them instead of dollars forces image fallback to mathtex for all browsers which is very useful with some FF font stuff...

More about subject tomorrow.

In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

Marc, I am sorry to say this but I need still more time to check the mimetex side of scripts - in mathtex fallback everything works but mimetex does some things differently and some things are not supported so I need to offer two versions, one for mimetex and one for other latex distributions.

You can test the prototype plugins for asciimathml and latexmathml in http://korpelainen.net/plugindemo - Asciimaths for asciimaths and latexmaths.gif for latexmaths

Amath is automatically recognized but old style graphs with agraph tags are not used. Before I (or somebody else) can combine the old style asciisvg and new plugin based code we can only add old style code with embed tags but it is too complicated without modified media plugin.

Test site is using mimetex for rendering asciimathml (`...`) and latexmathml ($...$) and you can try using double @:s and latex syntax to render latex through modified asciimathml file - it's not translated with tex filter.

My wife has found a lot of new work for me from garden so I may need to help her for a while but I try to check the code on schedule and write the documentation etc during May.

In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by Marc Grober -
Not to worry. This is one reason I wanted to spend time looking at production targets (gardening that is-LOL). My wife is going Outside (as we call contiguous 48 states) at planting time so I am off the hook this year! I am concerned about news re agraph and am wondering if current design for SEE is getting too complex? Have you looked at what SA did on fullxml? I have been trying to work through examples by way of building a bit of a primer for asciisvg/asciimath so that there are some ez to hand tools (examples in the EdTech wiki to be converted to lessons and quizzes that could be added to noodle feature demo)
In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

Too complex - yes and no... I have tried to break code to smaller pieces so that these parts can be used together or separately - all of this stuff should work in moodle 2.0, it should work with all browsers, it should work with mimetex, mathtex etc.

It should work in plugins, be simple and easy to use but also be capable to produce old style svg graphs and fallbacks for IE... it should handle begin-end tags and do the same for amaths and agraphs... it should be able to handle different delimiters and modes (code/image/mathml)... yes, definitely, it's getting too complex.

These scripts can do it all but putting it all to one file is difficult. So I have used smaller pieces and combinations of these pieces to get it all work with my current server configuration. I wonder if we should simply combine such features that work everywhere to "basic files" and use 10-20 custom addons that can be used if needed. I could use 4000 latex symbols from tex live and give them ascii/unicode output for asciimathml but it may be easier to build smaller "example classes" of symbols. Maybe the next step is to create that activity (module) for custom input/output values that can be taken from database.

Sun is shining in Finland and summer is near... one month to go - but I'm still sure we have a nice package before my summer holidays - with a good documentation in moodle docs.

In reply to Marc Grober

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

Missing agraph support is actually caused by two things:

Function DrawPictures is different in old and new versions written by Peter and David - therefore some old style graphs simply miss some parameters in new version. In tinymce setting avoidinnerHTML to false means that tinymce can't be used (editor won't show the content). On the other hand setting avoidinnerHTML to true gives tinymce but cuts simpleLaTeXformatting and ASCIIandgraphformatting. From my test files I totally took these off to avoid "extra code".

The key might be to set avoidinnerHTML to false and edit code of asciisvg to use similar syntax for plugin based graphs and old style graphs - but so far I have got it only partly functional and use avoidinnerHTML = false; to keep tinymce functional.

I did check some examples from fullxml but did not have yet time to look them closer...

In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by Ian Wild -
Picture of Plugin developers
Have just been playing around with your test site, too. It all looks smashing. I can't wait to move over to the TinyMCE editor. One thing I was wondering was whether DragMath was going to become a core module in Moodle 2.0?

Cheers,

Ian.
In reply to Ian Wild

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -
Yes, I believe Dragmath is going to be a core plugin in TinyMCE of moodle 2.0.

In fact I did create also a modified version of Dragmath plugin using the same idea as coming asciimathml and latexmathmal plugins because old tinymce integration had and probably still has some focus issues (focus may be lost and equation added to wrong place). These plugins are otherwise "ready" but I want to change the format a little to allow normal translation through administration panel of moodle (not through language files of tinymce) - and collect all variables to one place so that they can be later changed with php and administration instead of modifying the original files.

And I still have some tiny problems with IE... and a couple of optional workarounds...

I suppose asciimathml/latexmathml/dragmath/latex should be packed next Wednesday and then I will use some time for documentation. I should also finish that media plugin and unicode picker before summer, all of these really will work in moodle 2.0 too with different configuration.
In reply to Mauno Korpelainen

Re: First version of AsciiSVG plugin ready for testing

by jacques roux -
Mauno first of all thank you very much for your wonderful work on this.

I had been looking for a way to get TinyMCE working in our current Moodle 1.9 installation, and worked through all the options on moodle.org but simply could not find a simple, well documented method.

We have no intentions of using any of the ascii/math plugins - we just needed a better html editor.

I managed to get your theme based integration working in our theme, and it works great.

There is one thing that I would like to know in order to fully utilise your integration in our setup and it would be great if you could share your thoughts on this:

Would it be possible to add a style to the STYLES dropdown list?

Once again, thanks a million for your work on this!



In reply to jacques roux

Re: First version of AsciiSVG plugin ready for testing

by Mauno Korpelainen -

Yes, you can easily add styles to style select list with init code of tinymce (in this case theme/math/editor1t.php or editor1s.php)

There is a line

content_css : "<?php echo $CFG->themewww .'/'. current_theme() ?>/css/content.css",

which means that tinymce looks for styles from folder theme/math/css/content.css

and I have defined there two styles: span.AMedit and span.JeMedit

try to add for example line:

p.test1 {color:red;}

to content.css and you should see in your style select list a new style "test1" that adds p tags with style "color:red"

And if you have different themes with different configurations (different init code for tinymce) you can set each theme or each configuration to use different styles - simply change the location (path) of file content.css (here content.css is loaded from current theme of moodle - it can be set to one absolute path as well)

If content.css is not used you can also use tags like

theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",

in init code but it is easier to use and edit file content.css.

Note also that http://korpelainen.net/mathplugins.zip has the latest tinymce included - read http://moodle.org/mod/forum/discuss.php?d=123806 - but some plugins are modified for moodle and for example media plugin is not included - you can download the full package of tinymce from http://tinymce.moxiecode.com/ and read documentation from http://wiki.moxiecode.com/index.php/TinyMCE:Index