Square

$Date: 2004/04/18 13:25:44 $

Table of contents

Introduction
PHP script
Render options
Output
Play full example

Introduction

This example will run a polygonal (square 3x3) ProgressBar.

Cell coordinates are pre-computed but free x-y-grid coordinates are also possible. Percent text info is centered on a white background area of 30 pixels width, at top side of polygonal shape.

[Top]

PHP script

Build the progress bar

require_once 'HTML/Progress.php';

$s = isset($_GET['start']) ? $_GET['start'] : 'topleft';

$bar = new HTML_Progress();
$bar->setAnimSpeed(100);
$bar->setIncrement(10);

$ui =& $bar->getUI();
$ui->setStringAttributes('valign=top align=center height=30');
$ui->setOrientation(HTML_PROGRESS_POLYGONAL);
$ui->setCellAttributes('width=20 height=20');
$w = 3;
$h = 3;
$ui->setCellCoordinates($w,$h);          // square 3x3

Rotates the cell coordinates array, to allow different start point.

$coord = $ui->getCellCoordinates();

switch (strtolower($s)) {
 case 'topright':
     for ($i=1; $i<$w; $i++) {
         $shift = array_shift($coord);
         array_push($coord, $shift);
     }
     break;
 case 'bottomright':
     for ($i=1; $i<($w+$h-1); $i++) {
         $shift = array_shift($coord);
         array_push($coord, $shift);
     }
     break;
 case 'bottomleft':
     for ($i=1; $i<$w; $i++) {
         $pop = array_pop($coord);
         array_unshift($coord, $pop);
     }
     break;
 case 'topleft':
 default:     
     break;
}
$ui->setCellCoordinates($w, $h, $coord);

Loop to run the progress


do {
    $bar->display();
    if ($bar->getPercentComplete() == 1) {
        break;   // the progress bar has reached 100%
    }
    // your user-process should be put HERE !
    $bar->incValue();
} while(1);

[Top]

Render options

Here are options to build this progress bar string (percent text info):

valign = top 
align  = center
height = 30

HTML_Progress_UI::setStringAttributes()

Here are options to build the progress bar cells :

width  = 20
height = 20

HTML_Progress_UI::setCellAttributes()

[Top]

Output

Screenshot

[Top]

Play full example

Run the script below to build a square 3x3 beginning at :


<?php 
require_once 'HTML/Progress.php';

$s = isset($_GET['start']) ? $_GET['start'] : 'topleft';

$bar = new HTML_Progress();
$bar->setAnimSpeed(100);
$bar->setIncrement(10);

$ui =& $bar->getUI();
$ui->setStringAttributes('valign=top align=center height=30');
$ui->setOrientation(HTML_PROGRESS_POLYGONAL);
$ui->setCellAttributes('width=20 height=20');
$w = 3;
$h = 3;
$ui->setCellCoordinates($w,$h);          // square 3x3
$coord = $ui->getCellCoordinates();

switch (strtolower($s)) {
 case 'topright':
     for ($i=1; $i<$w; $i++) {
         $shift = array_shift($coord);
         array_push($coord, $shift);
     }
     break;
 case 'bottomright':
     for ($i=1; $i<($w+$h-1); $i++) {
         $shift = array_shift($coord);
         array_push($coord, $shift);
     }
     break;
 case 'bottomleft':
     for ($i=1; $i<$w; $i++) {
         $pop = array_pop($coord);
         array_unshift($coord, $pop);
     }
     break;
 case 'topleft':
 default:     
     break;
}
$ui->setCellCoordinates($w, $h, $coord);
?>
<html>
<head>
<title>Basic Square ProgressBar example</title>
<style type="text/css">
<!--
<?php echo $bar->getStyle(); ?>
// -->
</style>
<script type="text/javascript">
<!--
<?php echo $ui->getScript(); ?>
//-->
</script>
</head>
<body>

<?php 
echo $bar->toHtml(); 

do {
    $bar->display();
    if ($bar->getPercentComplete() == 1) {
        break;   // the progress bar has reached 100%
    }
    $bar->incValue();
} while(1);

?>

</body>
</html>

href: ./square.php

[Top]