XBox Live Gamercard Gadget
on 02.23.06, 09:17pm in windows • share on facebook • comments (16)
Now that the February CTP for Vista is public and Windows Sidebar has been unleashed to the masses, I thought it might be fun to walk through creating a simple gadget. And since I recently joined the cult of the XBox 360, why not put together a gadget that showed my XBox Live gamercard.
To start, I’d recommend jumping over to Lou’s blog to check out the basics as well as the "Development Overview" over on the MicrosoftGadgets.com blog to read up on sidebar basics. The first thing we’ll need to put in our gadget is it’s manifest, which is used to define the basic properties and copyright information about the gadget. For example, the gadget.xml for it looks like:
<?xml version="1.0" encoding="utf-8"?><gadget> <name>XBox GamerCard</name> <author>Steve Makofsky</author> <copyright>Copyright (C) 2006 Steve Makofsky</copyright> <description>Sidebar XBox GamerCard</description> <version value="1.0.0.0" MinPlatformVersion="0.1" /> <icon>icon.png</icon> <sidebar> <type>html</type> <code>gadget.html</code> <permissions>full</permissions> </sidebar></gadget>
Before I get into the actual gadget’s code, you’ll want to head on over to mygamercard.net to generate your gamercard. Mygamercard.net is a cool service – they allow you to convert your gamercard into images which makes it extremely easy to consume from a sidebar gadget.
Next, lets take a look at the actual gadget.html code:
<head>
<title>XBox Gamercard</title>
<style type="text/css">
body {
background-image:url('background.png'); background-repeat:no-repeat; margin:0px; width:130px; height:80px; }</style>
<script type="text/javascript"> window.external.OnUnDock = function() { gamecard.src = "http://card.mygamercard.net/<YOUR GAMERTAG>.jpg"; document.body.style.width = "199px"; document.body.style.height = "135px"; }
window.external.OnDock = function() { gamecard.src="http://card.mygamercard.net/micro/<YOUR GAMERTAG>.jpg"; document.body.style.width="130"; document.body.style.height="80"; } </script></head><body><p align="center"><img id="gamecard" src="http://card.mygamercard.net/micro/<YOUR GAMERTAG>.jpg"/></p></body></html>
Of course, you’ll want to change "<YOUR GAMERTAG>" to whatever your gamertag is.
The gadget also has 2 images – icon.png (the icon to display in the gadget picker), and background.png (which is a transparent background for the gadget).
That’s it. You can plop all 4 files into a gamercard.gadget folder under "%ProgramFiles%\Windows Sidebar\Gadgets", and you’ll be good to go. If people are interested, I can go ahead and also post a zipped up version of the gadget aswell.
Randy (February 23, 2006 @ 9:43 pm)
Well done
Matt (February 25, 2006 @ 6:53 am)
Thank you for this. I am testing vista, and an Xbox MVP and this is perfect. This is just what I was looking for. Thank you again.
Matt Gerlach, Xbox MVP
Matt (February 25, 2006 @ 7:55 am)
I inserted all 4 files, and I cant seem to get it to launch. Do I need to restart to get it to show?
I took all 4 files (edited for my gamertag) and placed them inside a folder “gamercard.gadget” and placed that in the desired folder.
Steve (February 25, 2006 @ 9:53 am)
Did you check the gadget picker?
Brandon (February 25, 2006 @ 1:15 pm)
I followed the instructions to the letter and was unable to get the Gadget to show up in the Gadget picker to add to the Sidebar.
Steve (February 25, 2006 @ 1:46 pm)
I’ve uploaded the .gadget to http://www.furrygoat.com/Software/Gadgets/Gamercard/gc.gadget
You should be able to run it and have it automatically add it to the Gadget picker.
Steve (February 25, 2006 @ 1:47 pm)
Or not. Not sure why Typepad is converting it to a .zip. Anyways, download the file, rename to .gadget and double click it.
Matt (February 25, 2006 @ 11:30 pm)
I am still having trouble doing so. I dont know why.
I downloaded that and placed it in the …sidebar/gadgets directory and it still does not show up.
Steve (February 26, 2006 @ 6:42 am)
Download the file, rename it to .gadget, and double click it.
Matt (February 26, 2006 @ 4:43 pm)
Ok, well this is what I did.
I downloaded the zip, and instead of putting those files into gamercard.gadget in the folder you said “”%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets”
I placed the folder gamercard.gadget (with the 4 files you provided) in “E:\Program Files\Windows Sidebar\Gadgets”
It now appears and works.
Thank you again for the files you created. I truly appreciate it.
Steve (February 26, 2006 @ 5:05 pm)
Wierd. Should work from either, but i’ll update the post.
Matt (February 27, 2006 @ 8:20 am)
Hey have you looked into the XDCP (Xbox Community Developer Program) program?
http://msmvps.com/blogs/glach/archive/2006/02/12/83330.aspx
Steve (February 27, 2006 @ 8:25 am)
Yes (I’m already on it).
Aaron (May 17, 2006 @ 3:29 pm)
I get an “Unable to load” error saying “Invalid version attribute “value”". I am running the Beta 2 version of vista if that matters??
Steve (May 17, 2006 @ 9:11 pm)
No idea what’s changed in Beta 2 Sidebar, I havent tried it yet. My guess is that something in their OM has altered slightly.
makoto (July 20, 2006 @ 11:58 am)
hry guys ive done everything im supposed to and when i access the gadget picker i get can see the xbox gamercard but it is shaded out and i am unable to press add…. any ideas ??