#MSBAND – Update Tiles live data with #VS2015 and #Windows10

Hola!

Today it is time to show how we can update the information displayed in a Tile in real time. To update the information we need to know

  • The Id of the Tile
  • The Id of the Page
  • The Ids of the controls within the Page

The following code example shows a class that these identifiers are stored as properties and constants. And in line 50, the SetTileData() operation updates the information for labels, bar codes and buttons with these Ids.

To see this example in execution, I created a timer to each a second generates random information and update it in the band.

Finally, the following video shows how the App Windows 10, generates random information and sends it to the Band. It shows this information in the corresponding Page

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Advertisements

#MSBAND – Actualizando información en Tiles con #VS2015 y #Windows10

Hola!

Hoy es momento de mostrar cómo podemos actualizar la información que se muestra en un Tile. Para actualizar la información necesitamos conocer

  • El Id del Tile
  • El Id del Page
  • Los Ids de los controles dentro de la Page

El siguiente ejemplo de código, muestra una clase en la que se registran estos identificadores. Y en la línea 50, la operación SetTileData() actualiza la información para etiquetas, códigos de barras y botones con estos Ids.

Para ver este ejemplo en ejecución, he creado un timer que cada un segundo genera información aleatoria y la actualiza en la band.

Finalmente, el siguiente video, muestra como la App Windows 10, genera información aleatoria y la envía a la Band. En la misma se muestra esta información en la Page correspondiente

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – Suscribe to User interaction with #MicrosoftBand and #VS2015

Hola!

Today I start from back to forward. First a video where we can see

  • A deployed custom Tile in a Band, with
    • A label
    • A barcode
    • 2 buttons
  • A Windows Universal Application on Windows 10 which
    • Connects to the Band
    • Capture the clicks of a user on the buttons
    • Displays the button pressed in the app

In the previous post I wrote on how to create this Custom Tile. In the post, I also wrote about the importance of the identifiers for the Tile and the Tile controls. In this example, these values are a GUID for a Tile and a series of constants for the Tile UI elements.

The simplest events of interaction of a user with the Band that we can capture are

  • Open or close a Tile
  • Press a button

The class [TileManager] is the one who publish events for these scenarios. In the following code example, we can see the subscription to 2 events. Also, when a Tile is Opened the status bar is updated with a custom message.

The capture of the mouse clicks on buttons is similar. Although it is important to note that we perform a “filter” of the captured actions to see if this action is from our tile (line 94). Then as we can identify the button by its identifier and work on it.

In the following code example, I update a message in the UI of the app with the specific button pressed..

And now you can see the video again and you will surely have lot more sense.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – Capturando la interacción de un usuario en la #MicrosoftBand #VS2015

Hola!

Hoy empiezo de atrás hacia adelante. En primer lugar un video en el que podemos ver

  • Un Tile personalizada desplegada en una Band, con
    • una etiqueta
    • un código de barras
    • 2 botones
  • Una Windows Universal Application en Windows 10 que
    • Se conecta a la Band
    • Captura los clics de un usuario sobre los botones
    • Muestra el botón presionado en la app

En el post anterior vimos cómo crear esta Custom Tile. En el mismo, remarqué la importancia de los identificadores para el Tile y para los controles. En este ejemplo, estos valores son un GUID para un Tile y una serie de constantes para los elementos de la Tile.

Los eventos de interacción de un usuario con la Band más simples que podemos capturar son

  • Abrir o cerrar un Tile
  • Presionar un botón

La clase [TileManager] nos ofrece una serie de eventos para estos casos. En el siguiente ejemplo de código podemos ver la suscripción a estos 2 eventos y además como se actualiza la status bar cuando se abre un tile Custom.

La captura de los clics en los botones es similar. Aunque es importante tener en cuenta que debemos hacer un “filtro” de las acciones capturadas para ver si esta acción es de nuestro Tile (línea 94). Luego ya podemos identificar el botón por su identificador y trabajar sobre el mismo. En el siguiente ejemplo de código, actualizo un mensaje en la UI de la app con el botón presionado.

