PEAR Progress2 logo

HTML_Progress2 : The Definitive Guide

Processing
Prev  Chapter 5. Quick Start with HTML_Progress2  Next

Processing

With a user callback
Without user callback

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 :

  1. with a user callback. The core of HTML_Progress2 checking progression (until end), and handling display refresh for us.

  2. without user callback. We have to do all tasks that core of HTML_Progress2 can do it for us.

With a user callback

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] 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:

  1. <?php
  2. function pearImage()
  3. {
  4.   $pear_image = 'R0lGODlhaAAyAMT/AMDAwP3+/TWaAvD47Pj89vz++zebBDmcBj6fDEekFluvKmu3PvX68ujz4XvBS8LgrNXqxeHw1ZnPaa/dgvv9+cLqj8LmltD2msnuls';
  5.   $pear_image .= '3xmszwmf7+/f///wAAAAAAAAAAACH5BAEAAAAALAAAAABoADIAQAX/ICCOZGmeaKqubOtWWjwJphLLgH1XUu//C1Jisfj9YLEKQnSY3GaixWQqQTkYHM4';
  6.   $pear_image .= 'AMulNLJFC9pEwIW/odKU8cqTfsWoTTtcomU4ZjbR4ZP+AgYKCG0EiZ1AuiossEhwEXRMEg5SVWQ6MmZqKWD0QlqCUEHubpaYlExwRPRZioZZVp7KzKQoS';
  7.   $pear_image .= 'DxANDLsNXA5simd2FcQYb4YAc2jEU80TmAAIztPCMcjKdg4OEsZJmwIWWQPQI4ikIwtoVQnddgrv8PFlCWgYCwkI+fp5dkvJ/IlUKMCy6tYrDhNIIKLFE';
  8.   $pear_image .= 'AWCTxse+ABD4SClWA0zovAjcUJFi6EwahxZwoGqHhFA/4IqoICkyxQSKkbo0gDkuBXV4FRAJkRCnTgi2P28IcEfk5xpWppykFJVuScmEvDTEETAVJ6bEp';
  9.   $pear_image .= 'ypcADPkz3pvKVAICHChkC7siQ08zVqu4Q6hgIFEFZuEn/KMgRUkaBmAQs+cEHgIiHVH5EAFpIgW4+NT6LnaqhDwe/Ov7YOmWZp4MkiAWBIl0kAVsJWuzc';
  10.   $pear_image .= 'YpdiNgddc0E8cKBAu/FElBwagMb88ZZKDRAkWJtkWhHh3wwUbKHQJN3wQAaXGR2LpArv5oFHRR34C7Mf6oLXZNfqBgNI7oOLhj1f8PaGpygHQ0xtP8MDV';
  11.   $pear_image .= 'KwYTSKcgxr9/hS6/pCCAAg5M4B9/sWh1YP9/XSgQWRML/idBfKUc4IBET9lFjggKhDYZAELZJYEBI2BDB3ouNBEABwE8gAwiCcSYgAKqPdEVAG7scM8BP';
  12.   $pear_image .= 'PZ4AIlM+OgjAgpMhRE24OVoBwsIFEGFA7ZkQQBWienWxmRa7XDjKZXhBdAeSmKQwgLuUVLICa6VEKIGcK2mQWoVZHCBXJblJUFkY06yAXlGsPIHBEYdYi';
  13.   $pear_image .= 'WHb+WQBgaIJqqoHFNpgMGB7dT5ZQuG/WbBAIAUEEFNfwxAWpokTIXJAWdgoJ9kRFG2g5eDRpXSBpEIF0oEQFaZhDbaSFANRgqcJoEDRARLREtxOQpsPO9';
  14.   $pear_image .= '06ZUeJgjQB6dZUPBAdwcF8KLXXRVQaKFcsRRLJ6vMiiCNKxRE8ECZKgUA3Va4arOAAqdGRWO7uMZH5AL05gvsjQbg6y4NCjQ1kw8TVGcbdoKGKx8j3bGH';
  15.   $pear_image .= '7nARBArqwi0gkFJBrZiXBQRbHoIgnhSjcEBKfD7c3HMhz+JIQSY3t8GGKW+SUhfUajxGzKd0IoHBNkNQK86ZYEqdzYA8AHQpqXRUm80oHs1CAgMoBxzRq';
  16.   $pear_image .= 'vzs9CIKECC1JBp7enUpfXHApwVYNAfo16c4IrYPLVdSAJVob7IAtCBFQGHcs/RRdiUDPHA33oADEAIAOw==';
  17.   header('content-type: image/gif');
  18.   echo base64_decode($pear_image);
  19. }
  20. pearImage();
  21. ?>

