...

View Full Version : GD help



moos3
09-06-2007, 01:55 AM
I'm trying to make the following image
http://labs.guthnur.net/weather.png

I have some code but I need help with the text and the placing the text and the image of the icon on in the right spot.



<?php
$town = 'BoothabyHarbor';
$temp = '90';

// Generate Image & set width
$image = imagecreatefrompng("../images/weather/wBack.png");
$imageWidth = '230';

// Generate Town
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/hyo.ttf";
$fontSize = "18";
$ret = imagettfbbox($fontSize, 0, $font, $town);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 2, 12, $color, $font, $month);

// Generate Temperature
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/arial.ttf";
$fontSize = "14";
$ret = imagettfbbox($fontSize, 0, $font, $temp);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 2, 38, $color, $font, $day);

// Generate Weather Icon
$image2 = imagecreatefrompng("../images/weather/wx/40.png");
//This where I'm not sure about
//My text isn't showing up thier

// Output & Free Memory
header("Content-type: image/png");
imagepng($image);
imagedestroy($image);
?>

Help please... i have been googling all day trying to figure this out and can't find a answer. any ideas.

rafiki
09-06-2007, 01:56 AM
got an online example?

moos3
09-06-2007, 02:15 AM
of the script ?? http://labs.guthnur.net/includes/wx.php
images are
background
http://labs.guthnur.net/images/weather/wBack.png
Icon sample
http://labs.guthnur.net/images/weather/wx/40.png

moos3
09-06-2007, 02:48 AM
any ideas or help?

CFMaBiSmAd
09-06-2007, 03:15 AM
any ideas or help? Get one piece of it working, then go on to the next piece. Get the first piece of text to work, then the second, then go on to figure out how to add the weather icon at the coordinates that you want it.

If you have not done so, check your web server log for errors. There will be at least two notice messages about undefined variables. You are referencing $month and $day variables, but these do not exist, nor do their names make sense in the context of what you are doing. So, I also recommend that you review your code to make sure that the logic is doing what you intend and that variables are being used as you intend.

CFMaBiSmAd
09-06-2007, 03:27 AM
Another issue I see is your background image is only 196 pixels wide, but you have a variable in the code that is set to 230.

moos3
09-06-2007, 03:41 AM
ok heres a Updated version of my code with working text positioned correctly.


<?php
$town = 'Boothaby Harbor';
$temp = '90';

// Generate Image & set width
$image = imagecreatefrompng("../images/weather/wBack.png");
//$image2 = imagecreatefrompng("../images/weather/wx/40.png");
$imageWidth = '230';
//echo $imageWidth;

// Generate Town
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/hyo.ttf";
$fontSize = "15";
$ret = imagettfbbox($fontSize, 0, $font, $town);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 12, 40, $color, $font, $town);

// Generate Temperature
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/arial.ttf";
$fontSize = "14";
$ret = imagettfbbox($fontSize, 0, $font, $temp);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 2, 60, $color, $font, $temp);

// Output & Free Memory
header("Content-type: image/png");
imagepng($image);
imagedestroy($image);
?>

you can see it working at http://pornandfriedchicken.com:8080/includes/wx.php how do I hand putting the second image on the top of that image?

CFMaBiSmAd
09-06-2007, 04:00 AM
http://www.codewalkers.com/c/a/Miscellaneous/Overlapping-Images-with-GD/

moos3
09-06-2007, 04:23 AM
Updated code but its cutting the other image off;


<?php
$town = 'Boothaby Harbor';
$temp = '90';

// Generate Image & set width
$image = imagecreatefrompng("../images/weather/wBack.png");
$image2 = imagecreatefrompng("../images/weather/wx/40.png");
imagecolortransparent($image2,imagecolorat($image2,0,0));
$imageWidth = '230';
//echo $imageWidth;

// Generate Town
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/hyo.ttf";
$fontSize = "15";
$ret = imagettfbbox($fontSize, 0, $font, $town);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 12, 40, $color, $font, $town);

// Generate Temperature
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/arial.ttf";
$fontSize = "14";
$ret = imagettfbbox($fontSize, 0, $font, $temp);
imagettftext($image, $fontSize, 0, ($imageWidth - $ret[2]) / 2, 60, $color, $font, $temp);

// Store the image
$insertx = imagesx($image2);
$inserty = imagesy($image2);
// Combine The images
imagecopymerge($image,$image2,150,0,0,50,$insertx,$inserty,100);
// Output & Free Memory
//var_dump($ret);
header("Content-type: image/png");
imagepng($image);
imagedestroy($image);
?>

Any Ideas?

moos3
09-06-2007, 04:40 AM
the image is stuck at 196x71 instead of the correct size of 230x116. I have tried setting it in the imagecopymerge() but its not working. So I changed to imagecopy() that fixed my colors, but not image size. still open for Ideas.



