Extension:JSXGraph

From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manual
Crystal Clear action run.png
JSXGraph

Release status: unmaintained

Implementation Tag
Description Add JSXGraph constructions to MediaWiki pages
Author(s) PeterWilfahrttalk
Latest version 0.3.1
MediaWiki tested with 1.13.4
(runs with older versions)
License GNU Lesser General Public License
Download see below
Example JSXGraph examples
Parameters

width
height
board
box
filename, filestring or input between tags
codebase

Hooks used
ParserFirstCallInit

Translate the JSXGraph extension if it is available at translatewiki.net

Check usage and version matrix; code metrics

What can this extension do?[edit | edit source]

Add a JSXGraph construction to your MediaWiki page.

Usage[edit | edit source]

Allow uploads of gxt-files[edit | edit source]

You will have to allow uploads of Geonext-files (*.gxt). This can be done by adding the following two lines to LocalSettings.php:

$wgFileExtensions[] = 'gxt';
$wgVerifyMimeType = false;

Learn more about upload of Media files.

Add a JSXGraph tag to your MediaWiki page[edit | edit source]

The following tag will add a JSXGraph board to your MediaWiki page:

<jsxgraph width="300" height="600" filename="myFile.gxt" />

You can also load a Geonext file by passing it's binary string:

<jsxgraph width="300" height="600" filestring="eNrtXPlv3DYW/tn....omJg=" />

You can also pass other parameters. Example:

<jsxgraph height="200" width="400" board="board1" box="jxgbox" filename="myFile.gxt" />

Or building a construction with JavaScript:

<jsxgraph height="600" width="600">
brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 300, originY: 200, unitX: 50, unitY: 50});
brd.suspendUpdate();
brd.createElement('axis', [[0,0], [1,0]], {});
brd.createElement('axis', [[0,0], [0,1]], {});
var s = brd.createElement('slider', [[0.75,-2.5],[5.75,-2.5],[0,0,10]], {name:'S'});
brd.createElement('functiongraph', [ function(t) { 
	var val = 0, k = 1, i, len = Math.floor(s.Value()) + 1;
       for(i = 0; i < len; i++) {
           val += Math.sin(2*Math.PI*k*t)/k;
           k += 1;
       }
       return val+2;
    }, -10, 10], {strokeColor: "#bb0000", curveType:'plot'});
brd.createElement('functiongraph', [ function(t) { 
	var val = 0, k = 1, i, len = Math.floor(s.Value()) + 1;
       for(i = 0; i < len; i++) {
           val += Math.sin(2*Math.PI*(2*k-1)*t)/(2*k-1);
           k += 1;
       }
       return val+2;
    }, -10, 10], {strokeColor: "#bb0000", curveType:'plot'});
brd.unsuspendUpdate();
</jsxgraph>

Download instructions[edit | edit source]

Please cut and paste the code found below and place it in $IP/extensions/JSXGraph.php. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation[edit | edit source]

To install this extension, add the following to LocalSettings.php:

require_once("$IP/extensions/JSXGraph.php");

Code[edit | edit source]

<?php
/*
   Copyright 2008,2009
       Matthias Ehmann,
       Michael Gerhaeuser,
       Carsten Miller,
       Bianca Valentin,
       Alfred Wassermann,
       Peter Wilfahrt
 
   This file is part of JSXGraph.
 
   JSXGraph is free software: you can redistribute it and/or modify
   it under the terms of the GNU Lesser General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.
 
   JSXGraph is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU Lesser General Public License for more details.
 
   You should have received a copy of the GNU Lesser General Public License
   along with JSXGraph.  If not, see <http://www.gnu.org/licenses/>.
*/
/**
 * JSXGraph extension
 *
 * @author Alfred Wassermann
 * @author Peter Wilfahrt
 * @version 0.3.1
 */
 
/** Requirements:
 *  Allowing upload of .gxt-Files:
 *  - Add the following two lines to LocalSettings.php:
 *      $wgFileExtensions[] = 'gxt';
 *      $wgVerifyMimeType = false;
 *  - Place this file into:
 *      Note: $IP stands for the root directory of your MediaWiki
installation, the same directory that holds LocalSettings.php.
 *      $IP/extensions/JSXGraph.php
 *  - To install following line has to be added to LocalSettings.php:
 *      require_once("$IP/extensions/JSXGraph.php");
 *  - Now you can include JSXGraph drawings with a .gxt-file:
 *      <jsxgraph height="300" width="600" filename="myFile.gxt" />
 *    or providing a gxt-string:
 *      <jsxgraph height="300" width="600"
filestring="$$GXT-binarystring should be here$$" />
 *    or providing a javascript-input:
 *      <jsxgraph height="300" width="600">
 *        var brd = JXG.JSXGraph....();
 *      </jsxgraph>
 *
 * jsxgraph-params:
 *   width:    default: 500
 *   height:   default: 400
 *   filename, filestring or $input (between <jsxgraph>-tags) --> required
 *   box:      default: jxgbox
 *   board:    default: brd
 */
$jsxgraph_version = '0.3.1';
 
// CHANGE this to load local files:
$outputURI        = 'http://jsxgraph.uni-bayreuth.de/distrib';
 
if(!defined('MEDIAWIKI')) {
 echo("This is an extension to the MediaWiki package and cannot be
run standalone.\n");
 die(-1);
}
 
//Avoid unstubbing $wgParser too early on modern (1.12+) MW versions,
as per r35980
if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
   $wgHooks['ParserFirstCallInit'][] = 'jsxgraphSetup';
   $wgHooks['ParserAfterTidy'][] = 'jsxgraphParserAfterTidy';
} else {
   $wgExtensionFunctions[] = 'jsxgraphSetup';
   $wgHooks['ParserAfterTidy'][] = 'jsxgraphParserAfterTidy';
}
 
$wgExtensionCredits['parserhook'][] = array(
 'name'        => 'JSXGraph MediaWiki Plugin',
 'author'      => 'Alfred Wassermann, Peter Wilfahrt',
 'url'         => 'http://www.jsxgraph.org/',
 'description' => 'Add [http://www.jsxgraph.org JSXGraph] to MediaWiki pages.',
 'version'     => $jsxgraph_version
);
 
function jsxgraphSetup() {
   global $wgParser;
   $wgParser->setHook( 'jsxgraph', 'jsxgraphOutput' );
   return true;
}
 
$markerList = array();
function jsxgraphOutput($input, $args, $parser) {
 global $wgServer; // URL of the WIKI's server
 global $jsxgraph_version; // see line 9 of this file
 global $markerList;
 global $outputURI;
 
 $error_message = "no error"; //will be overwritten, if error occurs
 $CRLF = "\r\n";
 
 // Look for required parameters
 if( !(isset($args['filename']) || isset($args['filestring']) ||
isset($input)) ) {
   $error_message = "Missing parameter (width or height, filename,
string or input).";
 }
 $output  = "<!-- JSXGraph MediaWiki extension " . $jsxgraph_version . " -->";
 
 $markercount = count($markerList);
 if ($markercount>0) {
   $defaultBoard = "brd".$markercount;
   $defaultBox = "jxgbox".$markercount;
 } else {
   $defaultBoard = "brd";
   $defaultBox = "jxgbox";
 }
 $outputDivId   = (isset($args['box']))      ?
htmlspecialchars(strip_tags($args['box']))      : $defaultBox;
 $outputBoardId = (isset($args['board']))    ?
htmlspecialchars(strip_tags($args['board']))    : $defaultBoard;
 $width         = (isset($args['width']))    ?
htmlspecialchars(strip_tags($args['width']))    : 500;
 $height        = (isset($args['height']))   ?
htmlspecialchars(strip_tags($args['height']))   : 400;
 
 // Load necessary stylesheet und scripts
 if ($markercount==0) {
   $output .= "<link rel='stylesheet' type='text/css'
href='".$outputURI."/jsxgraph.css' />";
   $output .= "<script src='".$outputURI."/jsxgraphcore.js'
type='text/javascript'></script>";
 }
 // Output div
 $output .= "<div id='". $outputDivId ."' class='jxgbox'
