Vector Graphics in Gadget

Hot Topic

JScript
Markup Performance
VMR9 Renderless with YUV Mixer mode black screen issue
How to play DVD disk in windowless mode?
Sound card driver causes blue screen
MIME Types
IMFPresentationDescriptor::Clone
Work with ScheduledControlList from JavaScript
Option to stream or download
Animating Width and Height

Audio and Video

HD DVD Simulator on laptop
Question about how a element's opacity affecting its children.
Programatically setting the default playback device (and recording device)
Extending Classes in HDi - not working in Emulator
i need help with ma audio controller
Pixel Buffer Questions
help me submit my gadget guys
disk I/O meter gadget???
style:display="none" and style:opacity="0"
About docked and undocked gadgets

Vector Graphics in Gadget

I am making a gadget that will be resizeable from the settings menu (when undocked), and I was wondering if the sidebar had any type of native support for vector graphics so I wouldn't have to make and distribute separate background images to maintain a high quality when it is scaled up.  I'm assuming not since it is rendered by IE, but it doesn't hurt to ask.  Thanks.

Answer this question

Vector Graphics in Gadget

  • pogmothoin

    Excellent. Thanks

  • Mamatha

    <v:shape style="top:0px; left:0px; width:130px; height:57px;" path="m 0,0 l 100,0, 100,100, 0,100 x e" stroked="true" strokecolor="white" strokeweight="1" filled="true" fillcolor="black" coordsize="100,100"/>

    Should give you a black box with a white surround.

    FYI. I'm programmatically adding the Shapes, once I know how many CPU's there are.

  • JamesPK

    You need to display something first! Shapetype defines a shape, to display it you need to add:

    <v:shape style="top:0px; left:0px; width:100px; height:50px;" type="#box" strokecolor="white" fillcolor="black" />

    Regard "caching", yes Sidebar (well, IE actually) does cache Gadgets so if you make a change, you should always exit and reload Sidebar.

  • RyanB88

    Hi. Thank you for pointing me into that direction, but I'm havin troubles using it:

    What I've done so far:
    * Added the xmlns to the head (<HTML xmlns:v="urn:schemas-microsoft-com:vml">)
    * Added the v\:* { behaviour:url(#default#vml); }
    * Added <v:shapetype id="box" path="m 0,0 l 100,0, 100,100, 0,100 x e" stroked="true" strokeweight="1" filled="true" coordsize="100,100"></v:shapetype> to the body section

    But nothing at all is displayed Am I missing something

    Could it be Sidebar is somehow "caching" the old gadget Because I have removed a background image from the html file (but left it inside the directory) files and the gadget still displayed the background image, even after re-adding the component ! Maybe I'm just seeing some previous version (I checked the version in the gadget directory, it's the one that should be displayed).

    I am somewhat puzzled ..

  • vic07

    Phew .. new problems arise ... (probably related to Antialiasing)

    I have created http://thomaslinder.at/temp/Clipboard02.gif

    As you can see, there is a red border around it. Currently I am using a transparent background image and I'm drawing a round rectangle. When I stroke it, only the borders have some sort of red shadows; if I don't stroke it, the red border is all around (as you can see in the picture).

    The code I currently use:

    <v:roundrect stroked="false" arcsize="20%" style="position:absolute; top:0px; left:0px; width:129px;height:56px">
    <v:fill type=gradient color="blue" color2="yellow"/>
    <!-- <v:stroke weight="2px" color="black" /> -->
    </v:roundrect>

    whereas my body as a completely transparent background image.

    Any ideas Or is that what I'm trying to achieve not possible


  • XNA Rockstar

    Hi Jonathan.

    Thank you for your reply. Actually I got the code from your gadget (CPU Utilization), but I cannot find a <v:shape ...> declaration anywhere.

    Could you please give a very simple example which basically draws a single box inside a 130x57 px gadget I tried:

    <body onload="onLoad()" id="mainBody" onclick="openReplies()">

    <v:oval style="width:100pt; height:90pt" fillcolor="yellow"

    strokecolor="blue" strokeweight="2pt" />

    <div id="content">COM nicht geladen</div>

    </body>

    But well, no oval or anything else ...

  • Peter D.252325

    make sure the portions of the background underneath your antialiased graphics are not transparent. Transparent graphics (as from antialiasing) will result in display anomalies if shown on top of a transparent background image.

  • Matt Garnham

    Oh boy, I found the error ...

    It wasn't my styles ... it was the doctype definition I had at the top. I removed that for testing purposes and what happened, everything worked *argl*

    Maybe someone else can use this some time :)

     

    Thank you for your help (and your great gadgets) ... :)

     

    EDIT : Hmmm .. now it works with the doctype again ... this is really strange ...

  • JZ1000

    Well, already guessed so.

    So basically it's not possible drawing a partly transparent background. Looks like I'll have to revert to using background images *brrrr*. Thanks for your replies.

  • PQSIK

    You don't need to go quite that drastic. If you then look at Polaroid, you'll see I'm layering VML images on top of a transparent drop shadow.

    So long as you don't want your whole Gadget to be transparent, you can use something similar. You'll need a 100% transparent PNG file (blank.png) and a 100% black PNG file (border.png), both of which you can get from Polaroid. Add a background to your gadget.html file:

    <body ...>
    <g:background id="bodyBackground" src="blank.png" style="width:100%; height:100%" />
    ... (your VML needs to come after the background)


    Then in your Gadget startup code you need to add the black PNG and give it a soft edge to get your transparent borders:

    bodyImageSurroundBlur = bodyBackground.addImageObject("border.png", 0, 0);
    bodyImageSurroundBlur.width = document.body.style.width;
    bodyImageSurroundBlur.height = document.body.style.height;
    bodyImageSurroundBlur.softEdge = 10;


    Finally, make sure all your VML is inset at least 1 pixel more than the softEdge and what you'll end up with is your scalable VML with a nice drop shadow effect around it.

  • kopo

    You can with VML. Have a look at CPU Ulilization, Network Utilization or Asteroids. The two Utilization Gadgets do exactly what you're after and allow you to set the scaling in the settings page. Asteroids was just me demoing what can be done with DirectSound, VML and layered transparencies in a Gadget.
  • Vector Graphics in Gadget
Answer this question