Skip to main content

Make a gadget

By
Creating gadgets for Windows is very easy. So easy, in fact a class 8 kid can make them, provided he knows basic stuff like HTML, JavaScript and CSS. Even then there are issues that are faced when you start doing things the first time. So I may just be able to get you started. By the end of it, you will probably say to yourself that this was just sooooo easy.

First thing first. You must know HTML, CSS and basic JavaScript, otherwise what I will write here will look like Sumerian to you. So if you wish to take a look and brush up your skills, here are the links to go. I'll wait.



Yes I am a particular fan of w3schools, mainly because they have got a code testing playground, invaluable for immediate testing and experimentation. 

Now that you are ready, lets get started.

The Bare Layout of a Windows Sidebar Gadget
A gadget is simply a webpage with its scripts, stylesheets and everything, only that it is zipped into an archive such that the .zip extension is smartly changed to .gadget. So if you already design webpages, all you need to know is how to create a manifest file and zip everything into a .gadget file. A manifest is nothing scary, just a file that contains data about the data or metadata. It will contain information like who you are, who programmed it, the name of the gadget, the HTML file to be used, the version number and all the information you want to share, all in neat tags. I'll come to that later. 

So, now the bare layout is this,

Basic layout of a Windows Sidebar gadget
Yes, this whole thing is compressed into a zip archive and the extension is changed to .gadget.

So first let us create the Webpage

HTML

I intend to keep this very very simple. So lets create a simple HTML. But wait, I don't like those Hello World programs. So lets make something simple, but still pretty cool.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <style type="text/css">
    </style>
    <script>
      <!--
      //-->
    </script>
  </head>
  <body>
   </body>
</html>

Now that's a skeleton HTML. So I will add a style, a script, javascript that is and some page elements.
First lets write the javascript.

JAVASCRIPT

function runChrome() 
{ 
var shell = new ActiveXObject("WScript.shell"); 
if (shell)
{ 
shell.run("chrome.exe"); 
return true;
} 
else
{
alert("Google Chrome is not installed on your system."); 
}
}


Pretty simple. Just getting some help of the Windows Scripting Host. It just fires chrome.exe, provided it is installed, otherwise a nasty alert will popup on the screen.

CSS

In this very basic example, I don't feel like using an external CSS file. But for more serious projects, it is almost a rule to keep CSS files in their own directories and sourcing them from the HTML code. But here our CSS code is too basic to warrant any extra attention.


<style type="text/css">
body
{
       margin: 0;
       width: 133px;
       height: 133px;
}
    </style>
Just setting the size of the gadget and nothing else.

Now it is safe to go back to the HTML.

HTML


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <style type="text/css">
body
{
       margin: 0;
       width: 133px;
       height: 133px;
}
    </style>
    <script language="JavaScript" src="js/chrome.js"></script>
    <script>
      <!--
      function roll(img_name, img_src)
    {
    document[img_name].src = img_src;
    }

      //-->
    </script>
  </head>
  <body background="images/bg.png">
    <table border="0">
      <tr>
        <td>
<img height="128" src="images/background.png" onclick="return runChrome()" name="sub_but" 
onmouseover="roll('sub_but','images/newBackground.png')" 
onmouseout="roll('sub_but','images/background.png')" 
onmousedown="roll('sub_but','images/background.png')" 
onmouseup="roll('sub_but','images/newBackground.png')">
</td>
</tr>
    </table>
  </body>
</html>

Let's name it mychrome.html

Now look carefully, I have inserted an extra javascript inside as well. It just has a function roll that just accepts the name and source image as parameters and sets them to the tag owner. Such one line functions are useless and shorthands are prefereable but here I still felt like mentioning. 

The rest is simple and self explanatory, call the mouse action events and pass the parameters to the function. Ofcourse, make sure you have the images as seen in those pngs.

Now just create the XML file such that the name of the HTML is mentioned exactly in the XML like this.

XML


<?xml version="1.0" encoding="utf-8" ?>
<gadget> 
<name>myChrome</name> 
<namespace>Sarthak Ganguly</namespace> 
<version>1.0.0.0</version> 
<author name="Sarthak Ganguly"> 
<info url="http://sgownblog.blogspot.com" text="Vist my blog" /> 
<logo src="images/logo.png" /> 
</author> 
<copyright>&#0169; 2011</copyright> 
<description>Chrome launcher application gadget with Metro UI</description> 
<icons> 
<icon width="128" height="128" src="images/logo.png" /> 
</icons> 
<hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="myChrome.html" /> <permissions>Full</permissions> <platform minPlatformVersion="0.3" /> 
</host> </hosts> 
</gadget>

Now just zip everything. A <filename>.zip is created. Now rename it to <filename>.gadget. The icon will immediately change and you will have your gadget ready. For example download this gadget and see the interiors by just extracting it.


Hope you enjoyed reading this article. Please share if it helped you. Happy Coding!



Labels:

Comments

Post a Comment

No spam please :)

Popular posts from this blog

Operational Situational Summary - Ukraine 2 March

By
From a glance at the map and the news reports, it appears that the Russian advance has been very slow or even checked. However, a deeper look shows the situation has worsened significantly for Ukraine. That this happened as per my expectation in the past few posts makes me feel worse. In the North, the Russian forces have already encircled Chernihiv in the past couple of days. This is not yet fully updated on this map. The two strong armored spearheads from Konotop (which had also fallen) are currently holding in Pryluky and Nizhyn. The Chernihiv garrison probably has a day or two before the Russians reach Kozelets. Then any breakout attempt to Kyiv will become extremely difficult and will likely result in very heavy losses. It is to be expected that this city too, will fall soon without affecting the battle of Kyiv. This is bad for Ukraine. Now that the International Community has rallied for Ukraine, the previous fears of Russia dealing with breakaway republics in the East should be ...
Post a Comment
Read more

Saraswati Puja and Valentine's Day Coincide

By
I used to hear this a lot - for Bengalis (Bengali Hindus), Saraswati Pujo is equivalent to the Valentine's Day . Girls would wear yellow sarees and braid their hair, while guys will be wearing yellow punjabees and white dhoti or pajama.  This time on Feb 14, 2024, they fell on the same day. Woke up pretty early in the morning, showered, wore the dhuti and uttiyo and did Saraswati Puja. Most of the mantras I have got by heart now. After the pushpanjali , I was done and we (my mother and I) could then break our fast with the Mahaprasad . Took a day off for the day, but still joined for a quick catchup call.  This is how she looks like. There is a bit of a history here. Usually, Hindus get the vigraha from the shop every year, worship and then do visarjan (immersion) in a river or pond. However, she is with us since I was in class IX. When I was in Standard X, my grandmother had died. As part of the souch (relatively inauspicious greiving period), we could not get a new vigra...
Post a Comment
Read more

Growing up

By
Time affects everything and everyone We all grow up. After college, friends go places, to different states and far away countries. You get less and less time. Some go for higher studies, again, in other states. Parents get older. Then friends start getting married. First it’s usually the girls. One by one, your crushes tie the knot. You dismiss it, you are still young. Then your guy friends start getting married too. Your circle shrinks. In the end you look around. All you are left with are ideological nutjobs, immature imbeciles, idealistic crazies, bohemian hippies, or other misfits. Do you really belong here? Okay, that was too harsh. But you think. You say to yourself, ‘ dil to baccha hai jee ’.  Okay, fair enough. And then... Then, you see a growing pot belly. Something you always despised. Your dad had one (he still does). After taking a shower, you look at the mirror. You are losing hair. You search on Amazon for hair growing products - it is too much of a hassle. Hair trans...
Post a Comment
Read more