style='width:". $width ."px; height:". $height ."px;'></div>";
 $output .= "<script type='text/javascript'>";
 
 // construction input method
 if(isset($args['filename'])) { // string of url to gxt-file
   // retrieve URL of .gxt file
   $gxtBinary = htmlspecialchars(strip_tags($args['filename']));
   $gxtFile = Image::newFromName($gxtBinary);
   if (!($gxtFile->exists() )) {
     $error_message = "File " . $gxtFile . " not found.";
   } else {
     $gxtURL = $wgServer . $gxtFile->getURL();
   }
   $output .= "  var " . $outputBoardId ." =
JXG.JSXGraph.loadBoardFromFile('" . $outputDivId."', '". $gxtURL ."',
'Geonext');";
 }
 if(isset($args['filestring'])) { // binary content of gxt-file
   $output .= "  var ".$outputBoardId ." =
JXG.JSXGraph.loadBoardFromString('".$outputDivId."', '".
htmlspecialchars(strip_tags($args['filestring'])) ."', 'Geonext');";
 }
 if(isset($input)) { // content between <jsxgraph>-tags
   $output .= $input;
 }
 $output .= "</script>";
 
 // if error occurred, discard and output error message
 if ($error_message != "no error") {
       $output = "<p>Error in MediaWiki extension (JSXGraph.php):
<em>" . $error_message. "</em></p>" . $CRLF;
 }
 
 // Send the output to the browser
 $marker = "jsxgraph-marker".$markercount."-jsxgraph";
 $markerList[$markercount] = $output;
 return $marker;
}
 
function jsxgraphParserAfterTidy($parser, $text) {
   // find markers in $text
   // replace markers with actual output
   global $markerList;
   $keys = array();
   $marker_count = count($markerList);
 
   for ($i = 0; $i < $marker_count; $i++) {
       $keys[] = 'jsxgraph-marker' . $i . '-jsxgraph';
   }
   $text = str_replace($keys, $markerList, $text);
   return true;
} // missing php end tag to avoid troubles

Code for PHP 5.3[edit | edit source]

<?php
/* 
    Copyright 2008,2009
        Matthias Ehmann,
        Michael Gerhaeuser,
        Carsten Miller,
        Bianca Valentin,
        Alfred Wassermann,
        Peter Wilfahrt
 
    This file is part of JSXGraph.
 
    JSXGraph is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    JSXGraph is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.
 
    You should have received a copy of the GNU Lesser General Public License
    along with JSXGraph.  If not, see <http://www.gnu.org/licenses/>.
*/
/**
 * JSXGraph extension
 *
 * @author Alfred Wassermann
 * @author Peter Wilfahrt
 * @version 0.3.1
 */
 
/** Requirements:
 *  Allowing upload of .gxt-Files:
 *  - Add the following two lines to LocalSettings.php: 
 *      $wgFileExtensions[] = 'gxt';
 *      $wgVerifyMimeType = false;
 *  - Place this file into:
 *      Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.
 *      $IP/extensions/JSXGraph.php
 *  - To install following line has to be added to LocalSettings.php:
 *      require_once("$IP/extensions/JSXGraph.php");
 *  - Now you can include JSXGraph drawings with a .gxt-file:
 *      <jsxgraph height="300" width="600" filename="myFile.gxt" />
 *    or providing a gxt-string:
 *      <jsxgraph height="300" width="600" filestring="$$GXT-binarystring should be here$$" />
 *    or providing a javascript-input:
 *      <jsxgraph height="300" width="600">
 *        var brd = JXG.JSXGraph....();
 *      </jsxgraph>
 *
 * jsxgraph-params:
 *   width:    default: 500
 *   height:   default: 400
 *   filename, filestring or $input (between <jsxgraph>-tags) --> required
 *   box:      default: jxgbox
 *   board:    default: brd
 */
$jsxgraph_version = '0.3.1';
 
// CHANGE this to load local files:
$outputURI        = 'http://jsxgraph.uni-bayreuth.de/distrib';
 
if(!defined('MEDIAWIKI')) {
  echo("This is an extension to the MediaWiki package and cannot be run standalone.\n");
  die(-1);
}
 
//Avoid unstubbing $wgParser too early on modern (1.12+) MW versions, as per r35980
if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
    $wgHooks['ParserFirstCallInit'][] = 'jsxgraphSetup';
    $wgHooks['ParserAfterTidy'][] = 'jsxgraphParserAfterTidy';
} else {
    $wgExtensionFunctions[] = 'jsxgraphSetup';
    $wgHooks['ParserAfterTidy'][] = 'jsxgraphParserAfterTidy';
}
 
