Band on the Run

I promised earlier (/ms%20band/uwp/2015/12/01/fake-microsoft-band.html) to share some more details about the client-side of the Band on the Run project I have been working on alongside my colleague at Microsoft David Gristwood.We set the project up initially as a learning opportunity so we could better understand IOT (Internet of things) cloud architecture with a working system which was general enough to allow us to modify it to encompass different scenarios as our requirements shifted. To give a bit of background I have historically been more involved in client-side user interface technologies whereas David is more on the cloud architecture side. This project enabled us to develop our existing skills and also to learn and see the technology from the others’ perspective which I have found to be of very high value. Before I take a look at the client in more detail here are some other ways that the project has been used:

Used as a basis of four internal hackathons at Microsoft (Dev Ops, Office 365, Azure and Universal Windows Platform)

Used as the core part of a presentation that David and I have delivered at various different events including Future Decoded UK and upcoming events e.g. The Wearable Technology Show and DevWeek

 

Used as a demo at Reasons to be Creative event by another colleague Andrew Spooner

We have also had a lot of interest internally at Microsoft but we haven’t quite done the work to document and wrap the project up as a demo-in-a-box which is in our backlog.

We recently migrated the back-end from Azure Event Hub to Azure IOT Hub – details at David’s blog here Moving to Azure IOT Hub

limbering up for DevWeek

The Client App

The client app started life as a Windows 8.1 Universal App which ran on Windows 8.1 desktops/tablets and phones and worked with one Band and just displayed a heart rate value on it’s UI and sent the data to Azure Event Hubs using an HTTP POST. Since then it has been updated to a Windows Universal Platform (UWP) app and as a result consists of one project which targets all UWP platforms. I did a bit of research early on about how to start the project in terms of starting with a project template and decided on using Template 10 as I wanted to experiment with the hamburger menu inside an app. I always use an MVVM architecture within my windows apps and template 10 allows integration of MVVM components of your choosing. Here are some components I brought in to the project to help with this:

Autofac for dependency injection

Caliburn.Micro.EventAggregator – for messaging between View Models

AsyncDelegateCommand / DelegateCommand – for commanding

To be honest, I quite like bringing in separate components to build up the pieces required for MVVM  

Responsive User Interface

The requirements were fairly non-standard for this app since we wanted to optimise for large screens by displaying all relevant information about the band data on one screen (for presentation purposes) but we also wanted the app to work on smaller displays and phones. Adaptive triggers were used along with the VisualStateManager to set the UI into a particular state depending on which adaptive trigger was currently active. For web developers this is a similar concept to media queries and you can create your own custom adaptive triggers but I chose to use the in-the-box triggers which activate states based on the current width of the window. I used three different visual states:

Narrow, Normal and Wide

The narrow and normal states used two pages one for a list of bands and the second for band data details and the user could navigate between the list and the details view but the wide state consists of only the main page which tiles two columns of band tiles which stretch to fill up the space and get as much data onto the display as possible. The narrow state works well on a mobile phone as well.

Real-time Sensor Data

My previous post /ms%20band/msband/uwp/windows/2015/07/24/microsoft-band-heart-rate-sample-uwp.html shows the code for accessing heart rate data from a paired band in real-time and this code is fairly similar to that used in the Band on the Run client. In addition, since we want to send that data (also in real-time) up to the Azure IOT Hub then we can now use the Microsoft Azure Devices Client nuget package

I have introduced an ITelemetry interface which supports registering a particular device and also posting the data up to Azure. Previously we did this via Event Hub and creating shared access signatures for access. Since moving to IOT Hub the registration and sending are implemented in the Nuget package so I just created a new implementation of ITelemetry which wraps the library. Posting the data looks like this:

Fake Data

In order to keep developing in scenarios where the developer has no access to a physical band the project also uses the FakeBand nuget package (see /ms%20band/uwp/2015/12/01/fake-microsoft-band.html) and I’m just thinking about the best way to record and playback sensor data using this library.

Cross Platform

I am also converting the client app to be cross platform; so the intention is to use Xamarin to create a c# cross-platform app for iOS, Android and UWP and I have started this work in a branch on the Git repo. Note that the band SDK supports Xamarin already so I could share most of the codebase between the platforms and will most-likely create native UIs on each.

We always welcome collaboration, contributions or suggestions – please use the Github repos for Band on the Run here https://github.com/BandOnTheRun