Extension:JSXGraph

From MediaWiki.org

Jump to: navigation, search

               

Manual on MediaWiki Extensions
List of MediaWiki Extensions
Crystal Clear action run.png
JSXGraph

Release status: beta

Implementation  Tag
Description Add JSXGraph constructions to MediaWiki pages
Author(s)  PeterWilfahrtTalk
Last Version  0.3.1
MediaWiki  tested with 1.13.4
(runs with older versions)
License LGPL
Download see below
Example  JSXGraph examples

check usage (experimental)

Contents

[edit] What can this extension do?

Add a JSXGraph construction to your MediaWiki page.

[edit] Usage

[edit] Allow uploads of gxt-files

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.

[edit] Add a JSXGraph tag to your MediaWiki page

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>

[edit] Download instructions

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.

[edit] Installation

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

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

[edit] Code

<?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 occured, 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

[edit] See also