Blog de Julien Corioland (MSP)

Quand les technologies .NET deviennent passion...

[.NET Micro Framework] Affichage de texte à l’écran

Aussi bizarre que cela puisse paraître, l’affichage de texte ne se fait pas de manière totalement immédiate lorsque l’on développe une application .NET Micro Framework. En effet, plusieurs étapes sont nécéssaires. Ce post a pour but de vous présenter ce processus qui vous sera surement familier si vous avez déjà fait du développement XNA, ou GDI+ dans une moindre mesure.

La première chose à savoir, est que le .NET Micro Framework ne supporte pas nativement différentes police de caractères : c’est au développeur de les embarquer dans son application. Celles-ci sont d’extension “.tinyfnt” en référence à la TinyCLR (moteur d’exécution du .NET Micro Framework).

Par défaut, lors de l’installation du SDK du .NET Micro Framework 3.0, vous disposez de deux fichiers “.tinyfnt”. Ces deux fichiers sont situés dans le répertoire d’installation du Micro Framework (C:\Program Files\Microsoft .NET Micro Framework\v3.0\Fonts) :

  • NinaB.tinyfnt
  • small.tinyfnt

Tout comme les SpriteFont en XNA, les tiny font sont en fait un ensemble de texture représentant des caractères à dessiner sur l’écran de votre péripérique. Ceci implique qu’il n’est pas possible de choisir la taille de la police lorsque vous la dessinez.

La première chose à faire est d’ajouter ces fichiers en tant que ressources de votre projet .NET Micro Framework. Pour cela, ouvrez le fichier de ressources et choisissez d’y ajouter des fichiers existant :

Fonts01

Naviguez alors jusqu’à l’emplacement indiqué ci-dessus et sélectionnez les deux fichiers :

Fonts02

Une fois ceci effectué, vous pouvez récupérer vos fonts dans une instance de la classe Microsoft.SPOT.Font et ce à l’aide de la méthode statique “GetFont” de la classe Resources :

Fonts03

Faites cela pour les deux polices :

public static void Main()
{
    Font smallFont = 
        Resources.GetFont(Resources.FontResources.small);
    Font ninaBFont = 
        Resources.GetFont(Resources.FontResources.NinaB);
}

Vous pouvez maintenant dessiner du texte sur l’écran. Pour cela, il faut récupérer une instance de la classe Bitmap à la taille de l’écran de votre périphérique. Vous devez au préalable ajouter une référence vers Microsoft.SPOT.TinyCore afin d’avoir accès à la classe SystemMetrics vous permettant de récupérer largeur et hauteur de l’écran à l’exécution :

Bitmap screen = new Bitmap(
    SystemMetrics.ScreenWidth, 
    SystemMetrics.ScreenHeight
);

Vous pouvez alors faire appel à la méthode “DrawString” de la classe Bitmap pour écrire du texte sur l’écran :

screen.DrawText(
    "Hello World",
    smallFont,
    Microsoft.SPOT.Presentation.Media.Color.White,
    10,
    10
);

screen.DrawText(
    ".NET Micro Framework",
    ninaBFont,
    Microsoft.SPOT.Presentation.Media.Color.White,
    10,
    40
);

screen.Flush();

Note : l’appel de Flush est obligatoire pour vider le tampon mémoire associé au Bitmap et envoyer les données sur l’écran.

Voilà le résultat à l’exécution :

SDC10565

Dans certains cas, les deux fonts proposés par le .NET Micro Framework ne vous conviendront pas. Pour cela, le SDK fournit également un outil nommé “TFConvert.exe” qui va vous permettre de convertir une police ttf (True Type Font) en tiny font.

Vous trouverez cet utilitaire dans le répertoire d’installation du .NET Micro Framework, v3.0 puis Tools.

La première chose à faire est de créer un fichier “.fntdef” qui va permettre de définir le font que vous souhaitez exporter avec TFConvert.exe.

Premier exemple de fichier : Calibri.fntdef

AddFontToProcess "C:\\Windows\\Fonts\\Calibri.ttf"
SelectFont "HE:25,FN:Calibri"
ImportRange 0 200

AddFontToProcess permet de préciser le font ttf que l’on souhaite exporter

SelectFont va permettre de configurer le font. Ici on utilise la police Calibri du fichier Calibri.ttf, avec une hauteur (HE) de 25. Pour tous les paramètres disponibles, rendez-vous sur cette page MSDN.

ImportRange vous permet de définir le rang de caractères Unicode que vous souhaitez importer.

Une fois ce fichier défini, il vous suffit d’exécuter TFConverter en lui passant le chemin du fichier “fntdef” et le chemin du fichier de sortie “tinyfnt” :

C:\> TFConvert.exe Calibri.fntdef Calibri.tinyfont

Il vous suffit ensuite d’ajouter votre nouveau font au fichier de ressources de l’application, de le récupérer dans une instance de la classe Font et de l’utiliser :

Font calibri = Resources.GetFont(Resources.FontResources.Calibri);

screen.DrawText(
    ".NET Micro Framework",
    calibri,
    Microsoft.SPOT.Presentation.Media.Color.White,
    10,
    40
);

Si vous souhaitez créer un autre font à partir du même ttf il suffit de réécrire un fichier fntdef :

AddFontToProcess "C:\\Windows\\Fonts\\Calibri.ttf"
SelectFont "WE:700,HE:30,FN:Calibri Bold"
ImportRange 0 200

Ici, je demande d’utiliser la police “Calibri Bold” du fichier ttf, avec pour weight (WE) 700 (correspond à Bold) et pour hauteur de caractères 30. Une fois converti en tinyfont comme précédemment il suffit de le charger dans les ressources et de l’utiliser.

Voilà le résultat en exécution:

SDC10566

Il faudra donc exporter un tinyfont pour chaque police/taille/style que l’on souhaite utiliser dans notre application.

Un peu long, mais pas très compliqué !

A bientôt Wink

Posted: Jun 17 2009, 21:50 by julienc | Comments (0) RSS comment feed |
  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Add comment




biuquote
  • Comment
  • Preview
Loading

captcha

*