WindowStyle

Overview

This example will run a frame progress bar with percent info and additional text label, using the absolute position.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

To render a such smooth bar, we need to set cell count to zero (line 20), and fix size following the absolute positionning (lines 21-25).

Colors of smooth bar are set lines 26-29.

The percent label added by default is pct1 and is top right side aligned on the progress bar (line 37) :

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

While the additional text label txt1 is top (left) side aligned on the progress bar (lines 40-42):

Property Value Default
left 10 5
top 9 5
width   0
height   0
align   left
valign   top
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color  #000000
See also :

Source Code

  1. <?php
  2. /**
  3. * Horizontal ProgressBar inside a pseudo window frame.
  4. *
  5. * @version    $Id: windowstyle.php,v 1.5 2006/05/24 08:45:07 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. * @example    examples/label/windowstyle.php
  11. *             windowstyle source code
  12. * @link       http://www.laurent-laville.org/img/progress/screenshot/labelwindowstyle.png
  13. *             screenshot (Image PNG, 267x99 pixels) 773 bytes
  14. */
  15. require_once 'HTML/Progress2.php';
  16.  
  17. $pb = new HTML_Progress2();
  18. $pb->setAnimSpeed(100);
  19. $pb->setIncrement(10);
  20. $pb->setCellCount(0);
  21. $pb->setProgressAttributes(array(
  22.     'position' => 'absolute',
  23.     'width' => 172,
  24.     'height' => 24
  25. ));
  26. $pb->setCellAttributes(array(
  27.     'active-color' => '#0033FF',
  28.     'inactive-color' => '#CCCCCC'
  29. ));
  30. $pb->setBorderPainted(true);
  31. $pb->setBorderAttributes(array(
  32.     'width' => 1,
  33.     'color' => '#404040 #dfdfdf #dfdfdf #404040'
  34. ));
  35. $pb->setFrameAttributes(array('width' => 200, 'height' => 70));
  36.  
  37. $pb->setLabelAttributes('pct1', array('left' => 130, 'top' => 9));
  38.  
  39. // Adds additional text label
  40. $labelID1 = 'txt1';
  41. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, $labelID1, 'Please wait ...');
  42. $pb->setLabelAttributes($labelID1, array('left' => 10, 'top' => 9));
  43. ?>
  44. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  45.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  46. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  47. <head>
  48. <title>Window Style Frame Progress2 example</title>
  49. <style type="text/css">
  50. <!--
  51. <?php echo $pb->getStyle(); ?>
  52.  
  53. body {
  54.     background-color: #E0E0E0;
  55.     color: #000000;
  56.     font-family: Verdana, Arial;
  57. }
  58.  -->
  59. </style>
  60. <?php echo $pb->getScript(false); ?>
  61. </head>
  62. <body>
  63.  
  64. <?php
  65. $pb->display();
  66.  
  67. for($i=1; $i<=100; $i++) {
  68.     if ($i==15) {
  69.         $pb->setLabelAttributes($labelID1,
  70.                                 array('value' => 'Loading Album')
  71.         );
  72.     }
  73.     if ($i==30) {
  74.         $pb->setLabelAttributes($labelID1,
  75.                                 array('value' => 'Scanning ...')
  76.         );
  77.     }
  78.     if ($i>50 && $i<67) {
  79.         $pb->setLabelAttributes($labelID1,
  80.                                 array('value' => 'Load Song: '.($i-49).'/16')
  81.         );
  82.     }
  83.     if ($i==67) {
  84.         $pb->setLabelAttributes($labelID1,
  85.                                 array('value' => 'anything else ...')
  86.         );
  87.     }
  88.     $pb->moveStep($i);
  89.     $pb->process();
  90.     if ($pb->getPercentComplete() == 1) {
  91.         break;
  92.     }
  93. }
  94. $pb->hide();
  95. ?>
  96.  
  97. <h1>Process ended ! </h1>
  98. <p>Wait is over, and progress meter is hidden.</p>
  99.  
  100. <h2>Laura Pausini - the best of </h2>
  101. <p>E Ritorno Da Te </p>
  102. <ol>
  103. <li>e ritorno da te
  104. <li>la solitudine
  105. <li>non c'e
  106. <li>strani amori
  107. <li>gente
  108. <li>incancellabile
  109. <li>le cose che vivi
  110. <li>seamisai
  111. <li>ascolta il tuo cuore
  112. <li>mi respuesta
  113. <li>in assenza di te
  114. <li>un'emergenza d'amore
  115. <li>one more time
  116. <li>tra te e il mare
  117. <li> il mio sbaglio piu grande
  118. <li>una storia che vale
  119. </ol>
  120. </body>
  121. </html>