Pierre's Embedded and Mobile Blog

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

February, 2012

Posts
  • Pierre's Embedded and Mobile Blog

    [Windows Phone 7.5] Supprimer le “pinch to zoom” sur un contrôle WebBrowser

    • 3 Comments

    Le ViewPort

    Le ViewPort se défini dans le code HTML. Il indique la largeur “virtuelle” de la page web. Sur un terminal mobile, on a envie d’ajuster le ViewPort en fonction de la largeur de l’écran, et d’une plateforme à une autre, ça peut varier (ça sera la même pour tous les Windows Phone). Le ViewPort permet de définir plusieurs propriétés:

    • width: par défaut, 320 (pixels). Comme ça c’est compatible iPhone, et après c’est le navigateur qui se charge de faire la conversion “pixels web –> pixels réels”.
    • height : par défaut, 480
    • user-scalable: permet de définir si l’utilisateur peut zoomer dans la page

     

    Certaines plateformes définissent des paramètres comme minimum-scale, maximum-scale, ou initial-scale… Ils ne sont pas supportées par IE9 dans Windows Phone.

    Le truc classique en manipulant le viewport pour supprimer l’effet de zoom, c’est de passer le paramètre user-scalable à “no” et le paramètre “width” à “device-width”:

    <meta name="viewport" content="width=device-width, user-scalable=no"/>  
    

     

    Supprimer les manipulations

    Mais cela ne suffit pas! En effet, si l’utilisateur essaie de zoomer, la page zoomera quand même… puis reviendra en place automatiquement, empêchant d’afficher un autre niveau de zoom que celui prescrit initialement, mais indiquant à l’utilisateur que son geste a bien été pris en compte (bonne pratique d’ergonomie en général, mais pas top quand on veut cacher qu’on utilise une webview… parce qu’on sait tous que c’est pourri!).

    Pour supprimer cet effet, il faut supprimer carrément les évènements de manipulation au niveau du contrôle WebBrowser. cela nécessite un peu de code qui m’a gentiment été soufflé par nos amis d’Ucaya, et plus particulièrement Romuald, dont l’origine est ce post de Colin Eberhardt:

    private void WebBrowser_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        var border = ((Microsoft.Phone.Controls.WebBrowser)sender).Descendants<Border>().Last() as Border;
    
        border.ManipulationDelta += Border_ManipulationDelta;
        border.ManipulationCompleted += Border_ManipulationCompleted;
    }
    
    private void Border_ManipulationCompleted(object sender,
                                        ManipulationCompletedEventArgs e)
    {
        // suppress zoom
        if (e.FinalVelocities.ExpansionVelocity.X != 0.0 ||
            e.FinalVelocities.ExpansionVelocity.Y != 0.0)
            e.Handled = true;
    }
    
    private void Border_ManipulationDelta(object sender,
                                            ManipulationDeltaEventArgs e)
    {
        // suppress zoom
        if (e.DeltaManipulation.Scale.X != 0.0 ||
            e.DeltaManipulation.Scale.Y != 0.0)
            e.Handled = true;
    
        //// optionally suppress scrolling
        //if (ScrollDisabled)
        //{
        //    if (e.DeltaManipulation.Translation.X != 0.0 ||
        //      e.DeltaManipulation.Translation.Y != 0.0)
        //        e.Handled = true;
        //}
    }

    Evidemment, il faut associer la méthode WebBrowser_Loaded à l’évènement Loaded du contrôle WebBrowser…

    Petite précision à propos de ce bout de code: il utilise la très excellente extension LinqToVisualTree qu’il faudra donc ajouter également au projet…

    Et voila, plus d’effet de zoom. Ceci étant dit, ça ne doit pas vous encourager à utiliser les WebBrowser pour autre chose qu’afficher des pages HTML… et surtout, quelqu’en soit votre utilisation, ne les utilisez jamais, AU GRAND JAMAIS, dans un Panorama ou un Pivot, ça casse l’expérience de navigation horizontale. Il y a une place spéciale en enfer pour les gens qui font ça. Vous voilà prévenu!

    Du bon usage du contrôle WebBrowser

    Les contrôles de type “WebBrowser”, (ou WebView) sont rarement bien utilisés…

    Un WebBrowser, c’est fait pour afficher du contenu web (du HTML) parce qu’on ne veut/peut pas le parser (par exemple, une page d’authentification OAuth).

    • Ce n’est pas fait pour éviter d’avoir à créer une expérience native.
    • Ce n’est pas fait pour réutiliser des vues entre différentes plateformes.
    • Ce n’est pas fait pour s’acheter une place sur un store, qu’on n’aurait pas eu avec un site web mobile.

     

    Malheureusement 90% du temps c’est ça qu’on voit. Il ne faut pas faire. Une expérience native c’est justement pour avoir quelque chose de spécifique à chaque plateforme, en terme d’ergonomie, de look’n’feel. C’est ce que les utilisateurs attendent! Malheureusement le développement d’application n’est pas toujours piloté par le développeur soucieux de la beauté du code, ou le créa soucieux de la beauté des visuels et des animations. Des fois, le responsable du projet qui n’a pas assez de sous, ou de temps, et qui doit faire avec ce qu’il a… et on se retrouve avec des webviews mal utilisées.

    Alors quand on utilise un contrôle WebBrowser, pour de bonnes ou de mauvaises raisons, il faut en contrôler le comportement. Sinon on se retrouve sur wtfmobileweb.com.

    Encore merci à @RomuxX pour l’info, et pour d’autres lectures intéressantes sur le sujet, je vous encourage à aller voir la page sur le développement web pour Windows Phone 7.5, sur MSDN.

  • Pierre's Embedded and Mobile Blog

    [Windows Phone 7.5] Ce que signifie la mise à jour 7.1.1 (Tango) du SDK pour votre application

    • 0 Comments

    Une CTP de la version 7.1.1 du SDK Windows Phone “Tango” a été annoncée au Mobile World Congress, et sur le blog de l’équipe Windows Phone. Au menu, plutôt des bonnes nouvelles: la mise à jour “Tango” ouvre la porte à des terminaux plus low-cost, particulièrement utiles dans les pays émergents, ajoute le support d’un certain nombre de langues et de pays pour le marketplace, et cela se traduit par un nombre d’utilisateurs potentiels de vos apps qui grossit d’environ 60% d’un seul coup…

    Parmi les concessions faites sur le châssis hardware pour diminuer les coûts des téléphones, il y a la possibilité de faire des terminaux avec seulement 256Mo de RAM. Ce choix a pour conséquence qu’une application qui consommerait plus de 90Mo de mémoire serait coupée automatiquement… Cela concerne moins de 5% des applications du Marketplace et nous travaillons avec ces développeurs pour les aider à revenir sous cette barre fatidique.

    Pour tester si c’est votre cas, la CTP de la version 7.1.1 du SDK Windows Phone amène une version “bridée” à 256Mo de l’émulateur. il n’y a en gros que ça d’intéressant dans cette version, qui n’est de toutes façons pas encore mure pour publier des applications sur Marketplace (pas de licence dite “go live”). Pas besoin de se jeter dessus, donc, surtout pour votre machine de production, mais si vous êtes dans les 5% à consommer plus de 90Mo, il peut être bon de le tester rapidement.

    Si vous savez que vous avez systématiquement besoin de plus de 90Mo, vous pouvez l’indiquer dans votre manifest, et alors l’application n’apparaitra plus aux utilisateurs des téléphones low-cost, évitant l’expérience “j’installe mais ça plante”.

    Il suffit de rajouter, dans le fichier WMAppManifest.xml, sous les capabilities les 3 lignes suivantes:

    <Requirements>
      <Requirement Name="ID_REQ_MEMORY_90" />
    </Requirements>
    

     

    Si on résume, soit vous utilisez moins de 90Mo, et tout va bien, soit vous utilisez plus de 90Mo de RAM, et là 2 options:

    1. Vous optimisez
    2. Vous décrétez que vous ne voulez pas que votre application soit installable sur les téléphones ne disposant que de 256Mo de mémoire, avec les 3 lignes ci-dessus

     

    Attention aux background agents…

    Votre application n’est pas sensée dépendre d’un background agent pour fonctionner correctement: dès le début, vous deviez prendre en compte le fait que vos utilisateurs peuvent les désactiver manuellement dans le panneau de configuration. Sur les terminaux à 256Mo de RAM, ils ne tourneront pas, de toutes façons. Une raison de plus d’y penser, donc, en créant l’expérience de votre application…

    • Cela ne concerne que les background agents génériques (PeriodicTask/ResourceIntensiveTask).
    • Si vous n’avez pas encadré le lancement de votre background agent dans un block try/catch, une InvalidOperationException sera levée et fera éventuellement crasher votre application… (qui aurait crashé de la même manière si le nombre maximum de background agents sur un terminal “normal” est atteint)… Si vous n’avez pas envisagé ce cas, je vous conseille de le faire Sourire
    • Si vous avez besoin de background agents pour activer des options spécifiques (live-tile, par exemple) essayez de ne proposer cette option que si le terminal dispose de plus de 256Mo… ce qui m’amène à la question suivante:

     

    Comment savoir si un terminal dispose de plus de 256 Mo?

    Réponse: En utilisant les DeviceExtendedProperties:

    try
    {
        long result = 
        (long)DeviceExtendedProperties.GetValue("ApplicationWorkingSetLimit");
    }
    catch (ArgumentOutOfRangeException) 
    {
        // The device has not received the OS update, which means the device is a 512-MB device.
    }

     

    Comment optimiser l’usage de la mémoire?

    La racine de tout ce qui concerne les performances des applications Windows Phone est sur cette page:

     

    Si vous êtes dans le cas d’un jeu en XNA (particulièrement sensible à l’usage de la mémoire) vous pouvez vous tourner vers:

     

    Une session qui a été jouée au Techdays 2012 sur le sujet sera par ailleurs bientôt en ligne…

    Pour conclure, je dirais bien que pragmatiquement à partir du moment où on code propre, et où on avait regardé dès le début les contraintes de certification de Marketplace (qui incluent, depuis la première version, la limite de 90Mo), il n’y aura pas de problème. Et pour ceux qui auraient une situation particulière, lié à un usage spécifique ou à une erreur bénigne dans le code au lancement des background agents, la résolution est facile! A vous de jouer!

    Source: Developping for 256-MB devices sur MSDN

  • Pierre's Embedded and Mobile Blog

    LiveMeeting : Comment faire des animations et des transitions pour rendre vos applications plus fluides?

    • 0 Comments

    E-camp : Windows Phone 7 - Comment faire des animations et transitions pour rendre vos applications plus fluides ?

     

    Ce vendredi, à la pause déjeuner, 13h30 – 14h, retrouvez moi pour un petit livemeeting de 20 minutes + 10 minutes de questions/réponses sur le thème des animations et des transitions. Ces dernières sont un point clef pour rendre votre application fluide aux yeux de l’utilisateur, le guider dans l’expérience, et c’est souvent un des détails qui font la différence entre une bonne et une excellente application.

    Voici le lien pour s’inscrire et suivre l’évènement!

    Pensez à être là 5 minutes en avance pour vérifier que la connectivité est bonne, il s’agit d’un livemeeting! et si vous ne pouvez être là, sachez que ce livemeeting sera webcasté, et accessible avec ce même lien!

  • Pierre's Embedded and Mobile Blog

    [Techdays 2012] EMB202 : Concevoir une application robotique avec Kinect et Robotics Developer Studio 4: les slides et la démo!

    • 0 Comments

    Voici un petit dossier avec les slides et la démo de la session EMB202, sur la conception d’applications robotique avec Kinect, et son intégration dans Robotics Developer Studio 4

    Les slides:

    La totale avec la démo disponible dans ce dossier skydrive

    Pour ceux qui s’intéressent plus particulièrement à la plateforme robotique que j’utilise dans cette session, il s’agit d’Eddie de chez Parallax

    Prochain rendez-vous pour la robotique chez Microsoft, Innrobo, les 14,15 et 16 Mars, à Lyon!

  • Pierre's Embedded and Mobile Blog

    [Techdays 2012] The Geek is in da House : le webcast, les slides et le code de la session

    • 0 Comments

    Suite à cette session mémorable dont le but était d’exposer les “petits projets” de quelques geeks bien fondus pour leur maison, voici le contenu de la session… le webcast, les slides, le code!

    Le Webcast

    image

    Pour retrouver la session il faut cliquer sur le 4ème chapitre dans la barre de défilement Sourire

    Contrôler son portail avec son téléphone (Fabien Tanquerel)

    Fabien (@ftanquerel) de D-Cube a commencé par nous faire une petite démonstration d’interfaçage avec du hardware à base de Netduino Plus : il nous explique le matériel utilisé, et nous fournit slides et codes sources sur le blog D-Cube

    Installer une infrastructure domotique pour pas cher et la piloter avec… n’importe quoi (Salah Amer)

    Salah (@proteus91300) nous montre quel matériel utiliser pour automatiser sa maison en X10 et le service WCF qu’il a développé pour interfacer sa maison avec son téléphone, son Nao, Kinect… bref un peu tout. Bonus à la fin, il nous parle de proteus, sa salle serveur chez lui, avec robot lego monté sur rails pour allumer/éteindre les machines, et serrure biométrique…  et vous pouvez retrouver à la fois ses slides et son code source sur cet article de son blog.

    Automatiser son climatiseur avec l’internet des objets… (moâ)

    Je montre dans cette partie comment on utilise un Netduino Plus et OpenSenSe pour mettre son climatiseur sur internet et pouvoir avoir des relevés de température réguliers, une automatisation de son démarrage en fonction de la chaleur dans la pièce, et un contrôle à distance. Les slides et le code sont sur ce skydrive là!

    L’infrastructure de streaming vidéo geek

    David (@deltakosh) et Stan (@squastana) ont fait des recherches avancées, field-testés et wife-proofées pour se débarasser de leurs dvds acquis légalement en les stockant sans pertes de qualité ou de données dans des gros NAS, et conçu à base de matériel (peu corporate on en conviendra) un mediacenter ultime et pas cher. Leur présentation est disponible dans ce même skydrive

    Pour terminer, je dirai que le futur de cette session est à écrire! on peut garder ce format avec d’autres projets, on peut imaginer des sessions “geek in the office”, “geek in the car”… j’ai même eu une proposition “geek in the kitchen” Sourire Alors lancez-vous, bidouillez, codez, racontez nous vos projets, faites vous connaitre, bref, partageons!

  • Pierre's Embedded and Mobile Blog

    [E-Camp] Animations et Transitions de pages dans Windows Phone 7.5, webcast et slides

    • 0 Comments

    Comme pour tous les e-camps, vous pouvez retrouver le webcast directement sur la page de l’évènement (en cliquant sur “Afficher en ligne”). Quant aux slides, je les ai publiées sur ce skydrive, les voici :

    D’une manière générale sachez que chaque e-camp peut être retrouvé directement sur sa page d’inscription, une fois qu’il a été enregistré (le jour J) il peut être revu.

Page 1 of 1 (6 items)