Structure pour un programme Windows 4/4

Ce tutoriel a été écrit par Klaus.

Structure pour un programme Windows
Leçon 4

Dans cette leçon, nous allons reprendre le programme réalisé dans la leçon précédente (3/4) et le faire évoluer. Nous allons voir comment on peut créer des séparations visuelles sur des régions de la fenêtre, comment on peut jouer avec les couleurs et les polices pour avoir une présentation plus personnalisée, et comment on peut réaliser des graphiques.

Nous allons procéder étape par étape, avec des explications détaillées à chaque niveau, et un code source Panoramic évoluant en conséquence, jusqu'au programme complet.

Pour mémoire, voici le programme réalisé dans la léçon précédente (3/4). Il permettait de saisir un mot, et le clic sur un bouton affichait le nombre de lettres contenues dans ce mot. On a aussi une liste des mots analysés qui peut être triée en ordre ascendant ou descendant, et elle peut être effacée.

Code:

                  ' Tutoriel sur la structure pour un programme Windows

' tous les labels du programme
label analyser_mot        : ' déclarer la routine événement:
label trier_liste          : ' déclencher le tri des mots traités
label effacer_liste        : ' effacer la liste des mots traités
label saisie_mot          : ' saisie du mot en cours
label sortir              : ' sortir du programme
label inverser_sens        : ' inverser le sens du tri
label a_propos            : ' montrer la fenêtre A-propos
label cacher_a_propos      : ' cacher la fenêtre a_propos

' toutes les variables du programme
dim longueur%, mot_a_analyser$, i%
dim nom_programme$, auteur$, date_creation$, version_programme$

' toutes les initialisations

nom_programme$ = "Tutoriel leçon 4"
auteur$ = "Klaus"
date_creation$ = "21 mars 2011"
version_programme$ = "V01.00"

' champ de saisie
edit 10                    : ' champ de saisie
top 10,20 : left 10,120    : ' position du coin en haut à gauche du champ dans la fenêtre
on_change 10,saisie_mot    : ' placé après la création de l'objet 30 pour informer Panoramic

' affichage du nombre de caractères
alpha 20                  : ' zone d'affichage
top 20,80 : left 20,120    : ' position du coin en haut à gauche de la zone d'affichage dans la fenêtre
font_size 20,12            : ' pour avoir une taille lisible facilement

' libellés des champs affichés
alpha 1 : top 1,20 : left 1,10 : caption 1,"Mot à analyser:"
alpha 2 : top 2,80 : left 2,10 : caption 2,"Nombre de lettres:"

' bouton déclenchant l'analyse
button 30                  : ' bouton déclenchant l'analyse
top 30,50 : left 30,120    : ' position du coin en haut à gauche du bouton
caption 30,"Analyse"      : ' libellé du bouton
ON_CLICK 30,analyser_mot  : ' placé après la création de l'objet 30 pour informer Panoramic

' liste d'affichage des mots traités
list 40                    : ' zone d'affichage
top 40,10 : left 40,300    : ' position du coin en haut à gauche de la liste

' détermination de la direction du tri
option 50                  : ' option pour tri ascendant
top 50,10 : left 50,450    : ' placement à l'écran
caption 50,"Tri ascendant"
option 51                  : ' option pour tri ascendant
top 51,30  : left 51,450  : ' placement à l'écran
caption 51,"Tri descendant"
MARK_ON 50                : ' cocher l'option tri ascendant par défaut

' bouton déclenchant le tri
button 60                  : ' bouton déclenchant l'analyse
top 60,50 : left 60,450    : ' position du coin en haut à gauche du bouton
caption 60,"Tri"          : ' libellé du bouton
ON_CLICK 60,trier_liste    : ' placé après la création de l'objet 60 pour informer Panoramic
inactive 60                : ' bouton inactif par défaut

' bouton effaçant la liste
button 70                  : ' bouton déclenchant l'analyse
top 70,80 : left 70,450    : ' position du coin en haut à gauche du bouton
caption 70,"Effacer"      : ' libellé du bouton
ON_CLICK 70,effacer_liste  : ' placé après la création de l'objet 70 pour informer Panoramic
inactive 70                : ' bouton inactif par défaut

' liste invisible pour le tri descendant
dlist 80                  : ' liste invisible

' menu système
main_menu 100              : ' racine du menu
' définir les sous-menus
sub_menu 101 : parent 101,100 : caption 101,"Fichiers"
sub_menu 102 : parent 102,100 : caption 102,"Fonctions"
sub_menu 103 : parent 103,100 : caption 103,"A-Propos"
on_click 103,a_propos

' sous-menu Fichiers
sub_menu 104 : parent 104,101 : caption 104,"Sortie"
on_click 104,sortir

' sous-menu Fonctions
sub_menu 105 : parent 105,102 : caption 105,"Analyser mot"
on_click 105,analyser_mot
sub_menu 106 : parent 106,102 : caption 106,"  Tri descendant"
on_click 106,inverser_sens
sub_menu 107 : parent 107,102 : caption 107,"Trier liste"
on_click 107,trier_liste
sub_menu 108 : parent 108,102 : caption 108,"Effacer liste"
on_click 108,effacer_liste

form 200                  : ' créer une fenêtre
hide 200                  : ' et la cacher tout de suite
top 200,300 : left 200,300
width 200,400 : height 200,200
caption 200,"A-propos"
' border_hide 200            : ' supprimer le bord et les boutons système
button 210                : ' créer le bouton de fermeture
parent 210,200            : ' il appartient à la fenêtre 200 !
top 210,140 : left 210,180 : ' positionner ce bouton dans la fenêtre
caption 210,"Fermer"
on_click 210,cacher_a_propos

' afficher les informations fixes
alpha 211 : parent 211,200
top 211,10 : left 211,10 : caption 211,"Programme  : "+nom_programme$
alpha 212 : parent 212,200
top 212,30 : left 212,10 : caption 212,"Auteur          : "+auteur$
alpha 213 : parent 213,200
top 213,50 : left 213,10 : caption 213,"Créé le        : "+date_creation$
alpha 214 : parent 214,200
top 214,70 : left 214,10 : caption 214,"Version        : "+version_programme$

end

' traitement des événements
analyser_mot:
mot_a_analyser$ = text$(10)  : ' récupérer le mot saisi
' et afficher le résultat dans l'objet 20
longueur% = len(mot_a_analyser$)
caption 20,"Ce mot a "+str$(longueur%)+" lettres."
text 10,""                : ' effacer le champ de saisie
if mot_a_analyser$<>""
    item_add 40,mot_a_analyser$  : ' ajouter le mot traité à la liste
    active 60                  : ' bouton actif
    active 70                  : ' bouton actif
end_if
set_focus 10              : ' placer le curseur dans le champ de saisie
return

trier_liste:
if checked(50)=1          : ' tri ascendant choisi ?
    SORT 40                    : ' alors trier normalement
else                      : ' ici, tri descendant choisi !
    clear 80                  : ' effacer la DLIST par précaution
    for i%=1 to count(40)      : ' boucler sur le contenu de la liste
        item_add 80,item_read$(40,i%)    : ' et copier chaque élément
    next i%
    sort 80
    clear 40                  : ' effacer notre liste
    for i%=count(80) to 1 step -1      : ' boucler sur le contenu de la DLIST
        item_add 40,item_read$(80,i%)    : ' et copier chaque élément
    next i%
end_if
return

effacer_liste:
clear 40                  : ' effacer la liste
inactive 60                : ' bouton inactif
inactive 70                : ' bouton inactif
return

saisie_mot:
' activation conditonnelle des boutons
if text$(10)=""
    active 60
    active 70
else
    inactive 60
    inactive 70
end_if
return

sortir:
terminate                  : ' arrêt immédiat du programme
return                    : ' on n'arrive jamais ici - présent juste pour la forme

inverser_sens:
text 10,""                : ' effacer le champ de saisie
if checked(50)=1          : ' actuellement en mode ascendant ?
    mark_on 51            : ' oui, alors passer en mode descendant
    caption 106,"* Tri descendant"
else                      : ' non
    mark_on 50            : ' alors passer en mode ascendant
    caption 106,"  Tri descendant"
end_if
return

a_propos:
show 200                  : ' montrer la fenêtre A-propos
inactive 0                : ' bloquer la fenêtre principale
return

cacher_a_propos:
hide 200                  : ' cacher le fenêtre A-propos
active 0                  : ' et réactiver la fenêtre principale
to_foreground 0            : ' replacer la fenêtre principale en avant-plan
return

Tout d'abord, nous allons créer 3 zones visuellement distinctes, dans notre fenêtre. Nous allons diviser la fenêtre en 3 zones: une première zone en haut à gauche contenant la zone de saisie et le bouton "Analyser", une seconde zone en haut à droite contenant la liste des mots analysés et les objets associés à cette liste, et une troisième zone en bas contenant le reste de la fenêtre dans laquelle nous allons faire des graphiques.

L'objet CONTAINER de Panoramic nous donne un moyen simple de créer ces zonages. Un container est un objet qui dans beaucoup d'aspects ressemble à une fenêtre. Il peut contenir d'autres objets, tout comme une fenêtre, dispose d'une bordure et d'un titre affichable. Pour affecter des objets à un container, on utilise toujours la même commande PARENT.

Il faut bien sûr créer l'objet container avant de lui affecter les objets qu'il devra contenir. Nous allons donc placer la création de nos trois containers juste avant la création des objets de notre programme.

Le premier container sera créé ainsi, en utilisant la commande CAPTION pour lui donner un libellé:

Code:

container 310              : ' pour le champ de saisie et le bouton "Analyser"
top 310,0 : left 310,0    : ' positionnement (ce sont les valeurs par défaut)
width 310,280 : height 310,130
caption 310,"Saisie"

Maintenant, il faut attacher les objets correspondants à ce container. Ceci est fait par les commandes PARENT, placées après la création de ces objets:

Code:

' attacher ces objets au container 310
parent 10,310
parent 20,310
parent 1,310
parent 2,310
parent 30,310

Ce n'est pas facilement visible sur ce premier container, mais le positionnement des objets placés dans ce container est adapté automatiquement au coin en haut à gauche du container, et non plus par rapport par rapport à la fenêtre. Nous n'avons donc pas besoin de revoir le positionnement des champs.

Maintenant, nous allons passer au second container. Il sera créé de la même manière:

Code:

' container en haut à droite
container 320              : ' pour le champ de saisie et le bouton "Analyser"
top 320,5 : left 320,285  : ' positionnement
width 320,280 : height 320,130
caption 320,"Historique"

Nous allons attacher les objets à ce container:

Code:

' attacher les objets au container 320
parent 40,320
parent 50,320
parent 51,320
parent 60,320
parent 70,320

Oups ! Les objets ont disparus ! Pourquoi ? A cause du positionnement relatif par rapport au coin en haut à gauche du container et non plus par rapport au coin en haut à gauche de la fenêtre ! Donc, il faut décaler ces champs de 285 pixels vers la gauche. Pour plus de clarté, nous allons écrire cela de la manière suivante:

Code:

top 40,10 : left 40,300-285    : ' position du coin en haut à gauche de la liste

et ainsi de suite pour les autres objets. Et maintenant, nos objets sont à nouveau visibles !

Le troisième container sera également créé de façon identique:

Code:

' container en bas
container 330              : ' pour les graphiques
top 330,135 : left 330,5  : ' positionnement
width 330,560 : height 330,280
caption 330,"Graphiques"

Nous allons remplir ce container un peu plus tard. Pour le moment, nous allons améliorer la présentation en modifiant polices et couleurs.

L'affichage du résultat se fait dans un objet ALPHA 20, dont nous avons passé la taille des caractères à 12 points. Nous allons choisir une police, passer les caractères en gras et italique et utiliser la couleur bleu foncé. Ces options seront mises en place dès la création de l'objet, mais rien n'empêche de le faire dynamiquement, à n'importe quel moment du programme:

Code:

' personnaliser l'affichage
font_name 20,"Roman"      : ' choix de la police
font_bold 20              : ' caractères gras
font_italic 20            : ' en italique
font_color 20,0,0,255      : ' bleu foncé

Comme le bouton d'effacement de la liste des mots traités a une action irréversible, nous allons faire deux choses: d'une part, nous allons passer son libellé en caractères gras, et d'autre part, nous allons demander une confirmation de l'effacement. Cette confirmation peut être obtenue par la fonction MESSAGE_CONFIRMATION_YES_NO(). Contrairement à une commande, cette fonction retourne une valeur. Elle affiche une fenêtre avec une question et deux boutons: Yes et No. Et elle retourne la valeur 1 si l'utilisateur a cliqué sur le bouton Yes, 0 si l'on a fermé la fenêtre par la croixc rouge et 2 si l'on a cliqué le bouton No. Donc, après la création du bouton "Effacer", nous allons ajouter:

Code:

' personnaliser ce bouton
font_bold 70              : ' caractères gras

et dans la routine événement "Effacer", nous allons insérer la ligne suivante, juste après le label:

Code:

if message_confirmation_yes_no("Voulez-vous vraiment effacer la liste ?")<>1 then return

Nous obtenons ainsi le programme suivant:

Code:

                  ' Tutoriel sur la structure pour un programme Windows

' tous les labels du programme
label analyser_mot        : ' déclarer la routine événement:
label trier_liste          : ' déclencher le tri des mots traités
label effacer_liste        : ' effacer la liste des mots traités
label saisie_mot          : ' saisie du mot en cours
label sortir              : ' sortir du programme
label inverser_sens        : ' inverser le sens du tri
label a_propos            : ' montrer la fenêtre A-propos
label cacher_a_propos      : ' cacher la fenêtre A_propos

' toutes les variables du programme
dim longueur%, mot_a_analyser$, i%
dim nom_programme$, auteur$, date_creation$, version_programme$

' toutes les initialisations

nom_programme$ = "Tutoriel leçon 4"
auteur$ = "Klaus"
date_creation$ = "21 mars 2011"
version_programme$ = "V01.00"

' container en haut à gauche
container 310              : ' pour le champ de saisie et le bouton "Analyser"
top 310,5 : left 310,5    : ' positionnement
width 310,280 : height 310,130
caption 310,"Saisie"

' container en haut à droite
container 320              : ' pour la liste
top 320,5 : left 320,285  : ' positionnement
width 320,280 : height 320,130
caption 320,"Historique"

' container en bas
container 330              : ' pour les graphiques
top 330,135 : left 330,5  : ' positionnement
width 330,560 : height 330,280
caption 330,"Graphiques"

' champ de saisie
edit 10                    : ' champ de saisie
top 10,20 : left 10,120    : ' position du coin en haut à gauche du champ dans la fenêtre
on_change 10,saisie_mot    : ' placé après la création de l'objet 30 pour informer Panoramic

' affichage du nombre de caractères
alpha 20                  : ' zone d'affichage
top 20,80 : left 20,120    : ' position du coin en haut à gauche de la zone d'affichage dans la fenêtre
font_size 20,12            : ' pour avoir une taille lisible facilement
' personnaliser l'affichage
font_name 20,"Roman"      : ' choix de la police
font_bold 20              : ' caractères gras
font_italic 20            : ' en italique
font_color 20,0,0,255      : ' bleu foncé

' libellés des champs affichés
alpha 1 : top 1,20 : left 1,10 : caption 1,"Mot à analyser:"
alpha 2 : top 2,80 : left 2,10 : caption 2,"Nombre de lettres:"

' bouton déclenchant l'analyse
button 30                  : ' bouton déclenchant l'analyse
top 30,50 : left 30,120    : ' position du coin en haut à gauche du bouton
caption 30,"Analyse"      : ' libellé du bouton
ON_CLICK 30,analyser_mot  : ' placé après la création de l'objet 30 pour informer Panoramic

' attacher ces objets au container 310
parent 10,310
parent 20,310
parent 1,310
parent 2,310
parent 30,310

' liste d'affichage des mots traités
list 40                    : ' zone d'affichage
top 40,20 : left 40,300-285    : ' position du coin en haut à gauche de la liste

' détermination de la direction du tri
option 50                  : ' option pour tri ascendant
top 50,10 : left 50,450-285    : ' placement à l'écran
caption 50,"Tri ascendant"
option 51                  : ' option pour tri ascendant
top 51,30  : left 51,450-285  : ' placement à l'écran
caption 51,"Tri descendant"
MARK_ON 50                : ' cocher l'option tri ascendant par défaut

' bouton déclenchant le tri
button 60                  : ' bouton déclenchant l'analyse
top 60,50 : left 60,450-285    : ' position du coin en haut à gauche du bouton
caption 60,"Tri"          : ' libellé du bouton
ON_CLICK 60,trier_liste    : ' placé après la création de l'objet 60 pour informer Panoramic
inactive 60                : ' bouton inactif par défaut

' bouton effaçant la liste
button 70                  : ' bouton déclenchant l'analyse
top 70,80 : left 70,450-285    : ' position du coin en haut à gauche du bouton
caption 70,"Effacer"      : ' libellé du bouton
ON_CLICK 70,effacer_liste  : ' placé après la création de l'objet 70 pour informer Panoramic
inactive 70                : ' bouton inactif par défaut
' personnaliser ce bouton
font_bold 70              : ' caractères gras

' attacher les objets au container 320
parent 40,320
parent 50,320
parent 51,320
parent 60,320
parent 70,320


' liste invisible pour le tri descendant
dlist 80                  : ' liste invisible

' menu système
main_menu 100              : ' racine du menu
' définir les sous-menus
sub_menu 101 : parent 101,100 : caption 101,"Fichiers"
sub_menu 102 : parent 102,100 : caption 102,"Fonctions"
sub_menu 103 : parent 103,100 : caption 103,"A-Propos"
on_click 103,a_propos

' sous-menu Fichiers
sub_menu 104 : parent 104,101 : caption 104,"Sortie"
on_click 104,sortir

' sous-menu Fonctions
sub_menu 105 : parent 105,102 : caption 105,"Analyser mot"
on_click 105,analyser_mot
sub_menu 106 : parent 106,102 : caption 106,"  Tri descendant"
on_click 106,inverser_sens
sub_menu 107 : parent 107,102 : caption 107,"Trier liste"
on_click 107,trier_liste
sub_menu 108 : parent 108,102 : caption 108,"Effacer liste"
on_click 108,effacer_liste

form 200                  : ' créer une fenêtre
hide 200                  : ' et la cacher tout de suite
top 200,300 : left 200,300
width 200,400 : height 200,200
caption 200,"A-propos"
' border_hide 200            : ' supprimer le bord et les boutons système
button 210                : ' créer le bouton de fermeture
parent 210,200            : ' il appartient à la fenêtre 200 !
top 210,140 : left 210,180 : ' positionner ce bouton dans la fenêtre
caption 210,"Fermer"
on_click 210,cacher_a_propos

' afficher les informations fixes
alpha 211 : parent 211,200
top 211,10 : left 211,10 : caption 211,"Programme  : "+nom_programme$
alpha 212 : parent 212,200
top 212,30 : left 212,10 : caption 212,"Auteur          : "+auteur$
alpha 213 : parent 213,200
top 213,50 : left 213,10 : caption 213,"Créé le        : "+date_creation$
alpha 214 : parent 214,200
top 214,70 : left 214,10 : caption 214,"Version        : "+version_programme$

end

' traitement des événements
analyser_mot:
mot_a_analyser$ = text$(10)  : ' récupérer le mot saisi
' et afficher le résultat dans l'objet 20
longueur% = len(mot_a_analyser$)
caption 20,"Ce mot a "+str$(longueur%)+" lettres."
text 10,""                : ' effacer le champ de saisie
if mot_a_analyser$<>""
    item_add 40,mot_a_analyser$  : ' ajouter le mot traité à la liste
    active 60                  : ' bouton actif
    active 70                  : ' bouton actif
end_if
set_focus 10              : ' placer le curseur dans le champ de saisie
return

trier_liste:
if checked(50)=1          : ' tri ascendant choisi ?
    SORT 40                    : ' alors trier normalement
else                      : ' ici, tri descendant choisi !
    clear 80                  : ' effacer la DLIST par précaution
    for i%=1 to count(40)      : ' boucler sur le contenu de la liste
        item_add 80,item_read$(40,i%)    : ' et copier chaque élément
    next i%
    sort 80
    clear 40                  : ' effacer notre liste
    for i%=count(80) to 1 step -1      : ' boucler sur le contenu de la DLIST
        item_add 40,item_read$(80,i%)    : ' et copier chaque élément
    next i%
end_if
return

effacer_liste:
if message_confirmation_yes_no("Voulez-vous vraiment effacer la liste ?")<>1 then return
clear 40                  : ' effacer la liste
inactive 60                : ' bouton inactif
inactive 70                : ' bouton inactif
return

saisie_mot:
' activation conditonnelle des boutons
if text$(10)=""
    active 60
    active 70
else
    inactive 60
    inactive 70
end_if
return

sortir:
terminate                  : ' arrêt immédiat du programme
return                    : ' on n'arrive jamais ici - présent juste pour la forme

inverser_sens:
text 10,""                : ' effacer le champ de saisie
if checked(50)=1          : ' actuellement en mode ascendant ?
    mark_on 51            : ' oui, alors passer en mode descendant
    caption 106,"* Tri descendant"
else                      : ' non
    mark_on 50            : ' alors passer en mode ascendant
    caption 106,"  Tri descendant"
end_if
return

a_propos:
show 200                  : ' montrer la fenêtre A-propos
inactive 0                : ' bloquer la fenêtre principale
return

cacher_a_propos:
hide 200                  : ' cacher le fenêtre A-propos
active 0                  : ' et réactiver la fenêtre principale
to_foreground 0            : ' replacer la fenêtre principale en avant-plan
return

Passons maintenant aux graphismes. Panoramic peut gérer des graphiques de différentes manières. Ici, nous allons utiliser les grahiques en 2 dimensions, afin d'afficher une sorte d'histogramme de la longueur des mots analysés.

Les commandes graphiques commencent toutes par "2D_". Elles ciblent un objet spécial dans Panoramic, capable d'afficher le résultat de ces commandes. La form 0 est la cible par défaut. Mais ce n'est pas pratique, car si jamais nos graphismes sont recouverts par une autre fenêtre Windows, ils sont effacés lorsque la fenêtre recouvrante disparaît. Cela n'a donc qu'un intérêt limité. Heureusement, la cible peut aussi être un objet PICTURE qui n'a pas cet inconvéniant. De plus, comme n'importe quel autre objet, nous pouvons placer un picture n'importe où, et l'attacher à un container. C'est ce nous allons commencer par faire:

Code:

' pour recevoir les graphismes
picture 90                : ' picture pour les graphismes
parent 90,330              : ' attacher ce picture au container 30
top 90,15 : left 90,10    : ' positionnement dans le container
width 90,540 : height 90,260  : ' dimensions
color 90,230,230,100      : ' couleur de fond
2d_target_is 90            : ' toutes les commandes 2d_ iront dans picture 90

Nous allons maintenant afficher un rectangle de couleur pour chaque mot, en alternant la couleur bleue et rouge. La largeur du rectangle sera de 10 pixels. La hauteur dépendra du nombre de lettres du mot. Nous allons choisir une hauteur de 10 pixels pour chaque lettre, et limiter la hauteur à 250 pixels (25 lettres) si la longueur du mot dépasse 25 caractères. Il faut aussi se souvenir de la position horizontale d'affichage - nous allons utiliser une nouvelle variable x% pour cela. Dernière remarque: si le picture est plein, c'est-à-dire nous avons analysé 54 mots, il sera effacé et l'affichage recommence à gauche. Bien sûr, le bouton "Effacer" de la liste devra aussi effacer notre histogramme.

