HTML_Progress
[ class tree: HTML_Progress ] [ index: HTML_Progress ] [ all elements ]
Prev Next
Using Indeterminate Mode
how to animate a progress bar to show unknown length-task activity

Table of Contents

Introduction

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 bar in indeterminate mode. A progress bar in indeterminate mode displays animation to indicate that work is occurring. As soon as the progress bar can display more meaningful information, you should switch it back into its default, determinate mode.

Using Indeterminate Mode without Progress Monitor

  1. <?php
  2. require_once 'HTML/Progress.php';
  3.  
  4. function myProgressHandler($progressValue, &$bar)
  5. {
  6. static $c;
  7. static $t;
  8. if (!isset($c)) {
  9. $c = time();
  10. $t = 0;
  11. }
  12.  
  13. // wait a bit ...
  14. $bar->sleep();
  15.  
  16. if ($bar->isIndeterminate()) {
  17. $elapse = time() - $c;
  18.  
  19. if ($elapse > $t) {
  20. echo "myProgressHandler -> elapse time = $elapse s.<br/>\n";
  21. $t++;
  22. }
  23. /* rules to determine when switch back
  24. from indeterminate to determinate mode
  25. */
  26. if ($elapse >= 12) {
  27. $bar->setIndeterminate(false);
  28. $bar->setValue(0);
  29. $bar->setString(null);
  30. $bar->setIncrement(1);
  31. }
  32. }
  33. }
  34.  
  35. $progress = new HTML_Progress();
  36. $progress->setAnimSpeed(200);
  37. $progress->setIncrement(10);
  38. $progress->setStringPainted(true); // get space for the string
  39. $progress->setString(""); // but don't paint it
  40. $progress->setIndeterminate(true); // Progress start in indeterminate mode
  41. $progress->setProgressHandler('myProgressHandler');
  42.  
  43. $ui = & $progress->getUI();
  44. $ui->setProgressAttributes('background-color = #e0e0e0');
  45. $ui->setStringAttributes(array(
  46. 'color' => '#996',
  47. 'background-color' => '#CCCC99'
  48. ));
  49. $ui->setCellAttributes('active-color = #996');
  50. ?>
  51. <html>
  52. <head>
  53. <title>Basic Indeterminate Mode </title>
  54. <style type="text/css">
  55. <!--
  56. body {
  57. background-color: #CCCC99;
  58. color: #996;
  59. font-family: Verdana, Arial;
  60. }
  61.  
  62. <?php echo $progress->getStyle(); ?>
  63. // -->
  64. </style>
  65. <script type="text/javascript">
  66. <!--
  67. <?php echo $progress->getScript(); ?>
  68. //-->
  69. </script>
  70. </head>
  71. <body>
  72.  
  73. <?php
  74. echo $progress->toHtml();
  75.  
  76. $progress->run();
  77. ?>
  78.  
  79. </body>
  80. </html>

Lets review this example step by step :

First, there is the user callback defined on lines 4 to 34, and attached to the progress meter at line 42 with HTML_Progress::setProgressHandler method.
Percent text information is hidden with value "" given to HTML_Progress::setString method (line 40). And the determinate mode is activated on line 41.

Lets have a look deeper into user-callback.

This example simulate a wait-process result for 12 seconds (lines 18 and 27). Each new second, we display the elapse time (lines 20 to 23). When process will reach 12 seconds (line 27), we will switch back to determinate mode (line 28). The percent text information will be display again (line 30) and we will start a new standard cycle, from 0 to 100 percent (lines 29 and 31).

Using Indeterminate Mode with Progress Monitor

In example that follow, we will use a progress bar with help of monitoring functions v2, so you should have HTML_Progress 1.1 or greater installed.

Usage of indeterminate mode of progress meter with HTML_Progress_Monitor class is almost the same as in basic example above.

  1. <?php
  2. require_once 'HTML/Progress/monitor.php';
  3.  
  4. function myProgressHandler($progressValue, &$obj)
  5. {
  6. static $c;
  7. if (!isset($c)) {
  8. $c = 0;
  9. }
  10. $c += 16;
  11. $obj->setCaption("completed $c out of 400");
  12.  
  13. $bar =& $obj->getProgressElement();
  14. /* rules to determine when switch back
  15. from indeterminate to determinate mode
  16. */
  17. if ($c >= 240 && $bar->isIndeterminate()) {
  18. $bar->setIndeterminate(false);
  19. $bar->setString(null); // show percent-info
  20. $bar->setValue(0);
  21. }
  22. if ($bar->getPercentComplete() == 1) {
  23. if ($bar->isIndeterminate()) {
  24. $bar->setValue(0);
  25. } else {
  26. $bar->setString(''); // hide percent-info
  27. }
  28. }
  29. }
  30.  
  31. $monitor = new HTML_Progress_Monitor('frmMonitor',
  32. array( 'button' => array('style' => 'width:80px;'),
  33. 'title' => 'Progress ...' )
  34. );
  35.  
  36. // your custom user process goes here !
  37. $monitor->setProgressHandler('myProgressHandler');
  38.  
  39. // Attach a progress bar custom model
  40. $progress = new HTML_Progress();
  41. $ui = & $progress->getUI();
  42. $ui->setProgressAttributes(array(
  43. 'background-color' => '#e0e0e0'
  44. ));
  45. $ui->setStringAttributes(array(
  46. 'color' => '#996',
  47. 'background-color' => '#CCCC99'
  48. ));
  49. $ui->setCellAttributes(array(
  50. 'active-color' => '#996'
  51. ));
  52.  
  53. $progress->setAnimSpeed(100);
  54. $progress->setIncrement(10);
  55. $progress->setStringPainted(true);
  56. $progress->setString("");
  57. $progress->setIndeterminate(true);
  58. $monitor->setProgressElement($progress);
  59. ?>
  60. <html>
  61. <head>
  62. <title>Indeterminate Mode Progress example</title>
  63. <style type="text/css">
  64. <!--
  65. .progressStatus {
  66. color:#000000;
  67. font-size:10px;
  68. }
  69.  
  70. body {
  71. background-color: #444444;
  72. color: #EEEEEE;
  73. font-family: Verdana, Arial;
  74. }
  75.  
  76. <?php echo $monitor->getStyle(); ?>
  77. // -->
  78. </style>
  79. <script type="text/javascript">
  80. <!--
  81. <?php echo $monitor->getScript(); ?>
  82. //-->
  83. </script>
  84. </head>
  85. <body>
  86.  
  87. <?php
  88. $renderer =& HTML_QuickForm::defaultRenderer();
  89. $renderer->setFormTemplate('
  90. <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#CCCC99">
  91. <form{attributes}>{content}
  92. </form>
  93. </table>
  94. ');
  95. $renderer->setHeaderTemplate('
  96. <tr>
  97. <td style="white-space:nowrap;background:#996;color:#ffc;" align="left" colspan="2">
  98. <b>{header}</b>
  99. </td>
  100. </tr>
  101. ');
  102. $monitor->accept($renderer);
  103.  
  104. // Display progress monitor dialog box
  105. echo $renderer->toHtml();
  106.  
  107.  
  108. $monitor->run();
  109. ?>
  110.  
  111. </body>
  112. </html>

Differences with basic concept resides into QF renders defined on lines 89 to 102, and attached to the monitor at line 103. And also the progress meter is linked to the monitor on line 59.

Prev Up Next
Advanced Error Handling Getting Started Observer pattern

Documentation generated on Sun, 12 Sep 2004 20:22:48 +0200 by phpDocumentor 1.3.0RC3