JavaDanse

Overview

This example will filled an horizontal progress bar from right to left with javascript cell customization.
It also show how to increase cell number (default is 10).

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

PHP >= 4.2.0
PEAR::HTML_Progress2 >= 2.0.0
PEAR::HTML_Common >= 1.2.1
PEAR::PHP_Compat >= 1.4.1
PEAR::Event_Dispatcher >= 0.9.1

And also but optional :

PEAR >= 1.3.5

Explains step by step

The progress meter wait 200ms (line 16) between each step of 5% (line 17).

There are 20 cells 20x20 filled with JavaScript (lines 18-25, 35):

Property	Value	Default
active-color	#970038	#006600
inactive-color	#FFDDAA	#CCCCCC
width	20	15
height		20
spacing		2
font-size	14	8

cells: 0,1,2 are red (lines 37-39),
cells: 3,4,5,6 are yellow (lines 40-42),
cells: 7,8,9 are white (lines 43-45),
cells: 10 to 19 are black (default)

Property	Value	Default
class		progressBorder%s
width	1	0
style		solid
color		#000000

Property	Value	Default
class		progressPercentLabel%s
width	440	50
height	0	0
font-size	14	11
font-family		Verdana, Tahoma, Arial
font-weight		normal
color	#FF0000	#000000
background-color
align	center	right
valign	bottom	right

Source Code

<?php
/**
* 20 cells Horizontal progress bar
* filled from right to left with JavaScript customization.
*
* @version $Id: javadanse.php,v 1.4 2006/05/24 08:47:05 farell Exp $
* @author Laurent Laville <pear@laurent-laville.org>
* @package HTML_Progress2
* @subpackage Examples
* @access public
*/
require_once 'HTML/Progress2.php';
$pb = new HTML_Progress2();
$pb->setIdent('PB1');
$pb->setAnimSpeed(100);
$pb->setIncrement(5);
$pb->setFillWay('reverse');
$pb->setCellCount(20);
$pb->setCellAttributes(array(
'active-color' => '#970038',
'inactive-color' => '#FFDDAA',
'width' => 20,
'font-size' => 14
));
$pb->setBorderPainted(true);
$pb->setBorderAttributes('width=1');
$pb->setLabelAttributes('pct1', array(
'width' => 440,
'font-size' => 14,
'color' => '#FF0000',
'align' => 'center',
'valign' => 'bottom'
));
$pb->setScript('progress2_number.js');
foreach (range(0,2) as $index) {
$pb->setCellAttributes('color=red', $index);
}
foreach (range(3,6) as $index) {
$pb->setCellAttributes('color=yellow', $index);
}
foreach (range(7,9) as $index) {
$pb->setCellAttributes('color=white ', $index);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>JavaDanse Progress2 example</title>
<style type="text/css">
<!--
<?php echo $pb->getStyle(); ?>
body {
background-color: #FFFFFF;
}
-->
</style>
<?php echo $pb->getScript(false); ?>
</head>
<body>
<?php
$pb->display();
$pb->run();
?>
</body>
</html>

Laurent-Laville.org