Rectangle

Overview

This example will run a progress meter (rectangle 6x4) filled in natural way.

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 200ms (line 14) between each step of 10% (line 15).

There are 16 cells 15x15 organized into polygonal shape (lines 16-23), a basic rectangle 6x4 (line 25) :

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

And the progress percent text info is center aligned on bottom side (line 24):

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

Source Code

  1. <?php
  2. /**
  3. * Basic Rectangle progress meter.
  4. *
  5. * @version    $Id: rectangle.php,v 1.4 2006/05/24 08:41:13 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11. require_once 'HTML/Progress2.php';
  12.  
  13. $pb = new HTML_Progress2();
  14. $pb->setAnimSpeed(200);
  15. $pb->setIncrement(10);
  16. $pb->setOrientation(HTML_PROGRESS2_POLYGONAL);
  17. $pb->setCellAttributes(array(
  18.     'width'  => 15,
  19.     'height' => 15,
  20.     'active-color'   => 'red',
  21.     'inactive-color' => 'orange',
  22.     )
  23. );
  24. $pb->setLabelAttributes('pct1', 'valign=bottom align=center width=90 left=0');
  25. $pb->setCellCoordinates(6,4);     // Rectangle 6x4
  26. ?>
  27. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  28.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  29. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  30. <head>
  31. <title>Rectangle Progress2 example</title>
  32. <style type="text/css">
  33. <!--
  34. <?php echo $pb->getStyle(); ?>
  35.  
  36. body {
  37.     background-color: #FFFFFF;
  38. }
  39.  -->
  40. </style>
  41. <?php echo $pb->getScript(false); ?>
  42. </head>
  43. <body>
  44.  
  45. <?php
  46. $pb->display();
  47. $pb->run();
  48. ?>
  49.  
  50. </body>
  51. </html>