grafik est une librairie écrite en python qui permet de faire des cadres (un peu comme ncurses). Elle servira à blacksky (la partie serveur) et client mais seulement en mode console. Vous trouverez ici differentes ressources pour utiliser grafik
Introduction[]
la librairie grafik est conçu pour être le plus simple d'utilisation possible. Elle permet de rapidement mettre en place deux trois cadres et d'enrichir le texte avec des couleurs etc. Voici le traditionnel Hello world! commenté
#-*- coding: utf-8 -*-
from grafik import* # on import grafik
maFenetre = Grafik_MainWindows(20, 20) # on crée la fenêtre principale qui englobera le tout
maFenetre.addString("Hello world!", 5, 5) # on ajoute à la fenêtre principale la chaine "Hello world!" aux coordonnées 5, 5
maFenetre.display() # on affiche la fenêtre principale
et le résultat est:
Analysons ensemble le code en détail ligne par ligne
from grafik import* # on import grafik
rien de particulier à dire (on importe la librairie)
maFenetre = Grafik_MainWindows(20, 20) # on crée la fenêtre principale qui englobera le tout
Comme indiqué dans le code, on crée la fenêtre principale. C'est la chose primordiale qu'il faut effectuer dans grafik. En effet c'est dans cette fenetre que seront affiché tout les objets (cadres, textes, champs de saisie, etc). Il faut lui passer deux valeurs fondamentales, c'est les grandeurs en X & Y quelle prendera. A cette étape, il est important que vous sachiez comment grafik utilise le système de coordonnée. En général à chaque fois que vous passez des coordonnées, il faut les passer en X puis Y (si ce n'est pas le cas il s'agit d'un bug de la librairie et vous deveriez le signaler). Dans le cas de l'initialisation de maFenetre on a mis 20 & 20. Ça veut dire que grafik à créé une matrice virtuelle de 20*20 cases qui sont pour l'instant vides.
Attention: une case = un caractère, en effet vous ne pouvez pas en mettre plus
On peut remarquer que géométriquement, l'origine est en haut à gauche (c'est TOUJOURS le cas dans grafik) et que l'axe des Y est négatif, Cependant on ne met pas -20 pour des raisons purement pratique.
maFenetre.addString("Hello world!", 5, 5) # on ajoute à la fenêtre principale la chaine "Hello world!" aux coordonnées 5, 5
Là on va rajouter une chaine de caractère, on verra par la suite qu'on peut aussi utiliser Grafik_label et que .addString est plus utilisé pour mettre un titre. Là aussi les coordonnées placerons l'objet 5 caractères dans l'axe X et 5 dans l'axe Y. Maintenant la matrice de maFenetre ressemble à cela:
Le début du texte sera placé à l'intersection. Là le texte est dans la matrice mais il n'est pas encore affiché. Pour le faire il faut afficher toute la matrice. et c'est finalement la dernière ligne qui le fait.
maFenetre.display() # on affiche la fenêtre principale
Vous pouvez rajouter votre propre texte, en simplement rajoutant une méthode .add avec la chaine et les coordonnées de votre choix.
Cependant attention à deux choses:
1) Par rapport aux coordonnées choisies, la longeur du texte NE doit pas dépasser la matrice (sinon l'interpréteur vous insultera). Pensez aussi aux coordonnées qui doivent se trouver dans la matrice. Par exemple ici dans notre programme on rajoute la chaine hello world dehors de la matrice
maFenetre.addString("Hello world!", 30, 25) # on ajoute à la fenêtre principale la chaine "Hello world!" aux coordonnées 30. 35 ce qui dépasse largement les capacités de la matrice qu'on a déclaré au début (20.20)
et on obtient le message suivant:
└> python hello_world.py
Traceback (most recent call last):
File "hello_world.py", line 4, in <module>
maFenetre.addString("Hello world!", 30, 25) # on ajoute à la fenêtre principale la chaine "Hello world!" aux coordonnées 30, 25
File "grafik.py", line 81, in addString
self.windowsBuffer[posY][posX] = color + i + g_DEFAULT
IndexError: list index out of range
2) Pensez toujours que le programme s'execute dans l'orde que vous lui demandez. Et dans grafik, une fois une zone de la matrice écrite, elle n'est pas protégée en écriture. Concrètement cela veut dire que vous pouvez accidentellement masquer une partie de ce que vous voulez afficher voilà par exemple deux chaines qui s'affiche au même endroit.
maFenetre.addString("Hello world!", 5, 5) # on ajoute à la fenêtre principale la chaine "Hello world!" aux coordonnées 5, 5
maFenetre.addString("salut", 5, 5) # on ajoute à la fenêtre principale la chaine "salut" aux coordonnées 5, 5
dans un cas comme celui là, grafik voit la première ligne et met donc Hello world! dans la matrice, puis à la ligne suivant il met salut, donc au final dans la matrice il y aura cela:
salut wordl!
Comme on le remarque le hello a été écrasé donc faite attention, si vous voyez des cadres qui dépassent etc pensez à ça
Maintenant que nous avons vu en détail le fonctionnement du code qui affiche hello world, on peut aller plus loin et voir des choses plus sympa que du texte (à nous les cadres, boutons widgets)
Une partie dynamique et une statique[]
Globalement dès qu'un programme dépasse le simple hello world il faudra envisager de le séparer en 2 parties. Une première qui sera statique et l'autre qui sera dynamique. La partie statique s'occupera de l'initialisation du programme, c'est là qu'on trouvera la génération de la matrice, de certaine variables, et de choses qui ne vont pas évoluer durant le déroulement du programme (souvent le titre le titre de la fenetre principale). Puis la partie dynamique qui elle, contiendera tout ce qui est susceptible de changer au cours du programme (par exemple les cadres/zones de saisies/texte/etc). On pourrait représenter cela par l'organigramme suivant
On voit assez rapidement que la partie init n'est faite qu'une fois, en effet rien ne sert à chaque passage en boucle de déclarer la matrice principale. En revanche un texte ou un cadre qui est pourrait être changer, lui se retrouvera dans le main program.
les classes, fonctions & variables globales[]
Toutes les fonctions et classes commencent par grafik_fonction ou Grafik_class (avec le g minuscule pour une fonction et majuscule pour une classe). Il y a une série de variables globales qui définissent la couleur et deux trois effets les voici.
| variable | effet |
|---|---|
| g_DEFAULT | texte par défaut |
| g_BOLD | texte en gras |
| g_UNDERLINE | texte souligné |
| g_BLINK | texte qui clignote |
| g_REVERSE | inversion |
| g_CONCEALED | |
| g_BLACK | texte en noir |
| g_RED | texte en rouge |
| g_GREEN | texte en vert |
| g_YELLOW | texte en jaune |
| g_BLUE | texte en bleu |
| g_MAGENTA | texte en magenta |
| g_CYAN | texte en cyan |
| g_WHITE | texte en blanc |
| g_ON_BLACK | fond noir |
| g_ON_RED | fond rouge |
| g_ON_GREEN | fond vert |
| g_ON_YELLOW | fond jaune |
| g_ON_BLUE | fond bleu |
| g_ON_MAGENTA | fond magenta |
| g_ON_CYAN | fond cyan |
| g_ON_WHITE | fond blanc |