Windows LiveWindows Live™
 
 
Jonathan 的个人资料Jon's Vista Gadgets Blog日志列表 工具 帮助

日志
    3月9日

    Array shuffling

    A user pointed out to me that the Shuffle code in Desktop Wallpaper wasn't very good and very kindly provided an example of how to extend Array functionality with Array prototyping. So here's two array extensions I coded to improve the shuffle:

    // shuffle array
    Array.prototype.shuffle = function() {
      var elements = this.length;

      // step through the array
      for (var j=0; j<elements; j++)
        this.swap(j, Math.floor(elements * Math.random()));

      return this;
    }

    // swap array elements
    Array.prototype.swap = function(a, b) {
      var tmp = this[a];
      this[a] = this[b];
      this[b] = tmp;
    }

    To shuffle an array, simply use "<arrayname>.shuffle();" and to swap array elements over, use "<arrayname>.swap(<e1>, <e2>);"

    10:34 | 添加评论 | 固定链接 | 写入日志

    Optimizing graphics in Gadgets

    One thing I keep seeing in Gadgets, which really bugs me is graphics file sizes.  Natively saved PNG files from Paint/Photoshop are huge and very inefficient and with readily available tools can be shrunk considerably.  For example.

    "Yahoo! Search" show this to good effect, they've stripped out half of the colour schemes due to the size.  In it's current form, the Gadget is 2.95mb in size.  Running it though a lossless PNG optimizer brings this down to 2.65mb - 10% smaller.

    Another annoyance is thumbs.db files.  I've noticed lots of Gadgets (mainly commercial) where the packagers haven't bothered to remove these unnecessary files.  "Yahoo! Search" being another example.  With the PNG optimization and these files remove the Gadget comes down to 2.02mb - 31% smaller.

    My advice, before you package your Gadget file.  Run all the PNG files through something like PNGOut.  The DOS version is free, or you can buy the Window version here.  Then make sure you don't have any thumbs.db files if you've created the images on XP.

    Now this is just an example of bad packaging and doesn't show really large file reductions.  By optimizing Asteroids and Media Player, the Gadget file sizes were reduced by 50% in the case of Asteroids and 35% in the case of Media Player.


    10:10 | 添加评论 | 固定链接 | 写入日志
    2月25日

    Gadget basics

    If you're new to Gadgets, it can be a little confusing. So here's the basics to creating one:
    1. Create a folder for your Gadget in "C:\Users\<username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets". This can be called whatever you like, but it must end with ".gadget" otherwise your Gadget won't appear in the Sidebar Gallery.
    eg. "myTestGadget.gadget"
    2. Within your newly created folder create a gadget.xml file. This contains information such as the name, icon and description of your Gadget, I've highlighted in Blue the only sections you need be concerned with at the moment.
    <?xml version="1.0" encoding="utf-8" ?>
    <gadget>
    <name>My test Gadget</name>
    <author name="Jonathan Abbott">
    <logo src="images\icon.png" />
    </author>
    <copyright>25th February 2007</copyright>
    <description>A test Gadget, which does very little.</description>
    <icons>
    <icon width="64" height="64" src="images\icon.png" />
    </icons>
    <version>1.0.0.0</version>
    <hosts>
    <host name="sidebar">
    <base type="html" apiVersion="1.0.0" src="gadget.html" />
    <permissions>full</permissions>
    <platform minPlatformVersion ="0.3" />
    </host>
    </hosts>
    </gadget>
    3. Create a gadget.html file. This contains the main Gadget HTML page
    <html>
    <body style="width: 120px; height:90px;">
    Hello world
    </body>
    <html>

    If you now go to the Gadget Gallery, you should see your Gadget. If you add it, you should get a white box with "Hello world" in it. Simple as that.

    From here on it gets more complicated. In future articles I'll go into detail on the gadget.xml file, settings pages and flyouts. Not to mention how to overlay transparent text/images and various bugs you're going to come across along the way.

    15:42 | 添加评论 | 阅读评论 (1) | 固定链接 | 写入日志