BullIt

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

Table of contents

Introduction
PHP script
Render options
Output
Play full example

Introduction

This example will run a plain horizontal ProgressBar.
Have a look on cell spacing attribute (important):

greater than zero, make a cell group look and feel
equal zero, make a plain bar

Percent text info is right aligned on top side of the progress bar.

[Top]

PHP script

Build the progress bar

require_once 'HTML/Progress.php';

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

$ui =& $bar->getUI();
$ui->setCellAttributes('active-color=#000084 inactive-color=#3A6EA5 width=20 spacing=0');
$ui->setBorderAttributes('width=1 style=inset color=white');
$ui->setStringAttributes(array(
    'width' => 200,
    'height' => 20,
    'font-size' => 14,
    'background-color' => '#C3C6C3',
    'valign' => 'top'
));

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 the progress bar cells :

active-color     = #000084
inactive-color   = #3A6EA5
width            = 20
spacing          = 0

HTML_Progress_UI::setCellAttributes()

Here are options to build the progress bar border :

width = 1
style = inset
color = white

HTML_Progress_UI::setBorderAttributes()

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

width            = 200
height           = 20
font-size        = 14
background-color = #C3C6C3
valign           = top

HTML_Progress_UI::setStringAttributes()

[Top]

Output

Screenshot

[Top]

Play full example

Run the script below :


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

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

$ui =& $bar->getUI();
$ui->setCellAttributes('active-color=#000084 inactive-color=#3A6EA5 width=20 spacing=0');
$ui->setBorderAttributes('width=1 style=inset color=white');
$ui->setStringAttributes(array(
    'width' => 200,
    'height' => 20,
    'font-size' => 14,
    'background-color' => '#C3C6C3',
    'valign' => 'top'
));
?>
<!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>Bullit Progress example</title>
<style type="text/css">
<!--
<?php echo $bar->getStyle(); ?>

body {
    background-color: #C3C6C3;
    color: #000000;
    font-family: Verdana, Arial;
}
// -->
</style>
<script type="text/javascript">
<!--
<?php echo $bar->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: ./bullit.php

[Top]