La série de Julien Corioland qui était à Build 2012

• Windows Phone 8 Application Model (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/2-013)
• Windows Phone 8 Native C/C++ Game Development (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/3-046)
• Partage de code entre Windows Phone 8 et Windows 8 (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/3-043)
• Windows Phone 8 In App Purchase (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/2-016)
• Développement d’applications connectées sous Windows Phone 8 (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/3-047)
• Maps, géolocalisation et exécution en arrière plan (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/2-017)
• Windows Phone 8: Tiles & Notifications (et la session correspondante: https://channel9.msdn.com/Events/Build/2012/2-019)
• Windows Phone 8: Utilisation du Proximity Device NFC
• Windows Phone 8: Ecrire un tag et lancement d’une application via NFC

Du coté de chez Rudy Huyn:

• Bien commencer avec Azure Mobile Services pour Windows Phone
• Windows Phone 8 et la compilation dans le nuage
• Donnez une tuile 8.0 à votre application 7.5
• Les nouvelles vignettes dynamiques Windows Phone 8
• Gérer les différentes résolutions de SplashScreen sous Windows Phone 8

Du coté de chez SOAT:

• Windows Phone 8: Nouveau SDK, Nouveaux Outils

De la part de Samuel Blanchard:

• Text To Speech et Accessibilité dans Windows Phone 8

Par Olivier Matis:

• Reconnaissance Vocale Multi-langages avec Windows Phone 8

J’en profite pour remettre les miens:

• Les outils et les liens utiles pour le SDK Windows Phone 8
• Les nouveautés du SDK Windows Phone 8 avec des exemples de code

Et du coté de la communauté anglophone, il y a des ressources immanquables:

• Le support des frameworks PhoneGap, Sencha Touch, Ogre3D, etc
• Le résumé des nouveautés du SDK illustrées par Nokia
• Les sessions de la Build 2012 sur Windows Phone 8

Ou sont les outils ?

Tous les liens importants sont listés dans cet article, alors lancez les téléchargements/installations pendant que vous lisez cet article !

Les liens utiles du SDK Windows Phone 8

Que faire du code existant ?

Réponse courte : on peut tout garder ! 100% des API de Windows Phone 7.0/7.1 sont présentes dans Windows Phone 8. Ceci étant dit, le passage à une nouvelle version et l’ajout de fonctionnalités est souvent l’occasion de ré-architecturer un peu son code. Pourquoi ne pas le rendre plus portable, par exemple pour être présent aussi sous Windows 8 ? Pour cela je vous réfère à la série d’articles sur le portage et le partage de code entre Windows 8 et Windows Phone :

Stratégies et Techniques de Partage et de Portage de code entre Windows Phone et Windows 8

Que vous décidiez de modifier votre code existant ou pas, vous pouvez par ailleurs tester votre application sur un Windows Phone 8 et constater que sans rien changer, elle fonctionne, voire noter un gain de performance significatif, principalement dû au nouveau matériel, et aux optimisations réalisées sur l’OS et le Runtime.

Si vous préférez un document offline et l’application exemple:

Voici le lien vers le dossier Skydrive contenant les deux:

http://sdrv.ms/Sx5VsO

Quels sont les nouveaux scénarios possibles ?

Passons maintenant aux nouveaux scénarios, que nous allons étudier en commençant par les plus rapides à intégrer (de l’ordre de quelques minutes !!) et en poussant vers les plus compliqués.

En moins d’une heure…

Vous pourrez avoir intégrer des nouvelles vignettes dynamiques, animées, et de différentes tailles, et de l’intégration sur l’écran de verrouillage. Vous pourrez également profiter des nouveaux launchers et choosers, de l’expérience Nokia Maps, des fonctionnalités de reconnaissance et synthèse vocales, d’un gain de performance non négligeable sur le LongListSelector… et aussi éventuellement revoir vos layouts et vos assets pour les nouvelles résolutions J

En une demi-journée…

Associez votre application à des types de fichiers ou des schémas d’URL, devenez une application « Lens » intégrée à l’appareil photo, ou bien un fournisseur de contact pour le hub contacts/people. Profitez de la nouvelle option de géolocalisation en background. Monétisez votre contenu et les bonus de vos applications avec les nouvelles options d’achat In-App.

Et pour aller plus loin…

Intégrez de nouvelles fonctionnalités ou du code existant avec le nouveau modèle de développement en C++, tirez parti de la technologie NFC pour s’identifier, payer ou établir une communication entre 2 appareils et profiter ensuite du Bluetooth ou du Wifi pour échanger des données, Intégrez-vous au wallet pour offrir à l’utilisateur d’y retrouver ses cartes de fidélité, cartes de membres, et éventuellement des coupons de réduction… Autoriser l’application à tourner 100% du temps en background pour faire de la géolocalisation… Ces points-là méritent des articles à part entière, nous ne les traiterons donc pas dans cet article-ci.

Passons à la pratique

Les nouvelles vignettes dynamiques

Le nouvel écran d’accueil supporte 3 tailles de vignettes :

• Les petites, d’environ ¼ de la taille des vignettes « normales »
• Les vignettes carrées, auxquelles nous étions déjà habituées
• Les vignettes larges, qui font la taille de deux vignettes carrées

Avec ces nouvelles tailles viennent de nouveaux modèles, à l’instar des vignettes de Windows 8, qui permettent d’animer (ou pas) votre vignette principale et les vignettes secondaires.

• StandardTile, qui permet d’avoir une icône, un titre, éventuellement du texte au dos, et un compteur
• FlipTile, qui se retournera aléatoirement et supporte des contenus sur l’avant et l’arrière de la vignette.
• CycleTile, qui permettra de faire défiler verticalement du contenu (texte ou photos)
• IconicTile, qui mettra en valeur votre icône et éventuellement du texte ou un compteur associé.

Chacun de ces modèles existe dans les formats normaux et larges, le petit format étant déduit du premier. A chaque modèle est associé une structure de donnée contenant le texte et éventuellement l’adresse des images qu’on veut afficher, il s’agit des classes héritant de la classe abstraite ShellTileData.

Comme avant, on pourra donc créer une telle structure de donnée, la remplir avec les informations à afficher, et créer une nouvelle vignette correspondante en appelant la méthode ShellTile.Create( …) pour une nouvelle tuile secondaire, ou bien la méthode Update() pour les vignettes existantes.

FlipTileData ftd = new FlipTileData();
ftd.Title = "Flip Tile Title";
ftd.Count = 42;
ftd.BackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative);
ftd.WideBackContent = "Flip Tile Wide Back Content";
ftd.WideBackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative);
ftd.SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative);

ShellTile.Create(new Uri("/Pages/TilesAPI.xaml", UriKind.Relative), ftd, true);

IconicTileData itd = new  IconicTileData();
itd.BackgroundColor = Colors.DarkGray;
itd.Title = "Iconic Tile Title";
itd.IconImage = new Uri("/Assets/Tiles/IconicTileMediumLarge.png", UriKind.Relative);
itd.SmallIconImage = new Uri("/Assets/Tiles/IconicTileSmall.png", UriKind.Relative);
itd.Count = 42;
itd.WideContent1 = "Wide Content 1";
itd.WideContent2 = "Wide Content 2";
itd.WideContent3 = "Wide Content 3";

ShellTile.Create(new Uri("/Pages/TilesAPI.xaml", UriKind.Relative), itd, true);

var images = new List<Uri>();
images.Add(new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative));
images.Add(new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative));
images.Add(new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative));

CycleTileData ctd = new CycleTileData();
ctd.Count = 42;
ctd.CycleImages = images;
ctd.SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative);
            
ctd.Title = "Cycle Tile Title";
            
ShellTile.Create(new Uri("/Pages/TilesAPI.xaml", UriKind.Relative), ctd, true);

Changer le contenu de l’écran de verrouillage

Une nouvelle API de Windows Phone 8 permet de changer l’image de fond de l’écran de verrouillage, ainsi que les 3 lignes de texte qui apparaissent sous l’heure, et éventuellement un compteur avec une mini-icône, comme les applications mails.

Le changement de l’image de fond se fait en appelant d’abord l’API du LockScreenManager pour récupérer l’autorisation de changer celui-ci, puis il suffit de lui indiquer l’URL (locale) de l’image à utiliser. Moins de 10 lignes de code :

try
{
    if (!LockScreenManager.IsProvidedByCurrentApplication)
    {
        await LockScreenManager.RequestAccessAsync();
    }

    if (LockScreenManager.IsProvidedByCurrentApplication)
    {
        Uri imageUri = new Uri("ms-appx:///Assets/wpbackground.png", UriKind.RelativeOrAbsolute);
        Windows.Phone.System.UserProfile.LockScreen.SetImageUri(imageUri);
    }
}
catch (Exception ex)
{
    // Handle exception
}

Pour ce qui est du texte et éventuellement du compteur, en fait c’est encore plus simple (et logique) : le lockscreen reprendra le texte et le compteur de la vignette dynamique principale de l’application. Il faut donc que l’application soit épinglée sur l’écran d’accueil et que l’utilisateur ait choisi d’avoir ces notifications sur son écran de verrouillage.

Devenir un Store de contacts

Avec la version précédente du SDK, il était possible d’accéder à la liste de contacts (avec des API LINQ) en lecture seule, et éventuellement d’écrire dans un store existant, avec le launcher SaveContactTask.

Il est maintenant possible de devenir un fournisseur de contacts, au même titre que les réseaux sociaux ou de comptes mails existants nativement. Il faut commencer par créer (ou ouvrir, s’il est déjà créer) le store de contacts propre à l’application :

var store = await ContactStore.CreateOrOpenAsync();

Ensuite, on peut y faire des requêtes, pour par exemple afficher la liste des contacts déjà enregistrés par l’application :

ContactQueryResult cqr = store.CreateContactQuery();
IReadOnlyList<StoredContact> contacts = await cqr.GetContactsAsync();
if (contacts.Count > 0)
    Dispatcher.BeginInvoke(() => lbxContacts.DataContext = contacts.ToList());

Enfin, on peut ajouter de nouveaux contacts simplement:

StoredContact c = new StoredContact(store);
c.DisplayName = "John Doe";
            

IDictionary<string, object> props = await c.GetPropertiesAsync();
props.Add(KnownContactProperties.Email, "john@doe.com");
props.Add(KnownContactProperties.MobileTelephone, "118218");
            
await c.SaveAsync();

Facile, et on obtient ensuite une fiche contact dans le hub avec lequel l’utilisateur peut interagir, et éventuellement la lier aux autres fiches qu’il aurait de différentes sources sur le même contact :

S’intégrer au calendrier

En plus des alarmes et des rappels, qui permettaient d’imiter l’expérience native du réveil ou du calendrier pour rappeler à l’utilisateur un évènement, et en plus de l’accès en lecture seule au calendrier, l’arrivée de Windows Phone 8 rajoute un launcher qui permet de sauvegarder un évènement dans le calendrier :

SaveAppointmentTask sat = new SaveAppointmentTask();
sat.StartTime = DateTime.Now + TimeSpan.FromDays(1);
sat.Details = "Details of the appointment";
sat.Subject = "Appointment generated from an app";
sat.EndTime = sat.StartTime + TimeSpan.FromHours(2);

sat.Location = "location";
sat.Show();

Rajouter le partage de photos/vidéos sur les réseaux sociaux

A l’instar des ShareLinkTask et ShareStatusTask qui permettent, depuis Windows Phone 7.5, de partagere des liens et des statuts sur les réseaux sociaux, la nouvelle ShareMediaTask va permettre de partager des photos et des vidéos.

ShareMediaTask smt = new ShareMediaTask();
smt.FilePath = "/Assets/ApplicationIcon.png";

smt.Show();

Profiter du LongListSelector natif

Ce contrôle, qui était avant fourni dans le Silverlight Toolkit (qui s’appelle maintenant le Windows Phone Toolkit) est maintenant natif. Au menu, le même usage, mais de meilleures performances. Changez juste l’assembly !

<DataTemplate x:Key="AddrBookItemTemplate">
    <StackPanel VerticalAlignment="Top">
        <TextBlock FontWeight="Bold"  Text="{Binding Name}" />
    </StackPanel>
</DataTemplate>

<DataTemplate x:Key="AddrBookGroupHeaderTemmplate">
    <Border Background="Transparent" Padding="5">
        <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62" 
    Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
            <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" 
    FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Border>
    </Border>
</DataTemplate>

<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
    <Setter Property="GridCellSize"  Value="113,113"/>
    <Setter Property="LayoutMode" Value="Grid" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                    <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
        Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<phone:LongListSelector x:Name="lls" 
                        GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemmplate}"
                        ItemTemplate="{StaticResource AddrBookItemTemplate}"
                        JumpListStyle="{StaticResource AddrBookJumpListStyle}"
                        LayoutMode="List"
                        HideEmptyGroups="True"
                        IsGroupingEnabled="True" />

Comment gérer proprement les nouvelles résolutions ?

Les terminaux Windows Phone 7 et 7.5 n’avaient qu’une seule définition : WVGA, soit 800x480. Avec Windows Phone 8, les fabricants ont la possibilité d’utiliser 2 nouvelles définitions en plus : WXGA (1280x768) et 720p (1280x720). Dans le cas de la première, on garde le même ratio largeur/hauteur, mais pas dans le second ! Il va donc y avoir une petite bande noire en haut de l’écran (de 53px) si vous n’adaptez pas votre layout dynamiquement (la feinte principale consistant à utiliser des "*" et des "Auto" dans les propriétés des tailles de vos contrôles. Une page de la documentation est dédiée à ce sujet et vous permettra de comprendre ce qu’il faut faire pour tirer parti de toutes les résolutions au mieux :

Multi-Resolution Apps for Windows Phone

Pour ce qui est des assets graphiques, (images, etc) vous avez la possibilité de les resizer dynamiquement (dans ce cas je vous conseille de les prévoir pour la résolution 1280x768 et faire du downscaling plutôt que l’inverse), ou bien d’utiliser un petit helper qui permet de savoir sur quelle image se binder en fonction de la résolution :

Une classe statique, ResolutionHelper, qui retourne de manière lisible la définition de l’écran :

public enum Resolutions { WVGA, WXGA, HD720p };

public static class ResolutionHelper
{
    private static bool IsWvga
    {
        get
        {
            return Application.Current.Host.Content.ActualHeight == 800
            && Application.Current.Host.Content.ScaleFactor == 100;
        }
    }

    private static bool IsWxga
    {
        get
        {
            return Application.Current.Host.Content.ScaleFactor == 160;
        }
    }

    private static bool Is720p
    {
        get
        {
            return Application.Current.Host.Content.ScaleFactor == 150;
        }
    }

    public static Resolutions CurrentResolution
    {
        get
        {
            if (IsWvga) return Resolutions.WVGA;
            else if (IsWxga) return Resolutions.WXGA;
            else if (Is720p) return Resolutions.HD720p;
            else throw new InvalidOperationException("Unknown resolution");
        }
    }
}

Ensuite une classe sur laquelle l’interface pourra se binder et qui renverra l’image adaptée :

public class MultiResImageChooser
{
    public Uri BestResolutionImage
    {
        get
        {
            switch (ResolutionHelper.CurrentResolution)
            {
                case Resolutions.HD720p:
                    return new Uri("/Assets/ResolutionDependent/720x1280.jpg", UriKind.Relative);
                case Resolutions.WXGA:
                    return new Uri("/Assets/ResolutionDependent/768x1280.jpg", UriKind.Relative);
                case Resolutions.WVGA:
                    return new Uri("/Assets/ResolutionDependent/480x800.jpg", UriKind.Relative);
                default:
                    throw new InvalidOperationException("Unknown resolution type");
            }
        }
    }
}

Et pour finir, dans l’interface, instancier cette classe sous forme d’une StaticResource et se binder sur le champ approprié :

<phone:PhoneApplicationPage.Resources>
    <helpers:MultiResImageChooser x:Key="MultiResImageChooser" />
</phone:PhoneApplicationPage.Resources>
<Image  Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>

Enfin, pour ce qui est du SplashScreen, il suffit de le mettre en 3 versions (pour les 3 résolutions) dans le XAP avec la convention de nommage suivante :

• SplashScreenImage.Screen-WXGA.jpg
• SplashScreenImage.Screen-WVGA.jpg
• SplashScreenImage.Screen-720p.JPG

Et le système s’en sortira tout seul !

Passer à Nokia Maps

Si vous utilisez le contrôle Map, vous pouvez profiter de la qualité des cartes vectorielles de Nokia Maps quel que soit la marque du téléphone de votre utilisateur, en quelques étapes très simples :

1. Migrer votre projet à Windows Phone 8
2. Enlever la référence à l’assembly Bing Maps et changer les namespaces là où ça s’impose
3. Rajouter la capability « ID_CAP_MAP » dans votre manifest
4. Recompiler

Pas besoin de changer le code, sauf peut-être pour enlever la clef d’API ;)

Sachez que les launchers BingMapsTask et BingMapsDirectionTask ouvriront également automatiquement Nokia Maps et non plus Bing Maps.

Vous pouvez également profiter des nouveaux launchers MapsTask, MapsDirectionTask, et MapsDownloadTask,  qui offrent respectivement l’accès à l’application Nokia Maps, au guidage tour-par-tour, et au téléchargement de cartes pour une utilisation offline. Un exemple avec la MapsTask :

MapsTask mt = new MapsTask();
mt.ZoomLevel = 15;
mt.SearchTerm = "Pizza";
            
mt.Show();

Rajouter la reconnaissance et la synthèse vocale

Avec la reconnaissance vocale, vous allez pouvoir demander à l’utilisateur de parler à votre application, et récupérer le texte déduit par le moteur intégré à Windows Phone. La synthèse vocale, quant à elle, vous permettra de faire lire à l’application du texte, ce qui améliorera l’accessibilité de votre application.

Reconnaissance vocale : avec l’interface standard, ou la vôtre !

Voici comment utiliser l’interface graphique du système pour lancer la reconnaissance vocale :

// Create an instance of SpeechRecognizerUI.
var speechRecognizerWithUI = new SpeechRecognizerUI();

// Start recognition (load the dictation grammar by default).
SpeechRecognitionUIResult recoResult = await speechRecognizerWithUI.RecognizeWithUIAsync();

// Do something with the recognition result.
tbSpeechRecognized.Text = recoResult.RecognitionResult.Text + " || confidence: " + recoResult.RecognitionResult.TextConfidence;

Vous pouvez également lancer la reconnaissance vocale avec votre propre interface, mais attention à bien guider l’utilisateur ! Voici un exemple minimaliste, avec une boite de message indiquant juste que la reconnaissance vocale va démarrer :

if (MessageBox.Show("Recognize?", "SpeechRecognizer", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
{
    speechRecognizer = new SpeechRecognizer();
    var recoResult = await speechRecognizer.RecognizeAsync();
    tbSpeechRecognized.Text = recoResult.Text + " || confidence: " + recoResult.TextConfidence;
}

Synthèse vocale : simple comme bonjour ;)

Pour vocaliser du texte, il suffit de le passer en argument à une instance de la classe SpeechSynthesizer, en ayant précisé la voix à utiliser… sachant que l’utilisateur peut choisir une langue dans les paramètres du téléphone indépendamment de la langue de son interface graphique. Voici un petit exemple qui lit le contenu d’une TextBox :

// Initialize the SpeechSynthesizer object.
SpeechSynthesizer synth = new SpeechSynthesizer();

// Query for a voice that speaks French.
var Voices = from voice in InstalledVoices.All
                where voice.Id == (lbxVoices.SelectedItem as VoiceInformation).Id
                select voice;

// Set the voice as identified by the query.
synth.SetVoice(Voices.ElementAt(0));

await synth.SpeakTextAsync(tbxSpeech.Text);

L’association avec des extensions de fichier et des schémas d’URL

Voici une nouvelle option qui permettra à d’autres applications de lancer directement la vôtre, et d’avoir vos propres formats de fichier pour échanger des données d’un utilisateur à un autre.

S’associer avec des extensions de fichiers

Pour s’associer avec une extension, il faut signaler au système qu’on a cette capacité : cela se passe évidemment dans le manifest de l’application, dans lequel il faut rajouter, dans la partie extensions :

<FileTypeAssociation Name="Windows Phone SDK test file type" TaskID="_default" NavUriFragment="fileToken=%s">
  <Logos>
    <Logo Size="small">/Assets/apitests-small-33x33.png</Logo>
    <Logo Size="medium">/Assets/apitests-medium-69x69.png</Logo>
    <Logo Size="large">/Assets/apitests-large-176x176.png</Logo>
  </Logos>
  <SupportedFileTypes>
    <FileType ContentType="application/text">.apitests</FileType>
  </SupportedFileTypes>
</FileTypeAssociation>

Quand un fichier est téléchargé, par le navigateur, par email ou par une autre application, et que l’utilisateur tente de l’ouvrir en tapant sur l’icône de celui-ci (fournie, au passage, également par votre application), le système lancera votre application, avec en paramètre, un « token » permettant de récupérer ce fichier. La bonne pratique est donc de vérifier, en utilisant un UriMapper, si un nom de fichier est passé en paramètre au lancement pour éventuellement rediriger vers la page idoine, et l’ouvrir.

class ApiTestsUriMapper : UriMapperBase
{
    private string tempUri;

    public override Uri MapUri(Uri uri)
    {
        tempUri = System.Net.HttpUtility.UrlDecode(uri.ToString());
        
        if (tempUri.Contains("/FileTypeAssociation")) // File association launch
        {
            // Get the file ID (after "fileToken=").
            int fileIDIndex = tempUri.IndexOf("fileToken=") + 10;
            string fileID = tempUri.Substring(fileIDIndex);

            // Get the file name.
            string incomingFileName = SharedStorageAccessManager.GetSharedFileName(fileID);

            // Get the file extension.
            int extensionIndex = incomingFileName.LastIndexOf('.');
            string incomingFileType =
                incomingFileName.Substring(extensionIndex).ToLower();

            // Map the .apitests extension to the right page.
            switch (incomingFileType)
            {
                case ".apitests":
                    return new Uri("/Pages/FileAssociationPage.xaml?fileToken=" + fileID, UriKind.Relative);
                default:
                    return new Uri("MainPage.xaml", UriKind.Relative);
            }
        }
        // Otherwise perform normal launch.
        return uri;
    }
}

Une fois dans la page, il faut utiliser les APIs SharedFolder pour récupérer le fichier passé en paramètre :

protected async override void OnNavigatedTo(NavigationEventArgs e)
{
    try
    {
        var fileToken = NavigationContext.QueryString["fileToken"];
        this.fileName = SharedStorageAccessManager.GetSharedFileName(fileToken);
                
        var storageFolder = Windows.Storage.ApplicationData.Current.LocalFolder;
                
        var localFile = await SharedStorageAccessManager.CopySharedFileAsync(storageFolder, this.fileName, NameCollisionOption.ReplaceExisting, fileToken);

        using(var content = await localFile.OpenReadAsync())
        {
            using (DataReader dr = new DataReader(content))
            {
                await dr.LoadAsync((uint)content.Size);
                fileContent = dr.ReadString((uint)content.Size);
            }
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
    finally
    {
        base.OnNavigatedTo(e);
    }
}

S’associer avec des schemas d’URI

L’association avec des schémas d’URI fonctionne sur le même principe que l’association avec des extensions de fichier. On déclare le support dans le manifest :

<Protocol Name="apitests" NavUriFragment="encodedLaunchUri=%s" TaskID="_default" />

Puis on utilise un UriMapper pour capturer le lancement éventuel avec une URI en paramètre, afin de le traiter :

class ApiTestsUriMapper : UriMapperBase
{
    private string tempUri;

    public override Uri MapUri(Uri uri)
    {
        tempUri = System.Net.HttpUtility.UrlDecode(uri.ToString());
        
if (tempUri.Contains("apitests:UriAssociation?Parameter=")) // URI assocation launch
        {
            // Get the category ID (after "CategoryID=").
            int paramIndex = tempUri.IndexOf("Parameter=") + 10;
            string param = tempUri.Substring(paramIndex);

            // Map the show products request to ShowProducts.xaml
            return new Uri("/Pages/UriAssociationPage.xaml?Parameter=" + param, UriKind.Relative);
        }

        // Otherwise perform normal launch.
        return uri;
    }

}

Une fois la page chargée, il suffit de récupérer le paramètre dans le NavigationContext :

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    try
    {
        parameter = NavigationContext.QueryString["Parameter"];
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
    finally
    {
        base.OnNavigatedTo(e);
    }
}

Lancer une application tierce depuis un fichier ou une URI dans l’application

Pour lancer une application tierce depuis un fichier ou une Uri, il suffit d’appeler une API du système, qui automatiquement proposera à l’utilisateur de télécharger une appli ayant la capacité d’ouvrir ce type du contenu si il n’y en a pas déjà d’installée. Ça tient en une ligne de code :

await Windows.System.Launcher.LaunchUriAsync(new Uri("apitests:UriAssociation?Parameter=" + tbParameter.Text));

Il est également possible de lancer des pages de l’interface native (paramètres, etc) en suivant le même principe, avec les schémas d’uri réservés du système documentés.

Devenir une « Lens app » et s’intégrer à l’expérience de prise de photo

La photo est de plus en plus au cœur de Windows Phone : dorénavant, il existe un petit bouton (matérialisé par deux flèches) dans l’application-bar de l’application photo native, qui permet de choisir une application pour prendre la photo, en y appliquant des filtres par exemple pour modifier l’apparence de la photo, y appliquer un traitement, la partager directement… A vous d’inventer ces nouveaux usages !

Pour cela, vous devez vous enregistrer cette extension dans votre manifeste, puis vérifier au lancement de l’application, à l’aide d’un UriMapper par exemple, si la chaine de caractère « ViewfinderLaunch » est présente dans l’URL. et si c’est le cas, c’est que votre application est lancée depuis l’appareil photo. Dans ce cas-là, un simple UriMapper vous permettra de rediriger l’utilisateur vers une page de votre application qui appliquera votre traitement, tout en veillant de respecter les recommandations de design spécifique à ce type de page qui sont disponibles ici :

Lens Design Guidelines for Windows Phone

Voici l’exemple d’extension à rajouter dans le fichier WMAppManifest.xml :

<Extension ExtensionName="Camera_Capture_App" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}" TaskID="_default" />

Et celui de l’UriMapper :

PrFont34Bin0BinSub0Frac0Def1Margin0Margin0Jc1Indent1440Lim0Lim1class ApiTestsUriMapper : UriMapperBase
{
    private string tempUri;

    public override Uri MapUri(Uri uri)
    {
        tempUri = System.Net.HttpUtility.UrlDecode(uri.ToString());
        // Look for a URI from the lens picker.
        if (tempUri.Contains("ViewfinderLaunch"))
        {
            // Launch as a lens, launch viewfinder screen.
            return new Uri("/Pages/Lense.xaml", UriKind.Relative);
        }

        // Otherwise perform normal launch.
        return uri;
    }

}

En enregistrant cette extension et cet UriMapper, la page « Lense.xaml » contenue dans le dossier « Pages » sera automatiquement lancée, si l’application est lancée depuis l’appareil photo. Attention à ne pas oublier d’inclure également l’iconographie correspondante pour que votre application apparaisse correctement dans la liste des lentilles (le LensPicker) : à savoir :

En plus de pouvoir être identifié dans le hub photo comme une application qui peut prendre des photos en entrée (PhotoViewer), ou les partager, vous pouvez maintenant également faire identifier votre application comme éditeur de photo, ou mieux, « appliquant un traitement riche sur une image ». Dans ce cas, les photos que vous aurez prise depuis votre application pourront être rééditez dans votre application directement depuis leur fiche dans le hub photo. Dans tous les cas, cela passe par un ajout d’extension à votre manifest :

<!-- Extend the photo edit picker. -->
<!-- This is only for Windows Phone 8 apps. -->
<Extension ExtensionName="Photos_Extra_Image_Editor" 
            ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" 
            TaskID="_default" />


<!-- Integrate as a rich media app. -->
<!-- This is only for Windows Phone 8 apps. -->
<Extension ExtensionName="Photos_Rich_Media_Edit" 
            ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" 
            TaskID="_default" />

Puis un bout de code dans un UriMapper pour rouvrir la bonne page (vous allez commencer à connaitre le système ;)) :

PrFont34Bin0BinSub0Frac0Def1Margin0Margin0Jc1Indent1440Lim0Lim1// Launch from the photo edit picker.
// This is only for Windows Phone 8 apps.
// Incoming URI example: /MainPage.xaml?Action=EditPhotoContent&FileId=%7Bea74a960-3829-4007-8859-cd065654fbbc%7D
if ((tempUri.Contains("EditPhotoContent")) && (tempUri.Contains("FileId")))
{
    // Redirect to PhotoEdit.xaml.
    mappedUri = tempUri.Replace("MainPage", "PhotoEdit");
    return new Uri(mappedUri, UriKind.Relative);
}


// Launch from the rich media "Open in" link.
// This is only for Windows Phone 8 apps.
// Incoming URI example: /MainPage.xaml?Action=RichMediaEdit&token=%7Bed8b7de8-6cf9-454e-afe4-abb60ef75160%7D
if ((tempUri.Contains("RichMediaEdit")) && (tempUri.Contains("token")))
{
    // Redirect to RichMediaPage.xaml.
    mappedUri = tempUri.Replace("MainPage", "RichMediaPage");
    return new Uri(mappedUri, UriKind.Relative);
}

Pour comprendre tout ce qu’on peut faire avec le hub photo, le mieux est encore de se référer au code d’exemple dédié à ça :

Photo Extensibility Sample

Il existe encore plein d’autres sujets et nouveautés, qui méritent des articles à part entière pour en faire le tour : In-App Purchase, Intégration avec le Wallet, Utilisation de NFC que ce soit avec des tags ou bien pour appairer des appareils entre eux et échanger des données… sans compter les nouveautés du support C++ (et l’arrivée de frameworks type Unity ou Havok) ou HTML5 avec IE10 ! Beaucoup d’autres articles en prévision donc ;)

Windows Phone 8 SDK sur le Download Center Microsoft

Il s’agit du web-installer: autrement dit, il installe les composants en même temps qu’il le télécharge. Si vous voulez une iso complète à installer offline, le lien est sur la même page, un peu caché en dessous, je vous le remet ici:  ISO Complète du SDK Windows Phone 8

Des nouveaux outils

Ce SDK amène évidemment énormément de nouvelles APIs, que j’aurai l’occasion d’exposer dans un article séparé. En ce qui concerne les outils en eux-même, sachez qu’on passe à Visual Studio 2012, à une nouvelle version de Blend, qu’on ajoute en plus des images 7.1 existantes des images d’émulateurs WVGA, WXGA et 720p. Ces émulateurs reposent sur la technologie Hyper-V, qui nécessite une machine avec Windows 8, en 64bits, et une fonctionnalité appelée SLAT qui améliore le support de la virtualisation. Si vous voulez tester votre machine pour savoir si elle supporte le SLAT, lisez ce petit how-to.

Du coté de Visual Studio, on va retrouver un nouveau Simulation Dashboard permettant de déclencher des évènements comme les reminders ou le verrouillage du téléphone et de simuler l’état du réseau. Le profiler de performances s’améliore également au passage avec plus d’infos. Enfin, l’éditeur de pages repose maintenant sur Blend et permet de concevoir l’application d’un seul coup pour les différentes résolutions. On a au passage rajouté un éditeur de manifest un peu plus graphique que ce qu’on avait avant…

Enfin les templates de projets ont été améliorés pour supporter nativement la localisation et la globalisation de l’application, et pour rajouter le support des nouveautés du runtime, notamment DirectX.

Des exemples de code

De nombreux exemples de code sont déjà disponibles ici pour illustrer les nouvelles fonctionnalités du SDK

Le Toolkit Nouveau

Le Windows Phone Toolkit est maintenant, pour plus de clarté, séparé du Silverlight Toolkit, sur codeplex. Certains contrôles sont devenus natifs (comme le LongListSelector) il faut donc cette nouvelle version pour en profiter dans les applications Windows Phone:

http://phone.codeplex.com/

Des sites plus clairs

Au cas où vous les chercheriez… Voici…

• les recommandations de design
• Le nouveau point d’entrée de la documentation en ligne
• Les vidéos de Channel 9 avec du Windows Phone dedans

Et aussi au cas où, sur les blogs officiels

• L’annonce de Windows Phone 8
• La nouvelle plateforme de développement Windows Phone 8, par Kevin Gallo
• Les nouveautés du Framework .NET pour Windows Phone 8
• Les nouveautés des outils Windows Phone 8 sur le blog Visual Studio

Le design d’une application moderne, que ce soit sur Windows 8 ou Windows Phone, repose sur un certain nombre de codes. Ces codes sont souvent exprimés dans le langage des designers interactifs, graphistes et autres ergonomes, mais sont souvent incompris des développeurs, qui n’ont pas nécessairement le background et les études pour en comprendre les tenants et aboutissants.

Durant ce devcamp, des designers qui ont l’habitude de travailler avec les développeurs reviendront à la fois sur les fondamentaux, mais aussi sur les petits raffinements, qui font qu’une application aussi simple soit-elle, devient une expérience exceptionnelle pour l’utilisateur : le but : familiariser les développeurs avec ce langage, ces codes, car nombre d’entre eux n’ont pas la chance de travailler avec des designers.

Un agenda qui couvre à la fois les fondamentaux, et des conseils pratiques pour vos applications:

• Le design moderne dans Windows 8 /  Windows Phone
• Le savant mélange d’une image de marque et du style moderne
• Les composants fondamentaux d’une interface
• Les outils pratiques et l’intégration

Inscrivez-vous, et RDV le 29 Novembre au centre de conférence Microsoft

Directement depuis son projet, on peut ensuite choisir de debugger sur la tablette plutôt que sur le poste local: ça se configure dans l’onglet Debug de votre projet:

Le bouton “find” permet de trouver votre tablette, et il est possible d’entrer un nom d’utilisateur et un mot de passe pour sécuriser la connexion et éviter que n’importe qui se connecte n’importe où.

Ensuite, lancer le projet pour un debuggage comme d’habitude (la touche F5, le bouton Debug…) et l’application se lancera sur la machine distante, plutôt que sur la machine locale. Facile  

Pour tout savoir sur le remote debugger, la page de doc sur MSDN et le HowTo officiel.

Happy debugging!

L’accélérateur Windows Phone a démarré depuis l’an dernier, et a déjà accompagné jusqu’au store plusieurs centaines de développeurs, et au moins autant d’applications. Au programme :

• Des prêts de téléphones
• Des "jetons" pour obtenir gratuitement un compte de développeur sur le store Windows Phone (et donc la possibilité de débloquer des téléphones pour le debuggage, et de publier des applications)
• Du support technique
• Du coaching régulier avec des membres actifs de la communauté à la technicité reconnue
• Des webcasts dédiés aux questions les plus remontées par les développeurs de l’accélérateur.
• De la visibilité avec la mise en avant des applications sur le store.

L’accélérateur Windows 8 est plus récent, évidemment, mais il compte déjà plusieurs centaines de développeurs…

Au programme :

• La possibilité de tester son application sur des tablettes Windows 8 de référence
• Du coaching et des webcasts/sessions dédiées, à la fois sur les aspects développement et design, par des experts de Microsoft France
• Du support technique
• De la visibilité avec la mise en avant des applications sur « l’appli du jour »… et pour les développeurs avec les plus belles applications, une arrivée sur le store en avant-première (et des dizaines de milliers de downloads d’avance !)

Encore une fois, les accélérateurs n’ont pas de critère d’entrée – quel que soit votre projet ou votre plateforme préférée, si vous faites une application, vous pouvez nous contacter. Derrière ces programmes, des « vraies personnes » vous répondent (pas de robots, de mails automatisés, ou de formulaires à la noix), et surtout, pas de pub, juste du concret, et peut-être le début du succès… Certains développeurs se sont même inscrits aux deux programmes ! Voici les liens vers les pages officielles :

• L’accélérateur Windows Phone
• L’accélérateur Windows 8

N’hésitez pas aussi, à nous dire ce dont vous avez besoin ces programmes sont faits pour vous, et sont prévus pour évoluer avec vos idées!

• Le 03/09 Le Premier MeetUp Windows 8, Bières et Pizzas organisé par  BeMyApp à l’IESA
• Le 11/09 Formation à Windows 8 pour développeurs HTML5/JS, par BeMyApp aussi, à l’IESA aussi!
• Le 12/09 Lancement de Visual Studio 2012 (Online)
• Le 14/09 La King’s Night… suite des devkings, en une nuit de fast-code, avec un sujet tenu secret  
• Le 21/09 ModernUI Dating: le Meet-Up de la communauté développeurs Windows 8

Paris n’est pas la seule ville concernée par les évènements de rentrée, en effet, nous organisons également un Tour de France Windows 8 pour les développeurs (avec du Windows Phone Inside ):

• Lille le 27/09
• Nice (Sophia Antipolis) Le 02/10
• Strasbourg Le 04/10
• Nantes Le 09/10
• Toulouse Le 11/10
• Lyon Le 16/10
• Paris le 30/10

Comment faire pour se tenir au courant des évènements?

Il faut suivre, car il y a plusieurs endroits clefs en fonction des types d’évènements:

• La page des évènements développeurs sur MSDN
• Les Meetups Windows 8 sur meetup.com

et du coté des communautés:

• La communauté Windows 8 sur Facebook
• La communauté Windows Phone sur Facebook
• La page Développeurs sur FB (toutes technos)

On ressort souvent les grands classiques du genre “branche toi sur une source opendata!” mais la vérité c’est que ces sources sont rarement dynamiques (paye ton bon gros fichier CSV statique) et que ce n’est pas évident d’en faire quelque chose d’utile (une énième copie d’iToilettes?).

Il existe pourtant sur le web quelques “annuaires” d’APIs, officielles ou pas, payantes ou pas, mais qui sont des mines d’idées, surtout quand on les combine entre elles!

• ProgrammableWeb
• Mashery
• Mashape

Presque sur le même principe, certains sites proposent des outils pour créer des APIs: ils ont souvent une liste de références intéressantes de gens qui utilisent leur backend: cet article de ProgrammableWeb en liste 11…

Enfin, n’hésitez pas à chercher dans les petites lignes en bas de vos sites favoris… il se pourraient bien qu’il y ait une API accessible sur laquelle le site ne fait pas vraiment de pub…

Dernier point (et pas des moindres) : toutes les APIs ont des conditions d’utilisation, et ce n’est pas parce qu’une API est ouverte sur le net, qu’elle est automatiquement libre de droit et utilisable par n’importe qui n’importe comment… si vous voulez évitez les lettres de type “cease & desist” des ayant-droits des données… lisez les petites lignes!

Happy summer coding!

For years I’ve had this very old voltmeter I wanted to do something with: I liked the beautiful wooden case, the leather strap, but honestly, I had better tools for my day to day electronics experiments. I found a purpose for it when I started experimenting with the .NET Gadgeteer kit, and one of my first prototype of connected object: a simple meteo station that would measure temperature, humidity and pressure and upload data to a feed in Cosm, formerly known as Pachube, which is a connected objects web platform used to publish and consume realtime data. I had two goals with this project: have fun with the .NET Gadgeteer kits, and experiment on a complete connected object prototyping cycle (I’m not going to talk about industrialization or mass production here).

Here’s the plan:

1. Discovering the .NET Gadgeteer tooling, and interfacing with sensors
2. Connecting to Cosm (Pachube)
3. Creating the steampunk GUI
4. Making the meteo station user-configurable using a small webserver
5. Prototyping the finished design using 3D modeling tools

>> If you want to download the whole article in a Word document, here’s the link. <<

Discovering the .NET Gadgeteer tooling, and interfacing with sensors

The .NET Gadgeteer is a rapid prototyping environment for connected objects. Kits are manufactured by Microsoft partners, like GHI Electronics (http://www.ghielectronics.com), Seed Studio (http://www.seeedstudio.com/depot/), or the Mountaineer Group (http://www.mountaineer.org/). The core libraries (based on the .NET Micro Framework: (http://www.netmf.com)) are maintained by Microsoft and the community, while the hardware specific drivers and updaters are maintained by the different partner.

Therefore, there are 3 different packages to install on top of Visual Studio 2010 (any version, Express will do) to install the .NET Gadgeteer tools: the .NET Micro Framework base, the Gadgeteer Core, and the hardware specific SDK. In our case, we are going to use a FEZ Spider Kit from GHI Electronics as well as a couple of sensors and a Wifi module.

Once you have installed everything, you can create your first .NET Gadgeteer application. You are then presented with a “designer” view of your project: at this time there’s only one motherboard in the designer. Using the toolbox, you can add the modules you are going to use. Once you have all the modules you need, you can either click on the connectors to wire them manually or right-click anywhere on the designer and select “Connect all modules”. If you don’t know anything about hardware, this will show you how to connect modules to the motherboard. Once this is done, you’re ready to start coding!

Click on Program.cs to dive into the source code. At this point there’s only the main entry point, and a debug instruction. However all the objects needed to control the hardware have already been instantiated (in the Program.Generated.Cs file) and can be used right away. For example, if you have a temperature sensor, you can directly subscribe to the MeasurementComplete event, that will fire whenever a new measure is ready.

In our case, we are going to use a timer to regularly measure the meteorological parameters (temperature, pressure, and humidity). Everytime the timer fires, we will ask the different sensors to start measuring and they will notify us through their respective MeasurementComplete event that a new measure is ready.

First register for sensor events:

temperatureHumidity.MeasurementComplete += new TemperatureHumidity.MeasurementCompleteEventHandler(temperatureHumidity_MeasurementComplete);
barometer.MeasurementComplete += new Barometer.MeasurementCompleteEventHandler(barometer_MeasurementComplete);

Then instantiate the timer and start it:

GT.Timer SensorTimer = new GT.Timer(TimeSpan.FromTicks(TimeSpan.TicksPerMinute));
SensorTimer.Tick += new GT.Timer.TickEventHandler(timer_Tick);
SensorTimer.Start();

void timer_Tick(GT.Timer timer)
{
    barometer.RequestMeasurement();
    temperatureHumidity.RequestMeasurement();
}

At this point, you already have an object that regularly measure meteorological parameters. You can compile and run it directly on the .NET Gadgeteer kit by connecting it to a USB port on your PC. It’s not connected though; we will handle that in the next part.

Connecting to Cosm

Before connecting to Cosm, we need to connect to a network. GHI Electronics offer different modules, we’ll talk about the Wifi Module, and the Ethernet (J11D) module .When purchasing anyone of them, pay attention that there are different references depending on the motherboard you’re using. Read the docs!

The Ethernet module is the easier to program: here’s the code to connect to a network using DHCP:

ethernet.NetworkSettings.EnableDhcp();

The static equivalent:

ethernet.NetworkSettings.EnableStaticIP("192.168.0.10", "255.255.255.0", "192.168.0.1");
string[] dnsServers = { "192.168.0.1", "192.168.0.2" };
ethernet.NetworkSettings.EnableStaticDns(dnsServers);

There are a couple of events you can subscribe to be notified about Network changes:

ethernet.NetworkDown += new GTM.Module.NetworkModule.NetworkEventHandler(ethernet_NetworkDown);
ethernet.NetworkUp += new GTM.Module.NetworkModule.NetworkEventHandler(ethernet_NetworkUp);

The Wifi module is also very straightforward to configure: you are going to use the same code, only you need to join a network first:

WiFi_RS21.WiFiNetworkInfo wifiInfo = wifi.Search("<SSID>");
wifi.Join(wifiInfo, "<KEY>");

The second step is to set the system time. Since there’s no “backup” battery that saves the clock time, one has to set it everytime the system is powered. This is done with a small NTP library called MicroNTP extracted from the Micro Framework Toolkit: http://mftoolkit.codeplex.com/

DateTime UtcTime = NtpClient.GetNetworkTime("0.fr.pool.ntp.org");
Microsoft.SPOT.Hardware.Utility.SetLocalTime(UtcTime + new TimeSpan(TimeSpan.TicksPerHour * 2));

The NTP server returns the Coordinated Universal Time (UTC) therefore I add the timezone difference (+2H, hardcoded here for readability reasons, it would have to be a system parameter, we’ll see later how to create a settings system.

Once you’re connected to a network you need to send (and eventually, receive) data from Cosm (Pachube). It’s using a simple REST API and JSON serialization… you just have to pass your API key in the headers. Here’s how to send a simple webrequest posting data to your feed:

public void Post(IFeedItem item)
{
    HttpWebRequest req = (HttpWebRequest)WebRequest.Create(this.AssociatedAccount.EventsUrl + this.Id.ToString());
    req.Method = "PUT";
    req.ContentType = "application/json";
    req.UserAgent = "NetduinoPlus";
    req.Headers.Add("X-PachubeApiKey", this.AssociatedAccount.ApiKey);
    req.Timeout = 1000;
    if (this.AssociatedAccount.HttpProxy != null)
        req.Proxy = this.AssociatedAccount.HttpProxy;

    string content = item.ToJson(this.Id);
    Debug.Print(content);


    byte[] postdata = System.Text.Encoding.UTF8.GetBytes(content);
    req.ContentLength = postdata.Length;

    try
    {
        using (Stream s = req.GetRequestStream())
        {
            s.Write(postdata, 0, postdata.Length);
        }

        using (WebResponse resp = req.GetResponse())
        {

            using (Stream respStream = resp.GetResponseStream())
            {
                byte[] respBytes = new byte[respStream.Length];

                int length = respStream.Read(respBytes, 0, respBytes.Length);

                string respString = new string(System.Text.Encoding.UTF8.GetChars(respBytes));
                Debug.Print(respString);
            }
        }
    }
    catch (Exception ex)
    {
        Debug.Print("exception : " + ex.Message);
    }
    finally
    {
        req.Dispose();
    }
}

• https://nuget.org/packages/PachubeDAL-NETMF/1.0.2

And the sources are on codeplex:

• http://pachubedal.codeplex.com/

The use of this package is really easy: first, instantiate an Account object and pass it your API key. Then you can create as many feeds as you want (I only have one here, with 3 datasets), and use the Post() method to send directly data to it:

Account pachube = new Account("miQnUMICT-KjWhDwOxWQuycKTiuSAKxCWGgrdTNyaUNEND0g");
Feed meteoFeed = new Feed(44741, pachube);

meteoFeed.Post(new DoubleFeedItem("barometer", sensorData.Pressure));

There you have it – a connected meteo station, in a few lines of code. Now, let’s make use of that screen!

Creating the Steampunk GUI : reading and displaying images from the SD Card, and charting data.

There are two ways to create a user interface using the .NET Micro Framework. Either using the very small subset of WPF, or, a bit like a game, create a display loop and use graphical elements and fonts, just like a game. In my case, I really want my interface to have a steampunk feeling so I’m going to use a lot of images. Since it will be sealed in a box, I have no need for touch interactions, so I’m going to go for the game-like approach. I’ll have a timer that will regularly draw all images, in the right order and at the right place, depending on the various data I have. The only “non-image” data that I’m going to display is a graph, and for that all I need is a SetPixel() method. It’s very easy.

The first step of the creation of the user interface was to work with a designer (Michel, who’s part of my team) to create a bitmap of the finished interface. Then, Michel generated all the images necessary to compose the interfaces: all the numbers, the different meteorological symbols, the fake copper plate, etc.

I will store the graphical assets on an SD Card, and load them at startup : here’s how to check that the SD Card is present and mounted:

if (sdCard.IsCardInserted)
{
    if (!sdCard.IsCardMounted)
        sdCard.MountSDCard();

    Debug.Print("sd card mounted");
}

And the files are accessed this way:

var storage = sdCard.GetStorageDevice();

for (int i = 0; i < 10; i++)
{
    Numbers[i] = storage.LoadBitmap(i.ToString() + ".bmp", Bitmap.BitmapImageType.Bmp);
}

Then there is a very simple API to display an image:

display.SimpleGraphics.DisplayImage(MetalCover, 0, 0);

The only thing I have to do to build my user interface is to combine them in the right order to draw the bitmaps on top of one another. The problem is that, as you have correctly read, I’m using… bitmaps. .NET Micro Framework only supports JPEG, GIF and Bitmap images . Luckily for me the Bitmap class has a method that I can call to specify that a specific color should be treated as transparent… so I can lay a square bitmaps on top of one another and using a specific color (a really ugly pink color in my case) give them a square look: here’s an example of a clock number, and the corresponding transparency API:

Color Transparent = ColorUtility.ColorFromRGB(255, 0, 255);
MetalCover = storage.LoadBitmap("FondTransp.bmp", Bitmap.BitmapImageType.Bmp);
MetalCover.MakeTransparent(Transparent);

The trick with such a technique (which is not very elegant, but quit effective) to build an interface is to have pixel perfect assets and placements. Work with your designer and be precise!

The last thing is to draw the graph. It’s not very complicated, either algorithmically or technically: I just store a list of measures in memory, discarding them as new ones come in, much like a queue with a fixed length. Then I go through every element, drawing them backwards from the latest one, and making sure I never get out of the rectangle in which I’m allowed to draw. Here’s the code for the whole Graph class:

class Graph
{
    public ArrayList Values;

    public double Max;
    public double Min;


    public Graph(int Capacity)
    {
        Values = new ArrayList();
        Values.Capacity = Capacity;
    }

    public void Add(double measure)
    {
        if (Values.Count == Values.Capacity)
        {
            Values.RemoveAt(0);
        }

        Values.Add(measure);
        UpdateMinMax();
    }

    private void UpdateMinMax()
    {
        int index = Values.Count - 1;

        this.Min = (double)Values[index] - 3.0;
        this.Max = (double)Values[index] + 3.0;
    }

    public void Draw(Display_T35 display, uint x, uint y, uint height) // width == capacity
    {
        double a,b;
        uint offset;

        if (Max > Min)
            a = -(height / (Max - Min));
        else
            a = 0;

        b = y - a * Max;

        for (int i = 0; i < Values.Count; i++)
        {
            int index = Values.Count - 1 - i;

            if (a == 0)
                offset = y + (height / 2);
            else
                offset = (uint)System.Math.Round(a * (double)Values[index] + b);

            DrawPoint(display, (uint)(x + Values.Capacity - i), offset);
        }
    }

    public void DrawPoint(Display_T35 display, uint x, uint y)
    {
        display.SimpleGraphics.SetPixel(Gadgeteer.Color.Black, x, y);
        display.SimpleGraphics.SetPixel(Gadgeteer.Color.Black, x + 1, y);
        display.SimpleGraphics.SetPixel(Gadgeteer.Color.Black, x, y + 1);
        display.SimpleGraphics.SetPixel(Gadgeteer.Color.Black, x + 1, y + 1);
    }

    public double Mean(int Count)
    {
        if (Count > 0 && Values.Count > 0)
        {
            var max = (Count > Values.Count) ? Values.Count : Count;

            double tmp = 0.0;
            for (int i = 0; i < max; i++)
            {
                tmp += (double)Values[max - i - 1];
            }
            tmp /= max;

            return tmp;
        }
        else
            return 0;
    }
}

int pixel = (int)(System.Math.Round((double)(40 - Status.Temperature) * 16.3)) - 38;
if (pixel < 0)
    pixel = 0;

Bitmap tmpCopy = new Bitmap(TemperatureIndicator.Width, TemperatureIndicator.Height);
tmpCopy.DrawImage(0, 0, TemperatureIndicator, 0, pixel, 34, 109);
display.SimpleGraphics.DisplayImage(tmpCopy, 137, 120);

There we have the user interface for a connected meteo station… if you look at connected object however, you will guess that most of them need some configuration (network, usernames…). The next part is about how to build a small webserver within the meteo station, with a small form to configure its parameters (timezone, etc).

Building a webserver and configuration interface within the meteo station

There’s a sample project for .NET Micro Framework that works great, but the .NET gadgeteer makes it even simpler: there’s a WebServer class already included, with basic routing functionalities. We’re going to use it. We will store the HTML files on the SD Card, as well as a configuration file.

Starting a WebServer is as simple as one line of code:

WebServer.StartLocalServer(ethernet.NetworkSettings.IPAddress, 80);

To configure routing (i.e. associate code execution with specific URLs), use the WebEvent class:

WebEvent webevt = WebServer.SetupWebEvent("Settings.htm");
webevt.WebEventReceived += new WebEvent.ReceivedWebEventHandler(webevt_WebEventReceived);

Once the webevent is configured, calling “http://ip:port/Settings.htm” will automatically trigger the execution of the handler associated with the string “Settings.htm”. What we need to do in the handler, is therefore to return, as an HTTP response, the content of the Settings.htm file.

void webevt_WebEventReceived(string path, WebServer.HttpMethod method, Responder responder)
{
    responder.Respond(LoadHtmlFile(path), "text/html");
}

The Responder class makes it really easy to send an HTTP response, and takes a byte array as the first argument of its Respond method. This byte array is generated from an HTML file stored in the SD Card:

private byte[] LoadHtmlFile(string path)
{ 
    byte[] result = null;
    var storage = sdCard.GetStorageDevice();
    using (var stream = storage.OpenRead(wwwRoot + path))
    {
        using (StreamReader sr = new StreamReader(stream))
        {
            string content = sr.ReadToEnd();
            result = new System.Text.UTF8Encoding().GetBytes(content);
        }
    }

    return result;
}

Once the form is submitted with the right parameters, it’s caught with another WebEvent, and the configuration is saved to the SD Card before sending the response:

void setparams_WebEventReceived(string path, WebServer.HttpMethod method, Responder responder)
{
    Config c = new Config();
    c.Name = (string)responder.UrlParameters["Name"];
    c.UtcOffset = int.Parse(HttpUtility.UrlDecode((string)responder.UrlParameters["UtcOffset"]));

    SaveConfigToSdCard(c);

    responder.Respond(LoadHtmlFile(path), "text/html");
}

The HttpUtility class that I’m using is from the community and can be found here:

• http://informatix.miloush.net/microframework/Source/UAM/InformatiX/SPOT/Web/HttpUtility.cs

The SaveConfigToSdCard method is very simple:

private void SaveConfigToSdCard(Config c)
{
    var storage = sdCard.GetStorageDevice();
    using (var stream = storage.OpenWrite(configFilePath))
    {
        using (StreamWriter sw = new StreamWriter(stream))
        {
            sw.Write(c.ToString());
        }
    }
}

The Config object stores all the parameters :

public class Config
{
    public string Name { get; set; }
    public int UtcOffset { get; set; }
        
    public static Config FromString(string str)
    {
        Config res = new Config();
        string[] settings = str.Split('\n');
        res.Name = settings[0].Split(':')[1];
        res.UtcOffset = int.Parse(settings[1].Split(':')[1]);
            
        return res;
    }

    public override string ToString()
    {
        return "name:" + Name + "\n utcoffset:" + UtcOffset.ToString();
    }
}

As you see, the serialization/deserialization mechanism is as simple as possible. Since we’re on an embedded system with limited capabilities, the simpler the code, the faster it runs: no need for fancy XML or JSON serialization here.

You could use the same kind of mechanism to build an API for your object so that other devices could connect directly to it. In the present case, it’s not necessary since we publish feeds to Cosm: we can use Cosm APIs!

As anything with a configuration, one has to think of a mechanism for resetting to factory defaults. We could do that with a simple button and a timer, it’s not really interesting to detail it here, but you’ll have to think about it!

Cherry on the cake: Using 3D modeling tool to prototype the object

There are two ways to build a “physical” object around an electronic kit such as the gadgeteer: either by trial and error, at the risk of using a lot more material than what’s needed, or by being modeling it either on paper or using 3D tools. The pen & paper is a simple approach so it works for simple objects, but the gadgeteer teams contributed 3D models of most parts of the kits, and even if you can’t afford professional tools such as SolidWorks (personally, I can’t) there are some free tools that work really great. While researching the subject to prepare this article I’ve used 123D, but I also gave a shot at FreeCad, SketchUp, and even had Blender installed (useful for 3D format transformation). These tools manipulate different formats, and for example SketchUp doesn’t support STEP files natively (this is the format used for the gadgeteer models). So you want to be careful about the tool you choose depending on the input format for models, and the output format you wish to have. Especially if you want to model some parts using a 3D printer!

Getting used to a CAD tool takes some time. You’re not going to make complex parts and assemblies overnight, and you’ll spend quite a few hours learning keyboard shortcuts, navigation, and good practices to be efficient. What I found out is that it’s more efficient to follow a couple of tutorials, rather than try to prototype directly the object you need. Then work on individual parts. Then assemble them. Don’t try to do the whole thing in one project directly. Here’s an example of the work in progress for the internals of my meteo station:

It’s your call to see what method you prefer. For most of my projects I’ve been experimenting directly with hardware, but in this case, since I didn’t want to damage the case, and since I wanted to have a reuseable design, I decided to go with the CAD tools.

Conclusion

In this article, we’ve gone through the process of prototyping every function of a connected object, from the sensors, to the network, and configuration. Hopefully you now understand:

• How to use the .NET Gadgeteer tooling
• How to connect sensors, and get data from them
• How to work with different kind of files on the SD Card
• How to build a simple user interface
• How to post them on the network
• How to interface with Cosm
• How to buld a webserver in your object
• How to build a configuration mechanism

We also made use of a few toolkits (mftoolkit, HttpUtility, Pachube DAL, etc) that will hopefully help you, and concluded on the possibility to use CAD tools to physically design the object around the 3D models of the gadgeteer components. Now it’s your turn to build something!

En substance, auront été abordées quelques nouveautés de l’expérience utilisateur et les fondations de la nouvelle plateforme de développement. A ce stade, ce n’est pas une vue exhaustive, il y aura d’autres bonnes surprises dans les semaines qui viennent Notamment le SDK et les nouveaux outils de développement basés sur Visual Studio 11 plus tard cet été.

Une nouvelle version majeure de Windows Phone

La chose la plus importante à comprendre à propos de Windows Phone 8 est qu’il s’agit d’une nouvelle version de Windows Phone, ce n’est pas une simple mise à jour:  en effet, le coeur de Windows Phone 8, c’est Windows 8! Et avec un nouvel OS, vient du nouveau matériel, et de nouvelles fonctionnalités…

• Les processeurs multi-coeurs
• de nouvelles résolutions d’écrans: WXGA (1280x768) et 720p (1280x720) en plus de la résolution WVGA classique (800x480)
• Le stockage amovible (Micro SD)
• Différents usages du NFC (partage, paiement…)
• Internet Explorer 10 avec un support de HTML5 et des performances Javascript sans précédent, et des fonctionnalités de sécurité, comme un filtre anti-phishing par exemple.
• Un “wallet” permettant de stocker des cartes de paiement, mais aussi des bons de réductions, des billets, etc. Tout ça relié à des cartes SIM sécurisée.
• Nokia Maps! et notamment la fonctionnalité “offline” permettant de stocker des cartes directement sur le téléphone, et un “vrai” guidage GPS, sans avoir besoin de la connexion de données.

Certains éléments de la nouvelle expérience utilisateurs ont également été abordés, notamment le nouvel écran d’accueil, qui étend le principe des tuiles dynamiques… avec 3 tailles différentes, toutes disponibles pour les applications!

Ces nouvelles fonctionnalités, ces nouveaux matériels pour la nouvelle génération de Windows Phones, rendent malheureusement impossible la mise à jour des téléphones existants vers cette nouvelle version de l’OS. Cela ne veut pas dire que les terminaux existants ne bénéficieront plus d’améliorations: au contraire, une mise à jour est également prévue pour ces terminaux: il s’agit de Windows Phone 7.8, qui bénéficiera par exemple du nouveau start screen!

Windows Phone 8 pour les développeurs

L’autre question qui vient immédiatement en tête quand on parle de changement de plateforme, c’est la question de la compatibilité avec les applications existantes… Il y en a quand même 100.000 sur le marketplace Windows Phone! La bonne nouvelle (qui avait déjà été annoncée d’ailleurs) c’est qu’elle sont entièrement compatibles avec Windows Phone 8, il n’y aura pas de problème pour les faire tourner sur la nouvelle plateforme, sans modification. Et il sera très facile des les modifier pour bénéficier des nouvelles fonctionnalités, étant donné qu’on retrouve le modèle de développement XAML/C#! En parlant de modèle de développement, en vrac, les nouveautés:

• Un modèle de développement en C++, natif, sera disponible!
• On retrouvera également DirectX… si vous regardez la vidéo du lancement vous retrouverez même une démonstration du moteur Havok sur Windows Phone 8!
• Des API de paiement “in-app”
• La VoIP disponible pour les développeurs
• Des améliorations du multitasking notamment la possibilité d’avoir une application en background avec le tracking GPS activé, par exemple pour les applications sportives!
• Un contrôle WebBrowser basé sur IE10… accélération 3D du rendu des canvas, touch events… que du bonheur pour les développeurs HTML5/Javascript

Il est encore tôt pour révéler à quel point les applications Windows 8 et Windows Phone 8 seront similaires… mais ça sera une belle histoire. Vous pourrez alors voir une nouvelle version de mes articles précédents sur les techniques de portage…

Windows Phone 8 en entreprise

Les besoins des entreprises sont au coeur de Windows Phone 8: tout le contenu du téléphone (OS, données…) sera crypté, et le téléphone supportera le boot UEFI sécurisé. Les Windows Phone seront manageables avec les mêmes outils avec lesquels les entreprises gèrent leur parc informatique de PC, et la plateforme applicative supporte les applications métiers, et notamment la possibilité de les déployer sans passer par l’infrastructure Marketplace. Il sera également possible pour les entreprises d’avoir leur propre “hub”, par exemple pour gérer les infos des employés et leurs applications métiers.

Windows Phone 8 partout dans le monde

Windows Phone 8 supportera 180 pays, 50 langages, y compris l’arabe, le turque, le farsi… autre bonne nouvelle, les mises à jour de la nouvelle plateformes pourront passer “over the air”, plus besoin de connecter le téléphone au PC. Enfin, tous les téléphones recevront les mises à jour pendant au moins 18 mois. Les premiers OEMs à s’être déjà engagé dans la course à Windows Phone 8 sont Nokia (qui étaient également nos invités sur scène) mais également Samsung, HTC, et Huawei.