1

enter image description here

So far I have the background working, and I have the % bubble floating on top of the bar working. Everything went smoothly using the PHP/GD functions.

But I can't figure out how to add the yellow part. I mean, I could overlay solid color easily. But how would I go in showing that progress bar with vertical stripes, gradients, rounded border and inner shadows?

4
  • Thats not php, you need css and html for design.
    – user1786283
    Apr 13, 2013 at 13:56
  • 1
    I'd like to do it with php/GD with css/jquery it is trivial.
    – user796443
    Apr 13, 2013 at 13:59
  • You can't do it in PHP. Apr 13, 2013 at 14:00
  • You have to use jquery, it is very simple, I will create an example for you.
    – user1786283
    Apr 13, 2013 at 14:01

1 Answer 1

1

Actually, I found an example using php, javascript, and html here, you can also use the jquery implementation here. And here is a simple one I made in html and css here .

Edit

Actually, there is a way.

PHP/GD

PHP Code

<?php  
// set the type of data (Content-Type) to PNG image  
header("Content-Type: image/png");  

// extract GET global array  
extract($_GET);  

// set defaults  
if(! isset($max)) $max = 100;  
if(! isset($val)) $val = 100;  

// this method prepare blank true color image with given width and height  
$im = imagecreatetruecolor(400, 20);  

// set background color (light-blue)  
$c_bg = imagecolorallocate($im, 222, 236, 247);  
// set foreground color (dark-blue)  
$c_fg = imagecolorallocate($im, 27, 120, 179);  

// calculate the width of bar indicator  
$val_w = round(($val * 397) / $max);  

// create a rectangle for background and append to the image  
imagefilledrectangle($im, 0, 0, 400, 20, $c_bg);  
// create a rectangle for the indicator and appent to the image  
imagefilledrectangle($im, 2, 2, $val_w, 17, $c_fg);  

// render the image as a PNG  
imagepng($im);  

// finally destroy image resources  
imagedestroy($im);  
?>   

HTML:

<!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=iso-8859-1" />  
<title>PHP GD-Progress Bar</title>  
</head>  

<body>  

    <img src="progressbar.php?max=100&val=70" />  

</body>  

</html>  
4
  • Yes I know :) I've already written that part. Essentially my question is how to draw gradients and such using GD.
    – user796443
    Apr 13, 2013 at 14:22
  • @SandroDzneladze Can you post a link to your script?
    – user1786283
    Apr 13, 2013 at 14:28
  • I went jquery way, it turns out it is quite complicated to manipulate graphics with GD in this way. I had to install imagemagick. In face of all difficulties jquery seemed the easiest option. So I accept your answer :) thanks!.
    – user796443
    Apr 13, 2013 at 16:54
  • Great answer, your example has helped me a lot. Thanks. Mar 30, 2017 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.