After I published this post, I read Scott Hanselman’s article about Web Tiles… the guy who had the idea in the first place. You should probably read that, too – or instead, it won’t hurt my feelings 🙂

Introducing Web Tiles for Microsoft Band

However, if you just want to throw together a Web Tile for your favorite newsfeed, this post is still useful.

The Web Tiles for Microsoft Band are here, and they’re even easier than I’d imagined they would be: Microsoft has provided an online generator that puts together the necessary JSON and packs up the icons into the .webtile package that your phone’s Microsoft Health app uses to load the Web Tile onto your Band. For a “Preview” product, it’s pretty slick.

What you need:

– An RSS or pure JSON data source. I used the RSS for the Lync News Tumblr feed: http://lyncnews.tumblr.com/rss

– A transparent PNG that is 46×46 pixels for the main Tile icon, and 24×24 for the small “badge” icon that will be displayed when there is a count of new items in the feed. Paint included with Windows can’t do this for you, but Photoshop, GIMP or Paint.Net (what I used) can.

– Link to the Web Tile generator: http://developer.microsoftband.com/WebTile/ChooseLayout

I chose a Multiple Page Tile with “Scrolling text wrap” template, because I wanted to be able to show long headlines. If you want to see a single value (time of the next train for a given stop, current temperature and wind speed for a specific weather station), you should probably choose a Single Page Tile, and the “Three lines with icons” or “Header, secondary, large icon with Metric”

Next, put in the feed URL. This is where you’ll get an error if your supposed JSON data is really a secret JavaScript variable initialization and assignment (“var whatever = {real json data here…”)

This part requires a bit more thought: the Header must be very short, as only the first 20 or so characters will show, but the Body can be up to 160 characters.

I’ve put the Title in the Body, and the PubDate in the Header.

The only complicated part of this page is arguably the most complicated part of the whole process: getting a transparent PNG – modern Paint (mspaint.exe) won’t work. I used Paint.Net to change the background of the little graphic from the lyncnews.tumblr.com page to transparent and resize it to 46 and 24 pixel versions.

You can either choose the color you want the Header to be, or you can tick the “Default to Band theme colors” box to let the user’s Band theme take over. I chose Skype for Business blue.

And that’s it! Download your Web Tile and email it to an account you have configured on the phone you paired your Band with. If you want to distribute your Web Tile, upload it to your website, and link to it like this:

http://www.powershellgal.com/lyncnews.webtile

If you want to look at the JSON manifest inside, simply change the file extension from .webtile to .zip, extract and look at manifest.json. There are several things you can configure manually that are not available in the online generator, like exact colors for the text elements and icon backgrounds. To push your changes, re-zip after changing the manifest.json, and change the file extension back to .webtile.

A more detailed explanation of the Web Tile format and manual creation process is in this PDF: http://developer.microsoftband.com/Content/docs/Microsoft%20Band%20Web%20Tile%20Preview%20Documentation.pdf

Made an awesome Web Tile? Show it off! #WebTiles