DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:canvas

Canvas Plugin

Compatible with DokuWiki

No compatibility info given!

plugin Provide HTML5 Canvas functionality for DokuWiki page.

Last updated on
2016-07-14
Provides
Syntax
Repository
Source
Requires
inlinejs

Installation

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.

Additionally, Inline JavaScript plugin (InlineJS) is required to embed the JavaScript in the DW page.

Examples/Usage

To prepare a canvas element with given size and id, this plugin uses <canvas> for markup that is almost same as the “HTML5 Canvas” tag. A difference is that you can provide your own JavaScript to render graphics in the canvas inside the “canvas” section.

For example, you can draw two boxes in the canvas of which size is 140×140 pixcels:

<canvas sample1 140,140>
//onload = function() { draw1(); }; // !! use jQuery instead of "onload"
jQuery( function() { draw1(); });

function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 55, 50);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (30, 30, 55, 50);
}
</canvas>

Then you will get a drawing in your DW page. The snippet of HTML is:

<canvas class="canvasbox" id="sample1" width="140" height="140">[No canvas support]</canvas>
<script type="text/javascript">
/*<![CDATA[*/
jQuery( function() { draw1(); });
function draw1() {
  var canvas1 = jQuery('#sample1')[0];
  if ( !canvas1 || !canvas1.getContext ) return false;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = "rgb(200,0,0)";
  ctx1.fillRect (10, 10, 80, 80);
  ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx1.fillRect (60, 60, 130, 130);
}
/*!]]>*/
</script>

Syntax

Basic syntax:

<canvas id [size]> [script] </canvas>
  • id : “id” of the canvas, which must be unique in the same DW page.
    • This “id” is used in the script to identify canvas or chart target.
  • size : Size of the canvas. (Optional)
    • Default value is 300px,150px, which means 300px width and 150px height.
    • When one value is given it is assumed to be the height.
  • script : JavaScript to draw something in the canvas. (Optional)
    • script is embedded in the HTML of the page.
    • In case of no script inside the tag, no script may embedded.

Syntax Variants:

You may draw more complex charts in the canvas using any javascript chart software, such as RGraph and jqPlot. These software require different HTML for chart target; “HTML5 canvas” and “div” section, respectively. This plugin is designed to prepare appropriate target for different chart software. Currently, this plugin supports only two software mentioned above. Additionally, each canvas variant prepares small license note underneath of the chart canvas.

<canvas:rgraph canvas_id [size]> [script] </canvas>
  • indicate to prepare chart target for RGraph. Please see also it's license information.
  • HTML output example:
    <canvas class="canvasbox" id="chart1" width="300px" height="300px"></canvas>
    <div class="rgraph-license-note" style="width:300px;">
    <a href="http://www.rgraph.net/">Powered by RGraph</a>
    </div>
<canvas:jqplot canvas_id [size]> [script] </canvas>
  • indicate to prepare chart target for jqPlot. Please refer also jQplot project page.
  • HTML output example:
    <div class="jqplot-target" id="chart1" style="width:300px; height:300px;"></div>
    <div class="jqplot-license-note" style="width:300px;">
    <a href="http://www.jqplot.com/">Powered by jQplot</a>
    </div>

Configuration and Settings

There are no configuration options for this plugin.

Development

This plugin is developed to learn how to incorporate various charts into the DW page and to setup working playground for trials. Therefore, it is rather experimental, especially for syntax variants.

Change Log

FAQ

[discussions should ideally be deleted and turned into FAQ entries along the way]

Representing data with the help of charts,graphs,symbols is one of the effective way. With the help of such data visualization items we are able to make data more interactive.

Thanks

plugin/canvas.txt · Last modified: 2016-07-14 03:05 by s.sahara