Custom Monitor

Overview

This example will run a Progress2 Monitor in indeterminate mode.
The progress bar starts in indeterminate mode then switch back and finish in determinate mode.

You don't need to click on Start button to begin, due to autorun option set to true (see class constructor).

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 100ms (line 49) between each step of 1% (default).

The form windows (frmMonitor4) have default title (In progress ...), buttons name (Start, Cancel) with size set to 80 pixels width, and autorun option set to true (line 44) : see class constructor parameters (lines 42-46).

There are 20 cells (line 50) 15x20:

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

With percent text info aligned on right side:

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 navy #000000
class  progressPercentLabel%s

And the monitor status line (default monitorStatus) aligned at bottom of progress bar (line 54) with:

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

QF renderer is defined on lines 79-100.

Source Code

  1. <?php
  2. /**
  3. * Progress2 Monitor
  4. * with a new form template and progress bar color layout.
  5. * Used a function as user callback.
  6. *
  7. * @version    $Id: monitorcus.php,v 1.4 2006/05/24 08:42:43 farell Exp $
  8. * @author     Laurent Laville <pear@laurent-laville.org>
  9. * @package    HTML_Progress2
  10. * @subpackage Examples
  11. * @access     public
  12. */
  13. require_once 'HTML/Progress2/Monitor.php';
  14.  
  15. /**
  16. * In case we have attached an indeterminate progress bar to the monitor
  17. * once we have reached 60%,
  18. * we swap from indeterminate mode to determinate mode
  19. * and run a standard progress bar from 0 to 100%
  20. *
  21. *  @param int     $pValue   current value of the progress bar
  22. *  @param object  $pMon     the progress monitor itself
  23. */
  24. function myFunctionHandler($pValue, &$pb)
  25. {
  26.     global $pm;
  27.  
  28.     $pb->sleep();
  29.  
  30.     if (!$pb->isIndeterminate()) {
  31.         if (fmod($pValue,10) == 0) {
  32.             $pm->setCaption('myFunctionHandler -> progress value is = %value%',
  33.                 array('value' => $pValue)
  34.                 );
  35.         }
  36.     } elseif ($pValue == 60) {
  37.         $pb->setIndeterminate(false);
  38.         $pb->setValue(0);
  39.     }
  40. }
  41.  
  42. $pm = new HTML_Progress2_Monitor('frmMonitor4', array(
  43.     'button' => array('style' => 'width:80px;'),
  44.     'autorun' => true
  45.     )
  46. );
  47.  
  48. $pb =& $pm->getProgressElement();
  49. $pb->setAnimSpeed(100);
  50. $pb->setCellCount(20);
  51. $pb->setProgressAttributes('background-color=#EEE');
  52. $pb->setCellAttributes('inactive-color=#FFF active-color=#444444');
  53. $pb->setLabelAttributes('pct1', 'color=navy');
  54. $pb->setLabelAttributes('monitorStatus', 'color=navy font-size=10');
  55. $pb->setIndeterminate(true);
  56. $pb->setProgressHandler('myFunctionHandler');
  57.  
  58. $pm->setProgressElement($pb);
  59. ?>
  60. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  61.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  62. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  63. <head>
  64. <title>Custom Progress2 Monitor </title>
  65. <style type="text/css">
  66. <!--
  67. body {
  68.     background-color: lightgrey;
  69.     font-family: Verdana, Arial;
  70. }
  71. <?php echo $pm->getStyle(); ?>
  72.  -->
  73. </style>
  74. <?php echo $pm->getScript(false); ?>
  75. </head>
  76. <body>
  77.  
  78. <?php
  79. $renderer =& HTML_QuickForm::defaultRenderer();
  80. $renderer->setFormTemplate('
  81. <form{attributes}>
  82.   <table width="450" border="0" cellpadding="3" cellspacing="2" bgcolor="#EEEEEE">
  83.   {content}
  84.   </table>
  85. </form>
  86. ');
  87. $renderer->setElementTemplate('
  88.   <tr>
  89.     <td valign="top" style="padding-left:15px;">
  90.     {element}
  91.     </td>
  92.   </tr>
  93. ');
  94. $renderer->setHeaderTemplate('
  95.   <tr>
  96.     <td style="background:#7B7B88;color:#ffc;" align="left" colspan="2">
  97.       <b>{header}</b>
  98.     </td>
  99.   </tr>
  100. ');
  101. $pm->accept($renderer);
  102.  
  103. echo $renderer->toHtml();
  104. $pm->run();
  105. ?>
  106.  
  107. </body>
  108. </html>