![]() HTML_Progress2 : The Definitive Guide
|
Table of Contents
Start using HTML_Progress2 straight away.
Through samples code that are possible real cases we will study all features of the HTML_Progress2 package. Additional tutorials will help you to learn what are others features: Indeterminate Mode, Listener, Monitoring.
There are two main phases in developement and use of a progress meter: designing and processing.
You have probably your ideas of what it should look like: shape, size, colors. So how to build it ?
Even if it's not yet ready to be display, following source code will create a new instance of the HTML_Progress2 class that is ready to build an horizontal (default shape) progress bar:
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); ?>
If you want to build others shapes like :
HTML_PROGRESS2_BAR_VERTICAL
HTML_PROGRESS2_POLYGONAL
HTML_PROGRESS2_CIRCLE
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setOrientation(HTML_PROGRESS2_BAR_VERTICAL); ?>
Only with horizontal and vertical progress bar, you have ability to choose between smooth or cell rendering. What is it ?
A smooth progress bar is a full bar that look like this:
while cell progress bar look like :
Remember that default progress meter is horizontal progress bar with ten cells (as above). If you want to have smooth progress bar, or change cell spacing (in pixel), use the
setCellAttributes()
method with
spacing
attribute.
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setCellAttributes('spacing=0'); ?>
![]() |
Note |
---|---|
it's not a real smooth progress meter as HTML_Progress2_Lite can do. |
By default, an horizontal or vertical (and even circle/ellipse) progress meter have ten cells, one for each ten percent.
Among attribute you can change there are: size (height, width) and color(active inactive). See setCellAttributes() method for all details and default values.
We can also enlarge or reduce the cell count of the progress bar with the setCellCount() method.
If we want to have a twelve cells horizontal progress meter with largest square (20x20 pixels) and red skin, then write :
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setCellCount(12); $pb->setCellAttributes(array( 'active-color' => '#FF0000', 'inactive-color' => '#FF9900', 'width' => 20, 'height' => 20, 'spacing' => 4 )); ?>
![]() |
Note |
---|---|
You can also use an html string that defines attributes list. In our sample we will write:
$pb->setCellAttributes('active-color=#FF0000 inactive-color=#FF9900 width=20 height=20 spacing=4'); |
A progress bar (horizontal or vertical) can be surrounded by a border (it's not the default).
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setBorderPainted(true); $pb->setBorderAttributes(array( 'width' => 2, 'style' => 'solid', 'color' => 'red' )); ?>
Partial script above, will produce an horizontal progress bar with a red solid border; something like this:
![]() |
Important |
---|---|
Without
setBorderPainted() method and a
TRUE argument, there won't be any border rendering. Even if you set a positive width with
setBorderAttributes() method.
|
A progress bar (horizontal or vertical) has a white background by default, but you can change that. You may even use an image as background. Don't worry if image is smaller (use
background-repeat
attribute) or bigger than progress meter. Accuracy positionning is possible with usage of
background-position
attribute.
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setProgressAttributes(array( 'background-color' => '#339900', 'background-image' => 'degrade.jpg', 'background-repeat' => 'repeat-y' )); $pb->setCellAttributes('inactive-color=transparent'); ?>
![]() |
Tip |
---|---|
Even if you want to use an image as background, don't forget to add
background-color attribute as an alternative.
It's same feature as |
Progress meter can be fill in two directions (ways) called natural or reverse. Default behavior is natural fill.
For horizontal progress bar, natural way is from left to right, while reverse way is from right to left.
For vertical progress bar, natural way is from down to up, while reverse way is from up to down.
<?php require_once 'HTML/Progress2.php'; $pb = new HTML_Progress2(); $pb->setOrientation(HTML_PROGRESS2_BAR_VERTICAL); $pb->setFillWay('reverse'); $pb->setAnimSpeed(50); $pb->setCellCount(15); $pb->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=50 height=13'); $pb->setBorderPainted(true); $pb->setBorderAttributes('width=1 color=#000000'); $pb->setLabelAttributes('pct1', array( 'font-size' => 8, 'color' => '#FF0000', 'background-color' => '#C3C6C3', 'align' => 'center', 'valign' => 'bottom' )); ?>
Partial script above, will produce a vertical progress bar filled in reverse way (top to down), that look like:
HTML_Progress2 : The Definitive Guide | v 2.1.0 : August 12, 2006 |