Scott Hanselman

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

July 09, 2015 Comment on this post [27] Posted in Web Services
Sponsored By

Microsoft Bands in various colorsI 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

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.

image

Small Nightscout LogoTo 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)

Emailing a WebTile to myself

Now I "Open in Microsoft Health..."

Adding a Web Tile to my Band

Click Save...

Now I have 2 web tiles in my band

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

IMG_2465

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-deductible donation here http://hanselman.com/fightdiabetes/donate

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
July 09, 2015 23:17
"Interactions? Events? Real-time? More sensor support? Authentication?"

Porque no los todos?

No, but really, I would love to be able to act on real-time info pulled into my Band. If we can integrate with Cortana's geofencing abilities on Band to provide locational info on Band without taking out a phone, that would be very useful in a lot of cases. I'd love to tap on my Band, have the Web tile parse out data from the local bus transit website, determine where I am, ask which route I'd prefer, know which routes are available and the ETA to the next route by simple taps, without looking at the full website on a phone.
July 09, 2015 23:37
This is really cool. What about the all-important question: security? Any way to have user-defined parameters for a web tile (a user-entered api key and value, for example)?

If this is in the docs, sorry... just wanted to jump immediately and ask while it was top-of-mind :).
July 10, 2015 0:58
This makes total sense to me. Why mess with a custom mobile app just to push some data to my wrist when the main app does this already? I see this also being useful for business users who may already have some JSON/RSS endpoints they would be willing to massage into another device, but may not want to invest in a full on native app. I'd love to see the ability to POST and get sensor/location/cortana access.
July 10, 2015 1:11
A blood sugar of 100 is a little high, 216 is way off. You are eating too many carbs.
July 10, 2015 1:34
Jeff - I've been doing this as Type 1 diabetic for over 20 years. I have an A1C of 5.5%. Highs happen. 216mg/dl 30 min after a meal with modest carbs is fine for a T1. It was down 45 min later.
July 10, 2015 1:47
A bit off topic, but could web tiles also work for the "big brother" Windows 10 OS? It seems a simple way to create small apps and the distribution is very easy. Like the old Vista Widgets - but hopefully with more success ;)
July 10, 2015 5:50
This is so cool! I got a Band for Christmas but was disappointed when it didn't immediately have an SDK available. I wasn't keeping track of whether or not one came out so this is the first I've heard about it since then. I'll definitely be making my own web tile tonight. Thanks Scott!
July 10, 2015 8:42
first i am a nooby to this. i have a few ??? 1. do you have to have your own web site, or can you use a free host i have comcast and they offer a free site. 2. if so can some one walk me through on building a tile...i have epalepsy and take several medications and want a tile that can remind me to take my meds at the right time. when i am at work i set my phone with multiple alarms but keep getting into trouble due to it going off so having the band remind me will help. if anyone can help me out. thanks
July 10, 2015 11:14
My god this is AWESOME. I'm going to make tiles out of everything. First order of business, using my band instead of Nagios to monitor my compute cluster :D haha
July 10, 2015 12:45
The problem is that the extension webtile isn't registered with Microsoft Health in Windows 10 so when I try to open my tile it wants to search for a compatible app in the store.
July 10, 2015 17:09
Thinking I should get my kids a fitness band and tell them they can't play games, use a computer, etc. until they reach 6K steps or something like that. Later code it so they can't even turn on their iPod, Xbox, etc. until it reaches their step minimum?
July 10, 2015 18:15
Here's video of the Microsoft Band session at the BUILD conference: Channel 9
July 10, 2015 18:47
I'm sorry. I haven't looked into this yet. Can the user force a refresh?
July 10, 2015 18:51
It would be great to have immediate real-time back-and-forth communication on a wrist device like this.

Simple example:

1. Eric's wrist: Request Help > Where: Office / Showroom / Warehouse > Who: Anyone / Beth / Cody / Dana

2. Beth's Wrist: Eric asks for your help in the showroom. Will you help? Yes / No

3. Eric's wrist: Beth is on her way to the showroom. OK

Would something like this example be possible with iOS/Android/Windows apps? Does this have to be beyond Web Tiles?
July 10, 2015 19:02
OK, this sounds great, glanceables here we come.

I made a webtile, sent it to my phone, but my phone won't load it into MS Health, instead the phone wants to find a .webtile app in the store (!)

Anyone seen this?

R.
July 10, 2015 22:14
If it could tell me when I am driving too fast, that would be great.
(My phone can do that, but I turn it off when I am driving.)
July 10, 2015 22:19
Great idea, Taki.

While you probably can't block login to an iPad or Xbox because of the nature of their closed systems you can probably find a way monitor login to services like Apple Game Center or Xbox Live from an azure service, correlate with fitness data and send out alerts (via email/text/twilio) so that everyone knows what the expectations are and that you can see they aren't meeting them.

"Alert: GamerKid3390 signed onto Xbox Live but only has 2000 steps today!"

It's getting to the point where you can start placing RFID chips next to the sink to have kids scan when they've done the dishes, or finished other chores, and earn points that way too.
July 12, 2015 10:29
Why is that generic technology supported exclusively by the Health app?
There should be a more generic app for that, as one can do any type of tiles.
July 13, 2015 19:22
Authentication would be the top priority for me. I do security for a living, so paranoia is a pre-requisite for my line of work, but still, it's alarming to see a general lack of awareness of even basic security in medical IoT apps and devices.
July 13, 2015 22:01
Very very cool.
July 13, 2015 23:38
Nice post Scott. Keep up the good work.
July 14, 2015 10:09
Excellent post! Scott neat stuff!
July 14, 2015 12:09
Creating custom web tiles with SDK is a really good and inventive strategy. I would really love to see such development in other interfaces, like Windows 10, which could be quite handy and interactively cool. But, at first, I am going to start creating my Band tiles right away.
July 17, 2015 11:47
This is really cool. What about the all-important question: security? Any way to have user-defined parameters for a web tile (a user-entered api key and value, for example)?
July 18, 2015 21:49
Does this platform provide any form of indication of the freshness of the data?
I get a feeling that acting on information that is out of date (momentary lack of Internet routing, packets stuck in the intertubes, etc.) could be a bit dangerous.
July 19, 2015 13:07
Hi Scott, Is it possible to get band to vibrate from specific data retrieved the api call? Or is this handled automatically from the "badgeIcon" value going up?
August 29, 2015 20:27
Do you have this tile as a download? This would be a huge help for monitoring my blood sugar.
Joe

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.