Y ahora ya puedes ver el video nuevamente y seguramente tendrá mucho más sentido.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – About #Tiles format, and how to create complex ones

Hola!

Today I’m going to review a little deeper the way in which Tiles are defined. The Microsoft Band SDK explains in detail this topic in Chapter 8 “Customizing Tile Layouts”. This chapter explains the available controls, the available dimensions and much more information concerning the design of tiles.

After programming a little on this model, and perhaps by professional deformation, my instinct leads me to separate my code in a view and a model. With this in mind, the creation of a Tile could be split into 3 parts:

  • Tile Definition
    • It defines the Tile Id, name and images that will define it in the Band
  • Page Layout User Interface
    • It is the graphic representation of the elements that compose the page that is displayed when you press on the tile
  • Page Layout Data
    • Is the data associated with the previous graphic

In yesterday’s sample, the only control that was associated with a Page of the tile was a button. That’s why the separation is very simple. The comments indicate each of the parties

If we want to create a more complex model, we could add a little text and a bar code. The following design sample

  • A ScrollFlowPanel control with vertical orientation as the main container
  • A title in the header with a TextBlock
  • A control to display information from a barcode
  • A control ScrollFlowPanel with horizontal orientation for display 2 buttons

The code for the definition of this page would be as follows

It is important to emphasize, each control Ids are passed as parameter since they will be those using later data. The section of sample data would look like:

And finally, the Association of all elements together, including the ids of controls would look like:

When the tile is displayed in the band is ugly enough for me, but …

With a little scroll down, we can see how the controls are adjusted automatically and how we can interact with them.

In the next one, I’ll explain how to interact with this buttons.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – Sobre el formato de las #Tiles, y algunas más complejas

Hola!

Hoy voy a repasar un poco más la forma en la que se definen y agregan Tiles a la Microsoft Band. El punto de partida debería ser el SDK, en el mismo se explica en detalle cómo funciona un Tile. El capítulo 8 “Customizing Tile Layouts” explica los controles con los que podemos trabajar, las dimensiones disponibles y mucha más información relativa al diseño de tiles.

Después de programar un poco sobre este modelo, y tal vez por deformación profesional, el instinto me ha llevadp a separar la programación en una vista y en un modelo de datos. Es por eso que he decidido podría separar en 3 partes la creación de un Tile:

  • Tile Definition
    • Define el Tile Id, el Nombre y las imágenes que lo definirán en la Band
  • Page Layout User Interface
    • Es la representación gráfica de los elementos que componen la página que se muestra cuando se presiona sobre el tile
  • Page Layout Data
    • Son los datos asociados a la representación gráfica anterior

En el ejemplo del post de ayer, el único control que se mostraba asociado una Page del tile era un botón. Es por eso que la separación queda muy simple.

El en siguiente ejemplo de código, los comentarios indican cada una de las 3 partes que comenté antes

Si queremos crear una vista un poco más compleja podríamos agregar un poco de texto y un control de código de barras. La siguiente imagen, puede servir de referencia y en la misma se incluyen

  • Un control ScrollFlowPanel con orientación vertical como contenedor principal
  • Un título en la cabecera con un TextBlock
  • Un control para mostrar información de un código de barras
  • Un control ScrollFlowPanel con orientación horizontal para mostrar 2 botones

El código para la definición de la UI de esta page sería el siguiente

Es importante remarcar, que los identificadores de cada control se pasan como parámetro ya que los mismos serán los que se usen para luego asociar los datos em otra operación. La sección de muestra de datos quedaría como muestra el siguiente ejemplo de código:

Y finalmente, la asociación de todos los elementos juntos, incluidos los ids de los controles quedaría así:

En ejecución, la vista queda deja bastante que desear, pero

Con un poco de scroll hacia abajo, podemos ver como se ajustan los controles automáticamente.

En el próximo post, mostraré como capturar las interacciones de los usuarios cuando utilizan una página asociada a un Tile en la Band.

 

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – List, add and delete Tiles using an #Windows10 app and Visual Studio 2015

