Displaying an image on Microsoft Band

Question

I would like to create an app similar to the Starbucks app that comes with the band. I want to display bar codes. I can generate the barcodes as JPG images in the cloud or on the local device but I need to be able to display them on the band's screen. So far I have not found a way using the Band Client to display an image inside the app.

Band client has the following managers:

Notification Manager
Personalization Manager
Tile Manager
Sensor Manager

The closest thing I can think of is the Notification Manager that would do it but the only methods on that are:

SendMessageAsync
ShowDialogAsync
VibrateAsync

None of which do the job. Any ideas? Right now I am thinking the SDK is just rather limited in what it can do from a UI perspective.

Ugly hack warning: You could send the bar code to the 'MeTile' (the main tile) :D Okay, not a pretty solution, but right now its the only place you add push an image. So an ugly hack would be to get the MeTile, save the image used, push the barcode, and then let the user reset to the previous image or attempt to reset it after X amount of time has passed. Not sure how much the clock on top of the image would interfere with reading the barcode. — Iris Classon, Apr 09 '15 at 15:51

score 4 · Answer 1 · answered Apr 30 '15 at 23:54

Bar codes are now supported in the SDK which was updated today (and a few more changes). The SDK is also out of preview woho!

new:

Rich content tiles – barcodes and icons
List item
We can have buttons! (can’t believe I’m that excited about a button)
We can listen for tile and button events
Access to new data- calories
Windows phone background support
iOS remote or local notifications

Here is some barcode code from the new sample app uploaded.

        using (IBandClient bandClient = await BandClientManager.Instance.ConnectAsync(pairedBands[0]))
    {
        var myCardTextBlock = new TextBlock()
        {
            Color = Colors.Blue.ToBandColor(),
            ElementId = 1, 
            Rect = new PageRect(0, 0, 200, 25)
        };
        var barcode = new Barcode(BarcodeType.Code39)
        {
            ElementId = 2, 
            Rect = new PageRect(0, 0, 250, 50)
        };
        TextBlock digitsTextBlock = new TextBlock()
        {
            ElementId = 3,
            Rect = new PageRect(0, 0, 200, 25)
        };
        FlowPanel panel = new FlowPanel(myCardTextBlock, barcode, digitsTextBlock)
        {
            Orientation = FlowPanelOrientation.Vertical,
            Rect = new PageRect(0, 0, 250, 100)
        };


        Guid myTileId = new Guid("D781F673-6D05-4D69-BCFF-EA7E706C3418");
        BandTile myTile = new BandTile(myTileId)
        {
            Name = "My Tile",
            TileIcon = await LoadIcon("ms-appx:///Assets/SampleTileIconLarge.png"),
            SmallIcon = await LoadIcon("ms-appx:///Assets/SampleTileIconSmall.png")
        };
        myTile.PageLayouts.Add(new PageLayout(panel));


        await bandClient.TileManager.AddTileAsync(myTile);

        PageData page = new PageData(
            Guid.NewGuid(), 
            0, 
            new TextBlockData(myCardTextBlock.ElementId.Value, "MY CARD"),
            new BarcodeData(barcode.BarcodeType, barcode.ElementId.Value, "123456789"),
            new TextBlockData(digitsTextBlock.ElementId.Value, "123456789"));

        await bandClient.TileManager.SetPagesAsync(myTile.TileId, page);

        this.viewModel.StatusMessage = "Done. Check the Tile on your Band (it's the last Tile).";
    }

There are only two types of barcodes are supported and QR-code is not there. I have the same scenario when I want pregenerate JPG image with barcode and just want to display an image at a band. Is it possible? — Mando, Jun 23 '15 at 20:21
@AlexeyStrakh see my answer. It is possible, but not that easy or useful. — Dave Williams, Apr 19 '16 at 16:18

Josh Collins MSFT · Answer 2 · 2015-03-03T23:01:28.520

1

Right now the Microsoft Band SDK Preview does not have the ability to create custom layouts for tiles. Your observations are correct, you can create a tile that you can send messages to, and the last 8 message (according to their timestamps) will be show up in the tile.

edited Mar 03 '15 at 23:01

answered Mar 03 '15 at 22:20

Josh Collins MSFT

11
3

score 0 · Answer 3 · answered Apr 19 '16 at 16:16

There is a way. It is very tricky and limited to certain size of data.

It is possible to upload an Icon (actually up to 8 I think) to your tile.

Icons must be a 48x48 transparent PNG.

For a QR code this translates to having a white image where the black parts of the QR code are transparent.

Above image is 1. If you colour the black to alpha then use e.g. webqr then you can test and see that it works. (I can't demonstrate with a PNG because SO doesn't like transparency).

Uploading that to the band is as normal for an Icon (see tutorials) except you need to set the ColorSource to custom and the Color to (255,255,255) White.

I was successfully able to upload and scan this on my Band.

However I would note that it is not particularly user friendly as the icon is so small on the Band that the scanner can have trouble picking it up.

I will be posting feedback to MS, because I think this would be a very useful feature, and implementing QR codes should be trivial for them.

Displaying an image on Microsoft Band

3 Answers3