Semaine 3 - Interfaces graphiques - 420-SN1

FAIRE DES INTERFACES
AVEC GUIZERO

De vraies fenetres, avec des boutons - le plus simplement possible

C'est quoi GuiZero ?

A quoi ca sert

GuiZero sert a creer des interfaces graphiques (GUI) : de vraies fenetres avec des boutons, des champs, des curseurs et des menus.

Elle a ete concue pour les debutants (par l'equipe du Raspberry Pi) : c'est une couche simple posee par-dessus tkinter, deja inclus dans Python.

On sort enfin de la console : le programme devient une application qu'on clique.

from guizero import App
CE QU'ON PEUT METTRE DANS UNE FENETRE

De vraies fenetres, en GuiZero (1/2)

Fenetre GuiZero : Un bouton qui repond
Un bouton qui repond PushButton voir la doc ↗
Fenetre GuiZero : Saisir du texte
Saisir du texte TextBox voir la doc ↗
Fenetre GuiZero : Un curseur relie
Un curseur relie Slider voir la doc ↗
Captures : documentation officielle guizero (Laura Sach et Martin O'Hanlon).
CE QU'ON PEUT METTRE DANS UNE FENETRE

De vraies fenetres, en GuiZero (2/2)

Fenetre GuiZero : Une grille Waffle
Une grille Waffle Waffle voir la doc ↗
Fenetre GuiZero : Compter en direct
Compter en direct Text + TextBox voir la doc ↗
Captures : documentation officielle guizero (Laura Sach et Martin O'Hanlon).

Une fenetre remplie de widgets

● ● ●  Ma fenetre
Text - afficher du texte
TextBox - saisir du texte
PushButton - un bouton
Slider - un curseur

L'objet App est la fenetre. On y depose des widgets (les briques de l'interface), et chacun peut declencher une fonction quand on l'utilise.

Une fenetre avec un bouton

from guizero import App, Text, PushButton def direBonjour(): message.value = "Bonjour !" app = App(title="Ma premiere fenetre") message = Text(app, text="Clique sur le bouton") PushButton(app, command=direBonjour, text="Dis bonjour") app.display() # on ouvre la fenetre

On cree l'App, on y ajoute des widgets, on relie le bouton a une fonction avec command, et app.display() lance l'interface.

Mais... ca ne marche pas dans Colab

GuiZero repose sur tkinter, qui a besoin d'un ecran pour ouvrir sa fenetre. Colab et StackBlitz n'en ont pas.

Et Pygbag ne fonctionne que pour Pygame, pas pour les fenetres tkinter. Il faut donc une autre solution.

La bonne reponse pour GuiZero en ligne, c'est Replit.

LA SOLUTION EN LIGNE

Replit : un vrai ordinateur dans l'onglet

Replit execute ton code sur un vrai ordinateur Linux dans le nuage, et il deporte l'ecran dans un panneau de ton navigateur.

Comme il y a un ecran (virtuel), la fenetre GuiZero s'ouvre vraiment - ce que Colab ne peut pas faire.

Tu codes et tu vois ton appli au meme endroit, sans rien installer sur ta machine.

Ouvrir une fenetre GuiZero en ligne

  1. Sur replit.com, creer un nouveau projet Python (tout est dans le navigateur).
  2. Ajouter la librairie guizero (onglet des paquets, ou au premier import).
  3. Ecrire ton code, puis cliquer sur Run : la fenetre apparait dans le panneau graphique, comme sur un vrai bureau.

Le panneau graphique de Replit affiche l'ecran deporte : c'est la difference cle avec Colab, qui ne sait montrer que du texte.

Credits des captures

Les fenetres montrees proviennent de la documentation officielle de guizero, ecrite par Laura Sach et Martin O'Hanlon. Merci a eux.

A TOI DE CLIQUER !

lawsie.github.io/guizero - la doc, simple et complete
replit.com - coder ta fenetre en ligne, sans rien installer
Une App, des widgets, et app.display()
⤺ Refermer le diaporama