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

ObjectifsIntroduction

– 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 = 4type(a) <class 'int'>

a = 4.1type(a) <class 'float'>

Classes

class Voiture:#commentairenbRoues=4

def __init__(self,marque,couleur):self.couleur=couleurself.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 banquesclass 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 <- 25 account1 emit balanceChanged(25)

account2 <- 25 account2 emit balanceChanged(25)

account1 <-25 …

transfert d’argent entre deux banques

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

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 êtres implémentés

• peuvent être décorés de @pyqtSlotréduit la quantité de mémoire / est plus rapideparfois utile pour les “auto-connect"

parfois nécessaire

42

Encore un peu plus loin• les auto-connect

43

class MyClass(QObject): def __init__(self, parent =None):

self.buttonA = QPushButton(‘button 1’, self) self.buttonA.setObjectName('buttonA) self.spinBox = QSpinBox(self) self.spinBox.setObjectName('mySpinBox') …. QMetaObject.connectSlotsByName(self)

def on_buttonA_clicked(self): blabla

@pyqtSlot(int) def on_mySpinBox_valueChanged(self, arg):

blabla

QuestionsComment connecter un signal à un slot ? • EmetteurObj.<nameSignal>.connect ( Recepteur.<nameSlot> )

Quel code pour déclarer / implémenter un slot ? • rien de particulier (mais on peut rajouter @pyqtSlot() )

Est ce qu’un slot peut retourner une valeur ? • Oui

Quel code pour déclarer / implémenter un signal ? • mySignal = pyqtSignal()

Ce qui se cache derrière

• en C++ c’est plus compliqué

45

Les principaux widgets

4

Modules• QtCore • QtWidgets • QtBluetooth • QtOpenGL • QtSript/QtScriptTools • QtSql • QtSvg • QtWebKit • QtXml/QtXmlPatterns • QtMultimedia • QtSensors • …

QtCore• QObject • Type de base : QChar, QDate, QString, QStringList,

Qtime,… • File systems : QDir,QFile,… • Container : QList, Qmap, Qpair, QSet, QVector,… • Graphique : QLine, Qpoint, QRect, QSize … • Thread : QThread, Qmutex, Qsemaphore, … • Autres : QTimer, QTimeLine, …

QString

Codage Unicode 16 bits - Suite de QChars

• 1 caractère = 1 QChar de 16 bits (cas usuel)

• 1 caractère = 2 QChars de 16 bits (pour valeurs > 65535)

- Conversions d’une QString :• toAscii( ) : ASCII 8 bits

• toLatin1( ) : Latin-1 (ISO 8859-1) 8 bits

• toUtf8( ) : UTF-8 Unicode multibyte (1 caractère = 1 à 4 octets)

• toLocal8Bit( ) : codage local 8 bits

- qPrintable ( const QString & str )• équivalent à : str.toLocal8Bit( ).constData( )

QFile ouverture/fermeture de fichiersexemples :

• file = QFile( fileName )

• if file.open( QFile.ReadOnly | QFile.Text) :

• if file.open( QFile.WriteOnly ):

• file.write( “fdsafsdf”)

• file.flush()

• file.read()

• file.close()

QTextStream lecture, écriture dans fichiersexemples :

• stream = QTextStream( file )

• txtAll = stream.readAll() ou txtLine = stream.readLine()

• stream.write

QTextStream

QTextStream - lecture ou écriture de texte depuis un QFile :

• stream = QTextStream( file );

- méthodes utiles :• QString readLine( taillemax = 0 ); // pas de limite de taille si = 0

• QString readAll( ); // pratique mais à n’utiliser que pour des petits fichiers

QtGUI

QStyle

• main(args) app = QApplication( args)

Ex: windows, motif, platinum,…

./python monAppli –style plastique

QMainWindow

- Méthode 1: créer une instance de QMainWindow

win = QMainWindow()

win.resize(200,300)

- Méthode 2: créer une sous-classe de QMainWindow

class Win(QMainWindow):

def __init__(self): self.resize(200,300)

QMainWindow : Menus

• bar = self.menuBar()

• fileMenu = bar.addMenu( "File" )

• newAct = QAction(QIcon("path/images/new.png"), “New…”, self ) • newAct.setShortcut( “Ctrl+N” ) • newACT.setToolTip(self.tr(“New File”)) • newAct.setStatusTip(self.tr(“New file”))

• fileMenu.addAction(newAct)

• newAct.triggered.connect( self.new )

si sous-classe (methode 2)sinon win.menuBar() (methode 1)

QMainWindow• QMenuBar, QMenu, QAction • QToolBar

– fileToolBar = QToolBar("File") – fileToolBar.addAction(newAct) – mainWindow.addToolBar(fileToolBar) – newAct.setEnabled( false )

• QToolTip, QWhatsThis

• Composant central textEdit = TextEdit( self ); self.setCentralWidget( textEdit );

grise la commande dans les menus et la toolbar

Buttons

57

Input Widgets

58

Containers

59

QMidArea QTabWidget

QScrollArea

QWidget; QFrame; QDockWidget; QStackedWidget

QGroupBox

QToolBox

60

Views

QCompleter

61

standard widgets use data that is part of the widget

View classes operate on external data (the model)

62

def main(args): app = QApplication(args) tableView = QTableView() myModel = MyModel() tableView.setModel( myModel ) tableView.show() app.exec()

class MyModel(QAbstractTableModel): def __init__(self):

QAbstractTableModel.__init__(self) self.myData = <dataBase>

def rowCount( self, parent ): #Type (parent) == QModelIndex return 2

def columnCount( self, parent ): return 2

def data( self, index, role=Qt.DisplayRole): if role == Qt.DisplayRole:

return self.myData(index.row() + 1, index.column()+1)

Display Widgets

63

Boite de dialogue

QMessageBoxQFileDialog

QProgressDialog

QColorDialog QFontDialog

Boîte de dialogue modale

Solution simplifiée fileName = QFileDialog.getOpenFileName( self, //parent

"Open Image”, // titre "/home/jana", // répertoire initial

"*.txt") // filtre fileName = QFileDialog.getSaveFileName(…)

Layout

Problèmes - internationalisation- redimensionnement- complexité du code

Layout

QVBoxLayout

QHBoxLayout

QGridLayout

QFormLayout

v_layout = QVBoxLayout( ) v_layout.addWidget( QPushButton( "OK" ) ) v_layout.addWidget( QPushButton( "Cancel" ) ) v_layout.addStretch( ) v_layout.addWidget( QPushButton( "Help" ) )

country_list = QListBox( ); countryList.insertItem( "Canada" ); ...etc...

h_layout = QHBoxLayout( ) h_layout.addWidget( country_list ) h_layout.addLayout( v_layout )

top_layout = QVBoxLayout( ) top_layout.addWidget( QLabel( "Select a country" ) ) top_layout.addLayout( h_layout ); container = QWidget() container.setLayout( top_layout ) win.setCentralWidget(container) win.show( )

Notes sur layouts : - peuvent être emboîtés

- pas liés à une hiérarchie de conteneurs comme Java

- cf. le « stretch »

Layout : exemple

Arbre d’héritage vs. arbre d’instanciation

Arbre d’héritage

Principaux widgets : Arbre d’héritage

Hiérarchie de classes (type) - chaque sous-classe hérite des variables et méthodes de sa superclasse - du plus général au plus particulier - héritage simple

QWidget QAbstractButton

QCheckBox

QPushButton

QRadioButton

QToolButton

Arbre d’instanciation

• Hiérarchie d’instance (=objets) – Arbre de filiation des objets

Arbre d’instanciation

• Hiérarchie d’instance (=objets) – Arbre de filiation des objets

Arbre d’instanciation• Les enfants se déclarent auprès de son parent (≠ java)

– label = Qlabel("Hello", parent); – Execptions

• QFIle, QApplication… • Si le parent d’un Widget est nul, le Widget est une fenêtre (Window). • Que font les parents ?

– Ils ont une liste des enfants – Ils détruisent automatiquement les enfants quand ils sont détruits – Enable/disable les enfants quand ils enable/disable eux memes – Pareil pour Show/Hide

Arbre d’instanciation• Hiérarchie d’instance (=objets)

– Arbre de filiation des objets

• Chaque objet contient ses enfants – Clipping : enfants inclus dans parents – Superposition : enfants au

dessus des parents

• Un objet n’a qu’un seul parent

Modules• QtCore • QtWidgets • QtBluetooth • QtOpenGL • QtSript/QtScriptTools • QtSql • QtSvg • QtWebKit • QtXml/QtXmlPatterns • QtMultimedia • QtSensors

QtNetwork

• QFtp, QHttp, QTcpSocket, QUdpSocket

OpenGL : Box3D

#include <QGLWidget>

class Box3D : public QGLWidget { Q_OBJECT GLuint object; GLfloat rotX, rotY, rotZ;

public: Box3D( QWidget *parent = 0); virtual ~Box3D();

protected: virtual void initializeGL(); virtual void paintGL(); virtual void resizeGL( int w, int h ); virtual GLuint makeObject();

public slots: void setRotationX(int deg) { rotX = deg; updateGL( ); } void setRotationY(int deg) { rotY = deg; updateGL( ); } void setRotationZ(int deg) { rotZ = deg; updateGL( ); } };

modules• QtCore • QtGui • QtNetwork • QtOpenGL • QtSript/QtScriptTools • QtSql • QtSvg • QtWebKit • QtXml/QtXmlPatterns • Phonon • Qt3Support

Questions• Quelle est la différence entre l’arbre d’héritage et l’arbre

d’instanciation? • héritage de classe (A hérite de B) • héritage d’instances (A contient B)

• Quelle classe utiliser pour créer une fenêtre / Comment ajouter le widget central?

• QMainWindow • win.setCentralWidget( myWidget )

• Quels sont les différents layouts? • QVBoxLayout; QHBoxLayout; QGridLayout; QFormLayout

• Quelle classe pour un bouton? • QPushButton

Outils Qt

6

Les outils Qt

• Qt Creator • Qt Assistant • Qt Examples • QtDemo • Qt resources • Qt Designer

The Qt Resource System• Mechanism for storing binary files in the application’s

executable • Useful if your application needs a certain set of files

(icons, translation files) and you don’t want to run the risk of losing the files

• How to use: • pyrcc5 - o resources.py resources.qrc • import resources

83

resources.qrc

Qt Designer

84

Qt Designer• sauvegarder le projet en dialog.ui

(fichier xml) • transformer en fichier python:

pyuic5 dialog.ui -o dialog.py • Insérer la boite de dialogue dans votre code

85

import dialog

class Dialog(QDialog, dialog.UI_Dialog):

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