3 Octobre 2013 Les Communautés MS
PixelSense, une histoire collaborative Nicolas CALVI Consultant Senior / Expert NUI MVP Hardware Interaction Design & Development Wygwam nicolas.calvi@wygwam.com Blog : http://blog.nicolascalvi.com/ Twitter : @nicolascalvi Facebook : Black Blog
Accélérateur sur technologies Microsoft.NET WPF Silverlight HTML5 MVC Cartographie Cloud SharePoint Office 365 Lync Windows Phone Windows 8 UX TFS Test Méthodologie SQL Server SSRS SSAS x 80 collaborateurs France Belgique Suisse Canada
Objectif de la session Sommaire - Introduction - Détail du périphérique - Les périphériques - Techniquement - L interface «Shell» - Conception d interface - Général - Sur PixelSense - Développement - Contrôles du SDK - API spécifique
Introduction Définition des concepts et première approche
Un monde de NUI Une évolution de nos habitudes NUI : natural user interface Pas de périphérique entre l Homme et la machine, utilisation du corps pour naviguer dans l interface - Le corps : Kinect, Leap Motion - Tactile : Microsoft Surface, PixelSense, Windows Phone, Windows 8 - La voix : reconnaissance vocale, Microsoft Speech. Intuitif, utile
Un monde de NUI Surprendre, innover et créer Les périphériques NUI doivent amener l utilisateur vers de nouveaux usages, rendant les actions quotidiennes plus ludiques et plus intuitives. Simplifier la technologie. Créer des interactions étendues qui permettent de se démarquer des usages courant, capter l attention des utilisateurs et leur faire partager une «expérience technologique».
La collaboration Pouvoir utiliser un support à plusieurs Le concept même de collaboration sur un support tactile entraine une utilisation du périphérique a plusieurs utilisateurs. - Vertical : 2 personnes - Incliné : 2 à 3 personnes - Horizontal : 4 personnes
Détail du périphérique Spécification technique, Software et Shell.
Les périphériques Microsoft Surface La première table collaborative qui voit! - Reconnaissance infrarouge - 5 caméras - Reconnaissance de «Tag» - Collaborative - Multiutilisateurs
Les périphériques Samsung SUR40 with Microsoft PixelSense Une nouvelle technologie, Pixel Sense. Une bonne solution tactile sur le marché, fluide et précise. - Technologie infrarouge unique - Gestion des Tags - Différencie les contacts (doigts, volumes, ) - Orientation des contacts - Orientation de la table - Massivement multi-points
Techniquement Spécification de la table Quelques éléments Hardware : - Processeur Athlon X2 Dual-Core 245e (2.9GHz) - Mémoire 4Go DDR3 - Ecran 40 Full HD (1920x1080) - Carte graphique AMD HD6750M
Techniquement Spécification de la table Quelques éléments Logiciel : - Windows 7 Pro 64 bit Embeded (PixelSense édition) - Surface Shell & Surface Administration - Développement - XNA 4.0 - Framework.Net 4.0 - WPF - Surface SDK 2.0
L interface «Shell» Accessible et adapté à tous les usages - Orientable - Prévu pour une expérience unifiée - Exécution «sandbox» des applications
L interface «Shell» Un comportement unifié Clavier, MessageBox, Bouton de retour au Shell
Conception d interface Comment bien concevoir de manière générale. Comment bien concevoir sur PixelSense.
Concevoir des interfaces (Général) L importance du Design Tous commence par prendre du temps pour : - Concevoir pour tous - Concevoir pour être utile - Concevoir pour être productif - Concevoir pour une expérience agréable
Concevoir des interfaces (Général) Importance des métiers Designer : Celui qui conçois Graphiste : Celui qui met en image Développeur : Celui qui donne vie
Concevoir des interfaces (Général) Gestion de l espace vertical et incliné Problématiques : - Ne pas empiéter sur l espace de l autre - Que chacun puisse accomplir ses actions - Information claire qui ne déborde pas sur l autre Pensez a bien séparer les zones collaboratives de façon vertical.
Concevoir des interfaces (Général) Gestion de l espace horizontal Problématiques : - Orientation des personnes - Arriver à garder un espace de travail personnel - Partager facilement les éléments manipulées Pensez a bien créer des zones de travail pour chaque personne et une zone commune accessible de tous.
Concevoir des interfaces (PixelSense) Fond sombre Permet de ne pas perturber la détection des contact
Concevoir des interfaces (PixelSense) Type d interaction - Filtrer les contacts par type : doigt, tag, blob, - Un accès peu fréquent : utiliser un tag par exemple. - Action critique : créer un délais ou un feedback pour interpeller.
Concevoir des interfaces (PixelSense) Ecran d accueil «vivant» Pour une expérience optimal - Permet d avoir un effet «Waouh» - Permet une meilleure immersion
Concevoir des interfaces (PixelSense) Les quatre coins Cela fait partit du Shell, c est donc un élément central avec lequel il faut composer. - Toujours prévoir de la place pour l icône et son expansion - Essayez de faire en sorte qu il s intègre dans la charte
Concevoir des interfaces (PixelSense) Interactions étendues avec des «Tags» - Sortir des 2 dimensions de l interface pour l étendre. - Un objet pour une fonction particulière. - Des objets assez grand pour être manipulés
Concevoir des interfaces (PixelSense) Cas de Manchester - Surface V1 - Exemple d interaction avec objet - Exemple de démarche
Design d application Si le Design d application vous intéresse Johanna Rowe Designer Industriel & Interaction MVP Hardware Interaction Design & Development Wygwam Blog : http://www.johannarowe.com/ Twitter : @johanna_rowe Facebook : Design in Progress
Développement Ce qu il y dans le SDK Surface 2.0 Quelques lignes de code pour bien commencer
SDK Surface 2.0 «Write once, run anywere» - Permet de développer sur tous les périphériques Windows 7 - Extension de WPF 4.0 - Outils intégrés - Simulateur - Stress Test
Les contrôles du SDK Contrôle phare du SDK Le ScatterView est un contrôle de type «ItemsControl» qui permet de manipuler de façon collaborative des éléments. <s:scatterview ItemsSource="{Binding MySource}"> <s:scatterview.itemtemplate> <DataTemplate> <Grid> <TextBlock Text="{Binding Label}"/> </Grid> </DataTemplate> </s:scatterview.itemtemplate> </s:scatterview>
Les contrôles du SDK Contrôle phare du SDK Le «LibraryBar» et le «LibraryStack» permettent de gérer la visualisation et la sélection d éléments avec la possibilité de faire des groupes. <s:librarystack> <BitmapImage UriSource="Resources/Images/Blue1.jpg"/> <BitmapImage UriSource="Resources/Images/Blue2.jpg"/> </s:librarystack> <s:librarybar> <BitmapImage UriSource="Resources/Images/Blue4.jpg"/> <BitmapImage UriSource="Resources/Images/Blue5.jpg"/> </s:librarybar>
Les contrôles du SDK Contrôles redéveloppés Les contrôles standards ont été refait pour être utilisé en tactile
API Spécifique Les bases d un projet PixelSense Pour interagir avec le Shell et certaines possibilités du SDK <s:surfacewindow x:class="pixelsenseproject.mainwindow" 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"> <Grid> </Grid> </s:surfacewindow>
API Spécifique Filtrer sur le contact «doigt» Si l on veut filtrer sur le contact «Doigt», il faut faire appel aux API du SDK Surface 2.0 using Microsoft.Surface.Presentation.Input; private void Grid_TouchDown(object sender, TouchEventArgs e) { // Filtrage pour un doigt if (InteractiveSurface.PrimarySurfaceDevice.IsFingerRecognitionSupported && e.touchdevice.getisfingerrecognized()) { //... } }
API Spécifique Orientation d un contact Récupérer l orientation d un contact permet de diriger l interface vers l utilisateur peut importe ou il se trouve par rapport à la table. Cela permet aussi de filtrer les actions si l on veut que l interaction soit limitée à une personne se trouvant d un certain coté de la table. using Microsoft.Surface.Presentation.Input; private void Grid_TouchDown(object sender, TouchEventArgs e) { // Récupération de son orientation if (InteractiveSurface.PrimarySurfaceDevice.IsTouchOrientationSupported) { double orientation = e.touchdevice.getorientation(); } }
API Spécifique Gestion des «Tags» On peut récupérer la valeur d un tag pour identifier l objet qui est posé sur celle-ci. private void Grid_TouchDown(object sender, TouchEventArgs e) { // On vérifie si c'est un Tag if (InteractiveSurface.PrimarySurfaceDevice.IsTagRecognitionSupported && e.touchdevice.getistagrecognized()) { // Récupération des informations du Tag TagData taginfo = e.touchdevice.gettagdata(); } } // Récupération de sa valeur long value = taginfo.value;
API Spécifique Gestures Certaines gestuelles sont déjà présente dans le SDK, comme le «TAP» et le «Hold» <s:surfacewindow x:class="pixelsenseproject.mainwindow" 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"> <Grid s:touchextensions.tapgesture=" " s:touchextensions.holdgessture=" "> </Grid> </s:surfacewindow>
Conclusion Que retenir de cette session
Question? N hésitez pas je suis là pour ça nicolas.calvi@wygwam.com Blog : http://blog.nicolascalvi.com/ Twitter : @nicolascalvi Facebook : Black Blog
Merci à Nos Sponsors
Merci à nos partenaires et membres
Pour adhérer à l association : http://www.rebuild.f/adhesions Ou contact@communautes.ms Nous suivre sur Facebook : https://www.facebook.com/lescommunautesms Nous suivre sur Twitter : https://twitter.com/communautesms