logo

How to create a basic html based Windows 7 gadget

So how do you create a basic windows 7 gadget?  I have begun building an html based Windows 7 gadget in order to design a touchscreen gui for Windows 7 but here are the basics of an html based gadget.

Simple.gadget (folder)

index.html

gadget.xml

logo.png

1.  Create a directory and name it Simple.gadget, feel free to rename it as long as the file appears as such : *.gadget

2. Create your index.html (here is a basic html file, but this is your interface, so feel free to go crazy, use css, javascript, etc. – gadgets are basically websites running on your desktop)

<head>
<title>Simple Gadget</title>
</head>
<body style="width:200px; height:200px;">
<p>Hello World</p>
</body>
</html>

3. Create a cool logo! something simple maybe?  Here I’ll use this:

logo I labeled this image logo.png

4. Create your gadget.xml folder

You’ll need 3 things here: your html file name/location, your gadgets name, and any other side information you want to add in – there is a lot you can do with this file, but this is just a simple gadget.

This folder will contain the following code:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>simple</name>
<version>1.0.0.0</version>
<author name="Brandon Copley">
<info url="www.brandoncopley.com" />
<logo src="logo.png"/>
</author>
<copyright>&#169; Your Name.</copyright>
<description>This is a simple gadget.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="index.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>

And there you have it a simple html based Windows 7 gadget.  There are two things to watch out for.  NAMING CONVENTIONS!!! your gadget.xml file MUST be called gadget.xml, feel free to name index.html whatever you want – I even use .hta’s in order for the file to be able to access the windows file system – more on that later.  Also your gadget name in the xml file must be the same name used as your folder name so if you want to name your gadget “cookbook” you must change the folder to cookbook.gadget also.

Installing your gadget

In order to install your gadget you must take note of 2 things.

1. As you develop your gadget you don’t have to install it, you can simply drag your simple.gadget folder over to the C:\Program Files\Windows Sidebar\Gadgets folder with all of the other gadgets.

2. When you actually go to install your gadget you must take your simple.gadget folder and compress it to a zip file.

simple.gadget.zip

The next step is removing the “.zip” from the folder title and then you can go ahead and double click to install the gadget.

It’s that simple.

NOTE: If you are running windows 64bit you CANNOT run flash files from your .html, why? because there is NO 64 bit version of flash yet therefore you must close out of all of your gadgets, run C:\Program Files (x86)\Windows Sidebar\sidebar.exe and then install your gadget to that Gadget folder.

So there ya go – how to create a basic html based Windows 7 gadget.

Source Files: simple.Gadget.zip

  1. krm

    Thankz
    i really wanted to know about these

  2. Johnson

    Hi, I downloaded the source file simple.Gadget.zip, then removed the “.zip” from the folder title and then double click to install the gadget. But I did see the gadget installed. Do you know the reason?

  3. admin

    Unfortunately I don’t, it’s been a long time since I’ve looked at this.

  4. Johnson

    Thanks for your reply. My question is that I tried to put the file in C:\Program Files\Windows Sidebar\Gadgets folder, I could see the gadget installed. However, if I want to install the gadget by compressing the folder to .zip, and then remove the zip and click install. Nothing can see….
    Can you answer me this problem? My OS is Windows 7 64 bit. Thanks again

  5. martin

    Awesome! Its in fact awesome article, I have got much clear idea regarding from this post.

  6. Jason

    Hello there! This post couldn’t be written any better!
    Reading through this post reminds me of my previous room mate!
    He always kept talking about this. I will forward this article to him.
    Fairly certain he will have a good read. Many thanks
    for sharing!

  7. Jack Liu

    Thank you. Good article! I did mine 🙂 However I have the same problem as Johnson’s: installing .gadget file does not work. I ended up copying the folder to C:\Program Files\Windows Sidebar\Gadgets

Leave a Reply

*

captcha *