PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Chapter 6. Indeterminate Mode

Table of Contents

Basic usage
Progress Monitor usage

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.

Basic usage

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 :

  1. user callback for the waiting process (function: myProcess)
  2. refresh with standard moveNext handling. If you don't know what i means, then you have probably skip the chapter i suggest you to read it now before to continue.

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.

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. function myProcess($pValue, &$pBar)
  5. {
  6.     static $c, $t;
  7.  
  8.     if (!isset($c)) {
  9.         $c = time();
  10.         $t = 0;
  11.     }
  12.  
  13.     $pBar->sleep();
  14.  
  15.     if ($pBar->isIndeterminate()) {
  16.         $elapse = time() - $c;
  17.  
  18.         if ($elapse > $t) {
  19.             echo "myProgressHandler -> elapse time = $elapse s.<br />\n";
  20.             $t++;
  21.         }
  22.         if ($elapse >= 12) {
  23.             $pBar->setIndeterminate(false);
  24.             $pBar->setValue(0);
  25.             $pBar->setIncrement(5);
  26.         }
  27.     }
  28. }
  29.  
  30. $pb = new HTML_Progress2();
  31. $pb->setAnimSpeed(200);
  32. $pb->setIncrement(10);
  33. $pb->setProgressAttributes('background-color=#E0E0E0');
  34. $pb->setCellAttributes('active-color=#996');
  35. $pb->setLabelAttributes('pct1', array('color' => '#996'));
  36. $pb->setIndeterminate(true);
  37. $pb->setProgressHandler('myProcess');
  38. ?>
  39. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  40.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  41. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  42. <head>
  43. <title>Waiting for resource ... (simulation)</title>
  44. <style type="text/css">
  45. <!--
  46. body {
  47.     background-color: #CCCC99;
  48.     color: #996;
  49.     font-family: Verdana, Arial;
  50. }
  51.  
  52. <?php echo $pb->getStyle(); ?>
  53.  -->
  54.  
  55. </style>
  56. <?php echo $pb->getScript(false); ?>
  57. </head>
  58. <body>
  59.  
  60. <?php
  61. $pb->display();
  62. echo '<br /><br />';
  63. $pb->run();
  64. ?>
  65.  
  66. <p><b>Process Ended !</b></p>
  67.  
  68. </body>
  69. </html>
Line 23 :

Once the progress bar is switch back to determinate mode, we will reset value to zero to start a new standard cycle (from 0 to 100%).

Line 24 :

Without this reset step, the progress meter continue until end (100%) from its current position (unpredictable).

Lines 13, 31, 32 :

Increment is set to 10 to give, with a 0.2 second (200 milisecond) delay, a smooth animation.

Line 36 :

Indeterminate mode is activated(/desactivated) only with setIndeterminate() method.

Lines 4-28, 37 :

myProcess function is the user process that will simulate a waiting resource for 12 seconds, and finish in determinate mode.

HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007