$wgExtensionCredits['parserhook'][] = array(
  'name'        => 'JSXGraph MediaWiki Plugin',
  'author'      => 'Alfred Wassermann, Peter Wilfahrt',
  'url'         => 'http://www.jsxgraph.org/',
  'description' => 'Add [http://www.jsxgraph.org JSXGraph] to MediaWiki pages.',
  'version'     => $jsxgraph_version
);
 
function jsxgraphSetup() {
    global $wgParser;
    $wgParser->setHook( 'jsxgraph', 'jsxgraphOutput' );
    return true;
}
 
$markerList = array();
function jsxgraphOutput($input, $args, $parser) {
  global $wgServer; // URL of the WIKI's server
  global $jsxgraph_version; // see line 60 of this file
  global $markerList;
  global $outputURI;
 
  $error_message = "no error"; //will be overwritten, if error occurs
  $CRLF = "\r\n";
 
  // Look for required parameters
  if( !(isset($args['filename']) || isset($args['filestring']) || isset($input)) ) {
    $error_message = "Missing parameter (width or height, filename, string or input).";
  }
  $output  = "<!-- JSXGraph MediaWiki extension " . $jsxgraph_version . " -->";
 
  $markercount = count($markerList);
  if ($markercount>0) {
    $defaultBoard = "brd".$markercount;
    $defaultBox = "jxgbox".$markercount;
  } else {
    $defaultBoard = "brd";
    $defaultBox = "jxgbox";
  }
  $outputDivId   = (isset($args['box']))      ? htmlspecialchars(strip_tags($args['box']))      : $defaultBox;
  $outputBoardId = (isset($args['board']))    ? htmlspecialchars(strip_tags($args['board']))    : $defaultBoard;
  $width         = (isset($args['width']))    ? htmlspecialchars(strip_tags($args['width']))    : 500;
  $height        = (isset($args['height']))   ? htmlspecialchars(strip_tags($args['height']))   : 400;
 
  // Load necessary stylesheet und scripts
  if ($markercount==0) {
    $output .= "<link rel='stylesheet' type='text/css' href='".$outputURI."/jsxgraph.css' />";
    $output .= "<script src='".$outputURI."/jsxgraphcore.js' type='text/javascript'></script>";
  }
  // Output div
  $output .= "<div id='". $outputDivId ."' class='jxgbox' style='width:". $width ."px; height:". $height ."px;'></div>";
  $output .= "<script type='text/javascript'>";
 
  // construction input method
  if(isset($args['filename'])) { // string of url to gxt-file
    // retrieve URL of .gxt file
    $gxtBinary = htmlspecialchars(strip_tags($args['filename']));
    $gxtFile = Image::newFromName($gxtBinary);
    if (!($gxtFile->exists() )) {
      $error_message = "File " . $gxtFile . " not found.";
    } else {
      $gxtURL = $wgServer . $gxtFile->getURL();
    }
    $output .= "  var " . $outputBoardId ." = JXG.JSXGraph.loadBoardFromFile('" . $outputDivId."', '". $gxtURL ."', 'Geonext');";
  }
  if(isset($args['filestring'])) { // binary content of gxt-file
    $output .= "  var ".$outputBoardId ." = JXG.JSXGraph.loadBoardFromString('".$outputDivId."', '". htmlspecialchars(strip_tags($args['filestring'])) ."', 'Geonext');";
  }
  if(isset($input)) { // content between <jsxgraph>-tags
    $output .= $input;
  }
  $output .= "</script>";
 
  // if error occurred, discard and output error message
  if ($error_message != "no error") {
        $output = "<p>Error in MediaWiki extension (JSXGraph.php): <em>" . $error_message. "</em></p>" . $CRLF;
  }
 
  // Send the output to the browser
  $marker = "jsxgraph-marker".$markercount."-jsxgraph";
  $markerList[$markercount] = $output;
  return $marker;
}
 
function jsxgraphParserAfterTidy($parser, $text) {
    // find markers in $text
    // replace markers with actual output
    global $markerList;
    $keys = array();
    $marker_count = count($markerList);
 
    for ($i = 0; $i < $marker_count; $i++) {
        $keys[] = 'jsxgraph-marker' . $i . '-jsxgraph';
    }
    $text = str_replace($keys, $markerList, $text);
    return true;
} // missing php end tag to avoid troubles

See also[edit | edit source]