Plus loin dans le développement pour Microsoft Surface

Avant de se lancer dans le développement à proprement parler, il est utile de rappeler ce qu'est Microsoft Surface.

Il s'agit d'un produit multitouche, développé par Microsoft, qui se trouve être composé de deux parties :

• une partie matérielle (généralement sous forme de table) ;
• une partie logicielle, qui permet l'interaction avec un (ou plusieurs) utilisateur(s).

Les utilisateurs qui manipulent la table Surface se trouvent en présence d'un écran permettant leur permettant de manipuler toute sorte de contenu digital tel que des photos, des vidéos, etc. Cependant, grâce à ces fonctionnalités techniques, cette table est bien plus qu'un simple lecteur de photos et de vidéos. Ainsi, l'utilisateur à la possibilité d'interagir avec le contenu, via un ou plusieurs doigts, pour le déplacer, l'étirer, l'agrandir, le rétrécir, etc.

Si vous voulez en savoir plus ou si vous ne connaissez pas le produit, jetez donc un coup d'œil au site officiel : http://www.microsoft.com/surface/ avant de passer à la suite de cet article qui vous expliquera comment vous pourrez développer vos propres applications pour Microsoft Surface.

Afin de comprendre comment une telle technologie est possible, observez l'image suivante, qui représente l'architecture de Microsoft Surface :

Comme vous pouvez le constater, plusieurs composants constituent cette plateforme :

• Windows Vista, qui est le système d'exploitation sur lequel Surface fonctionne et qui permet de disposer d'un ensemble de fonctionnalités telles que la sécurité, la gestion des droits, etc. ;
• une couche matériel, qui contient l'ordinateur, les caméras, la surface de projection, etc. qui fonctionne sous Vista ;
• un système de vision, qui est en charge de capturer les données envoyées par le matériel, afin que vous puissiez les utiliser dans le code de votre application ;

• deux jeux d'API :

  • la couche WPF, qui permet l'utilisation de cette technologie et d'un ensemble de contrôle,
  • la couche principale, qui permet des manipulations de l'interface graphique plus complexes que celles réalisables avec l'API WPF : animations 3D complexes, affichage via des « custom pixel shaders », etc. ;
• enfin, l'intégration entre Surface et le système d'exploitation est gérée par un shell.

Techniquement, vous pouvez donc constater qu'une table Surface n'est « rien d'autre » qu'un ordinateur équipé de Windows Vista, de matériel permettant, entre autres, la reconnaissance d'objets et d'un shell qui permet de faire la liaison entre les 2. Cependant, la partie logicielle de Surface supprime tous les éléments de l'interface, les notifications et les messages de Windows Vista.

Il est possible d'utiliser les notifications, disponibles dans Surface, pour afficher des informations qui seront présentées à l'utilisateur, éventuellement pendant une durée bien précise. Cette opération s'effectue au moyen de la méthode RequestNotification de la classe UserNotifications :

UserNotifications.RequestNotification("Notification", "Ce message disparaitra dans 5 secondes...", new TimeSpan(0, 0, 5));

à l'exécution, le message apparait et disparait au bout du nombre de secondes indiquées ou bien lorsque l'utilisateur clique sur la croix située au-dessus du bandeau :

Tout comme en WPF, il existe un composant particulier, avec Surface, permettant de dessiner. Dans le cas présent, il s'agit du contrôle SurfaceInkCanvas :

<s:SurfaceInkCanvas x:Name="inkCanvas"
                    Grid.Row="1"
                    EditingMode="Ink" />

Par défaut, la couleur utilisée est le noir cependant, en accédant à la propriété DefaultDrawingAttributes, vous accédez à l'ensemble des propriétés utilisées pour afficher les différentes Strokes représentant le dessin. Vous pouvez ainsi modifier la couleur des Strokes :

private void ChangeInkColor(object sender, RoutedEventArgs e)
{
    var btnColor = sender as SurfaceButton;

    if (btnColor != null)
    {
        var color = btnColor.Content.ToString();

        this.inkCanvas.DefaultDrawingAttributes.Color = GetColorFromString(color);
    }
}

// Method found here: http://geekswithblogs.net/ftom/archive/2008/08/21/silverlight-2-how-to-get-a-color-or-a.aspx
private Color GetColorFromString(string colorString)
{
    Type colorType = (typeof(System.Windows.Media.Colors));
    if (colorType.GetProperty(colorString) != null)
    {
        var color = colorType.InvokeMember(colorString, BindingFlags.GetProperty, null, null, null);
        if (color != null)
        {
            return (Color)color;
        }

        throw new InvalidCastException("Color not defined");
    }

    throw new NotSupportedException();
}

