So I had a need of a progress bar to show the user their progress through a series of pages filling in data. I'm sure I'd seen something similar before but I wanted to do it myself - what's more I wanted to use the type-face that I'd used for the rest of the site.
The following script can be called whatever you want but does require a few parameters in it's calling. The parameters are width
, height
and percentage
. The width and height are the dimension of the required image in px.
It does require that a typeface be discoverable - it might be best to have the typeface in the same directory as the script, at least that works for me. It's a little down and dirty and doesn't do any checking - which is should really, especially for the existance of the correct GD library and the correct parameters etc...
<?php
$percentage = $_GET['percentage'];
$width = $_GET['width'];
$height = $_GET['height'];
$progress = imagecreate($width, $height);
imageantialias($my_img, true);
$black = imagecolorallocate($progress, 0, 0, 0);
$white = imagecolorallocate($progress, 255, 255, 255);
$grey = imagecolorallocate($progress, 204, 204, 204);
$lGrey = imagecolorallocate($progress, 221, 221, 221);
imagefilledrectangle($progress, 0, 0, $width, $height, $black);
imagefilledrectangle($progress, 1, 1, ($width - 2), ($height - 2), $white);
imagefilledrectangle($progress, 1, 1, (($percentage/100) * ($width - 2)), ($height - 2), $grey);
$text = $percentage." %";
$font = 'Gothicb.TTF';
$font_size = 12;
$text_box = imagettfbbox($font_size, 0, $font, $text);
$text_width = $text_box[2]-$text_box[0];
$text_height = $text_box[7]-$text_box[1];
$x = ($width/2) - ($text_width/2);
$y = ($height/2) - ($text_height/2);
imagettftext($progress, 12, 0, ($x + 1), ($y + 1), $lGrey, $font, $text);
imagettftext($progress, 12, 0, $x, $y, $black, $font, $text);
header("Content-type: image/png");
imagepng($progress);
imagecolordeallocate($black);
imagecolordeallocate($white);
imagecolordeallocate($grey);
imagecolordeallocate($lGrey);
imagedestroy($progress);
?>