Complex observer

Overview

This example will run a complex observer mechanism which run two progress bar.
At each full loop of first bar, second bar is increment until this last one reach 100%.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The vertical progress bar (line 46) on left side (line 49), identify as PB1 (line 43) wait 100ms (line 47) between each step of 10% (line 48).

The vertical progress bar (line 54) on right side (line 57), identify as PB2 (line 52) wait 100ms (line 55) between each step of 25% (line 56).

There are 10 cells 20x15 for PB1 and PB2 with :

Property Value Default
active-color (PB1)   #006600
active-color (PB2) #3874B4 #006600
inactive-color (PB1)   #CCCCCC
inactive-color (PB2) #EEEECC #CCCCCC
width   20
height   15
spacing   2
See also :

PB2 is surrounded by a thin 1 pixel border (lines 70-74), while PB1 has no border:

Property Value Default
class   progressBorder%s
width 1 0
style   solid
color navy #000000
See also :

And the percent text info are right aligned on left side of PB1 (lines 64-68), and center aligned on right side of PB2 (lines 79-85):

Property Value Default
left (PB1) -50 5
left (PB2) 15 5
top 85 5
width (PB1)   50
width (PB2) 100 50
height   0
align (PB1)   right
align (PB2) center right
valign   right
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color (PB1) red #000000
color (PB2) yellow#000000
class  progressPercentLabel%s
See also :

PB1 is the only progress bar to have its background changed (line 63):

Property Value Default
class   progress%s
background-color #E0E0E0 #FFFFFF
auto-size   true
See also :

Source Code

  1. <?php
  2. /**
  3. * Complex observer pattern for progress meter.
  4. * Uses a custom observer to log second progress bar process.
  5. *
  6. * @version    $Id: observer2.php,v 1.5 2006/05/24 08:41:45 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.php';
  13.  
  14. function getmicrotime($time)
  15. {
  16.     list($usec, $sec) = explode(' ', $time);
  17.     return ((float)$usec + (float)$sec);
  18.  
  19. }
  20.  
  21. // 1. Defines custom observer pattern
  22. function myProgressObserver(&$notification)
  23. {
  24.     static $fileCount = 0;
  25.  
  26.     $notifyName = $notification->getNotificationName();
  27.     $notifyInfo = $notification->getNotificationInfo();
  28.  
  29.     if (strcasecmp($notifyName, 'onChange') == 0) {
  30.         if (strcasecmp($notifyInfo['handler'], 'moveNext') == 0) {
  31.             if ($notifyInfo['value'] < 100) {
  32.                 $fileCount++;
  33.                 $timestamp = getmicrotime($notifyInfo['time']);
  34.                 $msg = sprintf('file #%s was proceed on %s', $fileCount, date('r', $timestamp));
  35.                 error_log ($msg . PHP_EOL, 3, 'observer2.log');
  36.             }
  37.         }
  38.     }
  39. }
  40.  
  41. // 2. Creates progress bars
  42. $pb1 = new HTML_Progress2();
  43. $pb1->setIdent('PB1');
  44. $pb1->setComment('Complex Observer Progress2 example');
  45. $pb1->setTabOffset(1);
  46. $pb1->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  47. $pb1->setAnimSpeed(100);
  48. $pb1->setIncrement(10);
  49. $pb1->setProgressAttributes('position=absolute top=5 left=100');
  50.  
  51. $pb2 = new HTML_Progress2();
  52. $pb2->setIdent('PB2');
  53. $pb2->setTabOffset(1);
  54. $pb2->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  55. $pb2->setAnimSpeed(100);
  56. $pb2->setIncrement(25);
  57. $pb2->setProgressAttributes('position=absolute top=5 left=250');
  58.  
  59. // 3. Attach an observer
  60. $pb2->addListener('myProgressObserver');
  61.  
  62. // 4. Changes look-and-feel of progress bars
  63. $pb1->setProgressAttributes('background-color=#E0E0E0');
  64. $pb1->setLabelAttributes('pct1', array(
  65.     'top' => 85,
  66.     'left' => -50,
  67.     'color'  => 'red'
  68. ));
  69.  
  70. $pb2->setBorderPainted(true);
  71. $pb2->setBorderAttributes(array(
  72.     'width' => 1,
  73.     'color' => 'navy'
  74. ));
  75. $pb2->setCellAttributes(array(
  76.     'active-color' => '#3874B4',
  77.     'inactive-color' => '#EEEECC'
  78. ));
  79. $pb2->setLabelAttributes('pct1', array(
  80.     'top' => 85,
  81.     'left' => 15,
  82.     'width'  => 100,
  83.     'align'  => 'center',
  84.     'color'  => 'yellow'
  85. ));
  86. ?>
  87. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  88.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  89. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  90. <head>
  91. <title>Complex Observer Progress2 example</title>
  92. <style type="text/css">
  93. <!--
  94. <?php
  95. echo $pb1->getStyle();
  96. echo $pb2->getStyle();
  97. ?>
  98. div.container {
  99.     position: absolute;
  100.     left: 40px;
  101.     top: 80px;
  102.     width: 400px;
  103.     height: 190px;
  104.     background-color: lightblue;
  105.     border: 2px;
  106.     border-color: navy;
  107.     border-style: dashed;
  108. }
  109.  -->
  110. </style>
  111. <?php echo $pb1->getScript(false); ?>
  112. </head>
  113. <body>
  114.  
  115. <div class="container">
  116. <?php
  117. $pb1->display();
  118. $pb2->display();
  119. ?>
  120. </div>
  121.  
  122. <?php
  123. do {
  124.     $pb1->process();    // warning: don't forget it (even for a demo)
  125.     if ($pb1->getPercentComplete() == 1) {
  126.         // the 1st progress bar has reached 100%, do a new loop
  127.         $pb1->moveStep(0);
  128.         // updates $pb2 because $pb1 has completed a full loop
  129.         $pb2->moveNext();
  130.     } else {
  131.         $pb1->moveNext();   // updates 1st progress bar
  132.     }
  133. } while($pb2->getPercentComplete() < 1);
  134. ?>
  135.  
  136. </body>
  137. </html>