Submit My Question - Recent Questions - Recent Answer

Msdn Tech >> Gadgets >> Sidebar Gadget Development

Possiable to have text with no background or transparent background

I'd like to have text just floating with no background at all how would I do that.

[83 byte] By [TobyBroom] at [2008-2-19]

«« How to print a file Rich Text Format
»» Reversing a lists order in excel for my macro

# 1

Yes, your gadget.html BODY needs to include:

<g:background id="bodyBackground" src="blank.png" style="width:100%; height:100%" />

blank.png needs to be a 100% transparent image of any size.

Then add the text via:

<g:background>.addTextObject(<text>, <font name>, <font size>, <colour>, <x>, <y>);

eg:

bodyText = bodyBackground.addTextObject("Some text", "Arial", 20, "Black", 50, 50);

For reference, have look at the Sidebar Graphics reference

JonathanAbbott at 2007-9-3 >

top of Msdn Tech,Gadgets,Sidebar Gadget Development...

# 2

Sorry, the MSDN documents are a just useless for me, I can't understand them at all.

<body>

<g:background id="bodyBackground" src="blank.png" style="width:100%; height:100%" />

<g:background>bodyText = bodyBackground.addTextObject("Some text", "Segoe UI", 8, "White", 0, 0);</g:background>

</body>

This doesn't work.

how do I make my some text be a variable?

Sorry for the newbie questions, I think I got the rest of what I want to do sorted (except maybe the System.Gadget.Settings)

TobyBroom at 2007-9-3 >

# 3

Try:

<body>
<g:background id="bodyBackground" src="blank.png" style="width:100%; height:100%" />

<script language="JavaScript">
bodyText = bodyBackground.addTextObject("Some text", "Segoe UI", 8, "White", 0, 0);
</script>
</body>

See my comments in this thread for how to handle Settings.

JonathanAbbott at 2007-9-3 >

# 4

Thanks

I have this working

the style tag seem to make the text dissapear?

If I load a non blank png, the picture is offset to the right by quite a bit, therefore you can't see anything, plus you get a weired halo floating away from the main part of the picture and the text.

If I scale up the font size of the text I get these little dot's beneeth the text?

TobyBroom at 2007-9-3 >

# 5

You must specify the gadget size, which is probably why the style tag caused a problem. You'll also want to turn the margin off

eg. <body style="width:200px; height:200px; margin:0px;">

The image offset, could be the scaling bug. Try offsetting it by half the difference between the original image size and it's scaled size. eg Image is 300x400, and your Gadget is 200x100, place the image at -50, -150 (ie. [ x ]-(300-200)/2, [ y ]-(400-100)/2) )

What scale do you see the white dots? Could be related to the margin bug, or something new.

JonathanAbbott at 2007-9-3 >

# 6

Here's the white dot's

dots

at 8pt you don't see them but at 10+ they just get worse.

I put in this code:

& got this

more weiredness

the font looks a bit off like it streched up from a smaller size

here the offset thing

offset

Nothing like a dumb person to break everything!!!

TobyBroom at 2007-9-3 >

# 7

You've got a typo on the margin which might be causing the dots, strangely I can't reproduce it though:

Yes, the text scaling looks aweful with addTextObject! My 17 year old Archimedes can de a better job of aliased text!

offset - again, you need to set the margin

JonathanAbbott at 2007-9-3 >

# 8

I think I'm just going to put it on black background, looks too bad on transparent, thanks for all your help.

TobyBroom at 2007-9-3 >

Gadgets Hot Topic

Gadgets New Topic

Gadgets

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech