Un grand pas en avant - L'affichage graphique

Non, non, ce blog n'est pas abandonné ! Je tiens à rassurer les deux lecteurs qui se sont perdus sur ces pages. A vrai dire, pour pouvoir vous faire part de mes découvertes, il faut que j'en fasse... Et parfois, ça prend du temps.

Alors pour me faire pardonner, je vous propose de gagner du temps et d'accélérer la cadence. Avec ce projet dingue de réaliser ici notre première application. Comme ça. Paf ! A froid.
Mais bon, quand on parle d'application, entendons-nous bien : on ne va pas réécrire Word tout de suite.

Ce qu'on va faire, c'est écrire un petit programme très à la mode de l'époque où j'alignais mes toutes premières lignes de code. Ca remonte à... Pfffff ! Pour vous situer, en ce temps là, Steve Jobs commandait pour Apple des petits logiciels à un jeune du nom de Bill Gates.
Ce programme va consister à calculer un prix TTC à partir du montant HT. Oui, je sais, ça a l'air tarte, mais ça n'est pas si simple. Vous allez voir ça tout de suite.

Commençons par distinguer les différentes étapes de notre programme :

1. Saise du montant HT
2. Contrôle de la saisie (il doit s'agir d'un nombre positif)
3. Calcul
   
4. Affichage du résultat

Le tout, évidemment, de façon un peu élégante.

Seulement, il n'existe pas en Processing d'instruction équivalente au input() ou raw_input() du Python, par exemple. C'est probablement dû à sa parenté avec Java, qui n'en dispose pas non plus. Ne faisons pas de mystères, cela revient à dire que Processing ne sait pas attendre gentiment que vous saisissiez quelque chose au clavier. Du coup, il ne vous autorise pas non plus à contrôler et modifier ce que vous tapez.
Ce qui signifie que notre programme a besoin de quelques étapes supplémentaires, pour devenir :

1. Définition de la zone d'affichage
2. Capture des éventuels événements clavier
3. Interprétation de la saisie "non-alphanumérique" = touches de fonction, flèches etc.
   
4. Affichage de la saisie capturée
   
5. Modification de la saisie en cas de correction
6. Validation de la saisie
   
7. Contrôle de la saisie (il doit s'agir d'un nombre positif)
8. Affichage du résultat

A la taille de cette liste, vous aurez compris que Processing a besoin qu'on lui précise bien des choses. A priori, ça peut paraître pénible mais ça aurait été pareil dans d'autres langages. En Python par exemple la déclaration d'une zone d'affichage aurait eu lieu plus loin dans le script.

Pour vous imprégner au mieux de la logique Processing, pensez que vous développez une applet destinée à être intégrée à une page web. D'où, premier souci, définir les dimensions "physiques" de la chose. Deuxième souci, d'ordre graphique également : quels sont les éléments d'affichage mobilisés. En l'occurrence, c'est du texte, il faut donc définir les polices utilisées. Enfin, puisque le langage a une vocation graphique/animation, déterminons le taux de rafraîchissement.

PFont font;
String entree = ""; -> on définit quelques variables et chaînes utiles pour plus tard
int i;

void setup() {
size(400,200); -> la dimension en pixels de notre zone de travail
font = loadFont("ACaslonPro-Italic-16.vlw"); -> choix de la police utilisée
textFont(font); -> utilisation de la police pour le texte
frameRate(10); -> taux de rafraîchissement
}

Evidemment, en rose, ce sont des commentaires qui n'ont rien à voir avec le script. Notez au passage que j'utiliserai désormais de véritables commentaires pour, euh... Ben pour commenter ! C'est à dire qu'une note dans le script sera indiquée par // si elle tient en une ligne et délimitée par /* et */ si elle tient en plusieurs.

PFont est la classe de gestion des fontes. On commence par en créer une instance qui recevra la fonte choisie.
Pour pouvoir utiliser une police de caractères, il faut faire appel au menu de votre IDE : menu "Tools", "Create font...". Là, vous choisirez la police et son corps en pixels. Elle sera convertie au format bitmap .vlw et placée dans un sous-répertoire du dossier où sera sauvegardé votre script. Dans mon cas, ça donne : Processing/caspratique/data/ACaslonPro-Italic-16.vlw .

Dans le script, on "chargera" la police au moyen de loadFont et on la rendra active par textFont(). Et pour l'utiliser véritablement, on ne fera plus appel à print mais à text(), utilisée ainsi :
text("chaîne à afficher", coordonnées x, coordonnées y);

Sachant que la "chaîne à afficher" peut être une variable et que x et y sont indiqués en pixels.