Commencons par la variable:

Code:

dim x%                    : ' position du prochain rectangle dans picture 90

Effacement du picture (cette ligne sera placée dans la routine "Effacer" et dans le code qui gèrera le cas de la 55ème lettre):

Code:

2d_clear 90                : ' effacer l'histogramme
color 90,230,230,100      : ' couleur de fond
x% = 0                    : ' replacer le pointeur à gauche du picture

Maintenant, nous allons créer une variable pour gérer la couleur du rectangle affichée. Les couleurs, comme nous l'avons vu précédemment, sont définies par des valeurs R, G et B (rouge, vert et bleu), variant chacune entre 0 (absence) et 255 (maximum). Ainsi, pour obtenir un rouge intense, on utilise (255,0,0), et pour un bleu intense, ce sera (0,0,255). Dans notre cas, la couleur verte sera toujours zéro, et bleu et rouge passent alternativement de 0 à 255 et vice versa. Ainsi, nous definirons une variable:

Code:

dim couleur%              : ' couleur pour les rectangles de l'histogramme

La valeur par défaut est 0 (zéro). Pour déterminer la couleur d'un rectangle, il suffit alors de faire:

Code:

2d_fill_color couleur%,0,255-couleur%

provoquant un rectangle bleu la première fois. Pour alterner la couleur, nous ajoutons une ligne:

Code:

couleur% = 255 - couleur%

et le prochain rectangle sera rouge, et ainsi de suite.

Encore un détail: les coordonnées des pixels dans un picture sont comptées à partir du coin en haut à gauche, en commençant à zéro. Or, nous voulons tracer notre histogramme de bas en haut, et de gauche à droite. Pour la coordonnée horizontale, il n'y a pas de problème: nous pouvons commencer à zéro, et additionner 10 à chaque rectangle. Mais pour la coordonnée verticale, nous devons commencer à 260 (hauteur du picture) pour atteindre la ligne de base, puis déduire 10 * nombre de lettres pour déterminer le sommet du rectangle. Les commandes utilisées seront 2D_RECTANGLE pour dessiner le rectangle, et 2D_FILL_COLOR pour déterminer notre couleur de remplissage. Le rectangle sera entouré d'une bordure noire d'une largeur de 1 pixel. La couleur de la bordure pourrait être changée par la commande 2D_PEN_COLOR, et sa largeur par la commande 2D_PEN_WIDTH.

Juste pour être complet, notons aussi qu'un objet picture peut bien sûr recevoir une image ou une photo (en format JPG ou BMP). Pour cela, il faut utiliser la commande FILE_LOAD.

Passons à la réalisation. Dans la routine "Analyser", nous ajouterons les commandes suivantes, juste avant le set_focus:

Code:

' tracer l'histogramme
if longueur%>25 then longueur% = 25    : ' limiter la hauteur du rectangle
if x%=540                      : ' est-ce que le picture est plein ?
    2d_clear                  : ' si oui: effacer et recommencer au début
    color 90,230,230,100
    x% = 0
end_if
2d_fill_color couleur%,0,255-couleur%      : ' forcer la couleur de remplissage
2d_rectangle x%,260,x%+9,260-longueur%*10  : ' tracer le rectangle
couleur% = 255 - couleur%                  : ' passer à la couleur alternée
x% = x% + 10                              : ' pointer au début du rectangle suivant

Récapitulons les éléments importants de ce tutoriel:
- structuration d'une fenêtre à l'aide des containers
- utilisation des polices, attributs graphiques et couleurs
- graphiques en 2 dimensions

Voilà, c'est le point final de cette série de tutoriels. Nous savons maintenant réaliser un programme Windows, en gérant les événements et les menus, avec une présentation conforme à ce que l'on voit couramment dans les programmes Windows.