Microsoft Surface possède la particularité de pouvoir reconnaitre les objets dès lors qu'ils sont posés sur la table. Pour cela, il est nécessaire d'utiliser un objet de type TagVisualizer, qui réagit à un ou plusieurs contrôles tagués qui sont posés sur la table. Le résultat du contact entre cet objet et le matériel est affiché au moyen d'un objet de type TagVisualization.

Pour définir quels sont les objets tagués qui doivent déclencher la création d'objets de type TagVisualization, il est nécessaire de passer par la propriété Definitions (qui contient un ensemble d'objets de type TagVisualizationDefinition).

Pour créer un objet de type TagVisualization, avec Visual Studio, il suffit de faire un clic droit sur votre projet puis de choisir « Add New Item » => « Surface v1.0 » => « Tag Visualization (WPF) » :

Nous allons créer un TagVisualization qui affichera un rectangle rouge lorsqu'un objet marqué sera « déposé » sur la table :

<s:TagVisualization x:Class="DemoAppSurface.CustomTagVisualization"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Loaded="CustomTagVisualization_Loaded">
    <Rectangle Fill="Red" Width="50" Height="50" />
</s:TagVisualization>

À présent, nous allons déposer notre objet TagVisualizer, qui représentera la zone sur laquelle il sera possible de déposer des objets qui seront identifiés :

<s:TagVisualizer Name="visualizer" 
                 Grid.Row="1"
                 HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch">
    <s:TagVisualizer.Definitions>
        <s:ByteTagVisualizationDefinition Value="200" 
                                          TagRemovedBehavior="Fade" 
                                          Source="CustomTagVisualization.xaml"/>
    </s:TagVisualizer.Definitions>
</s:TagVisualizer>

Comme vous pouvez le constater, on place un TagVisualizer et on définit sa propriété Definitions : on y ajoute ainsi un objet de type ByteTagVisualizationDefinition qui servira à reconnaitre les objets dont le tag vaut 200 (0xc8). En effet, chaque objet associé à Microsoft Surface dispose d'un Tag, sorte d'identifiant unique, qu'il est possible de reconnaitre lorsque l'objet est déposé sur la table. Dans le cas présent, dès qu'un objet portant l'identifiant 200 est déposé sur la table, une instance du TagVisualization de type CustomTagVisualization est affichée à la place de l'objet. En ce qui concerne la propriété TagRemoveBehavior, elle sert à indiquer comment doit disparaitre le TagVisualization lorsque l'objet est enlevé de la table : sur un fondu ou directement.

À l'exécution, l'application se lance correctement et il est possible de simuler le fait qu'un objet, portant un Tag particulier, soit déposé au moyen du menu du simulateur :

Par défaut, le simulateur émule un objet possédant le Tag 192 (0xc0). Dès lors, si un objet portant ce Tag est déposé, rien ne se produit sur la table :

Cependant, si l'utilisateur dépose un objet possédant le Tag 200 (0xc8) :

Alors une instance du TagVisualization, spécifié dans la propriété Definitions, est correctement insérée dans l'application, là où l'utilisateur l'a indiqué :

De plus, si vous « enlevez » l'objet qui est déposé sur la table, vous pouvez constater que l'effet de fondu (ou non) est appliqué :

Chaque objet de type TagVizualisationDefinition possède deux propriétés utilisées pour modifier le centre du TagVisualization affiché :

• OrientationOffsetFromTag : qui permet de spécifier, en degré, l'inclinaison du TagVisualization
• PhysicalCenterOffsetFromTag : qui permet de déplacer le centre du TagVisualization, en fonction d'un objet de type Vector.

Ainsi, le code suivant :

<s:TagVisualizer Name="visualizer" 
                 Grid.Row="1"
                 HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch">
    <s:TagVisualizer.Definitions>
        <s:ByteTagVisualizationDefinition Value="200" 
                                          OrientationOffsetFromTag="45"
                                          PhysicalCenterOffsetFromTag="2.0,1.0"
                                          TagRemovedBehavior="Fade" 
                                          Source="CustomTagVisualization.xaml" />
    </s:TagVisualizer.Definitions>
</s:TagVisualizer>

Produit le résultat que vous pouvez constater sur cette image, où le TagVisualization est incliné de 45 degrés et déplacé de 2 sur l'axe des X et de 1 sur l'axe des Y :