View as presentation
→ Slide 1

Interface graphique (GUI) sous python.

A la découverte des interfaces graphiques (GUI) pour mon application python.

→ Slide 2

La version console

print('Hello World')

→ Slide 3

La version graphique

import tkinter as tk
 
root=tk.Tk()
 
a = tk.Label(root, text="Hello, world!")
 
a.pack()
 
root.mainloop()
→ Slide 4

Ajout d'une librairie graphique

Pour créer une interface graphique, nous avons dû ajouter une librairie. 

import tkinter as tk

Le choix de la librairie va définir les possibilités et le rendu de mon application.

→ Slide 5

Les librairies graphique pour python

→ Slide 6

tkinter

Tkinter (de l'anglais Tool kit interface) est la bibliothèque graphique libre d'origine pour le langage Python, permettant la création d'interfaces graphiques. Elle vient d'une adaptation de la bibliothèque graphique Tk écrite pour Tcl. wikipedia

→ Slide 7

wxPython

wxPython est une implémentation libre en Python de l'interface de programmation wxWidgets. Cette bibliothèque Python est utilisée pour la création d'interfaces graphiques, et est l'alternative de Tkinter la plus utilisée. wikipedia

→ Slide 8

GTK

GTK (The GIMP Toolkit, anciennement GTK+2) est un ensemble de bibliothèques logicielles, c'est-à-dire un ensemble de fonctions permettant de réaliser des interfaces graphiques. Cette bibliothèque a été développée originellement pour les besoins du logiciel de traitement d'images GIMP. wikipedia

→ Slide 9

QT

une API orientée objet et développée en C++, conjointement par The Qt Company et Qt Project. Qt offre des composants d'interface graphique wikipedia

La licence est semi libre
→ Slide 10

Kivy

Kivy est une bibliothèque libre et open source pour Python, utile pour créer des applications tactiles pourvues d'une interface utilisateur naturelle. Cette bibliothèque fonctionne sur Android, iOS, GNU/Linux, OS X et Windows. Elle est distribuée gratuitement et sous licence MIT. wikipedia

→ Slide 11

Flet

Flet est un framework qui permet de créer des applications Web, de bureau et mobiles multi-utilisateurs interactives dans votre langue préférée sans expérience préalable en développement frontend.

Vous créez une interface utilisateur pour votre programme avec des contrôles Flet basés sur Flutter de Google.

→ Slide 12

Cas particulier de PySimpleGUI

PySimpleGUI vise à simplifier le développement d'applications GUI pour Python. Il ne réinvente pas la roue mais fournit une enveloppe autour d'autres frameworks existants tels que Tkinter, Qt (PySide 2), WxPython

→ Slide 13

Utilisation de Tkinter

↓ Slide 14

Création d'un environnement virtuel python

Un environnement virtuel python permet d'isoler les librairies pour mon projet. 

apt install virtualenv
virtualenv myvenv
source ./myvenv/bin/activate
↓ Slide 15

Installation de la librairie tkinter

Vérifier que l'environnement virtuel est actif en regardant le prompt de ma console. 

(myvenv) tbruyere@pcbruyerelinux:~/workspace/PySimpleGUI$

Installer la librairie 

pip install tkinter
→ Slide 16

Création d'un projet python

↓ Slide 17

Importer le module

import tkinter as tk
↓ Slide 18

Créer un objet de base via la méthode Tk()

root=tk.Tk()
↓ Slide 19

Créer un "label"

a = tk.Label(root, text="Hello, world!")
↓ Slide 20

Générer l'interface

a.pack()
↓ Slide 21

Démarrer l'interface

root.mainloop()
↓ Slide 22

Exemple avec wxPython

et si on demandait à chatgpt : créée moi un hello world en python avec interface graphique wxpython

↓ Slide 23

Résultat

import wx
 
class MyFrame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, "Hello World")
        panel = wx.Panel(self, wx.ID_ANY)
        text = wx.StaticText(panel, wx.ID_ANY, "Hello World!")
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(text, 0, wx.ALL | wx.CENTER, 5)
        panel.SetSizer(sizer)
 
if __name__ == "__main__":
    app = wx.App(False)
    frame = MyFrame()
    frame.Show(True)
    app.MainLoop()
↓ Slide 24

exemple en gtk

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
 
class MyWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="Hello World")
        label = Gtk.Label("Hello World!")
        self.add(label)
 
if __name__ == "__main__":
    win = MyWindow()
    win.connect("destroy", Gtk.main_quit)
    win.show_all()
    Gtk.main()
↓ Slide 25

exemple en QT

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
 
class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('Hello World')
        self.setGeometry(100, 100, 250, 100)
        label = QLabel('Hello World!', self)
        label.move(90, 40)
        self.show()
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyWindow()
    sys.exit(app.exec_())
↓ Slide 26

exemple en Kivy

import kivy
kivy.require('1.11.1')
from kivy.app import App
from kivy.uix.label import Label
 
class HelloWorldApp(App):
    def build(self):
        return Label(text='Hello World')
 
if __name__ == '__main__':
    HelloWorldApp().run()
→ Slide 27

La gestion de la grille (grid)

Cette stratégie permet de positionner chacun de vos widgets dans une ou plusieurs cellules d'une grille. La grille est organisée en lignes et en colonnes : vous pouvez, bien entendu, contrôler le nombre de lignes et de colonnes. Il est aussi à noter qu'il est possible qu'un widget occupe plusieurs cellules de la grille. Voici une capture d'écran montrant une grille un peu sophistiquée.

→ Slide 28

GTK et les conteneurs

GTK+ organise les widgets de manière hiérarchique, en utilisant des conteneurs. Ils sont invisibles pour l'utilisateur final et sont insérés dans une fenêtre ou placés les uns dans les autres pour mettre en page les composants.

https://python-gtk-3-tutorial.readthedocs.io/en/latest/layout.html

↓ Slide 29

Exemple GTK

import gi
 
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
 
 
class MyWindow(Gtk.Window):
    def __init__(self):
        super().__init__(title="Hello World")
 
        self.box = Gtk.Box(spacing=6)
        self.add(self.box)
 
        self.button1 = Gtk.Button(label="Hello")
        self.button1.connect("clicked", self.on_button1_clicked)
        self.box.pack_start(self.button1, True, True, 0)
 
        self.button2 = Gtk.Button(label="Goodbye")
        self.button2.connect("clicked", self.on_button2_clicked)
        self.box.pack_start(self.button2, True, True, 0)
 
    def on_button1_clicked(self, widget):
        print("Hello")
 
    def on_button2_clicked(self, widget):
        print("Goodbye")
 
 
win = MyWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
→ Slide 30

GTK Glade

Glade est un outil interactif de conception d'interface graphique GTK. Il prend en charge toute la partie de gestion/génération de l'interface pour permettre au développeur de se concentrer sur le code « utile ». Glade enregistre les interfaces graphiques en générant des fichiers XML. wikipedia

↓ Slide 31

Exemple Glade

#!/usr/bin/env python3
# coding: utf-8
 
from gi.repository import Gtk
 
def when_button_is_clicked(label):
    '''
    Quand le bouton est cliqué
    '''
    label.set_text('Hello world!')
 
 
builder = Gtk.Builder()
builder.add_from_file('hello.glade')  # Rentrez évidemment votre fichier, pas le miens!
 
window = builder.get_object('main_window')
# Peut se faire dans Glade mais je préfère le faire ici, à vous de voir
window.connect('delete-event', Gtk.main_quit)
 
# Le handler
handler = {'on_clicked': when_button_is_clicked}
builder.connect_signals(handler)
 
window.show_all()
Gtk.main()
→ Slide 32

Lien