Pierre's Embedded and Mobile Blog

Soulevons le capot des systèmes embarqués et mobiles

October, 2011

Posts
  • Pierre's Embedded and Mobile Blog

    [Windows Phone 7.5] Tutoriel sur la réalité augmentée, partie 3: afficher les données augmentées à l’écran

    • 2 Comments

    Cet article est le troisième et dernier d’une série qui constitue une introduction à la réalité augmentée avec Windows Phone 7.5 (Mango). Voici les liens vers les articles précédents:

     

    Dans le dernier article, nous avons appris à récupérer la position de l’utilisateur. Il faut aussi récupérer la position GPS de ces points d’intérêt, mais ce n’est pas le but de cet article que de détailler les API de foursquare. Une fois qu’on a ces coordonnées, il faut commencer par calculer la direction de ces derniers par rapport à la position de l’utilisateur et du téléphone, afin de savoir si on doit les afficher ou pas à l’écran quand l’utilisateur pointe son téléphone dans une direction ou une autre :

    foreach (Venue v in ViewModel.Venues)
    {
        // Calcul du cap de la Venue en fonction de la position du téléphone
        double Bearing = Math.Round(ARHelper.CalculateBearing(v.Location, ViewModel.MyLocation ), 0);
    
        // Calcul de la position de la Venue en fonction de l'angle, et de la distance, dans le repère XNA
        Vector3 RelativeVenuePosition = ARHelper.AngleToVector(Bearing, (WCSRadius * v.Distance / Radius));
    
        AddVenue(RelativeVenuePosition, v);
    }

     

    Le code ci-dessus calcul pour chaque point d’intérêt le cap en fonction de la position de l’utilisateur, et instancie un Vector3 représentant les coordonnées du point d’intérêt relativement à l’utilisateur. C’est de ce point dont on se servira par la suite pour calculer s’il doit être affiché ou pas !

     

    Vous remarquerez que le bout de code ci-dessus utilise quelques méthodes qui ne sont pas dans le framework. Ce sont des méthodes développées pour ne pas charger le code en calculs mathématiques de position : en voici le code :

    public static class ARHelper
    {
        public static double CalculateBearing(GeoCoordinate Venue, GeoCoordinate MyPosition)
        {
            ARHelper.DegreeToRadian(MyPosition.Latitude - Venue.Latitude);
    
            double num1 = ARHelper.DegreeToRadian(MyPosition.Longitude - Venue.Longitude);
            double num2 = ARHelper.DegreeToRadian(Venue.Latitude);
            double num3 = ARHelper.DegreeToRadian(MyPosition.Latitude);
            double angle = Math.Atan2(Math.Sin(num1) * Math.Cos(num3), Math.Cos(num2) 
                * Math.Sin(num3) - Math.Sin(num2) * Math.Cos(num3) * Math.Cos(num1));
                
            return ARHelper.RadianToDegree(angle) + 180.0;
        }
    
        public static Vector3 AngleToVector(double inAngle, double inRadius)
        {
            double num = ARHelper.DegreeToRadian(inAngle - 90.0);
            return new Vector3((float)Math.Round(inRadius * Math.Cos(num)), 0.0f, (float)Math.Round(inRadius * Math.Sin(num)));
        }
    
        public static double DegreeToRadian(double angle)
        {
            return 3.14159265358979 * angle / 180.0;
        }
    
        public static double RadianToDegree(double angle)
        {
            return angle * 57.2957795130823;
        }
    }

     

    Projeter les points d’intérêt sur l’écran

    Il ne reste plus qu’à afficher les points à l’écran ! Comme dit plus tôt, on va rafraichir l’affichage à chaque changement de position du téléphone on va donc écrire le restant du code dans la méthode qui sert de handler pour l’évènement de changement de position du spatial framework. C’est ici qu’on va faire tous les calculs de projection des points sur l’écran, en fonction de leur position relative qu’on a calculé plus tôt. On va donc retrouver toutes nos matrices… Allons-y petit à petit :

    D’abord, on calcule la position du téléphone dans l’espace :

    Matrix attitude = Matrix.CreateRotationX(MathHelper.PiOver2) * motionReading.Attitude.RotationMatrix;

     

    Le telephone étant tenu horizontalement, il faut appliquer une rotation e 90° sur l’axe des X sur la matrice de position u téléphone qui nous est renvoyée directement par le Spatial Framework.

    Ensuite, pour chacun des points, il va falloir créer une matrice qui décrit sa position en 3D dans le repère utilisé pour faire la projection :

     

    Matrix world = Matrix.CreateWorld(points[i], Vector3.UnitZ, Vector3.UnitX);

     

    Il ne reste plus qu’à projeter le point sur l’écran:

    Vector3 projected = viewport.Project(Vector3.Zero, projection, view, world * attitude);

     

     

    Une fois la projection faite, si le point est dans le champ de vision on les affiche, sinon on les masque:

    if (projected.Z > 1 || projected.Z < 0)
    {
        AugmentedLabels[i].Visibility = System.Windows.Visibility.Collapsed;
    }
    else
    {
        AugmentedLabels[i].Visibility = System.Windows.Visibility.Visible;
    
        // Centrage du contrôle sur le point
        TranslateTransform tt = new TranslateTransform();
        tt.X = projected.X - (AugmentedLabels[i].RenderSize.Width / 2);
        tt.Y = projected.Y - (AugmentedLabels[i].RenderSize.Height / 2);
        AugmentedLabels[i].RenderTransform = tt;
    }

     

    Ici le tableau AugmentedLabels contient les éléments graphiques à afficher (en l’occurrence, un UserControl avec une icône, un nom, et une distance.

    Et voilà ! Nous savons maintenant comment marche la réalité augmentée en mode « viewfinder » dans Windows Phone 7.5.

    Pour ceux qui souhaiteraient industrialiser leurs développements, il est possible de dériver un petit framework de tout ça… ou alors d’en utiliser un existant, comme celui-ci : Geo Augmente Reality Toolkit.

     

    Vous pouvez retrouver l’intégralité de ce tutorial au format word ainsi que l’application d’exemple sur le skydrive suivant:

     

     

    Happy coding !

  • Pierre's Embedded and Mobile Blog

    [Windows Phone 7.5] Tutoriel simple sur la réalité augmentée, partie 2: Les APIs

    • 0 Comments

    Cet article est le deuxième d’une série qui constituent une introduction à la réalité augmentée avec Windows Phone 7.5.

     

    Voyons maintenant les API qui nous permettent d’utiliser les différents composants utiles du téléphone, à savoir la caméra, le spatial framework qui permet d’avoir la position du téléphone et les APIs XNA permettant de réaliser les transformations.

     

    Accéder au flux de la camera

    C’est la partie la plus simple ! en effet avec Mango on dispose de 2 APIs différentes : la classe PhotoCamera, spécifique à Windows Phone, permettant de contrôler la caméra, qu’elle soit frontale ou au dos du téléphone, le flash, le bouton de prise de photo, etc… Une autre API existe, l’API héritée de Silverlight 4, qui garantit la compatibilité avec les applications Desktop, dont nous n’avons cure…

    Pour afficher le flux de la caméra à l’écran il faut définir une zone d’affichage, qui sera rectangulaire : pour cela, il suffit de définir un rectangle, dont nous définirons la source du contenu en code :

    <Rectangle>
        <Rectangle.Fill>
            <VideoBrush x:Name="viewfinderBrush" />
        </Rectangle.Fill>
    </Rectangle>
    

     

    Et pour le code behind :

    PhotoCamera camera = new PhotoCamera(CameraType.Primary);
    viewfinderBrush.SetSource(camera);

     

    Ces quelques lignes suffisent à afficher le flux vidéo à l’écran. Il faut savoir qu’on peut intercepter chacune des frames de la caméra pour y appliquer un traitement, mais cela ne nous intéresse pas dans cet article. C’est en revanche un élément clef pour l’autre type de réalité augmentée, qui nécessite d’appliquer un traitement à l’image pour détecter un tag par exemple.

     

    Déterminer la position du téléphone dans l’espace

    Maintenant que nous sommes en mesure d’afficher le code de la camera, il nous faut récupérer la position du téléphone. Pour cela nous allons utiliser un spatial framework, c’est-à-dire une API qui permet d’intégrer les fonctionnalités des différents capteurs du téléphone (accéléromètre, boussole, et éventuellement gyroscope), et d’y appliquer un certain nombre de traitements (des filtres par exemple) pour lisser le signal. Comme tous les capteurs dans Windows Phone 7 ce spatial framework dispose d’une interface asynchrone : on va donc l’instantier, le configurer pour recevoir un certain nombre de positions par seconde, et s’abonner à l’évènement de changement de position, avant de le lancer. C’est dans la méthode associé à cet évènement qu’on écrira le code permettant d’afficher les points d’intérêt à l’écran, étant donné que la position de ces points d’intérêt sur l’écran change en fonction de la position du capteur !

    Motion motion = null;
    
    if (!Motion.IsSupported)
    {
        MessageBox.Show("Motion API Not supported :(");
        return;
    }
    
    if (motion == null)
    {
        motion = new Motion();
        motion.TimeBetweenUpdates = TimeSpan.FromMilliseconds(66); // 15 FPS, largement suffisant
        motion.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<MotionReading>>(motion_CurrentValueChanged);
    
        try
        {
            motion.Start();
        }
        catch (Exception ex)
        {
            MessageBox.Show("Impossible de démarrer l'API Motion! " + ex.Message);
        }
    }

     

    Vous remarquerez qu’avant toute chose, on teste si l’API Motion est supportée : en effet, pour fonctionner le spatial framework a besoin au moins d’un accéléromètre et d’une boussole… hors cette dernière est optionnelle dans les chassis Windows Phone 7 (de même que le gyroscope). En tout état de cause, sans boussole, impossible de connaitre l’orientation du téléphone et donc de l’utiliser pour faire de la réalité augmentée… Le gyroscope quand il est présent amène quant à lui une bien meilleure précision dans la captation des mouvements du téléphone.

     

    Déterminer la position GPS et la direction des points d’intérêt

    Notre application exige qu’on connaisse la position de l’utilisateur afin de situer les points d’intérêt autour de lui. C’est chose très facile avec Windows Phone 7, grace à l’API GeoCoordinateWatcher. Encore une fois elle est asynchrone : il faut donc l’instancier, s’abonner à l’évènement de changement de position et démarrer le capteur :

    GeoCoordinateWatcher gcw = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
    if (gcw.Permission == GeoPositionPermission.Granted)
    {
        gcw.MovementThreshold = 20;
        gcw.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(gcw_PositionChanged);
        gcw.Start();
    }
    else
    { 
        MessageBox.Show("You denied location permission - please enter a location in the textbox");
    }
     

    Attention à bien vérifier que l’utilisateur a bien autorisé sa géolocalisation avant !

     

    Nous avons étudié les concepts mathématiques dans la partie 1, les APIs dans la partie 2, il ne reste plus qu’à utiliser tout cela ensemble pour obtenir une application! c’est l’objectif de la partie 3….

  • Pierre's Embedded and Mobile Blog

    [Windows Phone 7.5] Tutoriel simple sur la réalité augmentée, partie 1: les concepts, et les maths

    • 0 Comments

    Avec la version 7.1 du SDK Windows Phone (Mango), l’intégration de la réalité augmentée dans les applications mobiles va devenir beaucoup plus facile : de nouveaux composants font leur apparition et sont conçus pour rendre très simple le développement de ce type d’interface. Mais d’abord, intéressons-nous à ce qu’est la réalité augmentée, et aux concepts qu’il faut maitriser avant de s’attaquer au code.

    Le principe de base de la réalité augmentée est d’afficher en surimpression d’une image « réelle » (issue d’une caméra par exemple) des informations purement digitales. Les deux usages les plus courant de la réalité augmentée sont :

    • l’utilisation du téléphone en mode « viewfinder », par exemple pour repérer les directions de points d’intérêt autour de l’utilisateur qui pointe le téléphone dans une certaine direction.
    • L’utilisation du téléphone pour capter un « tag » ou un point visuel reconnaissable, sur lequel on affiche des informations en rapport avec ce point : c’est le cas de nombreux jeux par exemple qui se servent de ce principe pour intégrer le gameplay dans un environnement réel.

    Dans cet série d’articles, nous allons nous intéresser au premier cas d’utilisation, à savoir le téléphone en mode « viewfinder ».

    Les concepts de 3D et de mathématiques à comprendre

    La première chose à comprendre, c’est qu’il nous faut appliquer un certain traitement aux points d’intérêts : en effet nous voulons représenter dans un espace 2D (l’écran du téléphone) un certain nombre d’informations liées à des coordonnées 3D (le monde réel : latitude, longitude, distance, etc). Il faut donc projeter ces points sur l’écran. Et finalement, projeter dans un espace en 2D des points d’un monde en 3D, on le fait depuis longtemps dans le monde des jeux vidéos. On va donc reprendre le vocabulaire de ce monde :

    • L’œil de l’utilisateur correspond à une caméra : c’est un point, qui dispose de coordonnées dans un monde en 3D.
    • Le viewport, c’est l’écran du téléphone : la surface sur laquelle on va dessiner les éléments, s’ils sont dans une certaine zone.
    • Cette certaine zone s’appelle le frustum, et il a la forme d’une pyramide tronquée au sommet  (le sommet étant l’œil). C’est la zone qui est comprise entre l’écran, et une limite au loin qu’on appelle le far plane (l’écran devenant le near plane).

     

    Lorsqu’un objet sera contenu dans le frustum alors il sera projeté sur le viewport dans la direction de l’œil de l’utilisateur.

    Pour simplifier un schéma pas forcément trivial, on considérera que l’œil de l’utilisateur est à une distance fixe du viewport, dans l’axe de la normale à son centre (le vecteur qui part du centre du rectangle, perpendiculairement au plan du rectangle). Il n’existe de toute façon pas de moyen simple de savoir où se trouve l’œil de l’utilisateur par rapport à l’écran… A moins de faire du face tracking avec la caméra frontale, ce qui n’est pas l’objectif de cet article.

    Tout cela peut se résumer à ce schéma :

    Frustum

    Cette projection doit bien entendu également tenir compte de la position du téléphone : en effet, dans une localisation d’un objet en 3D (donc potentiellement, plus haut ou plus bas que l’utilisateur) il faut tenir compte de la position du téléphone (qu’il faut de toute façon connaitre pour savoir dans quel sens l’utilisateur regarde !!).

    Pour symboliser la position de la caméra, du téléphone, des points d’intérêt, et les transformations qu’il faut y appliquer pour les projeter sur l’écran, un seul outil… les matrices.

    Pas besoin de se replonger dans un cours d’algèbre linéaire pour faire de la réalité augmentée cependant ! il faut juste accepter le fait qu’une position peut être codée par un vecteur 3D (donc composé des 3 coordonnées x, y et z) auquel on adjoint en général une 4ème composante nécessaire pour les calculs qu’on appellera w. Par ailleurs il est possible de coder dans une matrice 4x4 à la fois des rotations, des translations, des mises à l’échelle (scaling), et des projections. Encore une fois pas besoin de comprendre pourquoi et comment ça marche (même si c’est très intéressant… si vous voulez en savoir plus, rendez-vous dans les ressources au bout de ce document, nombre d’articles intéressant y figurent pour avoir plus de contexte).

    Si on résume tout ça : je prends des points en 3D symbolisés par des vecteurs, que je multiplie par des matrices symbolisant des transformations, pour avoir de nouveaux vecteurs, dans un repère 2D : l’écran du téléphone. Nous verrons dans la suite que les API de Windows Phone 7 notamment dans XNA permettent de faire ça très simplement.

    Le prochain article de cette série sera consacrée aux APIs de Windows Phone dont on va se servir, à savoir la Caméra, la classe Motion (aussi appelée Spatial Framework) et le GPS

    Voici les liens vers les articles suivants:

  • Pierre's Embedded and Mobile Blog

    Windows Phone 7 Design Day: tout pour comprendre et vous former au design Metro, le 8 novembre au campus Microsoft

    • 4 Comments

    clip_image002

    Le 8 novembre, sur le Campus Microsoft à Issy-les-Moulineaux, on vous invite à rencontrer un des “Senior UX Designer” à l’origine de l’interface Metro de Windows Phone 7: Arturo Toledo.

    L’agenda est le suivant:

    • 10h: Bienvenue!
    • 10h15: metro: the foundation
      • Comprendre Metro, l’agencement, la typographie, les animations, les spécificités d’une expérience utilisateur sur téléphone
      • 11h: Pause!
    • 11h15: think: sketch, wireframe, prototype
      • Brainstorming créatif, techniques… la réflexion avant la conception
    • 12h: design: visual, interaction, motion
      • Le langage visuel, les graphismes, les animations et les patterns d’interactions
      • 12h45: déjeuner!
    • 14h: refine: best practices
      • bonnes pratiques, amélioration des performances perçues, utiliser les fonctionnalités du téléphone…
    • 14h45: make it XAML
      • importer du contenu dans Expression Blend, agencer et créer des contrôles…
      • 15h30: pause!
    • 15h45: workshop
      • démarrer une nouvelle application ou faites vous conseiller sur votre design!

     

    Voila quelques formations au design metro et quelques sessions sur le sujet auxquelles je participe, mais jamais encore je n’avais vu un planning d’évènement sur le sujet aussi bien gaulé (gauler étant un terme technique, bien entendu Clignement d'œil). Que vous soyez développeur Windows Phone 7 ou pas, je pense que vous allez en prendre plein la vue… il faudra vraiment y être!

    L’inscription c’est par ici!

  • Pierre's Embedded and Mobile Blog

    L’Accélérateur Windows Phone et les friday labs : du nouveau pour les développeurs mobiles

    • 5 Comments

    image

    L’Accélérateur Windows Phone, c’est une série de moyens mis à votre disposition, vous, les développeurs, pour vous aider tout au long de votre parcours sur la plateforme Windows Phone 7: formation, conception de l’application, compréhension du marketplace et de l’app-hub, jusqu’à la publication!

    Derrière ce programme se cache une “vraie personne” (pas un robot quoi) qui voue ses journées à vous aider, et qui va tacher de répondre à toutes vos requêtes:

    • Des ressources techniques: accès à l’app-hub offert, téléphones à disposition, support…
    • Du coaching: que ce soit de l’aide sur un point spécifique du développement, ou de la formation plus avancée (et gratuite) on devrait pouvoir vous aider à ne jamais vous sentir bloqué dans votre développement!
    • De la visibilité: que ce soit à l’évènement Le Web 11, sur Marketplace, ou à travers la réalisation d’une vidéo de promotion de votre application. Faisons en sorte que votre application soit un succès dès sa publication!

     

    Les friday labs, c’est tout simplement les portes de Microsoft France qui s’ouvrent tous les vendredis entre 10h et 18h pour les développeurs Windows Phone 7 qui souhaitent rencontrer des experts du développement Windows Phone 7, que ce soit pour du support technique, des feedbacks avisés sur une application, passer la certification… Bref, c’est l’occasion d’échanger, au sein du Microsoft Technology Center, sur le développement Windows Phone 7. N’oubliez pas de vous inscrire sur le site avant de passer!

  • Pierre's Embedded and Mobile Blog

    Après-midi du dev du 10 Novembre: Javascript et JQuery: sous le capot des applications HTML5 modernes

    • 0 Comments

    amdev_logoChaque mois les après-midi du développement vous propose sur le campus Microsoft à Issy-les-Moulineaux une demi-journée technique, du niveau débutant à avancé, et le prochain rendez-vous est le 10 novembre: au programme, Javascript et JQuery!

    Le programme est le suivant:

    • 13h30 : Accueil
    • 14h00 : Sessions
      • Les fondamentaux du langage. Le coté fonctionnel, le coté objet, la dynamicité…
      • Tour d’horizon des outils disponibles
      • JQuery, un framework qui simplifie grandement les développements web et mobiles : ce que l’on y trouve, ce qu’on peut en faire, les bonnes pratiques
      • Animations graphiques avec javascript notamment avec le tag canvas.
    • 18h00 : Fin et distribution de T-Shirts

     

    Javascript est un langage qui prend de plus en plus d’importance dans les modèles de développement: C’est bien entendu le langage que l’on va retrouver derrière tout site en HTML5,  depuis l’accès au donnée jusqu’à l’animation des éléments graphiques, mais aussi dans le monde du mobile, et dans le futur jusque dans les applications!

     

    >> Cliquez ici pour vous inscrire <<

  • Pierre's Embedded and Mobile Blog

    [b-ware] Ateliers Kinect et .NET Microframework, les objets connectés sont à Brest!

    • 0 Comments

    J’aurai le plaisir d’animer demain Jeudi 6 octobre un atelier autour du .NET Microframework et des différentes plateformes qu’on peut utiliser pour prototyper des objets connectés, et mes amis d’Ucaya vont animer l’atelier sur Kinect!

    Afin de bien se préparer à ces ateliers, les prérequis techniques sont les suivants:

Page 1 of 1 (7 items)