none
Opacity in Sidebar Gadget

    Question

  • 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].

    Friday, December 08, 2006 2:53 PM

Answers

  • 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);

    Tuesday, January 09, 2007 9:30 AM

All replies

  • 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.
    Friday, December 08, 2006 4:55 PM
  • 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);

    Tuesday, January 09, 2007 9:30 AM
  • 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 ;).

     

    Tuesday, January 09, 2007 10:11 AM
  • 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.

    Wednesday, January 31, 2007 5:34 AM
  • A PNG that's totally black/white with 100% opacity on all pixels.
    Wednesday, January 31, 2007 9:01 AM
  • 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?
    Tuesday, February 06, 2007 6:54 AM
  • John Hax,

    Are you getting pink text?

     

    Net

    Tuesday, February 06, 2007 6:43 PM
  •  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.
    Tuesday, February 06, 2007 7:23 PM
  • thanks, Jonathan. And your works are full of imagination... But Polaroid is too slow on my machine :)
    Wednesday, February 07, 2007 5:45 AM