Okay, I can't stop looking at these awesome progress bars!!! XD
Can someone give me a tutorial on how to handle the PHP GD library please and how to achieve a similar task to the progress bar? I mean, all I can do, and all I've done, is stretched an image based on the percentage given, which is what I've done with DP's progress bar here...
(https://www.simpledesk.net/community/proxy.php?request=http%3A%2F%2Fwiipowered.com%2Fportal%2Fdp-progress.png&hash=1a937835212441dadb75173ba2cd28012381f4cd)
I'm getting kinda bored of it, and I'm not asking for the source code of SD's progress bar, but can someone guide me in the right direction? Thanks. :)
What Arantor did for the latest progress bars was mostly taking premade artwork I gave him and added GD generated bars to it, basically just a colored square sized according to the percantage. Then fun thing is making the gradients,I haven't looked at that yet. :P
The original one we used was just a simple bar with different colored texts and two images (logo and checkmark) merged onto it.
We're planning to release the code of our first bar along with a short guide, so keep your eyes open :)
Check out www.php.net/gd for a list of functions you can use.
Thanks for the info Nas. I figured out once I visited the GD page, so I'm gonna go try see what I can fry in the pot. ;)
It really depends on what you're trying to do. GD is very very powerful if used correctly.
Let me give you a run down on how they, broadly, work. I'm going roughly in order of complexity rather than any other order. In all cases, the code prior to it loads the current issues on the tracker for the current version, loads the solved issues and stores the total as a figure in $percent (so I'll be referring to that in the following) - $percent is an integer from 1-100. Where there is a bar, x1,y1 = the top left, x2,y2 = bottom right. There may have been the odd +1 or -1 in the code to give it the precise look, but I'm not getting into that for simplicity's sake.
(https://www.simpledesk.net/sd/release_theme.png) (http://www.simpledesk.net/)
This is by far the simplest image to generate, because it's almost entirely pre-made artwork from Nas. The image is the entire background with the progress bar at 100% pre-filled.
- Load the image from png file
- imagefilledrectangle in black from x1 + ($percent * (x2 - x1)), y1 to x2,y2
(https://www.simpledesk.net/sd/release_small.png) (http://www.simpledesk.net/)
- Create a blank indexed image (I think... can't remember)
- imagefilledrectangle, black from x1,y1 to x2,y2
- imagefilledrectangle, orange from x1,y1 to x1 + ($percent * (x2 - x1)),y2
- imagestring the substrings (Simple in blue, Desk in orange, rest in black)
(https://www.simpledesk.net/sd/release.png) (http://www.simpledesk.net/)
- Create a blank true-colour image
- imagefilledrectangle, black from x1,y1 to x2,y2
- imagefilledrectangle, orange from x1,y1 to x1 + ($percent * (x2 - x1)),y2
- imagettftext twice for each substring (1.0 / is / 43% / closer to release!), once for the dropshadow (grey, IIRC), one for the top level, aligned one pixel up and left from the dropshadow
- imagecopyresample calls to copy/paste the SimpleDesk logo and the checkmark into the image (using that to preserve transparency)
(https://www.simpledesk.net/sd/release_banner.png) (http://www.simpledesk.net/)
- Load the background PNG
- imagefilledrectangle, black from x1,y1 to x2,y2
- imagefilledrectangle, orange from x1,y1 to x1 + ($percent * (x2 - x1)),y2
- imagettftext in black for the 1.0 is 43% complete!
(https://www.simpledesk.net/sd/release_gradient.png) (http://www.simpledesk.net/)
- Load the background PNG
- imagefilledrectangle, black from x1,y1 to x2,y2
- Loop from x1 to ($percent * (x2 - x1)) as $i
- Knowing the start (blue) and end (orange) colours, figure out the distance between the colours (literal distance between RGB components) based on $percent and draw an imagefilledrectangle from $i - 0, y1 to $i,y2
- imagettftext in black for the 1.0 is 43% complete!
(https://www.simpledesk.net/sd/release_gradient3.png) (http://www.simpledesk.net/)
This is a little more complex. A literal gradient of RGB components from red (255/0/0) to green (0/255/0) doing an equal shift per step will hit grey (128/128/0) at the mid point, which looks awful. So I coded up something that could handle being given a mid-point (this is gradient3 because it's three colours, red->yellow->green, which is a colour shift from 255/0/0 to 255/255/0 to 0/255/0)
- Load the background PNG
- imagefilledrectangle, black from x1,y1 to x2,y2
- Loop from x1 to ($percent * (x2 - x1)) as $i
- Figure out whether we're between colours 0 and 1, or 1 and 2
- Knowing the start (red or yellow) and end (yellow or green) colours, figure out the distance between the colours (literal distance between RGB components) based on $percent and draw an imagefilledrectangle from $i - 0, y1 to $i,y2
- imagettftext in black for the 1.0 is 43% complete!
The routine is actually the same routine for both gradients, actually; it's smart enough to handle any number of gradient steps (either blue->orange, or red->yellow->green, or anything else for that matter), since it's just the same thing, really.
(https://www.simpledesk.net/sd/release_odo.png) (http://www.simpledesk.net/)
This is actually a massively complex piece of code - the odometer itself is actually a separate image canvas, drawn on and copied across. It's actually drawn at 100x100 pixels, so it can be resized and antialiased in the process.
- Load the background PNG
- Knowing the scope of the odometer arc (300 degrees, 30 degrees either side of the 180 position), loop from 0 to 299 as $i
- Figure out the colour (as the gradient above), imagefilledarc from the centre of the image, from $i to $i+1 degrees
- Draw a black outline around the arc
- Draw the dividing marks every ten percent, alternating long and short lines
- imagefilledellipse to the background colour of equal width and height to erase the circle inner
- Mark the background transparent
- imagefilledpolygon from either side of the centre to the end point
I won't get into the mechanics of the maths for this; it's pretty heady stuff if you're not used to sin/cos trigonometry, but I can release the code if necessary.
Wow...that's alot of info. Thanks for this Arantor. :)
However, where do I get x1 and x2 from? I know it's at top left and bottom right, but is there like a function or something for it?
x1, y1 and x2, y2 are the pixel coordinates on the image. You have to figure out where they are. I looked against the background image in GIMP, for example.
This will be useful to you:
http://www.php.net/manual/en/ref.image.php
<?php
$var1 = 'variable';
while();
do();
echo' blah blah';
?>
For chris.
Quote from: Trekkie101 on February 08, 2010, 10:27:31 PM
<?php
$var1 = 'variable';
while();
do();
echo' blah blah';
?>
For chris.
Wow? Really nothing helpful here Trekkie. GD isn't a matter of variables and biscuits, it's just a big matter of testing all over and over.
Ooops sorry Francis, that block was just me showing Chris an example of the new Code Block font here, the nicer looking one :P
Quote from: Trekkie101 on February 09, 2010, 07:57:01 AM
Ooops sorry Francis, that block was just me showing Chris an example of the new Code Block font here, the nicer looking one :P
Oh so that is why there is almost no white spaces and is in bold. :)
Quote from: Francis on February 09, 2010, 06:11:31 PM
Quote from: Trekkie101 on February 09, 2010, 07:57:01 AM
Ooops sorry Francis, that block was just me showing Chris an example of the new Code Block font here, the nicer looking one :P
Oh so that is why there is almost no white spaces and is in bold. :)
What are you on about? :P
Quote from: Trekkie101 on February 09, 2010, 07:16:11 PM
Quote from: Francis on February 09, 2010, 06:11:31 PM
Quote from: Trekkie101 on February 09, 2010, 07:57:01 AM
Ooops sorry Francis, that block was just me showing Chris an example of the new Code Block font here, the nicer looking one :P
Oh so that is why there is almost no white spaces and is in bold. :)
What are you on about? :P
In that new design, the letters look like they are overlaying on the next ones and so on. And the bold doesn't help my young eyes! LOL. :)
Could you post a screenshot? It seems clearer in every config I've checked :o
It looks fine for me. '.'
Quote from: Trekkie101 on February 09, 2010, 11:21:14 PM
Could you post a screenshot? It seems clearer in every config I've checked :o
Sure. Here it is:
ENOUGH.
My ship sails in the morning.
And I still see the old font only :P
Anyways, I succeeded my task in PHP GD images. I finished the progress bar, kinda. This background isn't actually going to be used, since I'm still waiting on Jerry for it, lol.
(https://www.simpledesk.net/community/proxy.php?request=http%3A%2F%2Fdream-portal.net%2Fprogress%2F&hash=025b7d79003c5df8e3864dd32a231da86cb6c791)
I liked how it came out though. :D
Feedback? ;D
Looks good though I'm not entirely sure the green-on-blue works quite so well as other colours might.
Blue on blue doesn't look so great either.
Did you have any suggestions?
Nah, I'm not a colour person or designer, which is how we ended up with:
(https://www.simpledesk.net/sd/release_gradient.png) (http://www.simpledesk.net/)
being from SimpleDesk-blue gradiented to SimpleDesk-orange...
Maybe Nas will come around and suggest something? ::)
Generated this over at http://www.colourlovers.com.
(https://www.simpledesk.net/community/proxy.php?request=http%3A%2F%2Fwww.colourlovers.com%2FwallPaper%2F390x300%2Fp%2F1110413%2FCOLOURlovers.com-Dream_Portal.png&hash=1f502fa5b472bae4505b28547ce415f5c95d3452)
That darker green or blue might work.
B
I'll keep those in mind, thanks. :D
This looks neat. :)
(https://www.simpledesk.net/community/proxy.php?request=http%3A%2F%2Fdream-portal.net%2Fprogress%2F&hash=025b7d79003c5df8e3864dd32a231da86cb6c791)
Yeah, I like that :D
http://kuler.adobe.com/
Thats what I use for selecting colors on most things, including choosing colors that work together for themes :)
Text is in an awkward place (the logo), the right text is justified wrong.
The progress bar is hard to make out as it just uses a gradient surrounding it.