pictogram Auteur: aaa.windev@free.fr
Date: 11 novembre 2004
Version: 1.0
Revision: aucune

Table des matières

Introduction

Dans la première partie consacrée au calcul, nous avons affiché notre biorythme avec un message laconique (par exemple "Vous êtes en phase négative"). Nous allons maintenant utiliser les fonctions de dessin du WLangage pour représenter le biorythme par une courbe sinusoïdale horizontale.

Le champ image de WinDev

Pour dessiner, nous avons besoin d'un champ image. Celui se trouve dans le volet "Image" de l'onglet. La sélection d'un volet d'onglet est réalisée très simplement.

// Le volet image est le 2ème volet
onglet1 = 2

Pour dessiner dans un image, il faut d'abord la sélectionner par la commande dDebutDessin(). A partir de là, toutes les commandes de dessin sont dirigées vers l'image sélectionnée. Le code suivant remplit le fond de l'image avec la couleur jaune et dessine un trait rouge de 3 pixels de large.

ddebutdessin(image1)
dremplissage(10,10,iJauneClair)
dLigne(10,10,100,100,irougeclair,3)

Attention

Si vous ne voyez pas le résultat de ce code, c'est que le volet "image" de l'onglet n'est pas affiché. Sélectionnez cet onglet en cliquant sur le bouton d'onglet "Image".

Représentation d'un biorythme avec WinDev

Pour afficher le biorythme, nous allons dessiner une sinusoïde horizontalement. L'échelle du temps sera horizontale. Nous allons afficher 28 jours afin de voir l'intégralité du cycle. Une bande colorée désignera le jour du cycle correspondant à aujourd'hui.

Dessin du cadrillage avec les fonctions de dessin du WLangage

Nous affecterons à chaque jour un largeur de 10 pixels. Nous allons donc dimensionner notre image avec une largeur de 280 pixels afin d'afficher 28 jours. L'axe horizontal coupera notre image en deux parties de 100 pixels de hauteur.

image1..largeur = 280
image1..hauteur = 200
dDebutDessin(image1)
dRectangle(0, 0, 279, 199, iBlanc, iNoir)
// axe horizontal
dLigne(0,99,279,99, iNoir)
//Pour séparer les jours, une ligne verticale est dessiné de 10 en 10.
i est un entier
pour i=10 à 279 pas 10
    dLigne(i, 0, i, 199, iNoir)
fin

Remplissage d'une zone

Pour mettre en évidence le jour du cycle, nous allons remplir le rectangle correspondant avec la couleur jaune. La commande dRemplissage réalise cette action. Nous devons donner les coordonnées d'un point à l'intérieur de la zone. Il y a 28 possibilités, nous pourrions utiliser un selon, mais cela serait un peu fastidieux, nous allons donc calculer la position du point en fonction du numéro du jour sélectionné (entre 1 et 28).

Retour sur la commande Modulo

Dans la 1ère partie, nous avions calculé le numéro du jour grâce à un modulo.

nJourDuCycle est un entier = modulo(nbJours, 28)

Le résultat est compris dans l'intervale [0,1,2 ... 27] qui n'est pas très pratique à manipuler. Il serait mieux d'avoir les valeurs comprises entre 1 et 28. Ce que nous pouvons écrire en une seule ligne.

nJourDuCycle = nJourDuCycle = 0 ? 28 sinon nJourDuCycle

Détermination de la position du point de remplissage

Le calcul doit s'arranger pour tomber bien dans le rectangle du jour en évitant les bordures. En fait, seule la coordonnée en X est à calculer. Pour la coordonnée en Y, on prendra 5 pixels.

dRemplissage( 5 + (nJourDuCycle - 1) * 10, 5, iJauneClair)

Le test suivant permet de vérifier que l'on obtient toujours des valeurs bien placées.

nJourDuCycle est un entier
pour nJourDuCycle = 1 à 28
    print(5 + (nJourDuCycle - 1) * 10)
fin

Quadrillage définitif

 Dessin d'un quadrillage dessiné en WLangage

Le quadrillage final est obtenu par le code suivant.

// Calcul du biorythme émotif en WLangage
DDN est une date = "19841217"
nbJours est un entier
// calculs
nbJours = datedifference( DDN, datesys()) + 1
nJourDuCycle est un entier = modulo(nbJours, 28)
nJourDuCycle = nJourDuCycle = 0 ? 28 sinon nJourDuCycle
// ajuste les dimensions de l'image
image1..largeur = 280
image1..hauteur = 200
// tracé du quadrillage
dDebutDessin(image1)
dRectangle(0, 0, 279, 199, iBlanc, iNoir)
// Pour séparer les jours, une ligne verticale est dessiné de 10 en 10.
i est un entier
pour i=10 à 279 pas 10
    dLigne(i, 0, i, 199, iNoir)
