Architecture d'un programme interactif graphique. Objectifs :

Transcription

1 Architecture d'un programme interactif graphique Objectifs: Organiser un projet selon Model View Controller Dessin 2D avec OPENGL Plan: Les 3 types de dialogue utilisateur Approche Model View Controller OPENGL: du modèle au pixel projection et buffers Les 3 styles de dialogues avec l'utilisateur Les 3 styles de dialogues avec l'utilisateur: ligne de commande (commandes UNI-LINU) passage de paramètres au programme avec argc et argv Conversationnel (programmes semestre d'automne) printf, scanf, etc disponible dans la bibliothèque standard C Interface Graphique Utilisateur (Graphic User Interface) : widgets (boutons, etc...) disponible dans bibliothèques Bibliothèque (Library) : regroupe le code objet de plusieurs fichiers sources réalisant une tâche bien définie (exemple: interface graphique, dessin, etc...) API (Application Programming Interface) : prototypes des fonctions exportées par une bibliothèque dans un fichier en-tête (exemple: gl.h) = fichier d'interface de la bibliothèque L'architecture MVC: Model-View-Controller() L'architecture MVC: Model-View-Controller(2) Objectifs : Permettre plusieurs styles de Visualisations et de Contrôle par l'utilisateur sur un Modèle. Contrôle Simplifications dans le cadre du cours/projet : Contrôle S'adapter facilement à l'évolution rapide de la technologie des parties "Visualisation" et "Contrôle utilisateur" en gardant stable la partie "Modèle métier" Les compétences sont souvent focalisées sur un sous système, rarement sur l'ensemble des trois. Visualisation Modèle sous-système Le Modèle exploite directement les fonctions mises à disposition dans graphic.c Modèle graphic.c :dépendances dessin Visualisation Le module graphic.c regroupe les dépendances de dessin vis à vis d'une bibliothèque externe (OPENGL). Il offre le moyen de dessiner des éléments simples en 2D.

2 Les bibliothèques à disposition View: dessin 2D avec la bibliothèque OPEN-GL GLUI : GLUT based User Interface Library. Visualisation d une interface graphique utilisateur (Graphic User Interface) GLUT: Open GL Utility Toolkit Contrôle de la gestion des fenêtres et de la file d attente des évènements (clavier, souris, etc ). OPENGL : Visualisation de bas niveau pour le dessin. Une bibliothèque pour afficher des objets 2D et 3D API d'environ 50 fonctions: exemple #include <GL/glut.h> ajouter la bibliothèque lgl dans le fichier Makefile (règle de dépendance de l'exécutable produisant une édition de liens) De l'espace du modèle à l'espace d'affichage L'espace OpenGL par défaut () left Espace 2D continu height bottom width right ) Le "modèle" que l'on veut dessiner avec OPENGL doit est représentable à l'aide de points, lignes, polygones (plein ou vide), etc... Le programme a le contrôle sur les coordonnées (x,y) des points qu'il initialise et met à jour si nécessaire 2) cadrer = choisir une projection orthographique qui définit les bornes left, right, bottom, de l'espace qui sera dessiné dans la fenètre graphique. Si on ne précise rien OPENGL dessine [0,] x [0,] 3) Il faut préciser quelle partie de la fenêtre (=viewport) va recevoir le dessin. En général on indique toute la fenêtre avec glviewport(0,0,width, height) 4) dessiner = appeler les fonction OPENGL de dessin Espace fini et discret de la fenêtre graphique exprimé en pixels: width x height Si aucune projection orthographique n'est définie seul le contenu de cet espace sera visualisé dans la fenètre graphique L'origine de l'espace est dans le coin inférieur gauche L axe des x croît vers la droite, sur l'intervalle [0.,.] L'axe des y croît vers le haut, sur l'intervalle [0.,.] C'est un espace continu (coordonnées avec des float) left bottom right

