Progress bars

[fusioneko]

I want to create a progress bar like so "http://www.swcombine.com/members/playeradmin/projects/index.php"  I Know it can be done in php but I tried aproaches and failed horriblely maybe I just overlooked it. I thought it was simple. and I know it is. But the simplest things are always the hardest in ways. To think of. Ill continue to look other places.

[cooldude832]

you want to make a graphical form or tabular form? either one isn't too hard to do

[fusioneko]

just one that doesnt require an image. rofl. Becuase I dont feel like stealing images and or using any. I want to generate a statistic for educational purposes. (more knowledge the better.) so non-graphical.

[cooldude832]

well its not stealing anything i'm talking graphical in the sense of the gd library pre this add on(came in php 4 it hink) to make this you have to make a single table row and then fraction off table cells to the color of the status you want.  Lets talk about it graphical for education purposes though because  its a much better idea.  First lets talk parameters.

What size is this status bar, color changes at different percents and what are those percents, show percents on the status, to the side, image type (i think png would be best)

[fusioneko]

Oh yes I know a little about GD. If possible Ill go ahead and use GD. I already know a bit.

[cooldude832]

alright good answer my parameters and i'll help you through the code

 

[fusioneko]

Ok Ok Whats the parameters? we could lessen the post count  you know.  Or atleast include more details in each post instead of making this act like a Instant messenger.

[cooldude832]

read above or below:

First lets talk parameters.

What size is this status bar, color changes at different percents and what are those percents, show percents on the status, to the side, image type (i think png would be best)

[fusioneko]

|||||||||||||||||| In total length

Color would change at different percentages Red, Yellow, Green fading. (non-active, Single State) It will just be used to show percents on the status. It will be PNG.

[Wuhtzu]

It's almost not a PHP problem, the only thing you could need PHP for was to calculate the percentage, and of course get info from a database if you have alot of entries which you want to make a progressbar for.

 

The progress bare it self is easiest made like this:

<?php

//Get your percentage from somewhere
$percentage = 35;

?>

<div style="width: 200px; height: 20px; border: 1px solid #000000;">
<div style="width: <?php echo $percentage; ?>%; height: 100%; background: #00FF00;"></div>
</div>

 

Of course you can loop over this if you get your information from a database

[cooldude832]

thats a cheater's way using GD is not only educational, but it provides a graphic that can be stored and recalled later, also prevents editing of said image

[fusioneko]

It's almost not a PHP problem, the only thing you could need PHP for was to calculate the percentage, and of course get info from a database if you have alot of entries which you want to make a progressbar for.

 

The progress bare it self is easiest made like this:

<?php

//Get your percentage from somewhere
$percentage = 35;

?>

<div style="width: 200px; height: 20px; border: 1px solid #000000;">
<div style="width: <?php echo $percentage; ?>%; height: 100%; background: #00FF00;"></div>
</div>

 

Of course you can loop over this if you get your information from a database

 

The example is useful and very edducational but It seems a tad bit ugly. and I yet to understand how you did that a bit wait.. nevermind..  I don't want to know. Wait I do know. You increased the width of something inside the first div. I have horrible skills in html. Well anything involving Tables.

[cooldude832]

yeah it doesn't let you develop stuff like the gd can with color gradiantes, and so forth.  I will show you this it draws a basic graph and its parameters are editable, i'm adding a textual representation of the percent on it right now

<?php
// Define .PNG image
header("Content-type: image/png");
$imgWidth=300;
$imgHeight=25;


// Create image and define colors
$image=imagecreate($imgWidth, $imgHeight) or die ("GD ERROR");
$colorWhite=imagecolorallocate($image, 0, 0, 0);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);

// Create border around image
imageline($image, 0, 0, 0, 25, $colorBlue);
imageline($image, 0, 0, 300, 0, $colorBlue);
imageline($image, 299, 0, 299, 24, $colorBlue);
imageline($image, 0, 24, 299, 24, $colorBlue);

$percent = 25;
$scale = $percent*($imgWidth/100); // In this case it will multiple the 25% by 3 so it will fill in 75 pixels worth of color Good if you resize this bar

imagefilledrectangle($image, 1,1,$scale,24,$colorGrey);

// Output graph and clear image from memory
imagepng($image);
imagedestroy($image);
?>

[fusioneko]

http://kato.bounceme.net/dev/per.php

 

Like so. I guess. Its very easy to understand. But I want to be able to shift the color depending on the percentages value. Im sure your looking into that.

[cooldude832]

yeah color shift is easy, write out which color you want at what percents

like:

0-5 $colorBlue=imagecolorallocate($image, 0, 0, 255);

5-10$colorGreen=imagecolorallocate($image, 0, 0, 255);

 

etc and i'll show you a switch for it

[Wuhtzu]

If it needs to change color do something like this:

<?php

//Get your percentage from somewhere
$percentage = 85;

switch(true) {

case 0 <= $percentage && $percentage < 25:
$color = "red";
break;

case 25 <= $percentage && $percentage < 50:
$color = "orange";
break;

case 50 <= $percentage && $percentage < 75:
$color = "yellow";
break;


case 75 <= $percentage:
$color = "lime";
break;
}



?>

