asciisvg plugin
- Description
- Installation
- plugin codes
- Usage/Syntax
- Samples
- ToDo
- Issues
- Discussion

asciisvg plugin

asciisvg plugin by Mohammad Rahmani
Plugin for displaying good looking diagrams on wiki pages

Last updated on 2008-08-05. Provides Syntax.
No compatibility info given!

Tagged with asciimathml, diagram, graphics, svg.

Description

ASCIIsvg is a layer of JavaScript functions that can be used in any HTML document to produce inline Scalable Vector Graphics viewable with both Internet Explorer+ Adobe SVGviewer and Firefox 1.5 and later. ASCIIsvg has been developed by Prof. Peter Jipsen at the university of Chapman. This plugin integrates ASCIIsvg into DokuWiki.

Update 1: 2008-08-05: The script.js was corrected. Now the main ASCIIsvg.js script resides in asciisvg/main folder. No need for separate folder under DokuWiki root.

Installation

Download the source archive (~11k)from asciisvg
Unpack it in your DokuWiki plugins directory {dokuwiki}/lib/plugins (make sure, included subdirectories are unpacked correctly); this will create the following directories:
1. {dokuwiki}/lib/plugins/asciisvg.
2. {dokuwiki}/lib/plugins/asciisvg/main.
Make sure you have enabled Allow embedded HTML in your DokuWiki Configuration Manager

plugin codes

syntax.php

 
<?php
  /**
  /**
    * Plugin ASCIIsvg: Use ASCIIsvg for translating ASCII notation to SVG graphics.
    *
    * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
    * @author     Mohammad Rahmani <m.rahmani@aut.ac.ir>
   */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_asciisvg extends DokuWiki_Syntax_Plugin {
 
    /**
     * Get an associative array with plugin info.
     */
    function getInfo(){
        return array(
            'author' => 'Mohammad Rahmani',
            'email'  => 'm.rahmani@aut.ac.ir',
            'date'   => '2008-08-03',
            'name'   => 'ASCIIsvg Plugin',
            'desc'   => 'Translating ASCII math notation to SVG graphics',
            'url'    => 'http://www.dokuwiki.org/plugin:asciisvg',
                     );
    }
 
    function getType(){ return 'formatting'; }
    function getPType(){ return 'normal'; }
    function getSort(){ return 451; }
 }
//Setup VIM: ex: et ts=4 enc=utf-8 :

script.js

/*
 This script installs the ASCIIsvg JavaScript
 to be used through "asciisvg" plugin in Dokuwiki
  Mohammad Rahmani
  Date: Sunday, 03 Aug. 2008  14:46:45
  Rev. 0: exprimental
*/
 
// full url to ASCIIsvg main script
var ASCIIsvgURL ='/lib/plugins/asciisvg/main/ASCIIsvg127.js';
 
document.write('<script type="text/javascript" src="' + ASCIIsvgURL + '"></script>');
 
 
function installASCIIsvg()
{
    ASCIIsvg.Process(document);
}
 
addInitEvent(installASCIIsvg);

Usage/Syntax

Make sure you have enabled Allow embedded HTML in DokuWiki Configuration Manager

 
 <html>

 <embed width="in pixels" height="in pixels"
  script='...ASCIIsvg commands...'
 >

 </html>

This is the syntax for the tag that inserts the pictures on the wiki page. The ASCIIsvg commands are put between single quotes in the script attribute. The width and height are measured in pixels. For detailed discussion take a look at ASCIIsvg commands.
There are many examples under ASCIIsvg Gallery.

Samples

Here are some examples tested under DokuWiki. Simply copy paste them into a wiki page with installed asciisvg plugin.

Example 1

 
<html>
<embed width="200" height="200"
script=' initPicture(-1,6,-1,6)
 axes()
 a = [0,0]
 b = [5,5]
 marker = "dot"
 line(a,b)
 text(a,"a",belowright)
 text(b,"g",above)
 text(b,"b",right)
 text(b,"b",left)
 text(b,"b",below)
 text(b,"b",aboveleft)
 text(b,"b",aboveright)
 text(b,"b",belowleft)
 text(b,"b",belowright)
 stroke = "red"
 path([a,[0,5],b,[5,0]])
 stroke = "green"
 marker = "none"
 curve([a,[.25,0],[.5,.5],[1,1],[1.5,1.5]])
 stroke = "blue"
 circle([5,0],1)
 ellipse([0,5],1,2)
 stroke = "purple"
 rect([0,0],[2,2],null,.5,1)
 marker = "arrowdot"
 line(a,[5,0])'>
</html>

See the result here Diagram 1 (The diagram on the left).

Example 2

 
<html>
<embed width="200" height="200"
script='initPicture(-2,2)
axes()
a = 1
stroke = "blue"
update()'>
<script>
function update() {
  plot(function (x){return a*x*x*x-x},"cubic")
  setText(a,"aval");
}
</script>
 
</html>

See the result here Diagram 2 (The diagram on the right).

More examples in ASCIIsvg sandbox

ToDo

The ASCIIsvg was implemented as a pseudo plugin here. It seems the plugin simply adds the ASCIIsvg.js into DokuWiki. It is better to add the script as a real plugin to support a syntax without enabling the embeded HTML.
The addition of ASCIIsvg.js into DokuWiki can be implemented in a more secure and safer way.
Interested developers are invited to correct/modify the code to obey the DokuWiki rules.
This plugin supports ASCIIsvg 1.2.7. The newer version is included in ASCIIMatML and does not supported by this plugin .

Issues

It seems there is a minor conflict with indexmenu. When asciisvg is active the mouse right-click on the trees

does not work.

Discussion