Help: Php + GD - Creating A Progress Bar Creating A Progress Bar

[SunBlind 0]

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 http://forums.xisto.com/no_longer_exists/, 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.

[miCRoSCoPiC^eaRthLinG 0]

I'm not at all experienced with GD - but your question number 1 should be fairly easy to answer.

 

You need to fix the length of the progressbar though. Say for example, it's about 200 pixels wide. We have this stored in a variable called $length.

 

I gather that t is your amount done and goal is the total value to be reached, right ?

 

You'd can write a simple arithmatical calculation like,

// Calculate percentage$percent_done = $_POST['t'] / $_POST['goal'] * 100;// Calculate length of the progress indicator$indicator_length = $length * $percent_done / 100;

Alternatively, you can cut out a reduntant step here - which is multiplying and dividing the percentage decimal figure by 100. In effect, the following code would do the same as above.

// Calculate percentage$percent_done = $_POST['t'] / $_POST['goal'];// Calculate length of the progress indicator$indicator_length = $length * $percent_done;

Now supposing the screen co-ordinates of your progress bar is (X, Y). You need to draw the indicator upto the $indicator_length.

 

I guess there's some GD command called DrawRectanlge ( X, Y, Width, Height ) - or something similar...

 

Your indicator code would be:

DrawRectangle ( X, Y, $indicator_length, Height );

In case the command accepts only starting and ending co-ordinates.. like, DrawRectangle, ( x1, y1, x2, y2 ) .. then it would be a minor modification of the above...

DrawRectangle ( X, Y, X + $indicator_length, Y + Height );

Hope this will help it clear up a bit for you.. For the rest of those questions, you'd need someone who's way more experienced with GD.

 

Regards,

m^e

[vujsa 0]

In reality, you don't ned to use the GD Library for this. Even if you want to use an image instead of a solid color. I think that coding this with an on the fly image using GD would only complicate the process and add more work to the server's load.Everytime an image is rendered in GD, the server has to allocate memory and CPU to the effort. Imagine that this image was requested 100 time a minute. What wiould your computer do if you asked photoshop to render that many images at once. The GD Library should really be used as little as possible especially if there is a better way.The first option is to stack images using very simple PHP and HTML.Say that you FULL progress bar is 100px wide. Create an image that is 100px wide and break it into smaller parts (10 or 20 should do). Save each micro-image as a numbered name (5.jpg) which corresponds to the amount of progress it represents.If your progress is 20%, then load images 5.jpg, 10.jpg, 15.jpg, and 20.jpg in the correct order.If your progress is 85%, then load images 5.jpg, 10.jpg, ........., 80.jpg, and 85.jpg in the correct order.This will give you the same results with much less work for you and the server.The second option is to use CSS to display portions of a single image.Using the background-position option, you can control which parts of an image will show.background-position: x y; is the usage and refers to the point at which the image will start to display.For a 100px wide image:background-position: 95px 0px; would show the the right most 5px of the image starting at the top.background-position: 15px 0px; would show the the right most 855px of the image starting at the top.So for you calculations, 100 - prograss = # pixels for XThere are a lot of options when using CSS. Best if used insde of a <div> tag. This option also allows for text to be written accross the top of the image.If you are still dead set on using GD for the creation of your status / progress bar, I'll attempt to walk you through the steps involved to create an image on the fly.Hope this helps :(vujsa

[miCRoSCoPiC^eaRthLinG 0]

Infact you shouldn't need to break the images in so many parts. With a set of SIX images, you can achieve any desired percentage.

 

Your image breaks should happen at these figures:

1

2

5

10

20

50

This comes from one of earliest physics lab principles - remember when you use the scale balance weighing system - your weight box comes with weights of the gradation 5:2:2:1.

 

This is because with suitable combination of these figures - you can achieve any number from 1-10 or 10-100.

 

For example - to get

80 = you use the graphics - 50 + 20 + 10.

90 = 50 + 20 + 20

65 = 50 + 10 + 5

78 = 50 + 20 + 5 + 2 + 1

....

You get the idea.. it's quite easy to come up with the routine to analyze your percentage and pick the correct graphical blocks..

 

Alternatively, I think you can even achieve this by nesting one DIV inside another, the child DIV being of SAME HEIGHT at the parent - but the WIDTH being your PERCENTAGE DONE figure of the parent. Next you can define a CSS tag that takes a tiny sliced graphics - say 1px wide - and does a background-repeat in the inner DIV. Thus your inner div will repeat this background upto the percentage done. This approach should be much easier than the above-mentioned one.

[vujsa 0]

Infact you shouldn't need to break the images in so many parts. With a set of SIX images, you can achieve any desired percentage.

 

This is true if the desired effect is to use identical blocks for each progress level. The method I described was if you were revealing a full image the further you progressed. Like taking a photo and laying a sheet of paper over it. Then sliding the paper away slowly as you progress until the entire image is revealed.

 

Alternatively, I think you can even achieve this by nesting one DIV inside another, the child DIV being of SAME HEIGHT at the parent - but the WIDTH being your PERCENTAGE DONE figure of the parent. Next you can define a CSS tag that takes a tiny sliced graphics - say 1px wide - and does a background-repeat in the inner DIV. Thus your inner div will repeat this background upto the percentage done. This approach should be much easier than the above-mentioned one.

 

Come to think of it, you wouldn't even need to nest the div tags and you could use a single image the same width as the ful (100%) progress bar. If you set the background to no repeat and by default the image is displayed starting a x=0 and y=0 then by simply varying the width of the div tag would reveal a larger or smaller section of the image.

 

I had never been too interested in this type of display but the more I think about it the more ways I can think of doing it. I guess the biggest problem in doing something like this is determining how you want to reveal the image or images and which image or images to use.

 

Well, hope this helps

 

vujsa

[miCRoSCoPiC^eaRthLinG 0]

True - the more you think about it - the more ways of drawing progress-bars come out. I think the simplest approach would be to use just colored DIVs (as vujsa pointed out)... That'll cause minimal stress on the server and will be the fastest to load. However fancy graphics are the in-thing now... so I guess you'll have to pick one among the approaches mentioned above.