PHP + GD Library

[.OMERTA.]

[!--sizeo:1--][span style=\"font-size:8pt;line-height:100%\"][!--/sizeo--]Hi, I've recently been trying to read up on using PHP and GD to create PNG's on the fly. I've been doing so in hopes that I will be able to learn how to compile a script that will output an image of a progress bar with certain attributes based on the url that called it (which will be accessed predominately from a forum, so it must be able to be coded as standard BBC). These attributes would include the bar's title (based on the event mentioned in the url) printed centered and right above the meter, a background image (to hold the meter), the meter (the display of progress), and the total progress in percentage based on two values, supplied again by the url, to be printed in the right end of the meter. An example of the kind of URL that I'm looking for would be [a href=\"http://domain.tld/progress/bar.php?event=Carwash&have=500&need=1000\" target=\"_blank\"]http://domain.tld/progress/bar.php?event=C...e=500&need=1000[/a], which would return a progress bar labeled "Carwash Fundraiser" with the bar composed of my tiled image stopping at the 50% level with the words "50% Complete" printed in the far right side of the meter.

Before I even start my attempt at compiling this script, I would like to know a few things:

1. How would I go about coding an equation to figure out the percentage step that the bar should stop at based on the values inputted in the url?

2. How can I fill in the meter with a tile image rather than a solid color?

3. How would I get the meter positioned so that it sits centered and up #px from the bottom above the background image?

4. How do I specify parts of the title? (ie adding the word "Fundraiser" after the event specified in the url)


I would gatefully appreciate any help, thank you in advance.
- Rae[!--sizec--][/span][!--/sizec--]

[stephenk]

You could probably achieve this with a small table and css code much easier.
Say you want a 100px wide bar and you want it to display a 'score' of 20/35. The width of the area to display the score would be (20/35)*100px, and the total table width would obviously be 100px.

You could set the text and background tiled image using css styles.

Stephen

[.OMERTA.]

Thanks for the reply, stephenk, but I need the progress bar to be an image as it will be used in a forum signature where there is limited character space and html is not permitted.

[stephenk]

Ah OK, sorry but I'm not great with GD.
You can still use my idea to work out the widths. You will need to draw a rectangle using gd the full height of the image and the width as worked out.
Im not sure how you would implement the tiled background image there.

[.OMERTA.]

That's okay, thanks for the try :)

I think I've figured out how to implement the tiled background, using imagecopy(), but I'm still unsure of how to put everything togther.

[poirot]

1. Simple proportion:

Percentage - 100
Partial W. - Total W.

Partial W. = Total W. * Percentage / 100

2. You can repeat stretch the image, like this:
<img src="image.gif" width="100">

3. CSS, or use the deprecated <center> tag

4. Javascript. Something like:
document.getElementById('title').innerHTML = 'Title';

Obviously you'll have to give an id for <title>

And a final note, I don't recommend you to simply use PHP for that.
Javascript should be used too .... In fact, you could do that with JS only I guess.

[.OMERTA.]

Thanks poirot, but I'm looking for something that deals entirely with PHP and GD. I've seen it done before in other examples (like [a href=\"http://db.org/demo/2003/02/17/progress-bar/\" target=\"_blank\"]this[/a] one), but I can't seem to get it configured to my specifications.

[.OMERTA.]

[!--sizeo:1--][span style=\"font-size:8pt;line-height:100%\"][!--/sizeo--]Haha, I got it!! With the help I got from you guys and manual at php.net I was able to come up with this code:[!--sizec--][/span][!--/sizec--]
[!--sizeo:2--][span style=\"font-size:10pt;line-height:100%\"][!--/sizeo--][code]<?php

$item = $HTTP_GET_VARS['item'];
$have = $HTTP_GET_VARS['have'];
$need = $HTTP_GET_VARS['need'];
$height = 40;
$width = 116;
$fontsize = 6;
$frac = $have/$need;
$pct = 100 * $frac;

$img = imagecreate($width,$height);
$red = imagecolorallocate($img,255,0,0);
$black = imagecolorallocate($img,0,0,0);
$white = imagecolorallocate($img,255,255,255);
$bg = imageCreateFromPNG ('bg.png');
$bar =imageCreateFromPNG ('fill.png');
imageSetTile ($img, $bg);
imageFilledRectangle ($img, 0, 0, 116, 40, IMG_COLOR_TILED);
imageSetTile ($img, $bar);
ImageFilledRectangle($img, 7, 22, (114 * $frac), 34, IMG_COLOR_TILED);

$font = '04B_09__.ttf';
$text1 = "Questing For";
$text2 = $item;
$text3 = $have . "/" . $need;
$textwidth1 = floor(imagefontwidth($font) * strlen($text1));
$textleft1 = (($width - $textwidth1) / 2) + 12;
$textwidth2 = floor(imagefontwidth($font) * strlen($text2));
$textleft2 = (($width - $textwidth2) / 2) + 12;
imagettftext($img, $fontsize, 0, $textleft1, 8, $white, $font, $text1);
imagettftext($img, $fontsize, 0, $textleft2, 19, $white, $font, $text2);
imagettftext($img, 6, 0, 46, 32, $black, $font, $text3);

header('content-type: image/png');
imagepng($img);
    
?>[/code][!--sizec--][/span][!--/sizec--]
[!--sizeo:1--][span style=\"font-size:8pt;line-height:100%\"][!--/sizeo--]It may not be perfect, but at least it works! Check it out [a href=\"http://www.dreammare.net/GAIA/progress-bar/test2.php?item=Thing&have=22000&need=30000\" target=\"_blank\"]http://www.dreammare.net/GAIA/progress-bar...2000&need=30000[/a] (in case you're wondering what the whole "quest" thing is for, this progress bar will be used to track the amount of "gold" needed to obtain a certain item on a popular RPG forum.) Try changing the variables :)

Now the only issues that remain for me and my n00b script are cosmetic - I can't seem to get the quest item text ($text2) to center properly. I can diddle with the $textleft2 variable until I get it centered, but whenever I change the item in the URL it becomes off center. I'm sure there's an easy mathematical fix for this, but it's 4am and I've been working on this thing for a while now and can't seem to think of anything.

The other thing I believe is a transparency issue - I can't seem to get rid of the gray. If you didn't notice, there's an annoying 3px or so high gray line that runs the length or the progress meter about 2px from its top that I can't for the life of me seem to get rid of. There are also supposed to be caps on either end of the meter to round off the ends, but their transparencies were displaying opaque so I removed them for testing purposes.

I read a suggestion on using imagealphablending(), but no luck. Any ideas?[!--sizec--][/span][!--/sizec--]