Programmation évènementielle

Nous utiliserons la bibliothèque pyglet pour ce projet. Commencez par l'installer :

python -m pip install pyglet

Une fois la bibliothèque installée, on peut créer notre projet :

La programmation événementielle est un paradigme de programmation très utiliser dans les interfaces graphiques. Cette méthode consiste à réagir à des événements issus du programme comme de cliquer sur un bouton, appuyer sur une touche, etc.

Le principe est le suivant :

1. on inscrit une fonction $f$ à un type d'événement $e$
2. lorsque l'événement $e$ arrive, la fonction $f(e)$ est exécutée

Dans ce projet, les événements que nous aurons à manipuler seront les appuies sur les touches du clavier, le dessin de notre interface, la taille des fenêtres, etc, etc.

Cette méthode de programmation est basée sur le patron de conception observateur.

Nous allons utiliser pyglet qui est une bibliothèque permettant de créer des interfaces pour illustrer cela. Nous ne rentrerons pas dans tous les détails de son implémentation (utilisation d'opengl, la gestion du son, etc) mais nous utiliserons assez de ses fonctionnalités pour que vous puissiez aller plus loin de votre côté.

La documentation de pyglet est très bien faite et fourmille d'exemples.

Nous allons placer les différents essais de pyglet dans un sous-dossier de notre projet. Créer un dossier essais-pyglet.

Hello world

Il y a plusieurs moyen me mettre en place une fenêtre pyglet. Nous allons utiliser la méthode la plus proche de la programmation objet qui consiste à faire de l'héritage.

une fenêtre

Fichier : essais-pyglet/fenêtre.py :

import pyglet


class HelloWorldWindow(pyglet.window.Window):
    def __init__(self):
        super().__init__(400, 200, "texte")

        self.label = pyglet.text.Label("Hello, world!")

    def on_draw(self):
        self.clear()
        self.label.draw()


window = HelloWorldWindow()
print(window.get_size())

pyglet.app.run()
print("c'est fini !")

Vous devriez voir apparaître une fenêtre avec écrit "Hello, world!" en blanc sur fond noir en bas à gauche de la fenêtre. Vous devriez aussi voir dans le terminal le texte : (400, 200) qui est la taille de la fenêtre. En revanche, le texte c'est fini ! ne devrait apparaître dans le terminal que lorsque la fenêtre se ferme.

La méthode on_draw sert à dessiner la fenêtre et est exécutée à chaque rafraîchissement de la fenêtre, c'est à dire beaucoup de fois par seconde (60 IPS = 60 images par seconde = 60 rafraîchissement de fenêtre par seconde = 60 FPS). Son code stipule que pour dessiner la fenêtre :

1. on efface son contenu
2. on dessine le label

# ...

    def on_draw(self):
        self.clear()
        self.label.draw()

        print("Coucou du rafraîchissement !")

# ...

>>> from datetime import datetime
>>> print(datetime.now())
2023-03-13 08:44:13.740575
>>> 

from datetime import datetime

# ...

class HelloWorldWindow(pyglet.window.Window):
    # ...
    def on_draw(self):
        self.clear()
        self.label.draw()

        print(datetime.now())

# ...

Une fenêtre redimensionnable

La fenêtre que nous venons de créer n'est pas redimensionnable (essayez d'augmenter sa taille, vous verrez qe vous n'y arrivez pas).

# ...
class HelloWorldWindow(pyglet.window.Window):
    def __init__(self):
        super().__init__(400, 200, "texte", resizable=True)

        # ...
    
    # ...

La méthode on_draw est une méthode spéciale. A chaque fois que l'événement draw est activé, cette méthode est exécutée. Pour le voir concrètement, regardons l'effet d'un redimensionnement sur la taille de la fenêtre :

import pyglet


class HelloWorldWindow(pyglet.window.Window):
    def __init__(self):
        super().__init__(400, 200, "texte", resizable=True)

        self.label = pyglet.text.Label("Hello, world!")

    def on_draw(self):
        print("taille de la fenêtre :", self.get_size())
        self.clear()
        self.label.draw()


window = HelloWorldWindow()
print(window.get_size())

pyglet.app.run()
print("c'est fini !")

La méthode on_draw étant exécutée à chaque rafraîchissement, le print dans cette fonction va vite devenir pénible. Supprimez le.

# ...

    def on_draw(self):
        self.clear()
        self.label.draw()

# ...

Texte au milieu de la fenêtre

Un label est un objet non modifiable qui peut-être affiché (dans la méthode on_draw).

Remplacez sa création dans le fichier essais-pyglet/fenêtre.py par :

# ...

self.label = pyglet.text.Label(
    "Hello, world!",
    x=self.width // 2,
    y=self.height // 2,
    anchor_x="center",
    anchor_y="center",
)

# ...

En exécutant le code, le texte est placé au milieu de l'écran ! En revanche, lorsque vous modifiez la taille de la fenêtre pendant l'exécution du programme, la position ne change pas.

class HelloWorldWindow(pyglet.window.Window):
    #...

    def on_resize(self, width, height):
        super().on_resize(width, height)
        self.label.x = width // 2
        self.label.y = height // 2

    # ...

Gestion du clavier

On utilise deux événements pour gérer le clavier :

• on_key_press(symbol, modifiers) qui s'active lorsque qu'une touche est appuyée
• on_key_release(symbol, modifiers) qui s'active lorsque qu'une touche est relâchée

Le paramètre symbol est un entier qui correspond au code de la touche et modifiers gère les touches comme shift, control ou encore alt.

Ajoutons une gestion basique du clavier dans le programme :

class HelloWorldWindow(pyglet.window.Window):
    #...

    def on_key_press(self, symbol, modifiers):
        print("press:", symbol, modifiers)

    def on_key_release(self, symbol, modifiers):
        print("release:", symbol, modifiers)

    # ...

Flèches gauche et droite

Chaque touche est une constante dont le nom correspond à la la touche et sa valeur au code. Par exemple, la constante pyglet.window.key.SPACE correspond au nombre 32.

Nous allons maintenant faire bouger d'un cran notre texte lorsque l'on appuie sur les touches "flèche gauche" et "flèche droite".

# ...

from pyglet.window import key

# ...

class HelloWorldWindow(pyglet.window.Window):
    # ...
    
    def on_key_press(self, symbol, modifiers):
        if symbol == key.UP:
            self.label.y += 10
        elif symbol == key.DOWN:
            self.label.y -= 10
        elif symbol == key.LEFT:
            self.label.x -= 10
        elif symbol == key.RIGHT:
            self.label.x += 10

    # ...

Avec cette technique, on ne peut se déplacer que d'un cran par appui sur la touche. Pour gérer les déplacements continus, il faut prendre en compte le temps d'appui sur la touche. C'est le boulot de la partie suivante.

Touches de modifications

Les touches de modifications sont gérées par un bit field : une touche de modification correspond à un bit qui est positionné à 1 si la touche est enfoncée et à 0 sinon. Ceci permet :

• de gérer plusieurs modificateurs avec un seul entier
• de savoir rapidement avec des traitements logiques si tel ou tel touches de modification est enfoncée.

Les différents modificateurs sont donnés :

>>> from pyglet.window import key
>>> print(key.MOD_SHIFT)
1
>>> print(bin(key.MOD_SHIFT))
0b1
>>> print(key.MOD_ALT)
4
>>> print(bin(key.MOD_ALT))
0b100
>>>

Savoir si un modificateur particulier est appuyé se fait avec des conditions sur les bits comme & ou | par exemple.

from pyglet.window import key

# ...

class HelloWorldWindow(pyglet.window.Window):
    # ...
    
    def on_key_press(self, symbol, modifiers):
        if modifiers & key.MOD_SHIFT:
            print("touche shift appuyée")

    # ...

Allons un peu plus loin :

class HelloWorldWindow(pyglet.window.Window):
    # ...
    
    def on_key_press(self, symbol, modifiers):
        if modifiers & (key.MOD_SHIFT | key.MOD_CTRL):
            print("touche shift ou ctrl appuyée")

    # ...

class HelloWorldWindow(pyglet.window.Window):
    # ...
    
    def on_key_press(self, symbol, modifiers):
        if (modifiers & (key.MOD_SHIFT | key.MOD_CTRL)) == key.MOD_SHIFT | key.MOD_CTRL:
            print("touche shift ou ctrl appuyée")

    # ...

Gestion du temps

La gestion du temps se fait également par un événement. Sa mise en place est cependant différente des événements que l'on a vu jusqu'à présent :

class HelloWorldWindow(pyglet.window.Window):
    # ...

    def __init__(self):
        super().__init__(400, 200)

        # ...

        pyglet.clock.schedule_interval(self.update, 1)

        # ...

    def update(self, dt):
        print(dt)


    # ...

Le code précédent fait en sorte que la méthode update soit exécutée toute les secondes. Le paramètre dt donne le nombre de secondes exactes depuis le dernier appel de la fonction. Cela permet de gérer le lag s'il existe (remarquez qu'il vaut toujours un peut plus que 1).

