Zvona

I'm facing a problem, when setting opacity in Sidebar Gadget. Gadget gets the opacity, but it has purple background instead of it's parent (body) background.

Web Gadget is working correctly by setting the alpha filter, but Sidebar Gadget is not displayed correctly - no matter whether I'm using oObj.style.filter = "alpha(opacity=[int value])"; or System.Gadget.opacity = [int value].




Re: Sidebar Gadget Development Opacity in Sidebar Gadget

Jonathan Abbott

You've come across the dreaded "I see pink" problem!

It happens when you have semitransparent elements overlayed. The only thing you can do, is ensure no semitransparent pixels overlap.

The alternative, is to use <g:background> and add the images to it. I've never tried this, so I'm not even sure it can handle multiple transparencies overlayed.

The other problem you may come across, is if you're relying on "background=..." - this doesn't always work.  Make sure you use ' System.Gadget.background = "url(...)" ' to set the background.




Re: Sidebar Gadget Development Opacity in Sidebar Gadget

khamlon

there's a way to use transparency in gadgets with the <g:background /> but that request some tweak :

you'll need 3 pictures :

  • your transparent background
  • a totally black transparent picture (same size as your gadget)
  • a totally white transparent picutre (same size as your gadget)

then use it like this :

<g:background src="images/black_background.png" id="gadgetBg" style="position:absolute;left:0;width:130px;height:130px;top:0;z-index:-999;" />
<img id="dropHere" src="images/white_background.png" style="z-index:10;"/>

and in the onload function of your gadget put this :

gadgetBg.addImageObject("images/myBackground.png",0,0);






Re: Sidebar Gadget Development Opacity in Sidebar Gadget

Zvona

Thank you for the answers.

I realised earlier that solution similar to khamlon's example is the best way of doing that. My problem occurred when setting a partial transparency on separate section of gadget. Thus I'd have had to add a separate, non-transparent background to that section.

I kept it simple: the partial transparency wasn't essential, so I left it out from the Sidebar Gadget and applied it only into web, where it works correctly.

However, the whole process taught me some other important lessons of distinction between Vista Gadgets and "normal" application development on web ;).






Re: Sidebar Gadget Development Opacity in Sidebar Gadget

John Hax

What is "totally black transparent" and "totally white transparent picutre"

I never makes semi-transparent png works...unless it is inserted into g:background and have a non-transparent pixel below it.






Re: Sidebar Gadget Development Opacity in Sidebar Gadget

Jonathan Abbott

A PNG that's totally black/white with 100% opacity on all pixels.




Re: Sidebar Gadget Development Opacity in Sidebar Gadget

John Hax

I still can not make semi-transparent works if there is no obscure pixel below it. Can anyone give me a small sample which use this 2 black/white transparent png trick




Re: Sidebar Gadget Development Opacity in Sidebar Gadget

Kris Cavitt

John Hax,

Are you getting pink text

Net





Re: Sidebar Gadget Development Opacity in Sidebar Gadget

Jonathan Abbott

John Hax wrote:
I still can not make semi-transparent works if there is no obscure pixel below it. Can anyone give me a small sample which use this 2 black/white transparent png trick


Forget that trick, I don't see what it's supposed to do beyond the usual methods. If you just want a transparent background, you have two methods:
  1. System.Gadget.background = "myBackground.png";
  2. <g:background src="myBackground.png" style="width:100%; height:100%;" />

If you want to overlay partially transparent images, use the method 2 and add the images to it - but you'll lose the ability to put events on it. This is the method I use in Polaroid to get the surrounding white and dropshadow borders. eg.

<g:background id="gBackground" src="myBackground.png" style="..." />
...
gBackground.addImageObject("myImage.png", <xpos>, <ypos>);


If you need events assigned to the graphics, you can overlay partially transparent images with method 1, so long as the underlying image pixels are either 100% or 0% transparent where the image pixels above are partially transparent - otherwise you'll get pink pixels. This is the method I used in Media Player.


There is also a 3rd method just to confuse the matter further. It's a play on method 2, but gives you more control over adding/removing images and allows you to layer over other elements. Like method 1 though, you need to ensure the underlying pixels are either 100% or 0% transparent. v:image:

<g:background src="myBackground.png" style="..." />
<v:image src="myImage.png" style="..." />

NOTE: You'll need to add the VML tag to the HTML line: i.e. <HTML xmlns:v="urnTongue Tiedchemas-microsoft-com:vml">

This is the method I use in Asteroids to overlay the semi-transparent border around the inside of the cabinet image.

Please be aware of all the bugs with these methods. If you get any strange behaviour, look on the known bugs list, where I've documented around a dozen bugs relating to backgrounds.




Re: Sidebar Gadget Development Opacity in Sidebar Gadget

John Hax

thanks, Jonathan. And your works are full of imagination... But Polaroid is too slow on my machine :)