PHP + GD Library
Posted 04 June 2006 - 09:13 AM
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.
Posted 04 June 2006 - 11:55 AM
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.
Posted 04 June 2006 - 12:03 PM
Posted 04 June 2006 - 01:46 PM
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.
Posted 05 June 2006 - 05:10 PM
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.
Posted 05 June 2006 - 06:54 PM
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
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.
Posted 05 June 2006 - 07:38 PM
Posted 06 June 2006 - 08:12 AM
<?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); ?>[!--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--]
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users