# ...

class HelloWorldWindow(pyglet.window.Window):
    def __init__(self):
        self.label = pyglet.text.Label(
            "Hello, world!",
            x=self.width // 2,
            y=self.height // 2,
            anchor_x="center",
            anchor_y="center",
        )

        pyglet.clock.schedule_interval(self.update, .5)

        self.dx = 0
        self.dy = 0

        # ...

    def update(self, dt):
        self.label.x += self.dx
        self.label.y += self.dy

    # ...

    def on_key_press(self, symbol, modifiers):
        if symbol == key.UP:
            self.dy = 10
        elif symbol == key.DOWN:
            self.dy = -10
        elif symbol == key.LEFT:
            self.dx = -10
        elif symbol == key.RIGHT:
            self.dx = +10

    def on_key_release(self, symbol, modifiers):
        if symbol == key.UP:
            self.dy = 0
        elif symbol == key.DOWN:
            self.dy = 0
        elif symbol == key.LEFT:
            self.dx = 0
        elif symbol == key.RIGHT:
            self.dx = 0
    
    # ...

# ...

Avec cette méthode le texte va continuer de se déplacer tant qu'une flèche reste appuyée. On peut même taper plusieurs flèches en même temps pour se déplacer en diagonale (cool, non ?).

Il reste un problème : le texte va sortir de la fenêtre si on reste appuyé trop longtemps. Corrigez ça :

