Déplacer un Qlabel

Version imprimable

Déplacer un Qlabel

Bonjour

j'utilise le code ci-dessous pour ajouter une image sur mon interface par le biais d'un signal
Code:

1 2 3 4 5 6 7 8 9 10 11 12 self.pushButton.clicked.connect(self.AddSource) def AddSource(self): self.label10 = QtGui.QLabel(MainWindow) pic = self.label10 pic.setGeometry(200, 200, 50, 50) pic.setPixmap(QtGui.QPixmap(os.getcwd() + "/Generateur.png")) pic.show()
Seulement mon image est figée et j'aimerai qu'elle soit deplacable.

Merci

29/05/2016, 08h04
VinsS

Salut,

Les déplacements d'objets par l'utilisateur se font en réimplémentant mousePressEvent et mouseMoveEvent mais j'ai tout de même du mal à comprendre ce que tu veux faire, les widgets occupent une place choisie pour raisons d'ergonomie ou de contexte de boîte d'outils.

Ton QLabel est le seul widget de ton interface ?
29/05/2016, 17h06
FJunior

Oui je me suis rendu compte qu'il fallait que je ré-implémente mousePressEvent et mouseMoveEvent; seulement je sais pas comment m'y prendre.

je veux mettre en place un simulateur de réseau électrique.

Pour l'instant j'ai créé un bouton qui permet d'ajouter un générateur sur l'interface (le générateur est juste une image que j'ai placé dans un label et j'ai relié le tout a mon bouton grâce au signal clicked).

Je me disais alors que si j'arrive a trouver un code permettant de déplacer un label je pourrait alors déplacer mon générateur sur l'interface puisqu'ilest contenu dans un label. S'il est fixe ça n'a pas vraiment d’intérêt parce que le but est de pouvoir déplacer les objets du réseau électrique et de les interconnecter.

Tu vois maintenant un peu ce que je veux faire?

Merci
29/05/2016, 20h04
VinsS

Je suppose qu'après le générateur viendront d'autres composants ...

L'interface elle-même n'est pas faite pour cela, tu devrais plutôt regarder du côté du QGraphicsView.

Il y a ce machin qui n'est pas trop mal:
http://vincent-vande-vyvre.developpe...qgraphicsitem/

Bonjour,

Il y avait longtemps que je n'avais pas essayé un truc comme ça: voilà un petit code qui affiche une image jpg et la déplace avec la souris. Pour essayer, il suffit de changer le nom de l'image (ici image01.jpg).

Et la solution QGraphicsScene/QGraphicsView est effectivement assez simple. Et ce qui est surprenant, c'est qu'on peut même déplacer l'image en dehors du cadre d'affichage!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
"""
Affiche une image dans un QGraphicsScene/QGraphicsView et la déplace avec 
la souris
 
Avec aide de: 
http://vincent-vande-vyvre.developpez.com/tutoriels/pyqt/qgraphicsitem/
"""
 
import sys
 
from PyQt5 import QtCore, QtGui, QtWidgets
 
#############################################################################
class ItemImage(QtWidgets.QGraphicsPixmapItem):
 
    #========================================================================
    def __init__(self, pixMap, parent=None):
        super().__init__(pixMap, parent)
 
        # configure pour qu'on puisse bouger l'image
        self.setFlags(QtWidgets.QGraphicsItem.ItemIsMovable | 
                      QtWidgets.QGraphicsItem.ItemIsFocusable) 
 
    #========================================================================
    def mousePressEvent(self, event):
        """permet de sauvegarder la position de la souris au clic gauche
        """ 
        pos = event.scenePos() 
        if event.button() == 1: 
            self.old_X, self.old_Y = pos.x(), pos.y() 
            event.accept() 
        else: 
            event.ignore() 
 
    #========================================================================
    def mouseMoveEvent(self, event): 
        """déplace l'image avec la souris
        """
        pos = event.scenePos() 
        X, Y = pos.x(), pos.y() 
        delta_X, delta_Y = X - self.old_X, Y - self.old_Y 
        self.moveBy(delta_X, delta_Y) 
        self.old_X, self.old_Y = X, Y 
        event.accept()
 
#############################################################################
class GraphicsView(QtWidgets.QGraphicsView):
 
    #========================================================================
    def __init__(self, parent=None):
        super().__init__(parent)
 
        self.resize(400, 300)
 
        self.scene = QtWidgets.QGraphicsScene(self)
 
        fichierImage = "image01.jpg"
        self.pixMap = QtGui.QPixmap(fichierImage)
        self.pixMap = self.pixMap.scaledToWidth(150, QtCore.Qt.SmoothTransformation)
        self.itemImage = ItemImage(self.pixMap)
        self.scene.addItem(self.itemImage)
 
        self.setScene(self.scene)
 
