andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


Transparent Background
Goto page 1, 2  Next
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> User Quota
View previous topic :: View next topic  
Author Message
spiderblues
Newbie


Joined: 09 Mar 2005
Posts: 3

PostPosted: Wed Mar 09, 2005 10:53 am    Post subject: Transparent Background Reply with quote

Hi,

thank you for your very useful class.
I tried to change the background to transparent, but it doesn't work.
Can you help me?

Code:
...
$cQuota = ImageColorAllocate($im, $this->gQuotaColour[0], $this->gQuotaColour[1], $this->gQuotaColour[2]);
$cTrans = imagecolorallocate($im,$this->gBackColour[0], $this->gBackColour[1], $this->gBackColour[2]);
imagecolortransparent($im,$cTrans);
ImageFill($im, 0, 0, $cBg);
...


Thanks
spiderblues
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Wed Mar 09, 2005 6:13 pm    Post subject: Reply with quote

Hi spiderblues, and welcome to the site!

Try this _displayImage() method out as a replacement for the standard one:

PHP:
<?php function _displayImage()
    {
        
// the graph variables
        
$sStart $this->g3DHeight 2;
        
$wStart $this->gWidth 2;
        
$hStart $this->gHeight 2;
        if (
$this->qUsed >= $this->qQuota$usedPercent 359;
        else 
$usedPercent $this->oPercent 3.6;

        
// work out where the 'used' wedge will be located
        
if ($this->gCentreUsed)
        {
            
$sWedge = (int)(90 - ($usedPercent 2));
            if (
$sWedge 0$sWedge += 360;
            
$mWedge = (int)(90 + ($usedPercent 2));
            
$mWedge = ($mWedge == 90 91 $mWedge);
            
$eWedge = (int)$sWedge;
        }
        else
        {
            
$sWedge 0;
            
$mWedge = (int)($usedPercent $usedPercent 1);
            
$eWedge 360;
        }

        
// setup image and main colours
        
$im = @ImageCreateTrueColor($wStart$hStart $sStart);
        
imagealphablending($imtrue);
        if (
$im)
        {
            
$cBg ImageColorAllocate($im$this->gBackColour[0], $this->gBackColour[1], $this->gBackColour[2]);
            
$cUsed ImageColorAllocate($im$this->gUsedColour[0], $this->gUsedColour[1], $this->gUsedColour[2]);
            
$cQuota ImageColorAllocate($im$this->gQuotaColour[0], $this->gQuotaColour[1], $this->gQuotaColour[2]);
            
imagecolortransparent($im,$cBg); 
            
ImageFill($im00$cBg);

            
// work out 3D look if needs be
            
if ($this->g3DHeight)
            {
                
// process colours
                
$qDarkArray $this->gQuotaColour;
                for (
$i=0$i<3$i++)
                {
                    (
$qDarkArray[$i] > 99) ? $qDarkArray[$i] -= 100 $qDarkArray[$i] = 0;
                }
                
$uDarkArray $this->gUsedColour;
                for (
$i=0$i<3$i++)
                {
                    (
$uDarkArray[$i] > 99) ? $uDarkArray[$i] -= 100 $uDarkArray[$i] = 0;
                }
                
$cQuotaDark ImageColorAllocate($im$qDarkArray[0], $qDarkArray[1], $qDarkArray[2]);
                
$cUsedDark ImageColorAllocate($im$uDarkArray[0], $uDarkArray[1], $uDarkArray[2]);

                
// add 3D look
                
$shadow_start = ($hStart/2) + $sStart;
                
$shadow_end $hStart/2;
                for (
$i=$shadow_start 1$i>$shadow_end$i--)
                {
                    
ImageFilledArc($im, ($wStart/2), $i$wStart$hStart,  $sWedge$mWedge$cUsedDarkIMG_ARC_PIE);
                    
ImageFilledArc($im, ($wStart/2), $i$wStart$hStart$mWedge$eWedge$cQuotaDarkIMG_ARC_PIE);
                }
            }

            
// now do the top of the graph
            
ImageFilledArc($imround($wStart/2), round($hStart/2), round($wStart), round($hStart), round($sWedge), round($mWedge), $cUsedIMG_ARC_PIE);
            
ImageFilledArc($imround($wStart/2), round($hStart/2), round($wStart), round($hStart), round($mWedge), round($eWedge), $cQuotaIMG_ARC_PIE);

            
// now create a legend image if needs be
            
if ($this->gLegend)
            {
                
// the legend variables
                
$lHeight $lWidth 0;
                
$spacer 10;

                
// build quota strings
                
$qText[0] = 'Quota: ' $this->_formatSize($this->qQuota);
                if (
$this->qUser$qText[1] = '       (' $this->qUser ')';
                else 
$qText[1] = '';
                
$uText[0] = 'Used : ' $this->_formatSize($this->qUsed);
                
$uText[1] = '       (' number_format($this->oPercent,2) . '%)';

                
// space + line + spacer + line
                
$lHeight = (ImageFontHeight(2) * ($qText[1] == '' 4)) + $spacer;

                
// get biggest string length and add spacer to it - legend block is size of font height (square)
                
$qMax = (strlen($qText[0]) > strlen($qText[1])) ? strlen($qText[0]) : strlen($qText[1]);
                
$uMax = (strlen($uText[0]) > strlen($uText[1])) ? strlen($uText[0]) : strlen($uText[1]);
                
$tMax = ($qMax $uMax $qMax $uMax);
                
$lWidth = ($tMax ImageFontWidth(2)) + $spacer ImageFontHeight(2);

                
// now create the image
                
$lim ImageCreateTrueColor($lWidth$lHeight);
                
imagealphablending($limtrue);
                
imagesavealpha($limfalse);
                
imagecolortransparent($lim,$cBg); 
                
ImageFill($lim00$cBg);
                
$cText ImageColorAllocate($lim$this->gTextColour[0], $this->gTextColour[1], $this->gTextColour[2]);
                
$lx 0;
                
$ly 0;

                
// write out the 'quota' legend
                
ImageFilledRectangle($lim$lx$ly, ($lx ImageFontHeight(2)), ($ly ImageFontHeight(2)), $cQuota);
                
ImageString($lim2, ($lx ImageFontHeight(2) + $spacer), $ly$qText[0], $cText);
                if (
$qText[1] != '')
                {
                    
$ly += ImageFontHeight(2);
                    
ImageString($lim2, ($lx ImageFontHeight(2) + $spacer), $ly$qText[1], $cText);
                }

                
$ly += ($spacer ImageFontHeight(2));

                
// write out the 'used' legend
                
ImageFilledRectangle($lim$lx$ly, ($lx ImageFontHeight(2)), ($ly ImageFontHeight(2)), $cUsed);
                
ImageString($lim2, ($lx ImageFontHeight(2) + $spacer), $ly$uText[0], $cText);
                
$ly += ImageFontHeight(2);
                
ImageString($lim2, ($lx ImageFontHeight(2) + $spacer), $ly$uText[1], $cText);

                
// now merge the two images into the final one

                // anti-aliasing look
                
$gsx ImageSX($im);
                
$gsy ImageSY($im);
                
$lsx ImageSX($lim);
                
$lsy ImageSY($lim);
                
$gnx = ($gsx >> 1);
                
$gny = ($gsy >> 1);
                
$fx = ($gnx $lsx) ? $gnx $lsx;
                
$fy $gny $lsy + ($spacer 2);

                
$final ImageCreateTrueColor($fx$fy);
                
imagealphablending($finaltrue);
                
imagesavealpha($finalfalse);
                
imagecolortransparent($final,$cBg); 
                
ImageFill($final00$cBg);
                
ImageCopyResampled($final$im, (($fx/2)-($gnx/2)), 000$gnx$gny$gsx$gsy);
                
ImageCopyResampled($final$lim, (($fx/2)-($lsx/2)), $gny + ($spacer 2), 00$lsx$lsy$lsx$lsy);
                
ImageDestroy($lim);
            }
            else
            {
                
// we do not have a legend, so just reample graph
                
$sx ImageSX($im); 
                
$sy ImageSY($im); 
                
$nx = ($sx>>1); 
                
$ny = ($sy>>1);
                
$final ImageCreateTrueColor($nx$ny);
                
imagealphablending($finaltrue);
                
imagesavealpha($finalfalse);
                
imagecolortransparent($final$cBg); 
                
ImageCopyResampled($final$im0000$nx$ny$sx$sy);
            }

            
// flush image
            
header("Content-type: image/png");
            
ImagePNG($final);
            
ImageDestroy($im);
            
ImageDestroy($final);
        }
    } 
?>


Regards,

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
spiderblues
Newbie


Joined: 09 Mar 2005
Posts: 3

PostPosted: Thu Mar 10, 2005 1:16 am    Post subject: Reply with quote

Hi Andy,

thanks for your answer.
I tried it, but the generated image still don't have a transparent background!

Or is it possible to give the image an other background image while generating?

spiderblues
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 10, 2005 4:03 am    Post subject: Reply with quote

Hmm.. I tested this out yesterday and the transparency worked just fine.

http://php.amnuts.com/test/user-quota/

If you don't see that with a transparent background, you're probably looking at it with Internet Explorer which doesn't natively support PNG transparency. Check it out in firefox to see it working correctly.

For help on getting PNG transparency to work on IE, check out this link:

http://www.alistapart.com/articles/pngopacity

Alternatively, try saving/showing it as a GIF rather than a PNG.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
spiderblues
Newbie


Joined: 09 Mar 2005
Posts: 3

PostPosted: Thu Mar 10, 2005 6:05 am    Post subject: Reply with quote

yes, you're right. I'm using IE, but I have to!!!

I tried the solutions of these links, and other png images are displayed transparent, but not the quota!

-> http://www.mystify.de/kuchen/trans/demo.php

this is the code oft the demo.php:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Datenspeichernutzungsdemo</title>
<style type="text/css">
body {
   background:   url("find.small.png");}
img {
   behavior:   url("pngbehavior.htc");
   }

</style>

</head>
<body>

<p>
<button onclick="var i = document.images[0]; i.src = 'chart.php'; i.style.width = '155px'; i.style.height = '155px';">quota</button>
&nbsp;
<button onclick="var i = document.images[0]; i.src = 'webfx.png'; i.style.width = '600px'; i.style.height = '200px';">webfx.png</button>
&nbsp;
<button onclick="var i = document.images[0]; i.src = 'Xheart.png'; i.style.width = '128px'; i.style.height = '128px';">Xheart.png</button>
</p>

<div  style="text-align: center;">
<?
echo '<img src="chart.php?id=', $_SESSION['userid'], '" align="center" hspace="0">';
?>


</div>


</body>
</html>


any ideas?
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 10, 2005 6:33 am    Post subject: Reply with quote

spiderblues wrote:
yes, you're right. I'm using IE, but I have to!!!

I tried the solutions of these links, and other png images are displayed transparent, but not the quota!

-> http://www.mystify.de/kuchen/trans/demo.php


Okay, that image is at least being created in a transparent way:



So we know that's not the problem...

Looking at the .htc file I see that your problem is there. You have a regular expressiong test (or two) that look like:

Code:
if (src == realSrc && /\.png$/i.test(src)) {


However, in your code when you do a swap with the javascript you're passing the src value as 'chart.php' for the image. Instantly the regular expression fails (because it's looking for .png at the end of the src string), and so the filter doesn't get applied.

Perhaps, just for speed's sake, you could try:

Code:
if (src == realSrc && /\.(png|php)$/i.test(src)) {


But you may be able to come up with a better solution yourself.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Warlock
Newbie


Joined: 16 Mar 2005
Posts: 4

PostPosted: Wed Mar 16, 2005 10:26 am    Post subject: User Quota Reply with quote

Hi i have the same problem
i replaced the function displayImage() in the script i use pngmask.htc with (png|php) but no Transparent Background so i put

.
.
.
ImagePNG($final,'test.png');
header("Content-type: image/png");
ImagePNG($final);
ImageDestroy($im);
ImageDestroy($final);
.
.
.

and i now have a png file without a aplha channel Sad so a transparent background not posible with the pngmask.htc
i use PHP v4.3.10 with GD 2.0.28 but i dont think that there the problem is.
i also saved the images from
http://www.mystify.de/kuchen/trans/demo.php
http://php.amnuts.com/test/user-quota/

and there is also no alpha channel on them Sad
any idea why??

Warlock
Back to top
View user's profile Send private message Send e-mail
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 17, 2005 4:49 am    Post subject: Reply with quote

At this point I'm willing to bet that the Microsoft filter only supports a .png extension. I tried out an example which should have worked:

Code:
<div style="text-align: center; width: 300px; height: 249px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://php.amnuts.com/test/user-quota/showquota.php?used=2878&quota=11192', sizingMethod='scale');"></div>


But instead you see an opaque image.

So what yo umight have to do is save the file and then use the saved .png as the source, rather than trying to dynamically create the image.

Bloody microsoft! Confused

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 17, 2005 4:54 am    Post subject: Re: User Quota Reply with quote

Hi Warlock - welcome to the board!

Warlock wrote:
http://www.mystify.de/kuchen/trans/demo.php
http://php.amnuts.com/test/user-quota/
and there is also no alpha channel on them Sad


There is alpha channel on the images, as you can see by viewing those examples in a browser such as Firefox. The problem is that IE on Windows doesn't fully support PNG alpha transparancy. You have to use an ActiveX object (the AlphaLoader filter) to render the alpha levels. Even IE 5.0 on a Mac fully supports PNG alpha channels!! This ActiveX object is buggy at best (can't have images on https, last I heard) and, as the above seems to suggest, it doesn't work with dynamic images even though the headers are correct.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Warlock
Newbie


Joined: 16 Mar 2005
Posts: 4

PostPosted: Thu Mar 17, 2005 9:45 am    Post subject: Alpha Channel Reply with quote

OK Microsoft is not what is should be.
i finf out that your png uses a transparant color and no alpha channel so i wrote my on script and now i have a png with an alpha cannel
http://proxy03.vdabwevelgem.be/steven_svg/alphatest/
and it works in IE to if you look at the two png images you wil see the difference on the edge of the pie the alpha channel is smoother.

Warlock
Back to top
View user's profile Send private message Send e-mail
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 17, 2005 12:11 pm    Post subject: Reply with quote

Are you resizing your pie at all, or creating it at that size? Unforunately, if I don't resize I get a wonderful 24-bit alpha, but if I resize it gets munged to 8-bit. Not sure why, but I mentioned it earlier today in a different thread (though I think that was on the dropshadow board). This would certainly be the reason for the pixelated image.

If you do resize, however, then I'd appreciate seeing your code to see where I'm going wrong. Smile Actually, I'd just appreciate it anyway, if you don't mind sharing? You can email it to me, if you like?

Cheers,

Andy


Last edited by amnuts on Thu Mar 17, 2005 12:20 pm; edited 2 times in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Mar 17, 2005 12:18 pm    Post subject: Reply with quote

Oh, also, of course your .htc file wont work with my image. In that file youre doing a check against:

else if (/\.php$/i.test(realSrc))

Which tests of '.php' being at the end of the image. That is not the case for the link to give to my site, as the end of the image is quota=11006, the whole source being:

http://php.amnuts.com/test/user-quota/showquota.php?used=4885&quota=11006

So your .htc file is actually flawed for the dynamically driven url with a query string.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Warlock
Newbie


Joined: 16 Mar 2005
Posts: 4

PostPosted: Fri Mar 18, 2005 10:27 am    Post subject: Reply with quote

yes i'm resizing my pie i multiply my pie width by 2 or more

http://warlock.sytes.net/3d_pie/ here i use pie width * 3 to craete & before sending it to the brouwere i devide it by 3 Wink

the *.htc i don't use fore

ok

imagealphablending($im, true);
imagesavealpha($final, false);
need to be on al your images ImageCreateTrueColor() or ImageCreate()
imagesavealpha($final, true);
imagealphablending($im, false);

also i use on
imageantialias($....,true);
al my images (2 for now i only create a pie without a legend)

so if you change your function _displayImage() to http://warlock.sytes.net/class.userquota/function_displayImage.txt
http://warlock.sytes.net/class.userquota/test.php
you wil see improvement on your pie in mozilla for IE you need the fillter

i also found out to use ImageCreate() on the first image i create the big one and ImageCreateTrueColor() the smale one i don't know why but it works to create an image with an reall alpha channel

OK ill be away untill monday (i'm from belguim) so if you still need help i'm at your service by then Very Happy or if you still need to see my script
Back to top
View user's profile Send private message Send e-mail
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Fri Mar 18, 2005 10:48 am    Post subject: Reply with quote

Warlock wrote:
yes i'm resizing my pie i multiply my pie width by 2 or more

http://warlock.sytes.net/3d_pie/ here i use pie width * 3 to craete & before sending it to the brouwere i devide it by 3 Wink


And it looks good, too!

Warlock wrote:
http://warlock.sytes.net/class.userquota/test.php
you wil see improvement on your pie in mozilla for IE you need the fillter


Hmm.. I looked at this on both Firefox and IE5.5, and in both it looked messed up.

Warlock wrote:
i also found out to use ImageCreate() on the first image i create the big one and ImageCreateTrueColor() the smale one i don't know why but it works to create an image with an reall alpha channel


Wow, that's odd! You're really think it'd be the other way round, wouldn't you? But, as with a lo of things, you sometimes only find the right answer by trial and error or just stumbling on it.

Thanks for the code, Warlock! I'm going to try to have a look at it this weekend and improve the user-quota class.

Cheers!

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Warlock
Newbie


Joined: 16 Mar 2005
Posts: 4

PostPosted: Mon Mar 21, 2005 7:45 am    Post subject: Reply with quote

ok this link looks messed up
http://warlock.sytes.net/class.userquota/
but i put it now on a background zo you can see the improofmend on the pie. the legend is for later Wink
i also improofd my 3D pie
[b]http://warlock.sytes.net/3d_pie_deluxe/

I fond i way to improof the drawing speed if you take a look you wil see the pie is draw faster than befour and is multieply it by 5
here are the links to the images so you can checkout the big one every time a pie is made.
http://warlock.sytes.net/3d_pie_deluxe/big.png
http://warlock.sytes.net/3d_pie_deluxe/small.png

im still working on my pie but i looks ok i guess i'm using sessions to transfer my pie data (colors values witdh ....) but i found out that php 4.3.10 and 5.0.3 are different in that way the script working fine on PHP 4.3.10 but on PHP 5.0.3 not Sad my $value array's are not reset when i want to generate a new pie Sad i fixed it for now but if you know a good way i would appreciate it.

how is your pie going.
did my tip's help??[/b]
Back to top
View user's profile Send private message Send e-mail
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> User Quota All times are GMT - 5 Hours
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group