badcrocodile
12/22/2015 - 7:28 PM
Uses GD Library to create a progress bar. The bar itself is filled with a gradient. Nice!
Uses GD Library to create a progress bar. The bar itself is filled with a gradient. Nice!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Status Bar</title>
</head>
<body>
<h2>Sales Goals Progress Bar:</h2>
<img src="http://foobar.com/gradient.php" />
</body>
</html><?php
/**
* Available GET parameters:
*
* == COLORS ==
* bg_r - Red component of bar background color
* bg_g - Green component of bar background color
* bg_b - Blue component of bar background color
* from_r - Red component of gradient start
* from_g - Green component of gradient start
* from_b - Blue component of gradient start
* from_g - Green component of gradient start
* to_r - Red component of gradient end
* to_b - Blue component of gradient end
* to_g - Green component of gradient end
*
* == DIMENSIONS ==
* width - Total width of progress bar
* height - Total height of progress bar
*
* == PROGRESS DATA ==
* total - Total number of units available. Defaults to 2000.
* sold - Can come from GET but should come from database.
*
*/
/* Get color values */
$ob_r = isset($_GET['bg_r']) ? $_GET['bg_r'] : 66; // red component of background color
$ob_g = isset($_GET['bg_g']) ? $_GET['bg_g'] : 48; // green component of background color
$ob_b = isset($_GET['bg_b']) ? $_GET['bg_b'] : 32; // blue component of background color
$from_r = isset($_GET['from_r']) ? $_GET['from_r'] : 212; // red component of gradient start
$from_g = isset($_GET['from_g']) ? $_GET['from_g'] : 169; // green component of gradient start
$from_b = isset($_GET['from_b']) ? $_GET['from_b'] : 0; // blue component of gradient start
$to_r = isset($_GET['to_r']) ? $_GET['to_r'] : 255; // red component of gradient end
$to_g = isset($_GET['to_g']) ? $_GET['to_g'] : 212; // blue component of gradient end
$to_b = isset($_GET['to_b']) ? $_GET['to_b'] : 0; // green component of gradient end
/* Get dimension values */
$sold = isset($_GET['sold']) ? $_GET['sold'] : 1500; // current number of units sold (or perhaps fundraising $$ achieved) - should actually come from database on live installation
$total = isset($_GET['total']) ? $_GET['total'] : 2000; // total number of units available (or perhaps fundraising goal)
$canvas_width = isset($_GET['width']) ? $_GET['width'] : 850; // total width of progress bar canvas
$outer_width = isset($_GET['width']) ? $_GET['width'] : 850; // total width of progress bar
$canvas_height = isset($_GET['height']) ? $_GET['height'] : 40; // total height of progress bar canvas
$outer_height = isset($_GET['height']) ? $_GET['height'] : 40; // total height of progress bar
$gradient_height = isset($_GET['height']) ? $_GET['height'] : 40; // height of progress meter
$gradient_pct = ($sold / $total); // calculate current sales percentage of total (.25)
$gradient_width = $gradient_pct * $canvas_width; // calculate gradient percentage of canvas (total width of progress meter)
gradient($canvas_width, $canvas_height, $outer_width, $outer_height, $gradient_width, $gradient_height, $ob_r, $ob_b, $ob_g, $from_r, $from_g, $from_b, $to_r, $to_g, $to_b);
function gradient($canvas_width, $canvas_height, $outer_width, $outer_height, $gradient_width, $gradient_height, $ob_r, $ob_b, $ob_g, $c1_r, $c1_g, $c1_b, $c2_r, $c2_g, $c2_b) {
// make sure that the parameters are what we need them to be
$canvas_width = intval($canvas_width);
$canvas_height = intval($canvas_height);
$outer_width = intval($outer_width); // outer rectangle width
$outer_height = intval($outer_height); // outer rectangle height
$gradient_width = intval($gradient_width); // inner rectanble width
$gradient_height = intval($gradient_height); // inner rectanble height
$ob_r = intval($ob_r); // outer rectangle bg color
$ob_g = intval($ob_g); // outer rectangle bg color
$ob_b = intval($ob_b); // outer rectangle bg color
$c1_r = intval($c1_r); // inner rectangle starting color
$c1_g = intval($c1_g); // inner rectangle starting color
$c1_b = intval($c1_b); // inner rectangle starting color
$c2_r = intval($c2_r); // inner rectangle ending color
$c2_g = intval($c2_g); // inner rectangle ending color
$c2_b = intval($c2_b); // inner rectangle ending color
// create outermost image object (canvas)
$image = imagecreatetruecolor($canvas_width, $canvas_height);
// create progress bar background
$outer_bg = imagecolorallocate($image, $ob_r, $ob_g, $ob_b);
imagefilledrectangle($image, 0, 0, $outer_width, $outer_height, $outer_bg);
// render gradient step by step
for($i=0; $i<$gradient_height; $i++) {
if($i<$gradient_height/2) {
// get each color component for the first half of the gradient
$color_r = floor($i * ($c2_r-$c1_r) / $gradient_height*2)+$c1_r;
$color_g = floor($i * ($c2_g-$c1_g) / $gradient_height*2)+$c1_g;
$color_b = floor($i * ($c2_b-$c1_b) / $gradient_height*2)+$c1_b;
// create our color
$color = imagecolorallocate($image, $color_r, $color_g, $color_b);
// draw a line using our color
imagefilledrectangle($image, 0, $i, $gradient_width, $i, $color);
} else {
// get each color component for the second half of the gradient
$color_r = floor(($gradient_height-$i) * ($c2_r-$c1_r) / $gradient_height*2)+$c1_r;
$color_g = floor(($gradient_height-$i) * ($c2_g-$c1_g) / $gradient_height*2)+$c1_g;
$color_b = floor(($gradient_height-$i) * ($c2_b-$c1_b) / $gradient_height*2)+$c1_b;
// create our color
$color = imagecolorallocate($image, $color_r, $color_g, $color_b);
// draw a line using our color
imagefilledrectangle($image, 0, $i, $gradient_width, $i, $color);
}
}
// output the image
header('Content-type: image/png'); // set headers
imagepng($image); // or imagejpeg, imagegif..
imagedestroy($image); // free memory
}