Examples TOCexamples

Multiple ProgressBar

$Date: 2005/07/25 11:46:01 $

 Table of contents

Introduction

This example requires :

This example will run two progress meter at same time.

It will show two vertical progress bar running in opposite sides (down to up and reverse) with different increment step.

Important: In case you want to use more than one progress meter on a same page.
To manage all bars easily, you need to identify them by a free simple code to avoid system to generate random values (see at lines 15 and 35).

bar1 (on left side) will be filled from down to up (see line 20) with color scheme defined on lines 22 to 30.

bar2 (on right side) will be filled from up to down (see line 40) with color scheme defined on lines 42 to 50.

The loop that will display both progress meter at same time is defined on lines 117 to 119.

If you want to do something corresponding to bar1 and bar2 process (see lines 114 and 117) you should set your own progress handler with method HTML_Progress::setProgressHandler(). Default is to do the HTML_Progress::sleep() action (see setAnimSpeed).

[Top]

 Render options

Here are options to build the 1st progress bar cells (count=15 filled in natural way): 
active-color   = #970038
inactive-color = #FFDDAA
width          = 50
height         = 13
HTML_Progress_UI::setCellAttributes()
Here are options to build the 1st progress bar border : 
width = 1
color = #000000
HTML_Progress_UI::setBorderAttributes()
Here are options to build the 1st progress bar string : 
font-size        = 8
color            = #FF0000
background-color = #C3C6C3
align            = center
valign           = bottom
HTML_Progress_UI::setStringAttributes()
Here are options to build the 2nd progress bar cells (count=15 filled in reverse way): 
active-color   = #3874B4
inactive-color = #FFDDAA
width          = 50
height         = 13
HTML_Progress_UI::setCellAttributes()
Here are options to build the 2nd progress bar border : 
width = 1
style = dashed
color = #000000
HTML_Progress_UI::setBorderAttributes()
Here are options to build the 2nd progress bar string : 
font-size        = 8
color            = navy
background-color = #C3C6C3
align            = center
valign           = bottom
HTML_Progress_UI::setStringAttributes()

[Top]

 Output

Screenshot

[Top]

 PHP source syntax highlight

  1. <?php
  2. /**
  3.  * Multiple Vertical ProgressBar example.
  4.  *
  5.  * @version    $Id: vertical.php,v 1.2 2005/07/25 11:46:01 farell Exp $
  6.  * @author     Laurent Laville <pear@laurent-laville.org>
  7.  * @package    HTML_Progress
  8.  * @subpackage Examples
  9.  */
  10.  
  11. require_once 'HTML/Progress.php';
  12.  
  13. $bar1 = new HTML_Progress(HTML_PROGRESS_BAR_VERTICAL);
  14. $bar1->setAnimSpeed(20);
  15. $bar1->setIdent('PB1');
  16. $bar1->setIncrement(10);
  17. $bar1->setBorderPainted(true);
  18.  
  19. $ui1 =& $bar1->getUI();
  20. $ui1->setFillWay('natural');
  21. $ui1->setCellCount(15);
  22. $ui1->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=50 height=13');
  23. $ui1->setBorderAttributes('width=1 color=#000000');
  24. $ui1->setStringAttributes(array(
  25.     'font-size' => 8,
  26.     'color' => '#FF0000',
  27.     'background-color' => '#C3C6C3',
  28.     'align' => 'center',
  29.     'valign' => 'bottom'
  30. ));
  31.  
  32.  
  33. $bar2 = new HTML_Progress(HTML_PROGRESS_BAR_VERTICAL);
  34. $bar2->setAnimSpeed(20);
  35. $bar2->setIdent('PB2');
  36. $bar2->setIncrement(5);
  37. $bar2->setBorderPainted(true);
  38.  
  39. $ui2 =& $bar2->getUI();
  40. $ui2->setFillWay('reverse');
  41. $ui2->setCellCount(15);
  42. $ui2->setCellAttributes('active-color=#3874B4 inactive-color=#FFDDAA width=50 height=13');
  43. $ui2->setBorderAttributes('width=1 style=dashed color=#000000');
  44. $ui2->setStringAttributes(array(
  45.     'font-size' => 8,
  46.     'color' => 'navy',
  47.     'background-color' => '#C3C6C3',
  48.     'align' => 'center',
  49.     'valign' => 'bottom'
  50. ));
  51. ?>
  52. <!DOCTYPE html
  53.     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  54.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  55.  
  56. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  57. <head>
  58. <title>Multiple Vertical ProgressBar example</title>
  59. <style type="text/css">
  60. <!--
  61. <?php
  62. echo $bar1->getStyle();
  63. echo $bar2->getStyle();
  64. ?>
  65.  
  66. body {
  67.     background-color: #C3C6C3;
  68.     color: #000000;
  69.     font-family: Verdana, Arial;
  70. }
  71.  
  72. a:visited, a:active, a:link {
  73.     color: navy;
  74. }
  75.  
  76. table.container {
  77.     border: 1;
  78.     border-color: navy;
  79.     border-style: dotted;
  80.     cell-spacing: 4;
  81.     cell-padding: 10;
  82.     width: 25%;
  83. // -->
  84. </style>
  85. <script type="text/javascript">
  86. <!--
  87. <?php echo $bar1->getScript(); ?>
  88. //-->
  89. </script>
  90. </head>
  91. <body>
  92.  
  93.  
  94. <table class="container">
  95. <tr>
  96.     <td width="50%" align="center">
  97. <?php echo $bar1->toHTML(); ?>
  98.     </td>
  99.     <td width="50%" align="center">
  100. <?php echo $bar2->toHTML(); ?>
  101.     </td>
  102. </tr>
  103. </table>
  104.  
  105. <?php
  106.  
  107. do {
  108.     $bar1->display();
  109.     $bar2->display();
  110.     if ($bar2->getPercentComplete() == 1) {
  111.         break;   // the progress bar has reached 100%
  112.     }
  113.     if ($bar1->getPercentComplete() < 1) {
  114.         $bar1->process();
  115.         $bar1->incValue();
  116.     }
  117.     $bar2->process();
  118.     $bar2->incValue();
  119. } while(1);
  120. ?>
  121.  
  122. </body>
  123. </html>

[Top]