Hola!

After a couple of post on how to connect and use C# to access a Microsoft Band information, today’s post will explain about how we can work with the Tiles of in a Band using C# code. In the references section, there are a couple of links explaining how Tiles works in in a Band. In this post I will explain the most important actions we have to work with Tiles

  • We will use the TileManager class to work with Tiles
  • With this class, you will be able
    • get the custom Tiles added to the Band
    • add a Tile
    • delete a Tile
    • find out the available space to add Tiles
    • Etc.

Let’s start with an easy sample

Add or remove a Tile

The essential features that we have to define the moment of creating a Tile are

  • Id (guid) to identify the Tile
  • A name for the Tile
  • 2 images to identify it, 24 x 24 pixels and 46 x 46 pixels

For this example, the images that I will use will be the following:

And the code to add a Tile is as follows.

  • 142 to 150 lines, defines the Tile, and also the contents of the
  • Lines 152 to 152, removed the Tile (if it exists) and then add the Tile with your content

At this time, we will see that it starts the process of synchronization between the app on Windows 10 and the band. This starts with a notification in the Band while the Tile is removed:

And confirmation on the App to add this tile to the Band.

Once the process is finished, you will see the new Tile between the band.

The elimination, only shows the synchronization and then we will see that the tile is no longer between the Band.

List the Tiles custom in the Band

To list the tiles custom, also we will use the TileManager class. The following example shows a Message Dialog with the data of the Tiles custom.

The message of example shown would be the following

And that’s all for today, in the next few posts we will see how to work with a user interactions in a Tile.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – Listar, crear y eliminar Tiles desde una app #Windows10 con Visual Studio 2015

Hola!

Después de ver como conectarnos y utilizar C# para acceder a la información de una Microsoft Band, hoy veremos una de las acciones más interesantes que podemos hacer: trabajar con las Tiles de una Band. En la sección de referencias, hay un par de links donde se explica cómo funcionan las tiles en una Band. En este post explicaré las acciones más importantes que tenemos para trabajar con Tiles

  • Utilizaremos la clase TileManager para trabajar con Tiles
  • Con esta clase podremos
    • Obtener los Tiles personalizados agregados a la Band
    • Agregar un Tile
    • Eliminar un Tile
    • Averiguar el espacio disponible para agregar Tiles
    • o Etc

Empecemos con los ejemplos más simples

Agregar o Eliminar un Tile

Las características fundamentales que tenemos que definir al momento de crear un Tile son

  • Un id (guid) para identificar el mismo
  • Un nombre para el Tile
  • 2 imágenes para identificarlo, de 24 x 24 pixels y de 46 x 46 pixels

Para este ejemplo, las imágenes que utilizaré serán las siguientes:

Y el código para agregar un Tile es el siguiente.

  • En las líneas 142 a 150, se define el Tile, y además el contenido del mismo
  • Las líneas 152 a 152, eliminan el Tile (si es que existe) y luego agrega el Tile con su contenido

En este momento veremos que se inicia el proceso de sincronización entre la app en Windows 10 y la band. Esto comienza con una notificación en la Band mientras se elimina el Tile:

Y la confirmación en la App para agregar este tile a la Band.

Una vez finalizado el proceso, podremos ver el nuevo Tile entre las opciones de la band.

La eliminación, solo muestra la sincronización y luego veremos que el tile no está más entre las opciones de la Band.

Listar las Tiles personalizadas en la Band

Para listar las tiles personalizadas, también utilizaremos la clase TileManager. El siguiente ejemplo muestra un Message Dialog con la información de las Tiles personalizadas.

El mensaje de ejemplo mostrado sería el siguiente

Y eso es todo por hoy, en próximos posts veremos cómo trabajar con las interacciones de un usuario en un Tile.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Microsoft Band Get Started

Microsoft Band SDK

Microsoft Band Tiles

Microsoft Band Experience Design Guidelines

– El Bruno, Como conectar una Microsoft Band a un Windows 10 device

– El Bruno, Conexión y acceso a los sensores de una Band en una app Windows 10 con Visual Studio 2015

