![]() HTML_Progress2 : The Definitive Guide
|
Table of Contents
Sometimes you can't immediately determine the length of a long-running task, or the task might stay stuck at the same state of completion for a long time.
You can show work without measurable progress by putting the progress meter in indeterminate mode. A progress meter in indeterminate mode displays animation to indicate that work is occurring. As soon as the progress meter can display more meaningful information, you should switch it back into its default, determinate mode.
We will learn, with two examples, how to use indeterminate mode. The first example apply basic concept, and the second example show an integration with a progress monitor.
In following example we will simulate a task that display a progress meter in indeterminate mode waiting for a ressource (mail post, file upload, ...). We are waiting 12 seconds before switch back to determinate mode (default) and finish process with a full loop from 0 to 100% by +5 step increment.
Strategies used are :
myProcess
) Here is a preview of a progress bar in indeterminate mode. Animation look like a sliding box.
And now the script we will review step by step to understand concepts.
<?php require_once 'HTML/Progress2.php'; function myProcess($pValue, &$pBar){ static $c, $t; if (!isset($c)) { $c = time(); $t = 0; } $pBar->sleep();
if ($pBar->isIndeterminate()) { $elapse = time() - $c; if ($elapse > $t) { echo "myProgressHandler -> elapse time = $elapse s.<br />\n"; $t++; } if ($elapse >= 12) { $pBar->setIndeterminate(false);
$pBar->setValue(0);
$pBar->setIncrement(5); } } } $pb = new HTML_Progress2(); $pb->setAnimSpeed(200);
$pb->setIncrement(10);
$pb->setProgressAttributes('background-color=#E0E0E0'); $pb->setCellAttributes('active-color=#996'); $pb->setLabelAttributes('pct1', array('color' => '#996')); $pb->setIndeterminate(true);
$pb->setProgressHandler('myProcess');
?> <!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>Waiting for resource ... (simulation)</title> <style type="text/css"> <!-- body { background-color: #CCCC99; color: #996; font-family: Verdana, Arial; } <?php echo $pb->getStyle(); ?> // --> </style> <?php echo $pb->getScript(false); ?> </head> <body> <?php $pb->display(); echo '<br /><br />'; $pb->run(); ?> <p><b>Process Ended !</b></p> </body> </html>
HTML_Progress2 : The Definitive Guide | v 2.1.0 : August 12, 2006 |