[SOLVED] Progress bar

kenrbnsn · May 30, 2007

No, CSS doesn't generate images, but you should be able to use it in place of an image. Please post the code where you want to use it. BTW what is "fora"?

Ken

Sir Softsand · May 30, 2007

fora is forums. I want to use this code to use it as image:

[img=http://pixelpros.2kool4u.net/forum/progressbar.php?score=10]

Or this code:

<img src="http://pixelpros.2kool4u.net/forum/progressbar.php?score=10">

chigley · May 30, 2007

In your page, you're using CSS. You can't use CSS as an image, so you need to use the example function posted earlier in this thread to do it as an image.

Wildbug · May 30, 2007

If you want to post in forums, you'll most likely need the image version, then. I think most forum programs disallow HTML/CSS to be directly integrated into posts.

Sir Softsand · May 30, 2007

So you guys mean this code?:

<?php
if (isset($_GET['status'])) {
    if ($_GET['status'] < 25) {
        $bar = 'no-bar.jpg';
    }elseif ($_GET['status'] < 50) {
         $bar = 'quarter-bar.jpg';
    }elseif ($_GET['status'] < 75) {
         $bar = '3quarter-bar.jpg';
    }elseif ($_GET['status'] <= 100) {
         $bar = 'ful-bar.jpg';
    }
}else {
   $bar = 'no-bar.jpg';
}

echo '<img src="' . $bar . '" />';
?>

per1os · May 30, 2007

fora is forums. I want to use this code to use it as image:
[img=http://pixelpros.2kool4u.net/forum/progressbar.php?score=10]
Or this code:
<img src="http://pixelpros.2kool4u.net/forum/progressbar.php?score=10">

That statement there would of saved everyone a ton of time, at the beginning of the post.

Use the image functions in php as was pointed out to you by numerous people and even some good code to do what you want on the bottom of the 3rd page. I think now you should have all the information and data needed to solve this on your own.

So you guys mean this code?:

Code:

<?php

if (isset($_GET['status'])) {

if ($_GET['status'] < 25) {

$bar = 'no-bar.jpg';

}elseif ($_GET['status'] < 50) {

$bar = 'quarter-bar.jpg';

}elseif ($_GET['status'] < 75) {

$bar = '3quarter-bar.jpg';

}elseif ($_GET['status'] <= 100) {

$bar = 'ful-bar.jpg';

}

}else {

$bar = 'no-bar.jpg';

}

echo '<img src="' . $bar . '" />';

?>

No, that is bad code, because I did not know that you wanted to do every single number. Look at the image function code posted on the third page by Lumio. Or found below.

<?php
function createBar ($val, $max, $width='150', $height='15', $_col_bar=array(0,128,0), $_col_bg=array(255,250,255)) {
	$im = imagecreatetruecolor($width, $height);

	$col_bar = imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg  = imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);

	imagefill($im, 0, 0, $col_bg);

	$min = $val / $max;
	$gr_min = $width * $min;

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	imagefilledpolygon($im, $points, 4, $col_bar);
	return $im;
}

header('Content-type: image/jpeg');
imagejpeg( createBar(200,300, 500, 20, array(255, 128, 0), array(230, 235, 255)) );
?>

Sir Softsand · May 30, 2007

Ok, now I'd like to add a border and ability to fill it as much as I want by adding ?score= or ?points= to the URL

progress.php?score=10

per1os · May 30, 2007

Unsure about the border, look at www.php.net/image and look through the image functions, sometimes research goes a long ways. Or you just put the border code in the image tag

<?php
function createBar ($val, $max, $width='150', $height='15', $_col_bar=array(0,128,0), $_col_bg=array(255,250,255)) {
	$im = imagecreatetruecolor($width, $height);

	$col_bar = imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg  = imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);

	imagefill($im, 0, 0, $col_bg);

	$min = $val / $max;
	$gr_min = $width * $min;

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	imagefilledpolygon($im, $points, 4, $col_bar);
	return $im;
}

header('Content-type: image/jpeg');

imagejpeg( createBar($_GET['score'], 100, 500, 20, array(255, 128, 0), array(230, 235, 255)) );
?>

Sir Softsand · May 30, 2007

The codes for borders I tried don't work. Here's the code I'm using now. How can I add a border?