#MSBAND – How to connect to a Band and access sensor information in a #Windows10 app using Visual Studio 2015

Hola!

In my previous post I wrote on how to connect a Microsoft Band to a Windows 10 device using Bluetooth. Today I will show the 5 lines of code that we should use to access the Band from a Windows 10 Universal App project and also to show information from the band sensors.

1. Once we have paired the device with our computer, we can now create a Universal Windows App in Visual Studio 2015.

2. We must install the specific NuGet package for Microsoft Band for Windows 10 apps.

3. The MSBand SDK, includes a special class that is what allows us to work with the band [Microsoft.Band.BandClientManager]. This class allows us to

a. to list the bands associated with a device

b. connect to one Band

4. In the following code sample

a. lines 41 and 42, displays how to access to the instance of the manager and get the associated Bands.

b. line 55, connect to the MSBand

5. To display information for the band, I use a class that Iris wrote some time ago. This information is then displayed in a Text Block in Windows 10 app.

6. Our next step is to access the information from any of the sensors of the Band. To do this we use the [SensorManager] class. The following code example displays

a. lines 69 and 70, request user grant to access information from a sensor. This is not necessary for all sensors, although some like the Heart Rate one, requires this.

b. line 71, subscription to the change of values

c. line 72, beginning of reading of values

d. line 76, processing and reading of values

7. In my ugly Windows 10 app, this information is also displayed in a text block.

8. Finally, the following video shows the application in raw mode showing the band information.

In the next posts we will see how to send information to the band and how to interact with the same.

Code sample: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Microsoft Band Get Started

Microsoft Bank SDK

– El Bruno, How to connect a Microsoft Band to a Windows 10 device

– Iris Classon, Connect to a Band and retrieve Band information

#MSBAND – Conexión y acceso a los sensores de una Band en una app #Windows10 con Visual Studio 2015

Hola!

En el post anterior comenté como emparejar una Microsoft Band desde un dispositivo Windows 10, directamente como un Bluetooth device. Hoy veremos las 5 líneas de código que debemos usar para acceder a la Band desde un proyecto Windows 10 y como mostrar información de sus sensores.

1. Una vez tenemos emparejado el device con nuestro ordenador, ya podemos crear una Windows Universal App en Visual Studio 2015.

2. A continuación debemos instalar el paquete NuGet específico para Microsoft Band para apps Windows 10.

3. Dentro del SDK de MSBand tenemos una clase especial que es la que nos permite trabajar con la misma [Microsoft.Band.BandClientManager]. Esta clase nos permite

a. Listar las bands asociadas con un device

b. Conectarnos a una Band

4. El siguiente ejemplo de código muestra

a. Líneas 41 y 42, como acceder a la instancia del manager y obtener las MSBands asociadas.

b. Linea 55, conectarse a la MSBand

5. Para mostrar información de la band, utilizo una clase que Iris escribió, que se auto explica. Esta información luego es mostrada en una caja de texto en la app Windows 10.

6. El siguiente paso, es acceder a la información de alguno de los sensores de la Band. Para esto utilizamos la clase [SensorManager]. En el siguiente ejemplo de código podemos ver

a. Líneas 69 y 70, se pide acceso al usuario para acceder a la información del sensor. Esto no es necesario para todos los sensores, aunque algunos como el de HeartRate, si lo requieren.

b. Línea 71, suscripción al cambio de valores

c. Línea 72, comienzo de lectura de valores

d. Línea 76, proceso y lectura de valores

7. En el caso de la app de Windows 10, esta información también se muestra en un bloque de texto.

8. Y para finalizar, el siguiente video, muestra a la aplicación en modo raw mostrando información de la band.

En próximos posts veremos cómo enviar información a la band y cómo interactuar con la misma.

El código completo de la app, se puede descargar desde GitHub desde aquí https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

Microsoft Band Get Started

Microsoft Bank SDK

– El Bruno, Como conectar una Microsoft Band a un Windows 10 device

– Iris Classon, Connect to a Band and retrieve Band information