Alors je n’ai pas dit « de votre application » dans ce titre car, actuellement, la Microsoft Band ne permet pas de faire tourner du code comme on a l’habitude de la faire sur un Device comme nos Windows Phone ou tablette. La Microsoft Band nécessite un smartphone (Windows Phone, android ou ios), une tablette ou un PC.

Depuis 3 mois, Microsoft met à jour régulièrement le SDK et le dernier en date (30 avril 2015) lorsque j’écris ce tuto, apporte encore de bonnes petites nouveautés et permet d’imaginer encore plus de scénario comme la possibilité de connecter la MSBand à une tâches d’arrière plan du Windows Phone, de créer des pages personnalisées, d’accéder aux données de calories « brûlées », de générer les Code barre etc…

Préambule

Avant de continuer je vous invite à lire le premier tutorial : Lire votre température corporelle avec la Microsoft Band

Le but de ce tuto est juste de vous donner un aperçu général

Principe

Voici en gros le principe.

1. C’est votre Tuile (BandTile) à qui on attribue un GUID
2. Page associée (PageLayout). On peut aller jusque 8 pages
3. Le conteneur. 3 types : FlowPanel, ScrollFlowPanel, FilledPanel
4. Le contenu. 6 types : TextBlock, WrappedTextBlock, Icon, Barcode, TextButton, FilledButton

Créer une Universal app

Voilà, c’est la première étape et je vous réinvite à consulter le tuto précédant sur lequel je ne reviendrai pas.

Dans la page, je place simplement un bouton auquel je m’abonne à l’évènement Click :

async void Button_Click(object sender, RoutedEventArgs e)
{
    var pairedBands = 
           await BandClientManager.Instance.GetBandsAsync();

    using (var bandClient = await BandClientManager.Instance
                                .ConnectAsync(pairedBands[0]))
    {
         // (1) on va mettre ici notre code
    }
}

Création de notre Tuile

A l’emplacement du commentaire (1) du code précèdent on va ajouter le code suivant qui crée la tuile, le code est très clair :

 
private async Task<BandIcon> LoadIcon(string uri)
{
    var imageFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(uri));

    using (var fileStream = await imageFile.OpenAsync(FileAccessMode.Read))
    {
        var bitmap = new WriteableBitmap(1, 1);
        await bitmap.SetSourceAsync(fileStream);
        return bitmap.ToBandIcon();
    }
}

var monGuid = new Guid("ABF82E6C-E917-42E7-8A24-2B025475BE30");
var maTuile = new BandTile(monGuid)
{
  Name = "Ma Tuile",
  // 46 x 46
  TileIcon = await LoadIcon("ms-appx:///Assets/IconLarge.png"),
  // 24 x 24
  SmallIcon = await LoadIcon("ms-appx:///Assets/IconSmall.png")
};

// On efface la tuile si elle existe
await bandClient.TileManager.RemoveTileAsync(maTuile.TileId);

// Creation de la tuile
await bandClient.TileManager.AddTileAsync(maTuile);

Création des éléments

Et oui, c’est en C#, il n’y a pas d’interface XAML pour créer les pages mais il n’y a pas grand chose comprendre. On crée les éléments et on leur attribue un ID. On est affecte à notre conteneur et on affecte ce conteneur à un PageLayouts de la page. vindiou 🙂

Alors à la suite du code, vous ajoutez ceci :

//element de ma page
var FirstTextBlock = new TextBlock()
{
    Color = Colors.DarkOrange.ToBandColor(),
    ElementId = 1, 
    Rect = new PageRect(0, 0, 200, 25)
};

var autreTextBlock = new TextBlock()
{
    ElementId = 2,
    Rect = new PageRect(0, 0, 200, 25)
};

var buttonTextButton = new TextButton()
{
    ElementId = 3,
    Rect = new PageRect(0, 0, 200, 75),
    Margins = new Margins(15, 0, 15, 0),
    PressedColor = new BandColor(0xFF, 0x9F, 0xFF)
};

// On les affecte à un conteneur
var Conteneur = new ScrollFlowPanel(FirstTextBlock, 
                                autreTextBlock, 
                                buttonTextButton)
{
    Orientation = FlowPanelOrientation.Vertical,
    Rect = new PageRect(0, 0, 250, 100)
};

// On relie le conteneur à un Layout (max:5)
maTuile.PageLayouts.Add(new PageLayout(Conteneur));

Création de la page

Enfin, on crée la page et on affecte le contenu à nos éléments comme ceci

// Creation du contenu de la page avec nos élèments
var maPage = new PageData( 
    Guid.NewGuid(), // Id de cette page
    0, // index de la page (jusque 5 layout par page)
    new TextBlockData(FirstTextBlock.ElementId.Value, "BONJOUR!"),
    new TextBlockData(autreTextBlock.ElementId.Value, "WILLKOMMEN!"),
    new TextButtonData(buttonTextButton.ElementId.Value, "button")
    );

// et on envoi la sauce 
await bandClient.TileManager.SetPagesAsync(
    maTuile.TileId, 
    maPage);

Voilà, à ce stade, on peut donc ajouter une tuile (attention c’est 13 tuile maximum) et avoir une page qui s’affiche avec ce petit code. Mais vous avez remarqué que j’ai ajouté un bouton ; Nous allons donc voir comment récupérer le clique de ce dernier dans le paragraphe suivant :

Event de mon Bouton

Dans l’application sur notre Windows phone on va récupérer l’évènement de notre bouton. N’oublions pas que la Microsoft Band ne doit être perçu que comme une extension de notre device, on ne peut y mettre une application comme on les fait sur notre smartphone.
Le principe est le suivant :

• on s’abonne aux évènements
• on commence « l’écoute » de la MSBand
• on gère les évènements sur notre application du smartphone

A la suite du code précédant :

int clickCount = 0;
bool tileWasClosed = false;
     
bandClient.TileManager.TileButtonPressed += (s, args) =>
{
    if (args.TileEvent.ElementId == 3) clickCount++;
    //if (args.TileEvent.ElementId == 5) clickCount--;
};
bandClient.TileManager.TileClosed += (s, args) =>
{
    tileWasClosed = true;
};


await bandClient.TileManager.StartReadingsAsync();

while (!tileWasClosed)
{
    this.TextBlock.Text = string.Format("Click = {0}", 
                            clickCount);
    await Task.Delay(200);
}
        
// On arrête l'écoute
await bandClient.TileManager.StopReadingsAsync();

Voilà les grandes lignes mais elles vous permettront de bien commencer !