class HelloWorldWindow(pyglet.window.Window):
    # ...

    def update(self, dt):
        self.label.x += self.dx
        if self.label.x < 0:
            self.label.x = 0
        elif self.label.x > self.width:
            self.label.x = self.width

        self.label.y += self.dy
        if self.label.y < 0:
            self.label.y = 0
        elif self.label.y > self.height:
            self.label.y = self.height
    
    # ...

Gestion de la souris

Pour gérer la souris, comme vous pouvez vous en douter, il s'agit de s'abonner à des événements. Il en existe plusieurs. Commençons par voir ce que ça donne avec les événements on_mouse_press(x, y, button, modifiers) et on_mouse_release(x, y, button, modifiers) :

class HelloWorldWindow(pyglet.window.Window):
    # ...

    def on_mouse_press(self, x, y, button, modifiers):
        print("press:", x, y, button)

        if (abs(self.label.x - x) <= self.label.content_width / 2) and (
            abs(self.label.y - y) <= self.label.content_height / 2
        ):
            print("clique dans le label")

    def on_mouse_release(self, x, y, button, modifiers):
        print("release:", x, y, button)

        if (abs(self.label.x - x) <= self.label.content_width / 2) and (
            abs(self.label.y - y) <= self.label.content_height / 2
        ):
            print("relâcher le bouton dans le label")
    
    # ...

