Square
Overview
This example will run four progress meter that display a square 3x3
Starting first on top left corner, then on top right, then on bottom right,
and finally on bottom left.
Screenshot
Demonstration
Give it a try
Dependencies
This example requires mandatory resources :
And also but optional :
Explains step by step
The progress meter wait 200ms (line 16)
between each step of 10% (line 17).
There are 8 cells 20x20 organized into polygonal shape (lines 18-19),
a basic square 3x3 (lines 21,46) :
| Property | Value | Default |
|---|
| active-color | | #006600 |
| inactive-color | | #CCCCCC |
| width | 20 | 15 |
| height | 20 | 20 |
| spacing | | 2 |
See also :
Square coordinates are changed to begin :
And the progress percent text info is center aligned on top side (line 20):
| Property | Value | Default |
|---|
| left | | 5 |
| top | | 5 |
| width | | 50 |
| height | 20 | 0 |
| align | center | right |
| valign | top | right |
| background-color | | |
| font-size | | 11 |
| font-family | | Verdana, Tahoma, Arial |
| font-weight | | normal |
| color | | #000000 |
| class | | progressPercentLabel%s |
See also :
Source Code
<?php
/**
* Basic squares progress meter started in each corners.
* A simple rotate function (for-loop) is applied
* on reference coordinates to give new ones.
*
* @version $Id: square.php,v 1.4 2006/05/24 08:41:13 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->setAnimSpeed(200);
$pb->setIncrement(10);
$pb->setOrientation(HTML_PROGRESS2_POLYGONAL);
$pb->setCellAttributes('width=20 height=20');
$pb->setLabelAttributes('pct1', 'valign=top align=center height=20');
$w = $h = 3; // square 3x3
?>
<!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>Square 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->setCellCoordinates($w,$h);
// reference coordinates (top left corner)
$coord = $pb->getCellCoordinates();
// 1. begin at top left corner (default)
$pb->display();
$pb->run();
// 2. begin at top right corner
$c = $coord;
for ($i=1; $i<$w; $i++) {
$shift = array_shift($c);
array_push($c, $shift);
}
$pb->setCellCoordinates($w,$h,$c);
$pb->setValue(0);
$pb->display();
$pb->run();
// 3. begin at bottom right corner
$c = $coord;
for ($i=1; $i<($w+$h-1); $i++) {
$shift = array_shift($c);
array_push($c, $shift);
}
$pb->setCellCoordinates($w,$h,$c);
$pb->setValue(0);
$pb->display();
$pb->run();
// 4. begin at bottom left corner
$c = $coord;
for ($i=1; $i<$w; $i++) {
$pop = array_pop($c);
array_unshift($c, $pop);
}
$pb->setCellCoordinates($w,$h,$c);
$pb->setValue(0);
$pb->display();
$pb->run();
?>
</body>
</html>