<div style="width: 200px; height: 20px; border: 1px solid #000000;">
<div style="width: <?php echo $percentage; ?>%; height: 100%; background: <?php echo $color; ?>;">
	<?php echo $percentage; ?>
</div>
</div>

[fusioneko]

Yeah I can do that. Thanks for the help.  I think I can perform an if conditional on the value of the percentage.

 

 

Edit: I'd rather use if but if Doesnt work well .. I'd try other methods.

[cooldude832]

use that switch made and just use the GD colors instead

[Barand]

Graphics ones are pretty easy

 

:: bar.php ::

<?php
// set dimensions
     $w = 102;
     $h = 20;
// create image
     $im = imagecreate($w, $h);
// set colours to be used
     $bg = imagecolorallocate($im, 0xE0, 0xE0, 0xE0);
     $black = imagecolorallocate($im, 0x00, 0x00, 0x00);
     $red  = imagecolorallocate($im, 0xFF, 0x00, 0x00);
     $green  = imagecolorallocate($im, 0x50, 0xB6, 0x30);  
// draw border
     imagerectangle($im, 0,0,$w-1,$h-1,$black);
// get value and max value from query string
     $val = isset($_GET['val']) ? $_GET['val'] : 0;
     $max = isset($_GET['max']) ? $_GET['max'] : 100; 
// calculate dimensions of inner bar
     $barw = $max ? floor(($w-2) * $val / $max) : 0;
     $barh = $h - 2;
// draw inner bar
 if ($barw)
     {
        $barcolor = $val < 50 ? $red : $green;
     	imagefilledrectangle($im, 1, 1, $barw, $barh, $barcolor);
     }
// send image header
     header("content-type: image/png");
// send png image
     imagepng($im);
     imagedestroy($im);
?>

 

Example html to display the progress bar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="content-language" content="en">
<META name="author" content="Barand">
<META name="generator" content="PHPEd 4.5">
<title>Bar sample</title>
</head>
<body>
<table width="300" border='1'>
   <tr>
      <td>
         Item A
      </td>
      <td>
         20%
      </td>
      <td>
         <img src='bar.php?val=20&max=100'>
      </td>
   </tr>
   <tr>
      <td>
         Item B
      </td>
      <td>
         40%
      </td>
      <td>
         <img src='bar.php?val=40&max=100'>
      </td>
   </tr>
   <tr>
      <td>
         Item C
      </td>
      <td>
         30%
      </td>
      <td>
         <img src='bar.php?val=30&max=100'>
      </td>
   </tr>
   <tr>
      <td>
         Item D
      </td>
      <td>
         60%
      </td>
      <td>
         <img src='bar.php?val=60&max=100'>
      </td>
   </tr>
</table>

</body>
</html>

[Wuhtzu]

Now you have seen 2 out of 3 approaches to make a progress bar - the last one would be to make a tiny image 1px x 1px and stretch that until it has the right length

 

You can try my approach out here:

http://wuhtzu.dk/random/progressbar.php

 

 

Regarding the switch it is much more practical than an if and elseif statement of the same proportions. An if/elseif-statement will look quite ugly when you have to check a variable against alot of possible matches... what if you wanted 10 color changes? That would be very unpleasant to do without the switch

[cooldude832]

this is my version you can play with colors or add more to it in the switch.  If i make one with a gradient i'll pm you about it

<?php
// Define .PNG image
header("Content-type: image/png");
$imgWidth=300;
$imgHeight=25;


// Create image and define colors
$image=imagecreate($imgWidth, $imgHeight) or die ("GD ERROR");
$colorWhite=imagecolorallocate($image, 0, 0, 0);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);

$textcolor=imagecolorallocate($image, 255, 255, 255);
$fill=imagecolorallocate($image, 192, 192, 192);
// Create border around image
imageline($image, 0, 0, 0, 25, $colorBlue);
imageline($image, 0, 0, 300, 0, $colorBlue);
imageline($image, 299, 0, 299, 24, $colorBlue);
imageline($image, 0, 24, 299, 24, $colorBlue);

$percent = $_GET['percent'];
$percentage = $percent;
$scale = $percent*($imgWidth/100); // In this case it will multiple the 25% by 3 so it will fill in 75 pixels worth of color Good if you resize this bar
switch(true) {

case 0 <= $percentage && $percentage < 25:
$fill=imagecolorallocate($image, 255, 0, 0);
$textcolor=imagecolorallocate($image, 255, 255, 255);
break;

case 25 <= $percentage && $percentage < 50:
$fill=imagecolorallocate($image, 255, 180, 0);
$textcolor=imagecolorallocate($image, 0, 0, 255);
break;

case 50 <= $percentage && $percentage < 75:
$fill=imagecolorallocate($image, 0, 0, 255);
$textcolor=imagecolorallocate($image, 255, 255, 255);
break;

case 75 <= $percentage:
$fill=imagecolorallocate($image, 24, 255, 0);
$textcolor=imagecolorallocate($image, 255, 255, 255);
break;
}

imagefilledrectangle($image, 1,1,$scale,24,$fill);

// The text to draw
$text = $percent;
$text .= " %";
// Replace path by your own font path
$font = 'arial.ttf';
$textpos = .33*$imgWidth;
imagettftext($image, 20, 0, 130, 22, $textcolor, $font, $text);

// Output graph and clear image from memory
imagepng($image);
imagedestroy($image);
?>