Introduction à Qt - HCI · PDF file Qt Widgets Qt quick/QML v.s. QML is based on JSON...

Click here to load reader

  • date post

    18-Jul-2020
  • Category

    Documents

  • view

    16
  • download

    5

Embed Size (px)

Transcript of Introduction à Qt - HCI · PDF file Qt Widgets Qt quick/QML v.s. QML is based on JSON...

  • 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