Circle

Overview

This example will display a plain circle 360 degree.

Screenshot

sample screenshot sample screenshot sample 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 10 pictures segments built (line 33) and re-used (lines 27-30). Width and Height are equivalent to diagonal size:

Property Value Default
active-color   #006600
inactive-color   #CCCCCC
background-color #EEEEEE #FFFFFF
width 50 15
height 50 20
spacing 0 2
See also :

And the progress percent text info is right aligned on right side (line 18):

Property Value Default
left   5
top 20 5
width   50
height   0
align   right
valign   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. * Draw a plain Circle progress meter.
  4. *
  5. * @version    $Id: circle.php,v 1.4 2006/05/24 08:47:45 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_CIRCLE);
  17. $pb->setCellAttributes('width=50 height=50 spacing=0 background-color=#EEEEEE');
  18. $pb->setLabelAttributes('pct1', 'top=20');
  19. $fileMask = 'c%s.png';
  20. $cacheDir = 'cache/';
  21.  
  22. if (!is_dir($cacheDir)) {
  23.     die("Directory <b>$cacheDir</b> does not exists");
  24. }
  25. if (file_exists($cacheDir . 'c0.png')) {
  26.     // uses cached pictures rather than create it again
  27.     foreach (range(0,10) as $index) {
  28.         $file = sprintf($cacheDir . $fileMask, $index);
  29.         $pb->setCellAttributes(array('background-image' => $file), $index);
  30.     }
  31. } else {
  32.     // creates circle segments pictures only once
  33.     $pb->drawCircleSegments($cacheDir, $fileMask);
  34. }
  35. ?>
  36. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  37.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  38. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  39. <head>
  40. <title>Circle Progress2 example</title>
  41. <style type="text/css">
  42. <!--
  43. <?php echo $pb->getStyle(); ?>
  44.  
  45. body {
  46.     background-color: #EEEEEE;
  47. }
  48.  -->
  49. </style>
  50. <?php echo $pb->getScript(false); ?>
  51. </head>
  52. <body>
  53.  
  54. <?php
  55. $pb->display();
  56. $pb->run();
  57. ?>
  58.  
  59. </body>
  60. </html>