Lorsque vous cliquez sur un bouton de la souris puis que vous le relâchez, vous devriez voir affiché à l'écran la position du curseur ainsi que le numéro du bouton de la souris qui a servi à cliquer.

Cerise sur le gâteau, lorsque vous cliquez ou relâchez le bouton de la souris sur le label, cela devrait vous l'indiquer.

Boutons

Se fait comme pour les modificateurs de touches, avec un bit field. Les valeurs des bits concernés sont définis par les constantes suivantes, accessibles après l'import from pyglet.window import mouse :

• mouse.LEFT
• mouse.MIDDLE
• mouse.RIGHT

from pyglet.window import mouse

class HelloWorldWindow(pyglet.window.Window):
    # ...

    def on_mouse_press(self, x, y, button, modifiers):
        print("press:", x, y, button)

        if not (button & mouse.LEFT):
            return

        if (abs(self.label.x - x) <= self.label.content_width / 2) and (
            abs(self.label.y - y) <= self.label.content_height / 2
        ):
            print("clique dans le label")

    # ...

Mouvements

class HelloWorldWindow(pyglet.window.Window):
    # ...

    def on_mouse_motion(self, x, y, dx, dy):
        if (abs(self.label.x - x) <= self.label.content_width / 2) and (
            abs(self.label.y - y) <= self.label.content_height / 2
        ):
            if (abs(self.label.x - (x - dx)) > self.label.content_width / 2) or (
                abs(self.label.y - (y - dy)) > self.label.content_height / 2
            ):
                print("entre dans label")
        else:
            if (abs(self.label.x - (x - dx)) <= self.label.content_width / 2) and (
                abs(self.label.y - (y - dy)) <= self.label.content_height / 2
            ):
                print("sort du label")
    
    # ...

Dessiner des formes

La documentation permet de voir que l'on peut facilement dessiner des cercle ou des rectangles en pyglet.

De façon générale, la gestion des graphique en pyglet se fait directement en opengl, ce qui dépasse de loin le cadre de ce cours (même si c'est chouette de parler directement à la carte graphique). Nous allons donc uniquement nous restreindre au dessin d'un cercle et d'un rectangle ce qui sera suffisant pour notre projet.

Fichier : essais-pyglet/forme.py :

import pyglet
from pyglet import shapes
from pyglet.window import mouse


class Formes(pyglet.window.Window):
    def __init__(self):
        super().__init__(640, 480, "formes")

        self.rectangle = shapes.Rectangle(200, 200, 200, 200, color=(55, 55, 255))
        self.circle = shapes.Circle(0, 0, 50, color=(255, 0, 0))
        self.circle.opacity = 128

    def on_mouse_drag(self, x, y, dx, dy, buttons, modifiers):
        if buttons & mouse.LEFT and (
            (self.circle.x - x) ** 2 + (self.circle.y - y) ** 2
            <= self.circle.radius ** 2
        ):
            self.circle.x += dx
            self.circle.y += dy

    def on_draw(self):
        self.clear()

        self.rectangle.draw()
        self.circle.draw()


forme = Formes()

pyglet.app.run()
print("c'est fini !")

Les couleurs sont décrites au format RGB sous la forme de 3 entiers allant de 0 à 255 en base 10 :

• le premier décrit la composante rouge
• le second la composante verte
• le dernier la composante bleue

On a souvent coutume (dans le monde du web par exemple) de représenter ces 3 nombres par un nombre hexadécimal de 6 chiffres (2 par composante, chaque composante étant codée par un nombre allant de 00 à FF). Par exemple, le nombre #F58318 correspond à la couleur ayant F5 en rouge, 83 en vert et 18 en bleu, les 3 nombres étant en codage hexadécimal. Ce qui en python donne avec un tuple de 3 coordonnées : (0xF5, 0x83, 0x18), ou (245, 131, 24) en base 10 (un nombre écrit en hexadécimal en python commence par 0x).

Code final