Ellipse

Overview

This example will display a plain ellipse 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 (lines 16-24) built (line 40) and re-used (lines 34-37):

Property Value Default
active-color navy #006600
inactive-color red #CCCCCC
background-color   #FFFFFF
width 200 15
height 100 20
spacing 0 2
See also :

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

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