Progress bar plugin

The original author of this plugin was Mike Smith. Looking at the comments upto today (2009-03-10) it seems that he has stopped maintaining this plugin. I have taken-over maintaining this plugin to prevent it from being lost…

Simply put <progress=[size]> in any page, where [size] is a number from 0 to 100 without the % sign. Only multiples of 10 are supported, so you can only use 0%, 10%, 20%, etc.

<progress=0>

will make an empty progress bar.

<progress=70>

will make a 70% full one.

<progress=70>

Download and extract the following archive to ../lib/plugins/:

• .zip-archive

Here's the source code, but you'll still need the images from the above archive.

<?php
/* DokuWiki Progressbar plugin
 * Internal version 1.0.0
 * 
 * Copyright (C) 2009 Mischa The Evil
 * Copyright (C) 2006 Mike Smith
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 * 
 * This program 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 General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
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');
 
class syntax_plugin_progressbar extends DokuWiki_Syntax_Plugin
{
 
	/**
	 * return some info
	 */
	function getInfo()
	{
		return array
		(
			'author' => 'Mischa The Evil',
			'email'  => 'mischa_the_evil@hotmail.com',
			'date'   => '2009-03-09',
			'name'   => 'Progressbar',
			'desc'   => 'Makes progress bars on wiki pages.',
			'url'    => 'http://www.dokuwiki.org/plugin:progressbar',
		);
	}
 
	/**
	 * What kind of syntax are we?
	 */
	function getType()
	{
		return 'substition';
	}
 
	/**
	 * Where to sort in?
	 */ 
	function getSort()
	{
		return 999;
	}
 
	/**
	 * Connect pattern to lexer
	 */
	function connectTo($mode)
	{
		$this->Lexer->addSpecialPattern('<progress=(?:10|[1-9]?)0>', $mode, 'plugin_progressbar');
	}
 
	/**
	 * Handle the match
	 */
	function handle($match, $state, $pos, &$handler)
	{
		substr($match, 10, -1);
		return array(substr($match, 10, -1));
	}
 
	/**
	 * Create output
	 */
	function render($mode, &$renderer, $data)
	{
		$renderer->doc .= '<img width="100" height="16" src="'. DOKU_URL .'lib/plugins/progressbar/images/' . $data[0] . '.gif" alt="' . $data[0] . '% completed" title="' . $data[0] . '% completed" />';
		return true;
	}
}

You can change the default images in ../lib/plugins/progressbar/images. Mike Smith tried to make them fit-in well with the default DokuWiki style (they are using a green/blue color-scheme), but they probably look horrible with any other style

I personally use images which are using a gray color-scheme and wanted to share them also. Therefore I'll make the set public as a seperate imagepack.

To install simply backup the directory ../lib/plugins/progressbar/images and then extract the following archive into it overwriting the available default images:

• Gray Imagepack

• Added - Link-elements to the progress-images for tooltips in all browsers
• Changed - Rebrand the plugin after take-over
• Fixed - Image-error when used inside a namespace since this wasn't fixed correctly in 2007-11-13
• Fixed - Incorrect date

• Fixed - 0%-state bug
• Fixed - Added width- and height-elements to the img tag
• Fixed - Image-error when used inside a namespace

• Initial version by Mike Smith

Since the archive no longer exists you no longer can access the images in the zip files, however, that example site is still up and running so you can rip the images off of there. But if that links dies, you'll have to copy the source code above to syntax.php inside of the folder, progressbar.

Next, you'll need to create an images directory inside of the progressbar directory. You'll need 11 images–one for each possible percentage. Ex: progressbar/images/100.gif.

However, if you don't want to do the hassle of eleven images, and you don't need the images to be disgustingly different you could simply use the variable $data[0] to indicate an image width and use the same image for every percentage. However, 0% wouldn't be very useful, nor would it indicate the progress percent/value without viewing the alt text. Why deal with images?

