Mixed

Overview

This example will run two mixed progress meter at same time on the same page.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The vertical (lines 18,22) progress bar on left side, identify as PB1 (line 19) wait 100ms (line 20) between each step of 10% (line 21).

The horizontal (lines 40-46) progress bar on right side, identify as PB2 (line 37) wait 80ms (line 38) between each step of 5% (line 39).

There are 15 cells (line 23) for PB1:

Property Value Default
active-color #970038 #006600
inactive-color #FFDDAA #CCCCCC
width 50 20
height 13 15
spacing   2

And no cell (line 47), smooth mode for PB2 with :

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

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

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

PB1 percent text info is center aligned on top side (lines 29-34) of both progress bar :

Property Value Default
left   5
top -16 5
width   50
height   0
align center right
valign   right
background-color   
font-size 8 11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color (PB1) #FF0000#000000
color (PB2)  #000000
class  progressPercentLabel%s

PB2 percent text info is center aligned on middle of the meter (lines 49-55) of both progress bar :

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

Source Code

  1. <?php
  2. /**
  3. * Multiple mixed progress bar.
  4. *
  5. * @version    $Id: mixed.php,v 1.5 2006/05/24 08:42:15 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. * @example    examples/multiple/mixed.php
  11. *             mixed source code
  12. * @link       http://www.laurent-laville.org/img/progress/screenshot/mixed.png
  13. *             screenshot (Image PNG, 719x255 pixels) 4.93 Kb
  14. */
  15. require_once 'HTML/Progress2.php';
  16.  
  17. $pb1 = new HTML_Progress2();
  18. $pb1->setOrientation(HTML_PROGRESS2_BAR_VERTICAL);
  19. $pb1->setIdent('PB1');
  20. $pb1->setAnimSpeed(100);
  21. $pb1->setIncrement(10);
  22. $pb1->setProgressAttributes('position=absolute top=90 left=15');
  23. $pb1->setCellCount(15);
  24. $pb1->setCellAttributes('
  25. active-color=#970038 inactive-color=#FFDDAA width=50 height=13
  26. ');
  27. $pb1->setBorderPainted(true);
  28. $pb1->setBorderAttributes('width=1');
  29. $pb1->setLabelAttributes('pct1', array(
  30.     'font-size' => 8,
  31.     'color' => '#FF0000',
  32.     'align' => 'center',
  33.     'top' => -16
  34. ));
  35.  
  36. $pb2 = new HTML_Progress2();
  37. $pb2->setIdent('PB2');
  38. $pb2->setAnimSpeed(80);
  39. $pb2->setIncrement(5);
  40. $pb2->setProgressAttributes(array(
  41.     'position' => 'absolute',
  42.     'width' => 600,
  43.     'height' => 100,
  44.     'top' => 220,
  45.     'left' => 120
  46.     ));
  47. $pb2->setCellCount(0);
  48. $pb2->setCellAttributes('active-color=#CCCC66 inactive-color=#66CCFF');
  49. $pb2->setLabelAttributes('pct1', array(
  50.     'font-size' => 78,
  51.     'width' => 600,
  52.     'height' => 100,
  53.     'align' => 'center',
  54.     'color' => 'navy'
  55.     ));
  56. ?>
  57. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  58.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  59. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  60. <head>
  61. <title>Multiple Vertical Progress2 example</title>
  62. <style type="text/css">
  63. <!--
  64. <?php
  65. echo $pb1->getStyle();
  66. echo $pb2->getStyle();
  67. ?>
  68.  
  69. body {
  70.     background-color: #C3C6C3;
  71. }
  72.  -->
  73. </style>
  74. <?php echo $pb1->getScript(false); ?>
  75. </head>
  76. <body>
  77.  
  78. <?php
  79. $pb1->display();
  80. $pb2->display();
  81.  
  82. do {
  83.     if ($pb2->getPercentComplete() == 1) {
  84.         break;
  85.     }
  86.     if ($pb1->getPercentComplete() < 1) {
  87.         $pb1->process();
  88.         $pb1->moveNext();
  89.     }
  90.     $pb2->process();
  91.     $pb2->moveNext();
  92. } while(1);
  93. ?>
  94.  
  95. </body>
  96. </html>