imagecopy($image,$image2,130,0,0,48,230,116);


For some reason the image is the size of the base image,

CFMaBiSmAd
09-06-2007, 04:45 AM
You actually need to create an overall blank "canvas" image of the size necessary to hold the other images/text and then place them onto this blank canvas. See this link to create a blank "canvas" - http://php.net/imagecreatetruecolor

moos3
09-06-2007, 05:25 AM
Updated Code, But something is isn't right.


<?php
$town = 'Boothaby Harbor';
$temp = '90';
$icon = '40';
// Generate Image canvas
$canvas = imagecreatetruecolor(260,130);
imagecolortransparent($canvas,imagecolorat($canvas,0,0));

// Combine Canvas and base
$image = imagecreatefrompng("../images/weather/wBack.png");
imagecopy($canvas,$image,0,50,0,0,230,120);

// Weather Image
$image2 = imagecreatefrompng("../images/weather/wx/{$icon}.png");
imagecolortransparent($image2,imagecolorat($image2,0,0));

// Base Image Width
$imageWidth = '196';

// Generate Town
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/hyo.ttf";
$fontSize = "15";
$ret = imagettfbbox($fontSize, 0, $font, $town);
imagettftext($canvas, $fontSize, 0, ($imageWidth - $ret[2]) / 12, 93, $color, $font, $town);

// Generate Temperature
$color = imagecolorallocate($canvas, 255, 255, 255);
$font = "fonts/arial.ttf";
$fontSize = "14";
$ret = imagettfbbox($fontSize, 0, $font, $temp);
imagettftext($canvas, $fontSize, 0, 150, 110, $color, $font, $temp);

// Combine The images
imagecopy($canvas,$image2,130,0,15,5,230,120);

// Output & Free Memory
header("Content-type: image/png");
imagepng($canvas);
imagedestroy($canvas);
?>

Isn't rendering correctly any Ideas?

CFMaBiSmAd
09-06-2007, 06:13 AM
One thing that will help would be to use variables for almost everything, most importantly, the overall canvas size, so that you can use them in the calculations used to position the elements (I did not do this in the following minimal hacked code due to time constraints.) Also, use the actual image sizes in the offsets... It is likely that your weather icons have various sizes.

The next problem I found is that you need to make the canvas transparent.

The following is the "fairly close" code I hacked up (tested and outputs the whole images that look correct, but may need some positioning adjustments) -

<?php
$town = 'Boothaby Harbor';
$temp = '90';
$icon = '40';
// Generate Image canvas
$canvas = imagecreatetruecolor(260,130);
imagesavealpha($canvas, true);

$trans_colour = imagecolorallocatealpha($canvas, 0, 0, 0, 127);
imagefill($canvas, 0, 0, $trans_colour);

// Combine Canvas and base
$image = imagecreatefrompng("../images/weather/wBack.png");

$insert_x = imagesx($image);
$insert_y = imagesy($image);
// imagecopy (dst_im, src_im, dst_x, dst_y, src_x, src_y, src_w, src_h )
imagecopy($canvas,$image,0,130-$insert_y,0,0,$insert_x,$insert_y);

// Weather Image
$image2 = imagecreatefrompng("../images/weather/wx/{$icon}.png");

// Base Image Width
$imageWidth = '196';

// Generate Town
$color = imagecolorallocate($image, 255, 255, 255);
$font = "fonts/hyo.ttf";
$fontSize = "15";
$ret = imagettfbbox($fontSize, 0, $font, $town);
imagettftext($canvas, $fontSize, 0, ($imageWidth - $ret[2]) / 12, 93, $color, $font, $town);

// Generate Temperature
$color = imagecolorallocate($canvas, 255, 255, 255);
$font = "fonts/arial.ttf";
$fontSize = "14";
$ret = imagettfbbox($fontSize, 0, $font, $temp);
imagettftext($canvas, $fontSize, 0, 150, 110, $color, $font, $temp);

// Combine The images

$insert_x = imagesx($image2);
$insert_y = imagesy($image2);
// imagecopy (dst_im, src_im, dst_x, dst_y, src_x, src_y, src_w, src_h )
imagecopy($canvas,$image2,260-$insert_x,130-$insert_y,0,0,$insert_x,$insert_y);

// Output & Free Memory
header("Content-type: image/png");
imagepng($canvas);
imagedestroy($canvas);
?> Edit: I edited the posted code to update the last imagecopy(...) statement. There were some parameters that were left over from what you had that were cutting off things and some of the parameters needed to be the image size variables.

moos3
09-06-2007, 02:29 PM
Works prefect thanks for the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum