PHP Classes
elePHPant
Icontem

cSpeedometer: Render a speed meter as image or HTML5 canvas

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (3)   DownloadInstall with Composer Download .zip   Reputation   Support forum (4)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2013-01-30 (3 years ago) RSS 2.0 feedStarStarStarStar 76%Total: 761 All time: 4,246 This week: 1,095Up
Version License PHP version Categories
speed-meter 1.3.1GNU General Publi...5.2HTML, PHP 5, Graphics
Description Author

This class can render a speed meter as image or HTML5 canvas.

It can generate an image with a round speed meter and a pointer pointing to the current speed over three ranges of speeds displayed in red, yellow or green.

The class can generate the image in JPEG, PNG and GIF format, or as HTML5 with JavaScript code that can render the speed meter image in a canvas object.

This class create a speedometer images for use in dashboards or control panels GIF, JPG, PNG or using HTML5 canvas and SVG tags.

The red, yellow and greed speed ranges and the colors of the speed pointer are configurable parameters.

Innovation Award
PHP Programming Innovation award nominee
January 2013
Number 2


Prize: One copy of the Zend Studio
Speed meters are often used as a visual artifact to show how the user is doing or the current state of something of the user interest.

This class can render a speed meter on the browser side using HTML5 canvas objects instead of just images dynamically generated on the server side.

Manuel Lemos
Picture of Omar Ortiz
  Performance   Level  
Name: Omar Ortiz <contact>
Classes: 5 packages by
Country: Mexico Mexico
Innovation award
Innovation award
Nominee: 2x

Details
Steps to generate a speedometer:
1. Include cspeedometer.php library in your script
require_once("cSpeedometer.php");
2. Create an array with the selected colors if you want to change default colors.
   See color method for defined colors, See __construct method for custom colors.
   the array only need the colors that you want to change
examples:
$colors = array(BCKGND=>"pink",BORDER => "darkBlue",SPEED=>"darkRed",SPD_IND=>"black",SPD_MARK=>"darkGreen",RED_ZN=>"red",GRN_ZN=>"green",YLW_ZN="yellow");
$colors = array(BCKGND=>"pink",BORDER => "darkBlue",SPEED=>"darkRed");
2. create a cSpeedometer object 
$sp1 = new cSpeedometer(250,$colors);
1st parameter is the size in pixels, default is 500
2nd parameter is colors array see (2.)
3. Set max value (default is 100) 
$sp1->setMaxValue(150);
3. Set min value (default is 0) 
$sp1->setMinValue(10);
4. Set speed
$sp1->setValue(35);
5. if you need a green zone then set de green zone
$sp1->setGZone(100,150);
1st parameter is the starting point of green zone
2nd parameter is the ending point of green zone
6. if you need a yellow zone then set de yellow zone
$sp1->setYZone(50,100);
1st parameter is the starting point of yellow zone
2nd parameter is the ending point of yellow zone
7. if you need a red zone then set de red zone
$sp1->setRZone(10,50);
1st parameter is the starting point of red zone
2nd parameter is the ending point of red zone
8. Create the image or de canvas
$sp1->getImage("GIF","sp3");
1st parameter is the format (GIF, PNG, JPG), default is PNG
2nd parameter is the name of the file (without extension) if you omit this parameter, the image is output to screen
The image is generate in tmp directory, see FILE_PATH constant defined in cSpeedometer.php library
echo $sp1->getCanvas("sp1",2,true);
1st parameter is the id to use in canvas
2nd parameter is the number of decimals in seepd and marks
3th parameter active gradient effect in yellow zone
echo $sp1->getSVG("sp1",2);
1st parameter is the id to use in svg object
2nd parameter is the number of decimals in seepd and marks

Screenshots  
  • svg.jpg
  • sp1.png
  • screenshot
  • canvas.jpg
  Files folder image Files  
File Role Description
Plain text file cSpeedometer.php Class Class file
Accessible without login Plain text file example.php Example Example file
Accessible without login Plain text file readme.txt Doc. readme file

 Version Control Unique User Downloads Download Rankings  
 0%
Total:761
This week:0
All time:4,246
This week:1,095Up
User Ratings User Comments (3)
 All time
Utility:95%StarStarStarStarStar
Consistency:95%StarStarStarStarStar
Documentation:95%StarStarStarStarStar
Examples:95%StarStarStarStarStar
Tests:-
Videos:-
Overall:76%StarStarStarStar
Rank:89
 
Sublime, fantastic, excellent work!
1 year ago (daniele borini)
80%StarStarStarStarStar
On my system, I had to create the tmp dir.
3 years ago (Gary G Johnson)
80%StarStarStarStarStar
This is a good class :-)
3 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar