Introduction à Qt

Gilles Bailly gilles.bailly@upmc.fr

Crédits

• Eric Lecolinet

2

• hci.isir.upmc.fr/ihm-androide/

3

http://pyqt.sourceforge.net/Docs/ PyQt5/index.html

4

Introduction

1

What ? Librairie graphique écrite en C++ par la société TrollTech.

– Mécanisme pour interagir :
 avec l’utilisateur (bouton, liste déroulante, ..) 
 avec le système (OpenGl, Xml, SQL, sockets, plugin…)

Multi-Plateforme – Windows | Mac | Linux – Android | iOS | WinRT | BlackBerry* | SailFish – Embedded Linux | Embedded Android | Windows Embedded

Gratuit (GPL), - mais dispose aussi d’une licence commerciale

Approche : – Ecrire une fois, compiler n’importe où

7

Historique • 1988 : Haavard & Eirik ont l’idée de créer une librairie

graphique orientée objet • 1993 : Le noyau est terminé et ont pour objectif « The world’s

best C++ GUI framework » – Nom Qt, signaux et slots

• 2001 : Qt 3.0, 500 000 lignes de codes, Linux, Windows, Mac. • 2008 : Qt 4.5 (racheté par Nokia; 250 employés)

– la plateforme Symbian • 2009 : Qt 4.6 : animation; GraphicScene; machine à état;

gestures • 2011 : Qt est racheté par Digia

– objectif : Android, iOS et Windows 8 • 2012 : Qt 5.0 : Qt Quick (javascript) • 2016 : Qt compagny

Why? • Performance (C++) • Relativement Simple • Gratuit (GPL) et code source • Nombreux outils

– Générateur d’interface : Qt Designer – Internationalisation : Qt Linguist – Documentation : Qt Assistant – Examples : Qt Examples – Programmation : Qt Creator (eclipse)

• Multi-Plateformes – Look and feel simulé

Designer

Qt creator

10

Aujourd'hui • Utilisateurs de Qt :

– Adobe Photoshop, Autodesk Maya, Google Earth, Skype, Spotify, VLC media player

