![]() HTML_Progress2 : The Definitive Guide
|
Now we know the basic of progress meter design, its now time to learn how to handle display refresh with the user process.
There are two main ways :
with a user callback. The core of HTML_Progress2 checking progression (until end), and handling display refresh for us.
without user callback. We have to do all tasks that core of HTML_Progress2 can do it for us.
Its the most easy way. We have just to declare the user callback with setProgressHandler() method, and launch execution with run() method. HTML_Progress2 will check progression of meter (both modes supported: indeterminate, determinate) and stop when 100% is reach.
![]() |
Tip |
---|---|
If you don't specify a callback, default behavior will call HTML_Progress2 sleep() method in background: delay animation n milliseconds (default = zero). This delay is set by setAnimSpeed() method. |
Here is an example that demonstrates user callback usage. We suppose that we get image count from any data source and we have to build/display these images. It could be generated by jpgraph (for complex graphics), but here we used five times same script that call a
pearImage()
function. Part of code came from
PEAR_Info package.
Here is a copy of such PEAR_Info::pearImage()
function, in the
pearimage.php
script:
<?php function pearImage() { $pear_image = 'R0lGODlhaAAyAMT/AMDAwP3+/TWaAvD47Pj89vz++zebBDmcBj6fDEekFluvKmu3PvX68ujz4XvBS8LgrNXqxeHw1ZnPaa/dgvv9+cLqj8LmltD2msnuls'; $pear_image .= '3xmszwmf7+/f///wAAAAAAAAAAACH5BAEAAAAALAAAAABoADIAQAX/ICCOZGmeaKqubOtWWjwJphLLgH1XUu//C1Jisfj9YLEKQnSY3GaixWQqQTkYHM4'; $pear_image .= 'AMulNLJFC9pEwIW/odKU8cqTfsWoTTtcomU4ZjbR4ZP+AgYKCG0EiZ1AuiossEhwEXRMEg5SVWQ6MmZqKWD0QlqCUEHubpaYlExwRPRZioZZVp7KzKQoS'; $pear_image .= 'DxANDLsNXA5simd2FcQYb4YAc2jEU80TmAAIztPCMcjKdg4OEsZJmwIWWQPQI4ikIwtoVQnddgrv8PFlCWgYCwkI+fp5dkvJ/IlUKMCy6tYrDhNIIKLFE'; $pear_image .= 'AWCTxse+ABD4SClWA0zovAjcUJFi6EwahxZwoGqHhFA/4IqoICkyxQSKkbo0gDkuBXV4FRAJkRCnTgi2P28IcEfk5xpWppykFJVuScmEvDTEETAVJ6bEp'; $pear_image .= 'ypcADPkz3pvKVAICHChkC7siQ08zVqu4Q6hgIFEFZuEn/KMgRUkaBmAQs+cEHgIiHVH5EAFpIgW4+NT6LnaqhDwe/Ov7YOmWZp4MkiAWBIl0kAVsJWuzc'; $pear_image .= 'YpdiNgddc0E8cKBAu/FElBwagMb88ZZKDRAkWJtkWhHh3wwUbKHQJN3wQAaXGR2LpArv5oFHRR34C7Mf6oLXZNfqBgNI7oOLhj1f8PaGpygHQ0xtP8MDV'; $pear_image .= 'KwYTSKcgxr9/hS6/pCCAAg5M4B9/sWh1YP9/XSgQWRML/idBfKUc4IBET9lFjggKhDYZAELZJYEBI2BDB3ouNBEABwE8gAwiCcSYgAKqPdEVAG7scM8BP'; $pear_image .= 'PZ4AIlM+OgjAgpMhRE24OVoBwsIFEGFA7ZkQQBWienWxmRa7XDjKZXhBdAeSmKQwgLuUVLICa6VEKIGcK2mQWoVZHCBXJblJUFkY06yAXlGsPIHBEYdYi'; $pear_image .= 'WHb+WQBgaIJqqoHFNpgMGB7dT5ZQuG/WbBAIAUEEFNfwxAWpokTIXJAWdgoJ9kRFG2g5eDRpXSBpEIF0oEQFaZhDbaSFANRgqcJoEDRARLREtxOQpsPO9'; $pear_image .= '06ZUeJgjQB6dZUPBAdwcF8KLXXRVQaKFcsRRLJ6vMiiCNKxRE8ECZKgUA3Va4arOAAqdGRWO7uMZH5AL05gvsjQbg6y4NCjQ1kw8TVGcbdoKGKx8j3bGH'; $pear_image .= '7nARBArqwi0gkFJBrZiXBQRbHoIgnhSjcEBKfD7c3HMhz+JIQSY3t8GGKW+SUhfUajxGzKd0IoHBNkNQK86ZYEqdzYA8AHQpqXRUm80oHs1CAgMoBxzRq'; $pear_image .= 'vzs9CIKECC1JBp7enUpfXHApwVYNAfo16c4IrYPLVdSAJVob7IAtCBFQGHcs/RRdiUDPHA33oADEAIAOw=='; header('content-type: image/gif'); echo base64_decode($pear_image); } pearImage(); ?>
And now, the main script.
<?php require_once 'HTML/Progress2.php'; $dataSrc= array('pearimage', 'pearimage', 'pearimage', 'pearimage', 'pearimage'); function myProcess($pValue, &$pBar)
{ static $q = 0; global $dataSrc; $pBar->sleep(); if (isset($dataSrc[$q])) { echo '<tr><td>' . '<img src="'. $dataSrc[$q] .'.php?timestamp=' . time() . '" alt=""/>' . '<b>'.($q+1).'</b>' . '</td></tr>'; } $q++; return $q;
} $pb = new HTML_Progress2(); $pb->setAnimSpeed(500); $pb->setIncrement(intval(ceil(100 / count($dataSrc))));
$pb->setProgressHandler('myProcess');
?> <html> <head> <?php echo $pb->getStyle(false); echo $pb->getScript(false); ?> </head> <body> <?php $pb->display(); echo '<table width="100%">'; $pb->run(); echo '</table>'; $pb->hide();
?> </body> </html>
Lets review this example step by step :
To show difference of two implementations, we will re-used the same example of pear logo.
<?php require_once 'HTML/Progress2.php'; $dataSrc= array('pearimage', 'pearimage', 'pearimage', 'pearimage', 'pearimage'); function myProcess()
{ static $q = 0; global $dataSrc; if (isset($dataSrc[$q])) { echo '<tr><td>' . '<img src="'. $dataSrc[$q] .'.php?timestamp=' . time() . '" alt=""/>' . '<b>'.($q+1).'</b>' . '</td></tr>'; } $q++; return $q;
} $pb = new HTML_Progress2(); $pb->setAnimSpeed(500); $pb->setIncrement(intval(ceil(100 / count($dataSrc)))); ?> <html> <head> <?php echo $pb->getStyle(false); echo $pb->getScript(false); ?> </head> <body> <?php $pb->display(); echo '<table width="100%">'; foreach ($dataSrc as $script)
{ if ($pb->getPercentComplete() == 1) { break; } $ret = myProcess();
$pb->sleep(); $pb->moveStep($ret);
} echo '</table>'; $pb->hide();
?> </body> </html>
Lets review this example step by step :
HTML_Progress2 : The Definitive Guide | v 1.0.0 : September 23, 2005 |