JavaDanse

$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 reverse horizontal ProgressBar with javascript cell customization, as bluesandplus.php. It also show how to increase cell number (default is 10).

Percent text info is center aligned on bottom 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(5);
$bar->setBorderPainted(true);

$ui =& $bar->getUI();
$ui->setFillWay('reverse');
$ui->setCellCount(20);
$ui->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=20 height=20');
$ui->setBorderAttributes('width=1 color=#000000');
$ui->setStringAttributes('width=440 font-size=14 color=#FF0000 align=center valign=bottom');
$ui->setScript('progress_number.js');

foreach (range(0,2) as $index) {
    $ui->setCellAttributes('color=red', $index);
}
foreach (range(3,6) as $index) {
    $ui->setCellAttributes('color=yellow', $index);
}
foreach (range(7,9) as $index) {
    $ui->setCellAttributes('color=white ', $index);
}

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   = #970038
inactive-color = #FFDDAA
width          = 20
height         = 20
color          = red (cells: 0,1,2)
color          = yellow (cells: 3,4,5,6)
color          = white (cells: 7,8,9)
color          = black (default) (cells: 10 to 19)

HTML_Progress_UI::setCellAttributes()

Here are options to build the progress bar border :

width = 1
color = #000000

HTML_Progress_UI::setBorderAttributes()

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

width     = 440
font-size = 14
color     = #FF0000
align     = center
valign    = bottom

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(5);
$bar->setBorderPainted(true);

$ui =& $bar->getUI();
$ui->setFillWay('reverse');
$ui->setCellCount(20);
$ui->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=20 height=20');
$ui->setBorderAttributes('width=1 color=#000000');
$ui->setStringAttributes('width=440 font-size=14 color=#FF0000 align=center valign=bottom');
$ui->setScript('progress_number.js');

foreach (range(0,2) as $index) {
    $ui->setCellAttributes('color=red', $index);
}
foreach (range(3,6) as $index) {
    $ui->setCellAttributes('color=yellow', $index);
}
foreach (range(7,9) as $index) {
    $ui->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 Progress example</title>
<style type="text/css">
<!--
<?php echo $bar->getStyle(); ?>

body {
    background-color: #FFFFFF;
    color: #000000;
    font-family: Verdana, Arial;
}
// -->
</style>
<script type="text/javascript" src="<?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: ./javadanse.php

[Top]