Monitor Indeterminate

Overview

This example will run a progress bar in indeterminate mode (with monitor)
then switch back to determinate mode when reached a limit (internal value > 240).

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The progress meter wait 200ms (line 51) between each step (line 52) in indeterminate mode. This mode is activated on line 57.

Background of progress bar is changed (line 53):

Property Value Default
background-color #E0E0E0 #FFFFFF
auto-size   true
See also :

There are 10 cells (line 54) with :

Property Value Default
active-color #996 #006600
inactive-color   #CCCCCC
width   15
height   20
spacing   2
See also :

The percent text info (line 55) when progress meter will be in determinate mode:

Property Value Default
left   5
top   5
width   50
height   0
align   right
valign   right
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color #996 #000000
class  progressPercentLabel%s

And the status monitor line (line 56 with default id.) :

Property Value Default
class   progressTextLabel%s
width   0
height   0
font-size 10 11
font-family   Verdana, Tahoma, Arial
font-weight   normal
color black #000000
background-color    
align   left
valign   bottom
See also :

Monitor renderers are allows by QF renderers itself (lines 82-103):

See also :

Source Code

  1. <?php
  2. /**
  3. * Horizontal progress bar in indeterminate mode
  4. * using the Progress2_Monitor solution (with QF renderer).
  5. *
  6. * @version    $Id: monitor.php,v 1.4 2006/05/24 08:45:38 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. require_once 'HTML/Progress2/Monitor.php';
  13.  
  14. /**
  15. *  The progress bar will switch from indeterminate to determinate mode
  16. *  after reached arbitrary internal step 240.
  17. *
  18. *  @param int     $pValue   current value of the progress bar
  19. *  @param object  $pMon     the progress monitor itself
  20. */
  21. function myProgressHandler($pValue, &$pBar)
  22. {
  23.     global $pm;
  24.     static $c;
  25.  
  26.     if (!isset($c)) {
  27.         $c = 0;
  28.     }
  29.     $c += 16;
  30.     $pm->setCaption('completed %step% out of 400', array('step' => $c));
  31.  
  32.     $pBar->sleep();
  33.  
  34.     if ($c >= 240 && $pBar->isIndeterminate()) {
  35.         $pBar->setIndeterminate(false);
  36.         $pBar->setValue(0);
  37.     }
  38.     if ($pBar->getPercentComplete() == 1) {
  39.         if ($pBar->isIndeterminate()) {
  40.             $pBar->setValue(0);
  41.         }
  42.     }
  43. }
  44.  
  45. $pm = new HTML_Progress2_Monitor('frmMonitor',
  46.     array( 'button' => array('style' => 'width:80px;'),
  47.            'title'  => 'Progress ...' )
  48. );
  49.  
  50. $pb =& $pm->getProgressElement();
  51. $pb->setAnimSpeed(200);
  52. $pb->setIncrement(10);
  53. $pb->setProgressAttributes('background-color=#E0E0E0');
  54. $pb->setCellAttributes('active-color=#996');
  55. $pb->setLabelAttributes('pct1', 'color=#996');
  56. $pb->setLabelAttributes('monitorStatus', 'color=black font-size=10');
  57. $pb->setIndeterminate(true);
  58. $pb->setProgressHandler('myProgressHandler');
  59.  
  60. $pm->setProgressElement($pb);
  61. ?>
  62. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  63.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  64. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  65. <head>
  66. <title>Half Indeterminate Monitor Progress2 example</title>
  67. <style type="text/css">
  68. <!--
  69. body {
  70.     background-color: #444444;
  71.     font-family: Verdana, Arial;
  72. }
  73.  
  74. <?php echo $pm->getStyle(); ?>
  75.  -->
  76. </style>
  77. <?php echo $pm->getScript(false); ?>
  78. </head>
  79. <body>
  80.  
  81. <?php
  82. $renderer =& HTML_QuickForm::defaultRenderer();
  83. $renderer->setFormTemplate('
  84. <form{attributes}>
  85.   <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#CCCC99">
  86.   {content}
  87.   </table>
  88. </form>
  89. ');
  90. $renderer->setElementTemplate('
  91.   <tr>
  92.     <td valign="top" style="padding-left:15px;">
  93.     {element}
  94.     </td>
  95.   </tr>
  96. ');
  97. $renderer->setHeaderTemplate('
  98.   <tr>
  99.   <td style="background:#996;color:#ffc;" align="left" colspan="2">
  100.     <b>{header}</b>
  101.   </td>
  102.   </tr>
  103. ');
  104. $pm->accept($renderer);
  105.  
  106. echo $renderer->toHtml();
  107. $pm->run();
  108. ?>
  109.  
  110. </body>
  111. </html>