<?php
function createBar ($val, $max, $width='150', $height='15', $_col_bar=array(0,128,0), $_col_bg=array(255,250,255)) {
	$im = imagecreatetruecolor($width, $height);

	$col_bar = imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg  = imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);

	imagefill($im, 0, 0, $col_bg);

	$min = $val / $max;
	$gr_min = $width * $min;

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	imagefilledpolygon($im, $points, 4, $col_bar);

	return $im;
}

header('Content-type: image/jpeg');

imagejpeg( createBar($_GET['score'], 100, 100, 10, array(255, 128, 0), array(230, 235, 255)) );
?>

per1os · May 30, 2007

http://us2.php.net/manual/en/function.imageline.php

A little bit of actual looking goes a long ways.

Sir Softsand · May 30, 2007

Ok I found this code,but where in my code do I have to add that?:

function createImageBorder($imgName){

     $img     =  substr($imgName, 0, -4); // remove fileExtension
     $ext     = ".jpg";
     $quality = 95;
     $borderColor = 255;  // 255 = white
    
    /*
     a                         b
     +-------------------------+
     |                         
     |          IMAGE          
     |                         
     +-------------------------+
     c                         d  
    */
   
    $scr_img = imagecreatefromjpeg($img.$ext);
    $width   = imagesx($scr_img);
    $height  = imagesy($scr_img);
             
        // line a - b
        $abX  = 0;
        $abY  = 0;
        $abX1 = $width;
        $abY1 = 0;
       
        // line a - c
        $acX  = 0;
        $acY  = 0;
        $acX1 = 0;
        $acY1 = $height;
       
        // line b - d
        $bdX  = $width-1;
        $bdY  = 0;
        $bdX1 = $width-1;
        $bdY1 = $height;
       
        // line c - d
        $cdX  = 0;
        $cdY  = $height-1;
        $cdX1 = $width;
        $cdY1 = $height-1;
           
       // DRAW LINES   
        imageline($scr_img,$abX,$abY,$abX1,$abY1,$borderColor);
        imageline($scr_img,$acX,$acY,$acX1,$acY1,$borderColor);
        imageline($scr_img,$bdX,$bdY,$bdX1,$bdY1,$borderColor);
        imageline($scr_img,$cdX,$cdY,$cdX1,$cdY1,$borderColor);
       
      // create copy from image   
        imagejpeg($scr_img, $img."_border.jpg", $quality);
        imagedestroy($scr_img);
  }
   
    createImageBorder("myfile.jpg");

Sir Softsand · May 30, 2007

Anyone? ???

Lumio · May 30, 2007

Hi! I updated that function a little and I added borders and also valueview so you can see what the percentage is.

<?php	
function createBar ($val, $max, $width=150, $height=15, $_col_bar=array(25,128,25), $_col_bg=array(255,250,255), $_col_border=array(128, 128, 128), $_col_font=true) {
	$im = imagecreatetruecolor($width, $height);

	//define colors
	$col_bar	= imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg		= imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);
	$col_border	= (is_array($_col_border)) ? imagecolorallocate($im, $_col_border[0], $_col_border[1], $_col_border[2]):false;
	$col_font	= (is_array($_col_font)) ? imagecolorallocate($im, $_col_font[0], $_col_font[1], $_col_font[2]):false;

	//define font-size
	$font = 2;
	if ($height < 12) $font = 1;

	imagefill($im, 0, 0, $col_bg);

	if ($max < $val) {
		if ($max > 0)
			$val = $max;
		else
			$val = 0;
	}

	//define border and also width of the bar
	$min = $val / $max;
	$_width = $width;
	if ($col_border !== false) $_width = $width - 2; //border
	$gr_min = $_width * $min;

	$percentage = round($min * 100);

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	if ($percentage > 0) imagefilledpolygon($im, $points, 4, $col_bar);

	$sign_min = $gr_min+(2.5*$font);
	$s_f = 3;
	if ($font == 1) $s_f = 4.5;
	if (($sign_min+5+ (($sign_w = strlen($percentage.'%')*($s_f*$font)))) > $width) {
		$sign_min = $width-$sign_w-5;
	}
	if ($col_border !== false && $col_font !== false) imagestring($im, $font, $sign_min, ($height/2 - (3.5 * $font)), $percentage.'%', $col_font);

	if ($col_border !== false) {
		$points = array(	0,		0,
					$width-1,	0,
					$width-1,	$height-1,
					0,		$height-1);
		imagepolygon($im, $points, 4, $col_border);
	}

	return $im;
}