The following code will replace the $renderer→doc …. line in syntax.php. It produces just about the same results as the images.

    $renderer->doc .= '<table cellpadding="0" cellspacing="0" style="border: 2px solid #436976; width: 100px;"><tr style="height:12px;">'.($data[0]<=0 ? '' : '<td style="background-color:#74a6c9; width: '.$data[0].'%">&nbsp;</td>') . ($data[0]>=100 ? '' : '<td style="background-color: #dee7ec;">&nbsp;</td>') .'</tr></table>';

Want to throw some text in there? Use this ugly solution¹⁾:

  $renderer->doc .= '<table cellspacing="0" style="width: 120px;border: 1px solid #000;">
  <tr><td   style="padding-top: 2px; padding-left: 5px; padding-right: 5px;" colspan="2">
  '.$data[0].'% completed</td></tr>
  <tr><td style="width:'.($data[0]==0 ? '1' : $data[0]).'%; background-color:#f33;">&nbsp;</td>
  <td>&nbsp;</td></tr></table>';

Furthermore, if you opt to not use the images anymore then you shouldn't really limit yourself to only 11 different percentages. The following function replaces function connectTo($mode) inside of syntax.php. The regular expression means accept one or two characters from 0-9 or 100

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

Code supplied by Anonymous.

This version creates a progress bar without the images. It will also be inserted inline into your text if you want one that does not wrap to a new line. It's also thinner.

Features:

• No extra images needed. (uses one transparent image that already exists in the Wiki image directory).
• 100 pixels wide.
• Renders inline with your text.
• Thinner.
• Supports any integer percent from 0-100.
• Shows the percent value on mouse-over.

How To Use:

-Update the connectTo function inside syntax.php as per below to make it support any number from 0-100.

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

-Replace the render function in your syntax.php file for this plugin, with this:

function render($mode, &$renderer, $data)
	{
		if($data[0]<0){$data[0]=0;}
		if($data[0]>100){$data[0]=100;}
		$sizeLeft = 100-$data[0];
 
		$renderer->doc .= '<span style="padding:0;height:8px;width: 100px;">'.($data[0]<=0 ? '' : '<span style="margin:0;padding:0;background-color:#74a6c9; height:8px; width:'.$data[0].'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$data[0].'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') . ($data[0]>=100 ? '' : '<span style="margin:0;padding:0;background-color: #dee7ec;height:8px;width:'.$sizeLeft.'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$sizeLeft.'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') .'</span>';
 
		return true;
	}

Code supplied by Sherri W. (start.ofitall.com).

• The 0 state (0%, empty progress bar) doesn't work in the plugin (even on your demo site). I changed the regexp in syntax.php (connectTo() function) from this ”'<progress=(?:10|[1-9])0>'” to this ”'<progress=(?:10|[1-9]?)0>'” (added the ? after [1-9] to make it optional) and now it works. — GJH 2007-01-15
• Hi, just stumbled over your cute little plugin - STRONGLY Suggest to add the width and height tag to the img tag to allow the browser to display the wiki pages without the need to wait for loading the progress bar image — eth at gmx punkt at 2007-02-14
• This plugin does not work in namespaces if you have DokuWiki configured to use '/' – syntax.php line 84 needs modified to provide an absolute web path to the images, because relative path wont work if your in /somenamespace/somepage. dirname($_SERVER['PHP_SELF']) seems to work for me. — Anonymous 2007-??-??

All three above-mentioned bugs have been corrected in this version (actually this is version 2007-11-13). Please include it in the mainstream and notify me. Thanks. — Lukas 2007-11-13

An updated zip-archive is available now (version 2009-03-09 [1.0.0]). — Mischa The Evil 2009/03/10 01:20

• The .tar.gz link won't install in the plugin manager. — dinolinux [at] gmail [dot] com 2007-05-18
• I've made a tar.bz2 version and stuck it on the server where the demo was running. Updated the link above. However I'm not developing this anymore, therefore the other enhancements here weren't added to it. — Mike Smith 2007-??-??

An updated zip-archive is available now (version 2009-03-09 [1.0.0]). Don't know if that works with the plugin manager though… — Mischa The Evil 2009/03/10 01:20

• …