Introducing Web Tiles for Microsoft Band - My diabetes data on a Band!

I love wearables. Check out my blog post from 11 years ago on my "Wrist.NET" Microsoft SPOT watch. This was a time before ubiquitous connectivity and it was an amazing device that provided tons of glanceable information.

Fast-forward to today and I've used a FitBit, an Apple Watch, a few Pebble Watches, and a Microsoft Band. The thing that I wanted in 2004 - and the thing I want today - has always been an easy way to make an application for my wearable device. When the Microsoft Band (If you get one, print out this Sizing PDF first and measure your wrist) came out I immediately wanted to know what the SDK looked like! How easily could I make a new Tile on my Band?

Well, while the Band SDK is super powerful, just like the Apple Watch and most wearables, if I wanted to make a Band Tile I needed to make a mobile app first! That was a bummer for me. If I want to make a new simple Tile and share it with my friends I first need to make an app, and to have full coverage, I'll need three versions of the app (iPhone, Windows Phone, Android) as well?

The Band isn't a watch, and it's not just a pedometer. The Microsoft Band has ten sensors: an optical heart rate sensor, 3-axis accelerometer, gyrometer, GPS, light sensor, skin temp sensor, UV sensor, capacitive sensor, a microphone and one for skin response. I wanted a way to easily connect it to anything else I could think of. Lights, my glucose meter, my Nest, and on and on.

I went to the Band team and started pitching them an idea I called Web Tiles. Since every Band user already has the Microsoft Band (Health) app, why not let the existing app be a bridge and it would own new custom tiles! Web Tiles for glanceable data with a low barrier to entry, and the full Band SDK for rich interactivity. I figured we could write new Tiles with web tech. My personal use case was that I wanted a Web Tile to show my blood sugar from Nightscout, an open source app I use to manage my diabetes. Fortunately the Band Team were like-minded and we collaborated. Eventually they really started running and Web Tiles was born. You may have noticed that we gently introduced Web Tiles at the BUILD conference using my sugar data in the demo.

Web Tiles for Microsoft Band

Today the first preview version of Web Tiles is ready to go. You can make a custom Web Tile in just minutes for your Microsoft Band and install it now. You can put it on your OneDrive or blog, or even just email it to a friend.

If you're slightly technical, you can create Web Tiles with just the documentation, Notepad (or the VS Code editor) and a Zip utility. For the rest of us, you can use the online Web Tile Authoring Tool and it will generate the tile and give it to you for download.

Web Tiles are glanceable tiles that are feed by JSON, XML, or ATOM datasources. If you want to make one, feel free to use my Blood Sugar JSON datasource: http://hanselmanbanddata.azurewebsites.net and the Web Tile Authoring Tool.

The Web Tile Authoring Tool

Otherwise, here's a little more detail. Be sure to check out the Band team's blog posts and web site!

More Technical Stuff

There is a new runtime inside the Microsoft Health app for iOS, Windows Phone, and Android to manage Web Tiles and keep them fresh. Web Tiles are a zip file with a manifest with image files and JSON inside. You can put Web Tiles anywhere on the web or in email attachments. They have a .webtile extension, but you can use the mshealth-webtile:// custom URL scheme to launch the app and download a webtile, like mshealth-webtile://?action=download-manifest&url=http://www.microsoft.com/mywebtile.webtile

A minimal Web Tile would look like this:

• mytile.webtile (it's a renamed zip, and paths matter!)
• /manifest.json // Contains web tile definition and references to other assets
• /icons/*.png // PNG icons used in the web tile

Tiles can have multiple pages, in a master/detail style, binding to the data however you'd like.

To make a Web Tile that shows my blood sugar from my Nightscout site, I created this 46x46 PNG of the Nightscout logo and pulled from the JSON feed that represents my own glucose values http://hanselmanbanddata.azurewebsites.net.

The JSON for my Diabetes Web Tile is here, as an example. You'll also find it in the How-To documentation for Web Tiles. The first part is obvious, just a manifest. Then the Tile Icon. I just have one. Then we have a single Tile with a Simple style and three lines. The format you see there "bgs[0].sgv" is a way of pulling from the JSON. Like foo.bar.baz[0] if the JSON were nested named objects. The resources are named, and then later bound in strings within pages.

You could create a Web Tile for anything you have that has a JSON endpoint. I'm going to make a Web Tile to monitor my 3D Printer using Octoprint's REST API for example.

{
  "manifestVersion": 1,
  "name": "Nightscout",
  "description": "Nightscout Blood Sugar",
  "version": 1,
  "versionString": "1",
  "author": "Scott Hanselman",
  "organization": "Nightscout",
  "contactEmail": "",
  "tileIcon": {
    "46": "icons/tileIcon.png"
  },
  "refreshIntervalMinutes": 15,
  "resources": [
    {
      "url": "http://hanselmanbanddata.azurewebsites.net/api/Band",
      "style": "Simple",
      "content": {
        "bgs0sgv": "bgs[0].sgv",
        "bgs0bgdelta": "bgs[0].bgdelta",
        "bgs0direction": "bgs[0].direction"
      }
    }
  ],
  "pages": [
    {
      "layout": "MSBand_NoScrollingText",
      "condition": "true",
      "textBindings": [
        {
          "elementId": "1",
          "value": "Sugar: {{bgs0sgv}}"
        },
        {
          "elementId": "2",
          "value": "Delta: {{bgs0bgdelta}}"
        },
        {
          "elementId": "3",
          "value": "Trend: {{bgs0direction}}"
        }
      ]
    }
  ]
}

I mail the Web Tile to myself and see this on my iPhone. (Again, it could be in Dropbox, OneDrive, etc)

Now I "Open in Microsoft Health..."

Click Save...

And I've got two new custom Web Tiles now!

And here's my Band with my Web Tile installed! (Yes, at this moment in time my sugar is a little high, but I'm on it.)

In the future I'd like to see events, buttons, triggers, push notifications, inline images, charts/sparklines, and more. What do you want to use Web Ties for? Is this cool?

I'm sure the team is interested in the direction you'd like to see Web Tiles go. Interactions? Events? Real-time? More sensor support? Authentication? Sound off in the comments, vote on the Microsoft Band and Health UserVoice page and absolutely email them directly at healthms@microsoft.com.

DONATE: If you appreciate this blog and what I'm doing here, please donate to fight diabetes. Read about my story at http://hanselman.com/fightdiabetes, watch my Diabetes YouTube video, and make a tax-deductable domation here http://hanselman.com/fightdiabetes/donate