header('Content-type: image/png');
imagepng( createBar( (isset($_GET['score']) ? intval($_GET['score']):0), 100, 100, 10, array(94,170,94), array(255,255,255), array(153, 153, 153), array(153,153,153)));
?>

To hide the percentage just replace the last line to

imagepng( createBar( (isset($_GET['score']) ? intval($_GET['score']):0), 100, 100, 10, array(94,170,94), array(255,255,255), array(153, 153, 153), false));

Sir Softsand · May 30, 2007

Ok, thx it's working! I'm just going to change colors. I have another question. I'd Like the % to always be displayed in the middle.

Sir Softsand · May 30, 2007

Or always at the right.

Lumio · May 30, 2007

I think you have to understand that function before you get more code of us

Sir Softsand · May 30, 2007

? Can't you just tell me how to center the text on the bar?

Lumio · May 31, 2007

look for this line:

if ($col_border !== false && $col_font !== false) imagestring($im, $font, $sign_min, ($height/2 - (3.5 * $font)), $percentage.'%', $col_font);

And see www.php.net/imagestring

Then you see that you have to change $sign_min to ($width/2 - $sign_w/2)

Sir Softsand · May 31, 2007

Now it always shows 10%. How come?

Here's my code:

<?php	
function createBar ($val, $max, $width=150, $height=15, $_col_bar=array(25,128,25), $_col_bg=array(255,250,255), $_col_border=array(128, 128, 128), $_col_font=true) {
	$im = imagecreatetruecolor($width, $height);

	//define colors
	$col_bar	= imagecolorallocate($im, $_col_bar[0], $_col_bar[1], $_col_bar[2]);
	$col_bg		= imagecolorallocate($im, $_col_bg[0], $_col_bg[1], $_col_bg[2]);
	$col_border	= (is_array($_col_border)) ? imagecolorallocate($im, $_col_border[0], $_col_border[1], $_col_border[2]):false;
	$col_font	= (is_array($_col_font)) ? imagecolorallocate($im, $_col_font[0], $_col_font[1], $_col_font[2]):false;

	//define font-size
	$font = 2;
	if ($height < 12) $font = 1;

	imagefill($im, 0, 0, $col_bg);

	if ($max < $val) {
		if ($max > 0)
			$val = $max;
		else
			$val = 0;
	}

	//define border and also width of the bar
	$min = $val / $max;
	$_width = $width;
	if ($col_border !== false) $_width = $width - 2; //border
	$gr_min = $_width * $min;

	$percentage = round($min * 100);

	$points = array(	0,	 0,
				$gr_min, 0,
				$gr_min, $height,
				0,	 $height);
	if ($percentage > 0) imagefilledpolygon($im, $points, 4, $col_bar);

	$sign_min = $gr_min+(2.5*$font);
	$s_f = 3;
	if ($font == 1) $s_f = 4.5;
	if (($sign_min+5+ (($sign_w = strlen($percentage.'%')*($s_f*$font)))) > $width) {
		$sign_min = $width-$sign_w-5;
	}
	if ($col_border !== false && $col_font !== false) imagestring($im, $font, ($width/2 - $sign_w/2), ($height/2 - (3.5 * $font)), $percentage.'%', $col_font);

	if ($col_border !== false) {
		$points = array(	0,		0,
					$width-1,	0,
					$width-1,	$height-1,
					0,		$height-1);
		imagepolygon($im, $points, 4, $col_border);
	}

	return $im;
}

header('Content-type: image/png');
imagepng( createBar( (isset($_GET['score']) ? intval($_GET['score']):0), 100, 100, 10, array(172,255,63), array(255,255,255), array(153,153,153), array(153,153,153)));
?>

Sir Softsand · May 31, 2007

Oh I think it's my host, it's not showing at all, the server is down I think.

per1os · May 31, 2007

Remove the intval, it is not necessary and could be screwing it up.

Sir Softsand · May 31, 2007

It doesn't work when I remove that. Server is up again. Progress bar solved

Sir Softsand · May 31, 2007

Thank you all for the help!!! phpfreaks is the best

Thanks a lot!! :D

Sign In

[SOLVED] Progress bar

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information