21 Oct, 2010

How to make a Windows Gadget in Windows 7

This is an introduction to developing windows gadgets on the Microsoft Windows 7 Operating System. A windows gadget is a small piece of UI that floats around on your desktop. This is the version 2 of the Windows Sidebar which appeared in Windows Vista operating system. All gadgets are simply a collection or group of HTML/JS(JScript)/CSS files and a bunch of assets described by a gadget.xml placed in a .gadget Folder. This tutorial assumes you know basic HTML and Javascript. Gadgets uses Jscript which is a minor variant and is more or less similar to Javascript.

Before jumping to How to make the windows gadget, lets see where the default Gadgets used by windows are present. We can always use those inbuilt gadgets as reference to make our windows gadget.

Finding the default gadgets on Windows 7

The default gadgets on Windows 7 are located in the drive (typically C:) you installed Windows, Under "Program Files\Windows Sidebar\Gadgets" folder, and any shared or additional gadgets in "Program Files\Windows Sidebar\Shared Gadgets". We can create gadgets in any of these folder provided we have Administrative Privileges to the system. If not we can place our apps in %localappdata%\Microsoft\Windows Sidebar\Gadgets, which usually expands to C:\users\<username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets.

Note: The AppData folder might be a hidden folder. Make sure to enable show hidden folders to view the folder.

Making a new Gadget, creating the folder Structure

Lets start making a simple gadget that counts down given the number of seconds to countdown to. That is the final output, and now lets start to make a new windows gadget. If you just want to skip the entire shebang and just get the files and figure out yourself, goto the end of this post and get the zip file for the gadget folder.

How to Make Windows Gadget

gadget.xml File

Use one of the folders above, and create a new folder. Countdown.gadget. Create a gadget.xml file inside this new folder. (If you see the windows examples, you can see this file is inside the en-US folder, this is for gadgets that support multiple languages.). For simplicity let us just ignore the language support.

Paste the following into the XML file and save it in UTF-8 Encoding. Notepad save as UTF-8 Encoding

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
        <name>CountDown</name>
        <namespace>windows.sdk</namespace>
        <version>1.0.0.0</version>
        <author name="digitalpbk">
                <info url="digitalpbk.com/?ref=gadget" text="digitalpbk.com"/>
                <logo src="logo.png" />
        </author>
        <copyright>digitalpbk.com</copyright>
        <description>Count Down gadget.</description>
        <icons>
                <icon height="48" width="48" src="icon.png" />
        </icons>
        <hosts>
                <host name="sidebar">

                        <!-- New autoscaleDPI node -->
                        <autoscaleDPI>true</autoscaleDPI>

                        <base type="HTML" apiVersion="1.0.0" src="main.html" />
                        <permissions>Full</permissions>
                        <platform minPlatformVersion="1.0" />
                        <defaultImage src="icon.png" />
                </host>
        </hosts>
</gadget>

The above code is almost self explanatory, but I will explain some of the important parts of it.

  • autoscaleDPI : For enablng automatic zooming of images in the widget
  • base : The src attribute deteremines the main HTML file that is shown when the widget is added to the desktop.
  • defaultImage : The image choosing the icon that is shown in the gadget selection window. A point to be added here is that the current working directory would be the .gadget folder we created. In the above xml file icon.png lies inside the .gadget directory. (alongside the gadget.xml file)

The main.html File

<html>
    <head>
        <title>Hello World</title>
        <script type="text/jscript" language="jscript">
            /* see /windows-gadgets/how-make-windows-gadget-windows-7 */
            System.Gadget.settingsUI = "settings.html";
            var timeLeft = 0;
            var iid = 0;
            function init()
            {
                var oBackground = document.getElementById("imgBackground");
                oBackground.src = "url(images/bg.png)";
                
                var oContent = document.getElementById("gadgetContent");
                if (System.Gadget.Settings.read("SettingExist") == true)
                    timeLeft = System.Gadget.Settings.read("settingsTimeOut");
                else
                    timeLeft = 600;
                iid = setInterval("tick()",1000);
            }
            function timeFormat(secs)
            {
                var t = new Date(1970,0,1);
                t.setSeconds(secs);
                var s = t.toTimeString().substr(0,8);
                if(secs > 86399)
                    s = Math.floor((t - Date.parse("1/1/70")) / 3600000) + s.substr(2);
                return s;
            }
            function tick(){ 
                var oContent = document.getElementById("gadgetContent");
                oContent.innerHTML = timeFormat(timeLeft--);
                if(timeLeft<0){
                    clearInterval(iid);
                    var oBackground = document.getElementById("imgBackground");
                    oBackground.src = "url(images/bgred.png)";
                    oContent.innerHTML = "";
                }
            }
            
            System.Gadget.onSettingsClosed = function(event)
            {
                if(event.closeAction == event.Action.commit)
                {
                    timeLeft = System.Gadget.Settings.read("settingsTimeOut");
                }
            }
        </script>
        <style>
        body { width:180px; height:80px; margin:0px;text-align:center; }
        #gadgetContent {  font-size:26px; font-weight:bold; color: white; font-family:courier new; margin-top:20px;}
        </style>
    </head>
    
    <body onload="init()">
        <g:background id="imgBackground" style="width:180px;height:80px;padding:5px;">
            <div id="gadgetContent"></div>
            <a href="">digitalpbk</a>
        </g:background>
    </body>