• Bindings (java, python, c#)

12

13

14

Aujourd'hui

15

Qt quick /QMLQt Widgets Qt Graphics view

Aujourd'hui

16

Qt Widgets Qt Graphics view

v.s.

▪ Widgets cannot be scaled or rotated, ▪ Widgets can only appear once on the desktop, 


but several views can observe one graphicsitem. ▪ Widgets express their geometries in pixels, graphics items use logical units.

(…int vs. double) ▪ Widgets support tons of features that graphics items don’t understand. ▪ Widgets understand layouts, ▪ 4000000 widgets don’t work that well, but 4000000 items works perfectly.

17

Aujourd'hui

18

Qt quick/QMLQt Widgets

v.s.

QML is based on JSON (Language); QtQuick (library) Widgets are more mature, flexible and provide rich features Qt Quick focuses on animation and transition Qt Quick is mainly for mobile devices (today) Qt Quick will (maybe) remplace Widgets tomorrow Qt Quick is maybe easier to use for designers

Language déclaratif

19

20

Aujourd'hui

21

Qt quick/QMLQGraphicsView

v.s.

Qt Quick Graphics engine only works with OpenGL Drawing complex shapes easier with QGraphicView Qt Quick: QML & Javascript QML is more compatible with Widget

Language déclaratif

Qt (QML) vs. HTML 5

22

Objectifs Introduction

– Signaux et slots – Les principales classes Qt

Graphisme avancé – Création de vos propres widgets – Programmation événementielle – Notion avancée de graphisme avec Qt

Quelques autres notions avancées – Machine à états – Gestes – Animation – Qt Designer

Au delà de Qt …

Syntaxe

Syntaxe C Syntaxe Python

int factorielle(int n) { if (n < 2) { return 1; } else { return n * factorielle(n - 1); } }

def factorielle(n): if n < 2: return 1 else: return n * factorielle(n - 1)

Attention aux tabulations !!!

Typage dynamique fort

int a = 4

a = 4 type(a)

a = 4.1 type(a)

Classes

class Voiture: #commentaire nbRoues=4

def __init__(self,marque,couleur): self.couleur=couleur self.marque=marque

def main(): audirouge = Voiture('audi','rouge') print(audirouge.couleur)

if __name__ == "__main__": main(sys.argv) ➡ Appel automatique Main

➡ Déclaration conventionnelle d’une méthode main()

➡ Déclaration d’un constructeur ➡ Déclaration d’une variable d’instance

➡ Déclaration d’une classe

➡ Déclaration d’une variable d’instance

Mes premiers pas avec Qt

"Hello world"2

28

29

from PyQt5.QtCore import * from PyQt5.QtWidgets import * import sys

def main(args) : app = QApplication(args) button = QPushButton("Hello World !", None) button.resize(100,30)

button.show() app.exec_()

if __name__ == "__main__" : main(sys.argv)

30

from PyQt5.QtCore import * from PyQt5.QtWidgets import * import sys

def main(args) : app = QApplication(args) widget = QWidget(None)

widget.resize(150,90) button = QPushButton("Hello World !", widget)

button.resize(100,30) widget.show()

app.exec_()

if __name__ == "__main__" : main(sys.argv)

31

from PyQt5.QtCore import * from PyQt5.QtWidgets import * import sys

def main(args) : app = QApplication(args) widget = QWidget(None)

widget.resize(150,90) button = QPushButton("Hello World !", widget)

button.resize(100,30) widget.show() button.clicked.connect(app.quit)

app.exec_()

if __name__ == "__main__" : main(sys.argv)

Signaux et Slots

3

Problématique

• Comment – à partir d’un « clic sur un bouton » – Je peux éxécuter la partie correspondant à la logique de mon

application ? (ex: fermer l’application)

• Solutions – MFC (introduit un langage au dessus de C++) – Java (utilise des listeners) – Qt (utilise principalement des signaux et slots)

Connecter Signaux et Slots

Signal émis

42 42

Slot implémenté

connexion

slider.valueChanged.connect(lcd.display)

class QSlider(QObject): …. def mousePressEvent(self): self.valueChanged.emit(value) …

class QLCDNumber(QObject):

def display(num): m_value = num; …

slider = QSlider(None) lcd = QLCDNumber(none)

Une classe avec des signaux et des slots

class MyClass(QObject): mySignal = pyqtSignal(int)

def mySlot( self, num ): blabla

• Sous class de QObject • Les signaux sont pas implémentés • Les slots doivent êtres implémentés

Une classe avec des signaux et des slots

class MyClass(QObject): mySignal = pyqtSignal(int)

def __init__(self, parent =None): super(MyClass, self).__init__(parent)

def mySlot( num ): blabla

• Sous class de QObject • Les signaux sont pas implémentés • Les slots doivent êtres implémentés

Signaux et Slots

• Modularité, flexibilité – Connecter plusieurs signaux à un slot – Connecter un signal à plusieurs slots

• Philosophie – L’émetteur n’a pas besoin de connaître le(s) récepteur(s) – L’émetteur ne sait pas si le signal a été reçu – Le récepteur ne connaît pas non plus l’émetteur – Programmation par composant (indépendant, réutilisable)

• Sécurité, typage fort (en C++) – Les types des paramètres doivent être les mêmes – Un slot peut avoir moins de paramètres qu’un signal

38

transfert d’argent entre deux banques

BANK 1 BANK 2

BANK 1 BANK 2

transfert d’argent entre deux banques class BankAccount (QObject): balance = 0 name = “"

balanceChanged = pyqtSignal(int)

def setBalance(self, newValue): self.balance = newValue self.balanceChanged.emit( self.balance )

def main(args): account1 = BankAccount() account1.setName( “account1” )

account2 = BankAccount() account2.setName( “account2” )

account1.balancedChanged.connect( account2.setBalance ) account2.balancedChanged.connect( account1.setBalance )

if __name__ == “__main__”: main(sys.argv)

Signal

Slot

Connexion

Problème?

account1

Un peu plus loin…

class MyClass(QObject): mySignal = pyqtSignal(int)

def __init__(self, parent =None): super(MyClass, self).__init__(parent)

@pyqtSlot(int) def mySlot( num ):

blabla

• Sous class de QObject • Les signaux sont pas implémentés • Les slots doivent êt