Le device

La table est équipée d’un processeur Intel Core 2 Duo, d’une carte graphique ATI X1650, de 2Go de RAM et enfin d’un disque dur SATA de 250Go. En terme d’affichage on dispose d’un écran de 61×46cm (utile pour certains calculs dans votre développement) et d’une résolution de 1024×768. En ce qui concerne le système d’exploitation il faut au minimum un Windows Vista SP1 avec les SDK adéquats.La table est assez honoreuse, il y a une version commerciale (11000€) et une version développeur (13000€).

Outis de développement

Le site officiel propose une page officielle pour retrouver l’ensemble des outils de développement.

La première chose à avoir est l’environnement de développement Visual Studio. Au départ j’avais commencé mon développement avec Visual Studio 2010 mais lors de mon premier déploiement sur le device, le shell a provoqué une exception non gérée je suis donc revenu sur Visual Studio 2008.

Il vous faudra également le SDK Surface ainsi que le simulateur compris dans le pack Microsoft Surface SDK 1.0 SP1 Workstation Edition. Vous pouvez avoir de nombreuses erreurs pendant cette installation :

• Si vous avez que Visual Studio 2010 installé.
• Si la résolution de votre écran est inférieure à 1280×980.
• Si vous voulez l’installer sur un système d’exploitation non supporté.

Une fois ce package installé vous allez pouvoir accéder :

• au simulateur Microsoft Surface.
• aux exemples livrés avec le SDK et la possibilité de les installer sur le simulateur.
• à l’outil permettant de générer des identytags (vous pouvez utiliser ce logiciel tiers comme alternative).
• et enfin aux differents outils pour configurer le simulateur.

Pour développer des interfaces graphiques sur cette plateforme il existe deux solutions ayant une utilisation différente. La première technologie pouvant être utilisé est Windows Presentation Foundation (WPF) pour les « business cases » et la seconde est XNA plus porté vers le développement de jeux vidéos.

La plupart des contrôles classiques sous WPF ont leur équivalence avec le SDK Surface permettant ainsi de récupérer l’évenement WM_TOUCH sur chacun des contrôles.

La reconnaissance tactile

Microsoft Surface dispose de son propre procédé de reconnaissance tactile qui repose sur la triangulation à partir de plusieurs caméras et de capteurs. Une fois la position récupérée il y a l’outil SurfaceInput livré avec le SDK qui permet de simuler l’événement WM_TOUCH sur cette position.

Il existe de nombreux contacts sur une table Surface :

• les doigts, comme vous devez vous en douter pour une reconnaissance tactile, la plupart des intéractions de l’utilisateur avec votre application va se faire avec ses doigts. Pour cela le SDK de Surface met à disposition tous les contrôles classiques prenant en compte ce contact.
• les tags, c’est une nouvelle façon d’intéragir avec l’application on peut facilement trouver des business cases pour ce type de contact. On différencie deux types de tag les ByteTags et les IdentityTags. Il existe une différence entre ces deux tags de part leur nombre de valeurs possibles. Sachant que les ByteTags proposent le moins de possibilités on peut donc l’utiliser pour reconnaître des objets alors que les IdentityTags peuvent avoir un très grand nombre de valeurs ce qui peut être utile pour une identification unique pour des utilisateurs.
• les blobs sont tous les autres contacts non reconnus comme doigt ou tag.

Vous pouvez à tout moment dans votre code connaître le type du contact courant grâce à l’énumération TagType.

Le simulateur

Le principal outil que vous allez utiliser c’est bien le simulateur Surface qui va émuler l’éxecution de votre application sur une table virtuelle. Vous avez plusieurs solutions pour intéragir avec votre application.

Voici la liste des actions possibles dans l’ordre d’arrivée dans le simulateur :

Dans l’onglet « Tools » :

• Contact selector : permet  de sélectionner un ou plusieurs contacts afin de réaliser une action dessus.
• Finger : permet d’ajouter un contact de type « Finger » sur le simulateur. Pour ajouter plusieurs fingers il suffit de cliquer sur le bouton droit de la souris une fois placé afin de verrouiller sa position.
• Blob : permet d’ajouter un contact de type « Blob » sur le simulateur.
• ByteTag : permet d’ajouter un contact de type « ByteTag » sur le simulateur avec la valeur dans le champ texte associé.
• IdentityTag : permet d’ajouter un contact de type « IdentityTag » sur le simulateur avec les valeurs dans les champs textes associés (séries et value).
• Clear all places contacts : permet de supprimer tous les contacts placés.
• Show/Hide contacts : permet de masquer ou d’afficher les contacts placés.

Dans l’onglet « Record » : un onglet fort pratique avec un ensemble d’outils pour automatiser certaines tâches. Vous pouvez charger, jouer et enregistrer un scénario.

