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

yoga80
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 ...
sic0198
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.
GrandpaB
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.
Peterbrown77
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.
Paps
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 ..
Barry Kwok
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.
js123
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:roundrect>

whereas my body as a completely transparent background image.

Any ideas Or is that what I'm trying to achieve not possible
NET PR
Excellent. Thanks
quame
<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.
TwilightBrigade
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.
D119
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 ...
Vector Graphics in Gadget

Answer this question