#############################################################################
if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    graphicsView = GraphicsView()
    graphicsView.show()
    sys.exit(app.exec_())

C'est écrit en PyQt5, mais je suppose qu'en remplaçant simplement QtWidgets par QtGui, ça marchera aussi sous PyQt4.

Merci bien a vous tyrtamos et VinsS.

tyrtamos ta solution marche très bien mais le souci c'est que j'ai crée mes bouton et mes signaux pour afficher les images dans une classe Ui_MainWindow :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class Ui_MainWindow(object):
 
    def setupUi(self, MainWindow):
        MainWindow.setObjectName(_fromUtf8("MainWindow"))
        MainWindow.resize(800, 600)
        #MainWindow.setCursor(QtGui.QCursor(QtCore.Qt.CrossCursor))
        MainWindow.setMouseTracking(True)
        MainWindow.setFocusPolicy(QtCore.Qt.ClickFocus)
        MainWindow.setAcceptDrops(True)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
        self.graphicsView = QtGui.QGraphicsView(self.centralwidget)
        self.graphicsView.setGeometry(QtCore.QRect(170, 80, 400, 300))
        self.graphicsView.setObjectName(_fromUtf8("graphicsView"))
        self.pushButton = QtGui.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(20, 70, 101, 23))
        self.pushButton.setObjectName(_fromUtf8("pushButton"))
 
        self.pushButton.clicked.connect(self.AddBus)
 
    def AddBus(self):
 
        pic2 = QtGui.QLabel(MainWindow)
        pic2.setGeometry(200, 300, 50, 50)
        pic2.setPixmap(QtGui.QPixmap(os.getcwd() + "/Bus.png"))
        pic2.show()
 
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    MainWindow = QtGui.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

comment est ce que je peux intégrer ta solution dans mon cas?

Merci

31/05/2016, 08h55
tyrtamos

Bonjour,

Citation:

Envoyé par FJunior

comment est ce que je peux intégrer ta solution dans mon cas?

Je te prépare une réponse pour début d'après-midi.

Voilà ce que je te propose.

En voyant ton code, je m'aperçois que tu as utilisé QtDesigner pour dessiner ta fenêtre. Pas de problème sur le principe. Tu as ensuite converti le fichier.ui en fichier .py avec pyuic4, ce qui convient aussi. Mais tu utilises ensuite ce fichier .py pour continuer à programmer: ça, c'est une mauvaise idée! Pourquoi? Parce que dans l'évolution de ton projet, si tu modifies en quoi que ce soit ta fenêtre avec QtDesigner (ajouter un menu par exemple), tout ce que tu as ajouté sera supprimé!.

La bonne méthode est la suivante, et je te suggère de recommencer ton projet:

Tu crées un répertoire pour contenir ton projet de développement. Appelons-le ici "projet01"

Tu prends QtDesigner et tu crées une fenêtre QMainWindow.

Tu places dans cette fenêtre un "push button" (en fait un QPushButton) appelé pushButton, et un "graphic view" (en fait un QGraphicsView) appelé view. En principe, ce serait bien de les placer tous les 2 dans un "grid layout", mais si tu ne sais pas faire, laisse tomber. Tu enregistres sous le nom (par exemple) monprog_ui.ui dans le répertoire de ton projet, et c'est tout pour QtDesigner.

Tu convertis ce fichier .ui en fichier .py avec pyuic4 (tu sais faire), ce qui donne le fichier monprog_ui.py. On ne touche pas à ce fichier: on va se contenter de l'importer pour l'utiliser!

