Wearables | Versatile Digital DNA

Introduction

You can create apps for your Microsoft Band which display information from a feed URL without writing a single line of code. These app tiles are known as Web Tiles for the Microsoft Band and they are fully managed by the Microsoft Health application which manages other settings of the band.

How it works

Web tiles are files with extension .webtile, they are just packages which contain the icon image and the manifest JSON file. The manifest file contains the information like title, author, description, feed URL, tile face and the tile formation data. The feed URL can be any JSON / Atom Pub service.

Go this URL: http://developer.microsoftband.com/WebTile/

Follow the instructions

Click Get Started and Accept the agreement (if you have time, please read it and explain me as well)
Select whether you want to create a single page tile / multi page tile – Single page tiles have one tile page and multi-page tiles can have up to 8 tile pages.
Also choose the appearance of the tile.
In the next screen enter the feed URL and drag & drop the values in the selected tile’s placeholders. See the below image.

I have used my blog feed URL and dragged & dropped the post title and the number of comments in the tile face. (Note that the tile I selected is capable showing a text title and a number)

In the next screen you can specify the title, description author and other details along with the image for the tile.

Finalize the web tile and mail it, so you can directly download it in your phone. When you open the web tile in a Microsoft Health app installed phone, it will automatically detect and continue the setup.

But before jumping into the installation process let’s look into the web tile file.

.webtile file and manifest.json

As I mentioned above .webtile files are packages. Change the extension of the .webtile files to .zip, now you can extract the contents. Inside the package you will see a folder named icons where the tile icon file is stored and the manifest.json file.

The above image shows a portion of the manifest file. All the settings are saved here and you can configure more options in the file itself. Some parameters have default restrictions like the refresh interval cannot be set less than 15 minutes.

Installation

You can directly open the web tile in the phone which has Microsoft Health app installed. The tile will be managed by the app and you can uninstall it whenever you want. When you open the web tile, the Microsoft Health app will ask you whether to install it.

Now I can monitor the blog posts and the comment counts from my band.

Smart watch is one of the current buzz words these days. From a tweet I clicked this link. A kickstarter project initiation, this is not the one of its kind but this attracted me because we can use .NET and C# to develop apps. The above link provides the tools you need in order to start developing the apps for AGENT. The AGENT SDK (version 0.2) provides a beta level emulator and Visual Studio project templates as well. SDK utilizes the .NET micro framework.

I created a 2 simple applications using the available AGENT project template.

AGENT Watch Application

This is a simple animated human skeleton and display some text on the screen.

using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Media;
using System;
using System.Threading;

namespace AgentWatchApplication1
{
    public class Program
    {
        static Bitmap _display;

        public static void Main()
        {
            // initialize display buffer
            _display = new Bitmap(Bitmap.MaxWidth, Bitmap.MaxHeight);
            Font fontNinaB = Resources.GetFont(Resources.FontResources.NinaB);

            int index = 0;

            while (true)
            {
                _display.Clear();

                _display.DrawText("Thuru", fontNinaB, Color.White, 44, 2);

                _display.DrawEllipse(Color.White, 55, 40, 10, 10); // head
                _display.DrawLine(Color.White, 1, 55, 50, 55, 90); // body

                _display.DrawLine(Color.White, 1, 55, 90, 40, 100); // left leg
                _display.DrawLine(Color.White, 1, 55, 90, 70, 100); // right leg 


                if (index % 2 == 0)
                {
                    _display.DrawLine(Color.White, 1, 55, 55, 40, 75); // left hand down
                    _display.DrawLine(Color.White, 1, 55, 55, 70, 75); // right hand down
                }
                else
                {
                    _display.DrawLine(Color.White, 1, 55, 55, 40, 50); // left hand up
                    _display.DrawLine(Color.White, 1, 55, 55, 70, 50); // right hand up
                }

                _display.Flush();

                if (index == 100)
                    index = 0;

                index++;

                Thread.Sleep(1000);

            }
        }

    }
}

Output

AGENT Watch Face

This is based on the AGENT watch face. I edited the template code to show the updates every second.

using Microsoft.SPOT;
using Microsoft.SPOT.Hardware;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Media;
using System;
using System.Threading;

namespace AgentWatchFace1
{
    public class Program
    {
        static Bitmap _display;
        static Timer _updateClockTimer;

        public static void Main()
        {
            // initialize our display buffer
            _display = new Bitmap(Bitmap.MaxWidth, Bitmap.MaxHeight);

            // display the time immediately
            UpdateTime(null);

            // obtain the current time
            DateTimeOffset currentTime = DateTimeOffset.Now;
            // set up timer to refresh time every minute
            TimeSpan dueTime = new TimeSpan(0, 0, 0, 0, 1000 - currentTime.Millisecond); // start timer at beginning of next minute
            TimeSpan period = new TimeSpan(0, 0, 0, 1, 0); // update time every minute
            _updateClockTimer = new Timer(UpdateTime, null, dueTime, period); // start our update timer

            // go to sleep; time updates will happen automatically every minute
            Thread.Sleep(Timeout.Infinite);
        }

        static void UpdateTime(object state)
        {
            // obtain the current time
            DateTimeOffset currentTime = DateTimeOffset.Now;
            // clear our display buffer
            _display.Clear();

            // add your watchface drawing code here
            Font fontNinaB = Resources.GetFont(Resources.FontResources.NinaB);
            _display.DrawText(currentTime.Hour.ToString("D2") + ":" + currentTime.Minute.ToString("D2") + ":"
                + currentTime.Second.ToString("D2"), fontNinaB, Color.White, 36, 58);

            // flush the display buffer to the display
            _display.Flush();
        }

    }
}

Output

Versatile Digital DNA

Category Archives: Wearables

Creating web tiles in Microsoft Band

Programming AGENT smart watch using C#.NET

Share this:

Share this: