Calculs en WLangage (deuxième partie)
Auteur: aaa.windev@free.fr
Date: 11 novembre 2004
Version: 1.0
Revision: aucune
Table des matières
- Introduction
- Le champ image de WinDev
- Représentation d'un biorythme avec WinDev
- Dessin du cadrillage avec les fonctions de dessin du WLangage
- Remplissage d'une zone
- Retour sur la commande Modulo
- Détermination de la position du point de remplissage
- Quadrillage définitif
- Affichage de la sinusoïde
- Amélioration du tracé
- Saisie d'une valeur
- Exercice
- Conclusion
- Liens vers les pages du site
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
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é
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
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 :
- Afficher les autres biorythmes
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.