</html>

The Settings.html File

<html>
    <head>
        <title>Countdown Settings</title>
        <script type="text/jscript" language="jscript">
        
        /* see /windows-gadgets/how-make-windows-gadget-windows-7 */
        
        function init() {
            if (System.Gadget.Settings.read("SettingExist") == true)
                timeout.value = System.Gadget.Settings.read( "settingsTimeOut" );
            else
                timeout.value = "600";
                
            System.Gadget.onSettingsClosing = SettingsClosing;
        }
        
        function processed(str) {
            if(str.indexOf(":") == -1) {
                return parseInt(str);
            }
            
            var parts = str.split(":");
            var ret = 0;
            var d = 1;
            for(part in parts.reverse()) {
                ret += parts[part]*d;
                d*=60;
                if(d==60*3600){
                    break;
                }
            }
            return ret;
        }
        
        function SettingsClosing(event)
        {
            // Save the settings if the user clicked OK.
            if (event.closeAction == event.Action.commit)
            {
                System.Gadget.Settings.write(
                    "settingsTimeOut", processed(timeout.value));
                    
                System.Gadget.Settings.write("SettingExist", true);
            }
            // Allow the Settings dialog to close.
            event.cancel = false;
        }


        </script>
        <style>
        body { width:180px; height:120px; margin:0px; }
        </style>
    </head>
    
    <body onload="init()">
        TimeOut: <input type="text" id="timeout" name="timeout" size="12" maxlength="9"/>
    </body>
</html>
To be continued... :)

Just keep me posted about your newly made gadgets. :)

PS: To try out the gadget

Extract the zip file to one of these folders depending on 64bit or 32bit. C:\Program Files (x86)\Windows Sidebar\Gadgets or C:\Program FilesWindows Sidebar\Gadgets


1 Attachment
Countdown.Gadget.zip37.0 KB
Comments (7) Post a comment
  • developing windows gadgets

    this was posted in 21 Oct, 2010 ... i wonder why you stopped but i'm really interested in learning more about windows gadgets , could you please help me with references or more tutorials

    By Ahmad on 15 Nov, 2011 Reply
  • works fine - thanks for the sample !

    Thank you for this article and sample.
    Coincidentally this is exactly what I was looking for in a gadget (countdown/timer).
    I have it working. Love it for it's simplicity.
    Now I need to:
    1. Add a sound clip to play on expiry (bell or mp3 or something)
    2. Allow it to be reset and restarted after expiry (current version won't do this)
    3. Add a user input var for the message on expiry. (eg. Eggs are cooked !).

    Thanks again,

    Brad

    By Brad on 07 Aug, 2011 Reply
  • Cannot view this example gadget on my desktop

    I downloaded this example gadget on windows 7 system but don't see it on the list of gadgets when I right click and hit gadgets button. I can see all of the other standard gadgets but not any custom created gadgets.
    Please help.
    Thanks
    D

    By Anonymous on 15 Jul, 2011 Reply
    • Where did you put the Gadget folder?

      Can you please tell where you have extracted the gadget zip file to ?
      By digitalpbk on 16 Jul, 2011 Reply
      • I download in the
        C:\Users\<myuserid>\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Countdown.Gadget

        still does not show up ..

        By Anonymous on 21 Mar, 2012 Reply
        • Program Files

          Can you try the following path:

          C:\Program Files (x86)\Windows Sidebar\Gadgets
          or
          C:\Program FilesWindows Sidebar\Gadgets

          By digitalpbk on 21 Mar, 2012 Reply
          • Thanks Just tested with C:\Program FilesWindows Sidebar\Gadgets and it works ..

            May be you should put it as part of the article.

            Thanks again ... Nice article !!

            By Anonymous on 21 Mar, 2012 Reply
You may also like



Email Newsletter
Email:
Popular Posts
Recent Posts
Tags
Random photo
Radha Nagar Beach Radha Nagar Beach in Havelock Island Andaman
On Facebook
Recent Comments


digitalpbk