Les évènements

Avec l’apparition de ce SDK on a vu l’arrivée de nouveaux évènements que l’on peut récupérer qu’avec des contacts (tags, doigts, blobs, etc.):

• ContactChanged : invoqué lorsque les attributs d’un contact tracké changent.
• ContactDown : invoqué quand un contact est placé sur la Surface.
• ContactEnter : invoqué quand le contact est placé sur le conteneur.
• ContactHoldGesture : invoqué lorsque le contact est un doigt et que l’appui est prolongé.
• ContactLeave : invoqué si le contact est sortit du conteneur.
• ContactTapGesture : invoqué pour un clic sur l’élément.
• ContactUp : invoqué quand le conteneur disparait de l’élément.
• GotContactCapture : invoqué pour la capture d’un contact sur l’élément.
• LostContactCapture : invoqué pour la disparition d’un contact capturé.

Les contrôles ScatterView et ScatterViewItem

Le ScatterView est sans aucun doute le contrôle le plus utilisé dans une application Surface car il donne la possibilité sans aucune ligne de code de manipuler n’importe quel élément (ScatterViewItem) en l’agrandissant ou en le faisant pivoter. Il gère même les collisions et l’inertie par défaut même si on peut modifier certains paramètres pour le faire réagir différement.

Si vous ajouter des éléments en XAML dans votre ScatterView ils vont se placer aléatoirement sur votre écran. Durant le développement de ma dernière application Surface, j’ai voulu forcer les positions de mes contrôles au chargement de l’application pour surcharger ces positions aléatoires. Il suffit de modifier le point central (Center) et l’orientation (Orientation) du contrôle.

Comme je vous ai précisé, il gère tout pour vous et ce qui est intéressant et qu’il faut bien comprendre c’est qu’il gère les bordures. Par défaut il prendra votre plus gros contrôle pour qu’il puisse sortir mais sans disparaitre pour autant. Donc attention aux tailles de vos contrôles, un gros et un petit ScatterViewItem et vous risquez de voir disparaitre votre petit contrôle.

scatteViewItem.Center = new Point(200, 550);
scatterViewItem.Orientation = -25;

Le contrôle TagVisualiser

Ce qui est intéressant aussi dans une application Surface c’est l’interaction que l’on peut mettre en place avec les tags. Pour pouvoir lire les tags vous n’aurez pas à développer un moteur de reconnaissance mais vous allez ENCORE utiliser un contrôle du framework nommé TagVisualiser. Il est là pour récuperer les tags et afficher un rendu graphique configuré au préalable.

Ce qui est assez contraignant c’est d’autoriser chaque tag que l’on veut utiliser en créant un TagVisualization et en lui configurant une valeur hexadécimale et une vue. Une fois que l’on a compris le fonctionnement on peut réaliser des rendus intéressants comme par exemple proproser un contour virtuel autour d’une carte réelle posée sur la table (la carte ayant bien entendu un tag au dos) avec plusieurs boutons pour réaliser une sorte de menu propre au tag.

foreach (var item in tags)
{
   long hexValue = long.Parse(item.Value, System.Globalization.NumberStyles.HexNumber);
   IdentityTagVisualizationDefinition def = new IdentityTagVisualizationDefinition();
   def.Value = hexValue;

   if (String.IsNullOrEmpty(item.Profil))
       def.Source = new Uri("MyFirstView.xaml", UriKind.Relative);
   else
       def.Source = new Uri("MySecondView.xaml", UriKind.Relative);

   TagVisualiser.Definitions.Add(def);
}

Vous avez ensuite un événement vous permettant d’insérer du code une fois que le tag autorisé est posé sur la table. Cet événement c’est le VisualizationAdded du contrôle TagVisualiser.

Une petite astuce si vous voulez avoir qu’un seul tag actif sur la table toujours dans l’événement VisualizationAdded. Suivant ce que vous souhaitez avoir soit le premier tag est le seul actif alors vous supprimer le tag courant et vous sortez de l’événement, soit vous voulez que le second tag dans ce cas là vous supprimer le premier TagVisualization dans les TagVisualizations actifs.

if (isFirstCardActive)
{
    TagVisualiser.RemoveVisualization(tmp);
    return;
}
else
    TagVisualiser.RemoveVisualization(TagVisualiser.ActiveVisualizations[0]);

Liens

• Blog officiel
• Outils de développement
• Cours en français depuis Dotnet-France
• Ressources techniques
• Vidéos de développement
• Guide du développeur
• Vue d’ensemble de l’environnement
• Vue d’ensemble de l’architecture
• Exemples
• Expérience utilisateur
• Support technique
• Forum officiel