And now, the main script.

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $dataSrc = array('pearimage', 'pearimage', 'pearimage', 'pearimage', 'pearimage');
  5.  
  6. function myProcess($pValue, &$pBar)
  7. {
  8.     static $q = 0;
  9.     global $dataSrc;
  10.  
  11.     $pBar->sleep();
  12.     if (isset($dataSrc[$q])) {
  13.         echo '<tr><td>'
  14.            . '<img src="'. $dataSrc[$q] .'.php?timestamp=' . time() . '" alt=""/>'
  15.            . '<b>'.($q+1).'</b>'
  16.            . '</td></tr>';
  17.     }
  18.     $q++;
  19.     return $q;
  20. }
  21.  
  22. $pb = new HTML_Progress2();
  23. $pb->setAnimSpeed(500);
  24. $pb->setIncrement(intval(ceil(100 / count($dataSrc))));
  25. $pb->setProgressHandler('myProcess');
  26. ?>
  27. <html>
  28. <head>
  29. <?php
  30. echo $pb->getStyle(false);
  31. echo $pb->getScript(false);
  32. ?>
  33. </head>
  34. <body>
  35. <?php
  36. $pb->display();
  37. echo '<table width="100%">';
  38. $pb->run();
  39. echo '</table>';
  40. $pb->hide();
  41. ?>
  42. </body>
  43. </html>

Lets review this example step by step :

Line 4 :

$dataSrc identify the data source. Five call to pearimage.php script.

Lines 6-20, 25 :

Main task is to build, and display, five pear logo pictures. This task is defined by user callback : myProcess and linked to progress meter by setProgressHandler() method.

Lines 19, 24 :

We used moveStep strategy with the return $q code, and increment compute.

If you remove this line we use the second strategy called moveNext. We will talk about it later. Don't be afraid if you don't know yet what is the difference.

Line 40 :

Task is completed, five logo built and shown. The progress bar is hidden.

Without user callback

To show difference of two implementations, we will re-used the same example of pear logo.

  1. <?php
  2. require_once 'HTML/Progress2.php';
  3.  
  4. $dataSrc = array('pearimage', 'pearimage', 'pearimage', 'pearimage', 'pearimage');
  5.  
  6. function myProcess()
  7. {
  8.     static $q = 0;
  9.     global $dataSrc;
  10.  
  11.     if (isset($dataSrc[$q])) {
  12.         echo '<tr><td>'
  13.            . '<img src="'. $dataSrc[$q] .'.php?timestamp=' . time() . '" alt=""/>'
  14.            . '<b>'.($q+1).'</b>'
  15.            . '</td></tr>';
  16.     }
  17.     $q++;
  18.     return $q;
  19. }
  20.  
  21. $pb = new HTML_Progress2();
  22. $pb->setAnimSpeed(500);
  23. $pb->setIncrement(intval(ceil(100 / count($dataSrc))));
  24. ?>
  25. <html>
  26. <head>
  27. <?php
  28. echo $pb->getStyle(false);
  29. echo $pb->getScript(false);
  30. ?>
  31. </head>
  32. <body>
  33. <?php
  34. $pb->display();
  35. echo '<table width="100%">';
  36.  
  37. foreach ($dataSrc as $script) {
  38.     if ($pb->getPercentComplete() == 1) {
  39.         break;
  40.     }
  41.     $ret = myProcess();
  42.     $pb->sleep();
  43.     $pb->moveStep($ret);
  44. }
  45.  
  46. echo '</table>';
  47. $pb->hide();
  48. ?>
  49. </body>
  50. </html>

Lets review this example step by step :

Line 4 :

$dataSrc identify again the data source. Five call to pearimage.php script.

Lines 6-19 :

myProcess is defined as a reusable function and not a callback for progress meter.

Lines 37-44 :

run() method was replaced by a for-each loop. We must :

  1. check if progress meter reach 100% (getPercentComplete() method).
  2. refresh display with right method depending on strategy used.
Lines 18, 41, 43 :

We use again the same moveStep strategy.

Line 47 :

Task is completed, five logo built and shown. The progress bar is hidden.

HTML_Progress2 : The Definitive Guide v 2.4.0 : April 20, 2007
Prev  Up  Next
Chapter 5. Quick Start with HTML_Progress2  Home  Strategy of handling