Dynamic Image

[liguehs]

Hi guys,
OK so I have a number that I am getting from a DB...

So what I want is that the number retreieved is the width of an image.

So for easy, but here is the tough part:

If that number is a negative, I want the image starting from the middle and goes to the left, and if its positive, starts from the middle and goes to the right.

I attached an image of what I would like to make...

Thanks for your help,

 

[Scoochi2]

edit: see next post by descalzo

 

[descalzo]

## constants depending on the size/margins of image
$image_width = XXX; # width of image
$image_margin = XXX; # size of left/right margins if you do not want to edge
$value_max = XXXX; # max abs input value, probably 100
 
 
$value = From DB ;
 
# maximum width of color bar
 
$bar_max = floor( ($image_width - 2*$image_margin) / 2 ) ;
 
$image_midpoint = floor( $image_width/2 );
 
# actual width of color bar
 
$bar_length = (abs($value) /$value_max ) * $bar_max ;
 
# find left and right enpoints of bar, and the color
 
if( $value > 0 ){
   $left = $image_midpoint ;
   $right = $left + $bar_length ;
   $color = POSITIVE_COLOR ;
} else {
   $right = $image_midpoint ;
   $left = $image_midpoint - $bar_length ;
   $color = NEGATIVE_COLOR ;
}

Then use $left, $right, $color in your drawing program (GD based?).

Edit:

Like this

 

[liguehs]

Thanks so much,

I will try it as soon as I get home.

 

[diabolo]

if you need further help: i also wrote a tutorial on this before. the link is in my sig.

 

[liguehs]

Hi,
Just wondering, how do I show the bar?
What should i echo?

 

[descalzo]

In your code to display the page you put

$value = value you want to display...
 
<img src="plusminus.php?value=<?php echo($value) ?>" height="30" width="100" 
         alt="test" id="plusminus" name="plusminus">

plusminus.php would be a separate script that gets called with a query string of '?value=XX' an outputs the dynamic image.

 

[liguehs]

I dont quite follow you here..

So what is $value on the same page equlas too?

And also, The value changes for each players...
so it would be best if its get called in the while loop no?

 

[descalzo]

I dont quite follow you here..

So what is $value on the same page equlas too?

And also, The value changes for each players...
so it would be best if its get called in the while loop no?

It's this number....

OK so I have a number that I am getting from a DB...

 

[liguehs]

plusminus.php would be a separate script that gets called with a query string of '?value=XX' an outputs the dynamic image.

Ok,
but why call it in a separate file?

Thats where I am getting lost...

 

[descalzo]

One script puts out the html for the page. It cannot create an image and include the image as part of the html. It doesn't work that way.

You have it put an <img> tag in the HTML and have the browser request the image. Normally you put the file name of a static image. The browser does not look at the extension (.gif, .jpeg, .png), it just requests the file. So you ask it to get 'plusminus.php'. That file puts out a (in this case) .png image and sends it back (with the proper headings so the browser knows what type of image it is) to the browser and the browser displays it, just like it had asked for 'myLogo.jpg'

 

[liguehs]

The thing like I mentionned is that each player has a different value for it....
I am retreving each players info by using PHP_GET on the player.php file.
And I echo out the values on the same file....

And what should be the coding for the plusminus.php ?

Just a select query, with the header telling its an image?

 

[descalzo]

This is my code from the link above for plusminus.php

<?php
$value_max = 100; # max abs input value, probably 100

#### get the value passed to the script in the query string

if( isset( $_GET[ 'value' ] ) ){
  $value= $_GET[ 'value' ] + 0;
  if( $value > $value_max ){
     $value = $value_max ;  # set to max if too big
  } else if( $value < -$value_max ){
     $value = -$value_max ;
  }
} else {
  $value = 0 ;  # set to zero if they did not send it
}

$image_width = 100; # width of image in pixels
$image_height = 30 ; #height
$image_margin = 5; # size of left/right margins if you do not want to edge
$image_top_margin = 5; # top/bottom margins


DEFINE( 'POSITIVE_COLOR' , 'blue' ) ;
DEFINE( 'NEGATIVE_COLOR' , 'red' ) ;
 

 
# maximum width of color bar
$bar_max = floor( ($image_width - 2*$image_margin) / 2 ) ;

# midpoint
$image_midpoint = floor( $image_width/2 );

# actual width of color bar
$bar_length = (abs($value) /$value_max ) * $bar_max ;

# top edge
$top_start = $image_top_margin ;

# bottom edge
$bottom_end = $image_height - $image_top_margin ;
 
# find left and right enpoints of bar, and the color
 
if( $value > 0 ){
   $left = $image_midpoint ;
   $right = $left + $bar_length ;
   $color = POSITIVE_COLOR ;
} else {
   $right = $image_midpoint ;
   $left = $image_midpoint - $bar_length ;
   $color = NEGATIVE_COLOR ;
}  

   $im = imagecreate($image_width, $image_height);

   # light gray background to show size for now, set to white or whatever
   $bgcolor = imagecolorallocate($im, 240, 240, 240);

   # vertical line color -- black in this case
   $black = imagecolorallocate($im, 0, 0, 0);

   # bar color 
   if($color == POSITIVE_COLOR ){
     $bar_color = imagecolorallocate($im, 0, 0, 255);
   } else {
     $bar_color = imagecolorallocate($im, 255, 0, 0);
   }

   #draw the bar
   imagefilledrectangle( $im , $left, $top_start , $right , $bottom_end, $bar_color ) ;
   #draw the dividing line
   imageline( $im , $image_midpoint , 0 , $image_midpoint , $image_height , $black ) ;

  # send the header 
   header("Content-Type: image/png");
  # send the image
   imagepng($im);
   # clean up after yourself
   imagedestroy($im);


?>

It is like an image file, foobar.gif , but it generates a different image depending on whether you call
it as plusminus.php?value=76 or plusminus.php?value=-22

In your code for the page, if Jones has a score of 76 you want

<img src="plusminus.php?value=76" height="30" width="100"
alt="test" id="plusminus" name="plusminus">

and if Smith has a score of -22 you want to have html of

<img src="plusminus.php?value=-22" height="30" width="100"
alt="test" id="plusminus" name="plusminus">

 

[liguehs]

Thanks it works!!!

 

[descalzo]

Please note you can adjust the size of the image, the margins, the background color, the colors for + and -, and the vertical line. Experiment to see what looks right.

You could also draw a border around the whole image by adding one line of code.