3 L'espace OPENGL par défaut (2) Définir l espace visible avec la projection orthographique glortho( ) (,) (,) Espace GL dessiné par défaut bottom - left 0 2 right GL affiche seulement les objets, ou morceaux d objets, contenus dans l espace [0,] x [0,] Les bornes minimum et maximum de la projection orthographique peuvent être modifiées avec: glortho(left, right, bottom,,, ); Dans l exemple ci dessus: glortho( 0, 2,,,, ); hauteur Conséquence d'une différence de proportions entre glortho et la fenêtre largeur (,) largeur Si l espace GL n a pas les mêmes proportions «largueur/hauteur» que la fenêtre, le dessin subit une distorsion. Dans l exemple ci dessus l espace GL est de proportion. tandis que la fenêtre est de proportion 2. Le dessin subit une homothétie de 2 selon. hauteur Il faut garantir un même aspect-ratio La projection orthographique est modifiée pour avoir un aspect ratio de 2 identique à celui de la fenêtre (,) 2 ) Toujours garantir les mêmes proportions largeur/ hauteur = aspect ratio pour ne pas introduire de distorsion. 2) Si la taille de la fenêtre change, il faut ajuster la rapport largeur/hauteur de la projection orthographique pour avoir le même aspect ratio. 3) Faire un choix parmi l'infinité de possibilités pour cet ajustement, par ex doubler la largeur au lieu de diviser la hauteur par 2.

4 Dessiner avec OpenGL () Machine à état: Commandes de modification d'attributs: couleur, épaisseur du trait, etc... Dessine avec ces attributs jusqu'à la prochaine modification Variable d état Valeur par défaut Fonction GL pour modifier l état Épaisseur du trait pixel gllinewidth(nb_pixel) couleur du fond noir glclearcolor(r,g,b,0.) couleur du dessin blanc glcolor3f(r,g,b) Composition additive des couleurs Triplets (Red,Green,Blue) avec 0.< R,G,B <. (, 0, 0) = rouge (0,, 0) = vert (0, 0, ) = bleu (,, 0) = jaune (, 0, ) = magenta (0,, ) = cyan Dessiner avec OpenGL (2). Effacer la fenètre: glclearcolor et glclear 2. Re-initialiser les transformations: glloadidentity 3. Projection du domaine 2D: glortho 4. Optionel: (re)définir les attributs: couleur,épaisseur de trait 5. Dessin: glbegin( mode ) énumérer les points de l'objet avec glvertex2f(x,y) glend() 6. si double buffer actif glutswapbuffer() Méthode du double-buffer Méthode du double-buffer But: présenter une image stable sur l'écran (front buffer) pendant que le dessin est réalisé progressivement dans une autre mémoire d'image (le back buffer). 3 étapes:. Effacer le back buffer (invisible) 2. Dessiner (implicite) dans le back buffer 3. Intervertir "instantanément" les 2 buffers avec glutswapbuffers But: présenter une image stable sur l'écran (front buffer) pendant que le dessin est réalisé progressivement dans une autre mémoire d'image (le back buffer). 3 étapes:. Effacer le back buffer (invisible) 2. Dessiner (implicite) dans le back buffer 3. Intervertir "instantanément" les 2 buffers avec glutswapbuffers Le dessin est construit progressivement dans le back-buffer Le dessin est construit progressivement dans le back buffer Ce qu'on voit à l'écran (= front buffer)

5 Exemple: avec et sans double buffer Avec le double buffering: Sans double buffering: une image en cours de calcul peut être affichée au cours d'une animation faisant alors clairement apparaître la génération progessive du résultat final. Résumé En vertu du principe de séparation des fonctionalités nous adoptons l'approche Model-View-Controller pour l'architecture d'une application interactive. Le sous-système de Contrôle pilote celui de Visualisation et celui du Modèle du problème traité. La bibliothèque GLUT est utilisée pour le Contrôle de l'interaction avec l'utilisateur (souris, clavier ). La visualisation de l'interface graphique utilisateur exploite GLUI tandis que la visualisation du Modèle exploite la bibliothèque OPENGL OPENGL : La proportion largeur/hauteur de l'espace visualisé du Modèle doit être la même que celle de la fenêtre de dessin pour éviter les distorsions.