Tu crées un nouveau fichier pour le programme principal, que tu appelles "monprog.py". Tu vas y mettre le code suivant. Désolé pour le PyQt5: il te faudra faire la conversion.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 #!/usr/bin/python # -*- coding: utf-8 -*- # Python 3 """ Affiche une image dans un QGraphicsScene/QGraphicsView et la déplace avec la souris """ import sys from PyQt5 import QtCore, QtGui, QtWidgets # importation du fichier issu de QtDesigner après traitement par pyuic from test01_ui import Ui_MainWindow ############################################################################# class ItemImage(QtWidgets.QGraphicsPixmapItem): #======================================================================== def __init__(self, pixMap, parent=None): super().__init__(parent) self.pixMap = pixMap self.setPixmap(self.pixMap) # configure pour qu'on puisse bouger l'image self.setFlags(QtWidgets.QGraphicsItem.ItemIsMovable | QtWidgets.QGraphicsItem.ItemIsFocusable) self.old_X, self.old_Y = 0, 0 #======================================================================== def mousePressEvent(self, event): """permet de sauvegarder la position de la souris au clic gauche """ pos = event.scenePos() if event.button() == 1: self.old_X, self.old_Y = pos.x(), pos.y() event.accept() else: event.ignore() #======================================================================== def mouseMoveEvent(self, event): """déplace l'image avec la souris """ pos = event.scenePos() X, Y = pos.x(), pos.y() delta_X, delta_Y = X - self.old_X, Y - self.old_Y self.moveBy(delta_X, delta_Y) self.old_X, self.old_Y = X, Y event.accept() ############################################################################# class Fenetre(QtWidgets.QMainWindow): #======================================================================== def __init__(self, parent=None): super().__init__(parent) # prise en compte de ce qui vient de QtDesigner # après, les 2 widgets dessinés sont disponibles par # self.ui.pushButton, et self.ui.view self.ui = Ui_MainWindow() self.ui.setupUi(self) # assure le lien entre le bouton et la méthode à exécuter self.ui.pushButton.clicked.connect(self.addBus) # création de la scene, et lien entre le QGraphicsView et le QGraphicsScene self.scene = QtWidgets.QGraphicsScene() self.ui.view.setScene(self.scene) def addBus(self): """ajoute l'image dans le QGraphicsScene et l'affiche grâce au QGraphicsView """ fichierImage = "image01.jpg" pixMap = QtGui.QPixmap(fichierImage) pixMap = pixMap.scaledToWidth(150, QtCore.Qt.SmoothTransformation) self.itemImage = ItemImage(pixMap) self.scene.addItem(self.itemImage) ############################################################################# if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) fen = Fenetre() fen.show() sys.exit(app.exec_())
Dans le principe: le QGraphicsScene est un objet virtuel (non graphique). On y ajoute des objets QGraphicsItem (ici une image QPixMap avec QGraphicsPixmapItem), et on demande l'affichage avec un QGraphicsView qui, lui, est un objet graphique. C'est pour ça que c'est le QGraphicsView qu'on ajoute sous QtDesigner et non le QGraphicsScene.

La classe ItemImage qui hérite d'un QGraphicsPixmapItem a été construite uniquement pour permettre le déplacement de l'image à la souris. Ceci grâce à la surcharge des méthodes mousePressEvent (exécutée à chaque clic gauche de la souris) et mouseMoveEvent (exécutée à chaque déplacement de la souris).

Ok?

31/05/2016, 19h17
FJunior

Super ça marche :) et ta démarche est super pratique

Merci beaucoup pour ton coup de main
31/05/2016, 20h28
FJunior

Juste une dernière question en utilisant ta démarche pour ajouter un Bus; comment je peux supprimer le dernier Bus ajouté?
02/06/2016, 06h47
tyrtamos

Bonjour,

Citation:

Envoyé par FJunior

Juste une dernière question en utilisant ta démarche pour ajouter un Bus; comment je peux supprimer le dernier Bus ajouté?

Comme on peut ajouter une image dans un QGraphicsScene avec addItem, on peut la supprimer avec removeItem.

Tu gagnerais beaucoup de temps à consulter la doc: http://pyqt.sourceforge.net/Docs/PyQ...hicsscene.html. C'est vrai que ce n'est pas facile (elle est en anglais et en C++), mais on ne peut pas programmer sans ça.
02/06/2016, 11h12
FJunior

Oui j'avais bien remarqué que je pouvais utiliser removeItem.
Seulement en ajoutant notre bus avec ta méthode addBus on a créée une variable locale qui va contenir notre image.

Ma question est comment je peux gérer cette variable locale afin de pouvoir l'appeler dans la méthode deleteBus que je définirai.

J'ai essayé de définir une variable globale mais ça ne marche pas.
09/06/2016, 20h01
FJunior

Personne ne sait comment je peux supprimer un objet que j'ai ajouté? j'y arrive pas.

Merci
11/06/2016, 19h23
tyrtamos

Bonjour,

Je ne comprends pas la difficulté que tu rencontres.

Selon mon code, tu as créé une nouvelle image dans la scene avec:

Code:

self.scene.addItem(self.itemImage)

Il faut, bien sûr, conserver soigneusement la variable self.itemImage qui pointe sur l'image (par l'intermédiaire d'un QGraphicsPixmapItem).

Quand tu voudras retirer l'image de la scene, tu feras:

Code:

self.scene.removeItem(self.itemImage)

Ok?
14/06/2016, 15h55
FJunior

c'est bon merci :)