Microsoft Band- Basic App for Understanding II

• Download source - 1.7 MB

Introduction

In the previous article, we learnt how to use MS Band censors on the Phone to get the health benefits such as periodic check of the Heart Rate on the associated devices itself. We got to know the very basics of Microsoft Band. In this article, we will be stepping further with the demonstration of working App which gets attached to the Microsoft Band. We will be creating tile, associating pages to the tile. Layout to create page and further details.

Details

In the previous article, we have learnt how to connect the MS Band to the Windows Phone to read data from the censors.

If you want to use the MS band Auxiliary display for the application, the same can be done with the help of MS Band SDK.

Just like creating Windows Phone apps or Xamarian Apps in the Visual Studios, we are having a set of protocols which are supposed to be followed while creating a Band Application.

Creating interactive tiles:

• This is done via namespace Microsoft.Band.Tiles
• Apps can create one or more tiles
• Each Tile has a GUID, a tile icon and a badge icon
• We can use upto 8 additional icons within page

What are pages in Band - When a user taps on a tile, the screen that comes up with the information being displayed is called pages. The dimension of the page is “245 x 106” and is vertically scrollable.

We can create the pages in 2 ways:

• Via Notifications
• Via Custom Layout

There are 3 types of notifications:

• Messages – Persist inside the page, max size of 8 with FIFO logic, and continues steaming
• Dialogs – Pop up messages but do no persist inside the tile
• Haptic Alerts – Predefined vibration types

Creating a tile gives the developer flexibility to register 5 layouts.

There are 2 types of element in the Band that can be used to create the page, below is the table for the same:

Band has an addressing schema of the below format:

Tile GUID -> Page GUID -> Element ID

From the tile, the Reception of Events can be done as well. There are 3 events that one can subscribe to with the help of namespace Microsoft.Band.Tiles.Events:

• Tile Opened
• Tile Closed
• Button Pressed

Using the Code

We will be using the same solution which we were using in the Prequel of this article.

For reference, please go to this page.

For the creation of tile and page, we will be using the 3 namespaces primarily:

• Microsoft.Band.Tiles
• Microsoft.Band.Tiles.Pages
• System.Threading.Tasks

The method / task CreateOrInitializeTile is the main method which will be used for creating a new tile.

await this.CreateOrInitializeTile(); //// this is the main method 
		//// which will be creating the Layout of the tile

  private async Task CreateOrInitializeTile()
        {
            var tileGuid = Guid.Parse
            ("{82F46ABE-4D0A-401B-889E-F25443C9CB35}"); //// as specified in the 
            			//// above paragraphs, we are having a dedicated GUID for each tile
            var pageGuid = Guid.Parse
            ("{82F46ABE-4D0A-401B-889E-F25443C9CB35}"); //// the page is having a specific GUID as well

            var tiles = await this.bandClient.TileManager.GetTilesAsync(); //// Getting 
            		//// the list of all tiles which are related associated to the Device

            var tile = tiles.FirstOrDefault();

            if (tile == null) //// if there is no tile associated we are creating a 
				// new tile in the below code
            {
                var panel = new FlowPanel
                {
                    ElementId = 0, // element id starts from 0, the container
                    Rect = new PageRect(0, 0, 245, 106),
                    Orientation = FlowPanelOrientation.Horizontal,
                    HorizontalAlignment = Microsoft.Band.Tiles.Pages.HorizontalAlignment.Center,
                    VerticalAlignment = Microsoft.Band.Tiles.Pages.VerticalAlignment.Center
                };

                panel.Elements.Add(
                    new TextButton
                    {
                        ElementId = 1, // the next button which will be contained
                        Rect = new PageRect(0, 0, 100, 50),
                        PressedColor = Colors.Red.ToBandColor(), // we have got an Extension method 
                        		// ToBandColor which will be making the color look better 
					// in the Band
                        Margins = new Margins(0, 0, 20, 0),
                        HorizontalAlignment = Microsoft.Band.Tiles.Pages.HorizontalAlignment.Center
                    }
                );

                panel.Elements.Add(
                   new TextButton
                   {
                       ElementId = 2,// another button
                       Rect = new PageRect(0, 0, 100, 50),
                       PressedColor = Colors.Gold.ToBandColor(),
                       Margins = new Margins(0, 0, 20, 0),
                       HorizontalAlignment = Microsoft.Band.Tiles.Pages.HorizontalAlignment.Center
                   }
               );

                var layout = new PageLayout(panel); //// adding the Panel to the page Layout

                tile = new BandTile(tileGuid)
                {
                    Name = "Building new TILE", // name of the Application Tile
                    TileIcon = await LoadIcon("ms-appx://Assets/SampleTileIconLarge.png"),
                    SmallIcon = await LoadIcon("ms-appx://Assets/SampleTileIconSmall.png")
                };

                tile.PageLayouts.Add(layout); 

                await this.bandClient.TileManager.AddTileAsync(tile); //adding the tile 
                					// to the list of associated tiles present
            }

            await this.bandClient.TileManager.SetPagesAsync(
                tileGuid,
                new PageData(
                    pageGuid,
                    0,
                    new TextButtonData(1, "OFF"),
                    new TextButtonData(2, "ON")
                    )
                );
        }

We are having the main helper method defined above. After calling this in the OnNavigatedTo method, we are supposed to create handlers for the tile opening, closing and pressed event.

The same is done in the below manner:

this.bandClient.TileManager.TileOpened += async (sender, args) =>
           {
               await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                   ()=>this.TextBlockStatus.Text = "Open tile");
           }; //// creating an eventHandler for the Tile Open Event

           this.bandClient.TileManager.TileClosed += async (sender, args) =>
           {
               await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                   ()=>this.TextBlockStatus.Text = "Close tile");
           }; //// creating an eventHandler for the Tile Close Event

           this.bandClient.TileManager.TileButtonPressed += async (sender, args) =>
           {
               await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                   ()=>this.TextBlockStatus.Text =
                   string.Format("button pressed ({0})",args.TileEvent.ElementId));
           }; //// creating an eventHandler for the Tile Close Event

Once the same code is compiled, it will be ready to run on the device. After pressing the play button, the Tile starts syncing at the band.

Once the sync is done, the tile starts appearing on the Band. You have to navigate to the right most tile as the same is the recent most tile to be added.

Once we press the tile, the status on the Phone for the same gets changed with the message that we have provided in the Handlers of TileOpened.

Along with that change, we get the On & Off button on the page that we created by using layout.

Any button pressed, we get the element Id suffixed with the message that we provided in the Tile button pressed handler.

Points of Interest

There are certain limitations that we are supposed to work with when Band is considered.

Events are handled differently per platform.

History

There are new features that are added in the Microsoft Band 2.

For the same, I will be posting the articles on what change we need to make for the new Platform.