fin 
// Mise en évidence du jour
dRemplissage( 5 + (nJourDuCycle - 1) * 10, 5, iJauneClair)
// axe horizontal
dLigne(0,99,279,99, iNoir)

Affichage de la sinusoïde

Nous allons dessiner un point pour chaque pixel, soit 280 pixels. La fonction Sinus convient parfaitement. D'abord positive pour les angles compris entre 1 et 180°, elle passe ensuite en négatif pour les valeurs comprises entre 180° et 360°. Nous devons transposer notre intervalle [0, 279] sur l'intervalle [0, 360]. C'est une règle de 3.

// Calcul du biorythme émotif en WLangage
DDN est une date = "19841217"
nbJours est un entier
// calculs
nbJours = datedifference( DDN, datesys()) + 1
nJourDuCycle est un entier = modulo(nbJours, 28)
nJourDuCycle = nJourDuCycle = 0 ? 28 sinon nJourDuCycle
// ajuste les dimensions de l'image
image1..largeur = 280
image1..hauteur = 200
// tracé du quadrillage
dDebutDessin(image1)
dRectangle(0, 0, 279, 199, iBlanc, iNoir)
// Pour séparer les jours, une ligne verticale est dessiné de 10 en 10.
i est un entier
pour i=10 à 279 pas 10
    dLigne(i, 0, i, 199, iNoir)
fin 
// Mise en évidence du jour
dRemplissage( 5 + (nJourDuCycle - 1) * 10, 5, iJauneClair)
// axe horizontal
dLigne(0,99,279,99, iNoir)
x, y sont des entiers
// sinusoïde
pour x=0 à 279
    y = 100 - 80 * (sinus(x * 360 / 280))
    dPoint(x, y, iRougeClair)
fin

Amélioration du tracé

 Quadrillage et courbe dessinée avec des points

Nous remarquons que la courbe est discontinue car beaucoup de points sont espacés. Pour améliorer le tracé, nous allons relier tous les points, en utilisant la commande dLigne. L'astuce est qu'il faut mémoriser un point d'origine.

// Calcul du biorythme émotif en WLangage
DDN est une date = "19841217"
nbJours est un entier
// calculs
nbJours = datedifference( DDN, datesys()) + 1
nJourDuCycle est un entier = modulo(nbJours, 28)
nJourDuCycle = nJourDuCycle = 0 ? 28 sinon nJourDuCycle
// ajuste les dimensions de l'image
image1..largeur = 280
image1..hauteur = 200
// tracé du quadrillage
dDebutDessin(image1)
dRectangle(0, 0, 279, 199, iBlanc, iNoir)
// Pour séparer les jours, une ligne verticale est dessiné de 10 en 10.
i est un entier
pour i=10 à 279 pas 10
    dLigne(i, 0, i, 199, iNoir)
fin 
// Mise en évidence du jour
dRemplissage( 5 + (nJourDuCycle - 1) * 10, 5, iJauneClair)
// axe horizontal
dLigne(0,99,279,99, iNoir)
x, y, ix, iy sont des entiers
// sinusoïde
ix = 0
iy = 100
pour x=1 à 279
    y = 100 - 80 * (sinus(x * 360 / 280))
    dLigne(ix, iy, x, y, iRougeClair, 3)
    ix = x
    iy = y
fin

 Courbe de biorythme dessinée avec des segments

Saisie d'une valeur

Pour rendre notre programme vraiment utilise, il faut permettre de saisir la date de naissance. Généralement l'auteur d'une application utilisera un champ de saisie pour ce faire. C'est ce que nous allons réaliser ici avec le code suivant.

DDN est une date
DDN = ouvre("ask", "Entrez une date au format AAAAMMJJ")
SI pas DateValide(DDN) alors
    Erreur("Date non valide !")
    RETOUR
FIN

La commande DateValide() qui contrôle la validité de la date est nécessaire ici, car la saisie est réalisé dans un champ de type texte. Normalement le développeur utilise un champ Date, ou mieux le composant Calendrier, pour saisir une date. Ici, pour WLexplorateur, j'ai créé un fenêtre de saisie générique, utilisant un champ texte. c'est cette fenêtre que nous utiliserons chaque fois que nous voudrons demander une valeur à l'utilisateur.

Exercice

Le lecteur courageux pourra se lancer dans l'exercice suivant :

Conclusion

Nous avons abordé dans cette page quelques instructions de dessin du WLangage : dRectangle, dPoint, dLigne, dRemplissage. Beaucoup d'autres sont disponibles. Elles permettent pas exemple de dessiner des codes barres ou des graphes de gestion, mais nous verrons que le WLangage intègre directement ces fonctionnalités.

Liens vers les pages du site