In my QMainWindow, I have a QFrame and a QWidget that wraps a QQuickView and displays the ui through a qml file.
I am trying to implement a drag and drop functionality where, on mouse-down and mouse-move in the QFrame, a thumbnail follows the cursor's position throughout until mouse-release. The mouse-release will happen within QQuickView.
The hover event within QQuickView has no issues and I can successfully get the hover event. The problem arises when on mouse-down within QFrame followed by a mouse-move into QQuickView, I am unable to get any mouse events in QQuickView.
On the left is the QFrame and the right is the QQuickView.
Hovering in QQuickView independently:
Mouse-down in QFrame and mouse-move into QQuickView:
Any mouse events can only be captured after mouse-release.
These are what I have written so far:
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QFrame, QLabel, QGridLayout, QVBoxLayout
from PyQt5.QtCore import Qt, QMimeData, QUrl
from PyQt5.QtGui import QDrag, QPixmap
from PyQt5.QtQuick import QQuickView
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent)
self.centralWidget = QWidget(self)
gridlayout = QGridLayout(self.centralWidget)
gridlayout.setContentsMargins(0,0,0,0)
gridlayout.setHorizontalSpacing(0)
gridlayout.setVerticalSpacing(0)
self.setCentralWidget(self.centralWidget)
self.leftPanel = QVBoxLayout()
self.rightPanel = QVBoxLayout()
gridlayout.addLayout(self.leftPanel, 0, 0, 1, 1)
gridlayout.addLayout(self.rightPanel, 0, 1, 1, 1)
gridlayout.setSpacing(0)
self.setStyleSheet("background:grey")
self.resize(300, 200)
self.show()
class Left(QFrame):
def __init__(self):
super().__init__()
self.resize(500, 500)
self.label = QLabel(self)
self.label.resize(50, 50)
def mouseMoveEvent(self, e):
mimeData = QMimeData()
drag = QDrag(self)
self.thumbnail = QPixmap('./test.png').scaled(50, 50, Qt.KeepAspectRatio)
drag.setPixmap(self.thumbnail)
drag.setMimeData(mimeData)
drag.exec_(Qt.MoveAction)
class Right(QQuickView):
def __init__(self, parent=None):
super().__init__(parent)
self.rootContext().setContextProperty('Right', self)
self.setSource(QUrl('./drag.qml'))
self.setMinimumHeight(200)
self.setMinimumWidth(150)
if __name__ == '__main__':
app = QApplication(sys.argv)
main_window = MainWindow()
main_window.leftPanel.addWidget(Left())
main_window.rightPanel.addWidget(QWidget.createWindowContainer(Right()))
app.exec_()
Based on what I have read from different sources and the Qt documentation, I suppose I have to forward the events from the QFrame to the QQuickView or there seems to be some form of global mouse events to be handled.
How can I go about achieving this?
turns out i was using the wrong qml element. DropArea should have been used in the qml.
import QtQuick 2.7
Rectangle {
id: root
anchors.fill: parent
color: 'transparent'
Column {
anchors.centerIn: parent
Rectangle {
width: 50
height: 50
color: 'red'
anchors.horizontalCenter: parent.horizontalCenter
DropArea {
anchors.fill: parent
onEntered: parent.color = 'blue'
onExited: parent.color = 'red'
onDropped: console.log('triggger this thing yo')
}
}
Text {
width: parent.parent.width
text: 'on hover over box, color changes from red to blue and vice versa when hover out'
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
}
}
}
hope this will be able to help someone out down the road. credits to raven-worx on Qt Forum for the solution.
Related
I want to implement a button (already has a custom class) that when clicked, fades out all the widgets on the existing screen before switching to another layout (implemented using QStackedLayout)
I've looked at different documentations and guides on PySide6 on how to animate fading in/out but nothing seems to be working. Not sure what is wrong with the code per se bit I've done the debugging and the animation class is acting on the widget
I assume that to make the Widget fade, I had to create QGraphicsOpacityEffect with the top-level widget being the parent, then adding the QPropertyAnimation for it to work.
main.py
# Required Libraries for PySide6/Qt
from PySide6.QtWidgets import QWidget, QApplication, QPushButton, QVBoxLayout, QHBoxLayout, QLabel, QSizePolicy, QMainWindow, QSystemTrayIcon, QStackedLayout, QGraphicsOpacityEffect
from PySide6.QtGui import QIcon, QPixmap, QFont, QLinearGradient, QPainter, QColor
from PySide6.QtCore import Qt, QPointF, QSize, QVariantAnimation, QAbstractAnimation, QEasingCurve, QPropertyAnimation, QTimer
# For changing the taskbar icon
import ctypes
import platform
# For relative imports
import sys
sys.path.append('../classes')
# Classes and Different Windows
from classes.getStartedButton import getStartedButton
class window(QMainWindow):
# Set up core components of window
def __init__(self,h,w):
# Gets primary parameters of the screen that the window will display in
self.height = h
self.width = w
super().__init__()
# Required to change taskbar icon
if platform.system() == "Windows":
ctypes.windll.shell32.SetCurrentProcessExplicitAppUserModelID(
"com.random.appID")
# Multiple screens will overlay each other
self.layout = QStackedLayout()
# Init splash screen - this is first
self.splashScreen()
# Function to init other screens
self.initScreens()
# Must create main widget to hold the stacked layout, or another window will appear
main_widget_holder = QWidget()
main_widget_holder.setLayout(self.layout)
self.setCentralWidget(main_widget_holder)
def initScreens(self):
apiScreen = QWidget()
another_button = QPushButton("Test")
another_layout = QVBoxLayout()
another_layout.addWidget(another_button)
apiScreen.setLayout(another_layout)
self.layout.addWidget(apiScreen)
# Window definition for splash screen
def splashScreen(self):
"""Window that displays the splash screen
"""
# Widget that holds all the widgets in the splash screen
self.placeholder = QWidget()
# Logo & Title Component
logo = QLabel("")
logo.setPixmap(QPixmap("image.png"))
# Align logo on right side of the split
logo.setAlignment(Qt.AlignRight | Qt.AlignVCenter)
logo.setStyleSheet(
"border-right:3px solid white;background-color: rgb(22,22,22);")
title = QLabel("Another\nApp")
title.setStyleSheet("padding-left:2px; font-size:36px")
# Header to hold title and logo
header_layout = QHBoxLayout()
header_layout.addWidget(logo)
header_layout.addWidget(title)
header = QWidget()
header.setStyleSheet("margin-bottom:20px")
# Assign header_layout to the header widget
header.setLayout(header_layout)
# Button Component
button = getStartedButton("Get Started ")
# Set max width of the button to cover both text and logo
button.setMaximumWidth(self.placeholder.width())
button.clicked.connect(self.transition_splash)
# Vertical Layout from child widget components
title_scrn = QVBoxLayout()
title_scrn.addWidget(header)
title_scrn.addWidget(button)
# Define alignment to be vertically and horizontal aligned (Prevents button from appearing on the bottom of the app as well)
title_scrn.setAlignment(Qt.AlignCenter)
# Enlarge the default window size of 640*480 to something bigger (add 50px on all sides)
self.placeholder.setLayout(title_scrn)
self.placeholder.setObjectName("self.placeholder")
self.placeholder.setMinimumSize(
self.placeholder.width()+100, self.placeholder.height()+100)
self.setCentralWidget(self.placeholder)
# Grey/Black Background
self.setStyleSheet(
"QMainWindow{background-color: rgb(22,22,22);}QLabel{color:white} #button{padding:25px; border-radius:15px;background: qlineargradient(x1:0, y1:0,x2:1,y2:1,stop: 0 #00dbde, stop:1 #D600ff); border:1px solid white}")
self.setMinimumSize(self.width/3*2,self.height/3*2)
self.layout.addWidget(self.placeholder)
def transition_splash(self):
opacityEffect = QGraphicsOpacityEffect(self.placeholder)
self.placeholder.setGraphicsEffect(opacityEffect)
animationEffect = QPropertyAnimation(opacityEffect, b"opacity")
animationEffect.setStartValue(1)
animationEffect.setEndValue(0)
animationEffect.setDuration(2500)
animationEffect.start()
timer = QTimer()
timer.singleShot(2500,self.change_layout)
def change_layout(self):
self.layout.setCurrentIndex(1)
# Initialise program
if __name__ == "__main__":
app = QApplication([])
page = window(app.primaryScreen().size().height(),app.primaryScreen().size().width())
page.show()
sys.exit(app.exec())
button.py
# Required Libraries for PySide6/Qt
from PySide6.QtWidgets import QWidget, QApplication, QPushButton, QVBoxLayout, QHBoxLayout, QLabel, QSizePolicy, QMainWindow, QSystemTrayIcon, QStackedLayout, QGraphicsOpacityEffect
from PySide6.QtGui import QIcon, QPixmap, QFont, QLinearGradient, QPainter, QColor
from PySide6.QtCore import Qt, QPointF, QSize, QVariantAnimation, QAbstractAnimation, QEasingCurve
# Custom PushButton for splash screen
class getStartedButton(QPushButton):
getStartedButtonColorStart = QColor(0, 219, 222)
getStartedButtonColorInt = QColor(101, 118, 255)
getStartedButtonColorEnd = QColor(214, 0, 255)
def __init__(self, text):
super().__init__()
self.setText(text)
# Setting ID so that it can be used in CSS
self.setObjectName("button")
self.setStyleSheet("font-size:24px")
# Button Animation
self.getStartedButtonAnimation = QVariantAnimation(
self, startValue=0.42, endValue=0.98, duration=300)
self.getStartedButtonAnimation.valueChanged.connect(
self.animate_button)
self.getStartedButtonAnimation.setEasingCurve(QEasingCurve.InOutCubic)
def enterEvent(self, event):
self.getStartedButtonAnimation.setDirection(QAbstractAnimation.Forward)
self.getStartedButtonAnimation.start()
# Suppression of event type error
try:
super().enterEvent(event)
except TypeError:
pass
def leaveEvent(self, event):
self.getStartedButtonAnimation.setDirection(
QAbstractAnimation.Backward)
self.getStartedButtonAnimation.start()
# Suppression of event type error
try:
super().enterEvent(event)
except TypeError:
pass
def animate_button(self, value):
grad = "background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 {startColor}, stop:{value} {intermediateColor}, stop: 1.0 {stopColor});font-size:24px".format(
startColor=self.getStartedButtonColorStart.name(), intermediateColor=self.getStartedButtonColorInt.name(), stopColor=self.getStartedButtonColorEnd.name(), value=value
)
self.setStyleSheet(grad)
For context, I've looked at other questions already on SO and other sites such as
How to change the opacity of a PyQt5 window
https://www.pythonguis.com/tutorials/pyside6-animated-widgets/
Not sure what is wrong with the code
The QPropertyAnimation object is destroyed before it gets a chance to start your animation. Your question has already been solved here.
To make it work, you must persist the object:
def transition_splash(self):
opacityEffect = QGraphicsOpacityEffect(self.placeholder)
self.placeholder.setGraphicsEffect(opacityEffect)
self.animationEffect = QPropertyAnimation(opacityEffect, b"opacity")
self.animationEffect.setStartValue(1)
self.animationEffect.setEndValue(0)
self.animationEffect.setDuration(2500)
self.animationEffect.start()
# Use the finished signal instead of the QTimer
self.animationEffect.finished.connect(self.change_layout)
After studying various examples in this forum, I tried to change the color of a button when pressed. The button is normally blue, and when it is pressed I want it to turn red. The following code does display a blue button with white text, but it does not change to red when pressed. Please advise. I'm fairly new to learning python/pyqt5.
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QPushButton
class Push_button(QPushButton):
def __init__(self, parent=None):
super(Push_button, self).__init__(parent)
self.setStyleSheet("background-color: rgb(0,0,255); color: rgb(255,255,255); \
pressed {background-color : rgb(255,0,0); color: rgb(255,255,255);} ")
class MyWindow(QWidget):
def __init__(self):
super().__init__()
self.myButton = Push_button(self)
self.myButton.setText("myButton")
self.myButton.clicked.connect(self.myButtonClicked)
def myButtonClicked(self):
print("myButtonClicked")
if __name__ == '__main__':
app = QApplication(sys.argv)
w = MyWindow()
w.show()
sys.exit(app.exec_())
You are not using selectors correctly.
Right now your stylesheet sets the blue background color universally, and the red color for classes named "pressed".
self.setStyleSheet('''
QPushButton {
background-color: rgb(0,0,255); color: rgb(255,255,255);
}
QPushButton:pressed {
background-color : rgb(255,0,0); color: rgb(255,255,255);
}
''')
Read more about selector types in the official documentation.
I'm trying to move the icon of a QCheckBox from the left of the label to immediately on the right.
I've checked these posts:
PyQt4 QPushButton text and icon alignment
Align icon on the right and center the text in a QPushButton
But neither seem to work for a QCheckBox. Actually, the second solution is the best I have so far, but I would like the icon to be just to the right of the label, not aligned all the way to the right of the widget.
Here are my experiments:
from PyQt5 import QtGui
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QWidget, QVBoxLayout, QCheckBox, QStyle, QApplication, QLabel, QHBoxLayout
class CheckBoxWIcon(QCheckBox):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
icon = self.icon()
icon_size = self.iconSize()
# remove icon
self.setIcon(QtGui.QIcon())
label_icon = QLabel()
label_icon.setAttribute(Qt.WA_TranslucentBackground)
label_icon.setAttribute(Qt.WA_TransparentForMouseEvents)
lay = QHBoxLayout(self)
lay.setContentsMargins(0, 0, 0, 0)
lay.addWidget(label_icon, alignment=Qt.AlignRight)
label_icon.setPixmap(icon.pixmap(icon_size))
app = QApplication([])
mw = QWidget()
layout = QVBoxLayout()
test1 = QCheckBox("Default")
test1.setIcon(app.style().standardIcon(QStyle.SP_MediaSkipForward))
test1.setStyleSheet("""QCheckBox { text-align: right; }""")
test2 = QCheckBox("Using style-sheet")
test2.setIcon(app.style().standardIcon(QStyle.SP_MediaSkipForward))
test2.setStyleSheet("""QCheckBox { text-align: left; }""")
test3 = QCheckBox("Using layout direction")
test3.setIcon(app.style().standardIcon(QStyle.SP_MediaSkipForward))
test3.setLayoutDirection(Qt.RightToLeft)
test4 = CheckBoxWIcon("Custom class", icon=QApplication.style().standardIcon(QStyle.SP_MediaSkipForward))
layout.addWidget(test1)
layout.addWidget(test2)
layout.addWidget(test3)
layout.addWidget(test4)
mw.setLayout(layout)
mw.show()
app.exec()
Desired output:
A possible solution is to use a QProxyStyle to modify the painting:
from PyQt5.QtCore import QRect, Qt
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import QApplication, QCheckBox, QProxyStyle, QStyle, QWidget
class IconProxyStyle(QProxyStyle):
def drawControl(self, element, option, painter, widget=None):
if element == QStyle.CE_CheckBoxLabel:
offset = 4
icon = QIcon(option.icon)
option.icon = QIcon()
super().drawControl(element, option, painter, widget)
alignment = self.visualAlignment(
option.direction, Qt.AlignLeft | Qt.AlignVCenter
)
if not self.proxy().styleHint(QStyle.SH_UnderlineShortcut, option, widget):
alignment |= Qt.TextHideMnemonic
r = painter.boundingRect(
option.rect, alignment | Qt.TextShowMnemonic, option.text
)
option.rect.setLeft(r.right() + offset)
option.text = ""
option.icon = icon
super().drawControl(element, option, painter, widget)
def main():
import sys
app = QApplication(sys.argv)
app.setStyle("fusion")
app.setStyle(IconProxyStyle(app.style()))
button = QCheckBox(
"Test\nwith\nQProxyStyle",
icon=QApplication.style().standardIcon(QStyle.SP_MediaSkipForward),
)
# button.setStyle(IconProxyStyle(button.style()))
button.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()
I'm trying to add a background using the answers from previous questions.
Sadly they don't work and return errors, either stylesheet, or the = sign, or the """.
I think it may be my location of the image? Is there something special required to store the image perhaps or something else I'm missing?
I've shown an edited down version of the code.
Thanks
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QMainWindow, QPushButton, QAction
from PyQt5.QtGui import QIcon, QPixmap
from PyQt5.QtCore import pyqtSlot
import os
os.chdir(r'C:\Users\Paul Hannell\python_files')
class App(QMainWindow): # Opening Window
def __init__(self):
super().__init__()
self.title = "Timelord Timer PyQt5"
self.left = 70
self.top = 100
self.width = 1170
self.height = 740
self.initUI()
def initUI(self):
self.setWindowTitle(self.title)
self.setGeometry(self.left, self.top, self.width, self.height)
self.setWindowIcon(QIcon(r'C:\Users\Paul Hannell\python_files\Timelord.ico'))
self.statusBar().showMessage('Message in Status Bar')
label=QLabel(self)
############################
# Background Image
self.centralwidget = QWidget()
self.setCentralWidget(self.centralwidget)
lay = QHBoxLayout(self.centralwidget)
stylesheet = '''
MainWindow {
background-image: url(r'C:\Users\Paul Hannell\python_files\Running_Around4.png');
background-repeat: no-repeat;
background-position: center;
}
'''
#####################################
mainMenu = self.menuBar()
fileMenu = mainMenu.addMenu('File')
settingsMenu = mainMenu.addMenu('Settings')
resultsMenu = mainMenu.addMenu('Results')
reportsMenu = mainMenu.addMenu('Reports')
infoMenu = mainMenu.addMenu('Info')
newButton=QAction('New', self)
newButton.setStatusTip('New Race')
#newButton.triggered.connect(self.create) #This open new event options
fileMenu.addAction(newButton)
openButton = QAction('Open' , self)
openButton.setStatusTip('Open File')
#openButton.triggered.connect(self.open) # This will open existing
fileMenu.addAction(openButton)
deleteButton=QAction('Delete', self)
deleteButton.setStatusTip('Delete Race')
#deleteButton.triggered.connect(self.create) #This delete existing event.
fileMenu.addAction(deleteButton)
exitButton=QAction('Exit', self)
exitButton.setStatusTip('Exit application')
exitButton.triggered.connect(self.close)
fileMenu.addAction(exitButton)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = App()
sys.exit(app.exec_())
Your code is badly indented (and too long) so it's hard to tell, but I see several issues:
it shoud be #MainWindow in the style sheet (you're missing a #)
you need to name the App with this name: self.setObjectName('MainWindow')
you need to use setStyleSheet at some point
the url needs fixing: no quotes nor 'r'; simply the file name (maybe the space in the file name needs escaping, you could try to play with it)
This, for instance, works:
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QMainWindow, QPushButton, QAction
class App(QMainWindow): # Opening Window
def __init__(self):
super().__init__()
self.setWindowTitle('hello bg')
self.setObjectName('MainWindow')
stylesheet = '''
#MainWindow {
background-image: url(/home/me/photos/DSC_0001.jpg);
background-repeat: no-repeat;
background-position: center;
}
'''
self.setStyleSheet(stylesheet)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = App()
sys.exit(app.exec_())
I've been looking through answers for a while but couldn't find a solution to my problem. I recently started playing around with PyQt and trying to code out couple of ideas, one of which was to have a couple of buttons with some text on them and when a button is clicked, its text would change color. Here is my code:
import sys
from PyQt5 import QtWidgets, QtGui
from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton, QLabel, QMainWindow,
QHBoxLayout, QGroupBox, QDialog, QVBoxLayout, QGridLayout, QMessageBox)
from PyQt5.QtCore import pyqtSlot, Qt
class App(QDialog):
def __init__(self):
super().__init__()
self.title = "Battleship"
self.left = 50
self.top = 50
self.width = 750
self.height = 500
self.initUI()
def initUI(self):
self.setGeometry(self.left, self.top, self.width, self.height)
self.setWindowTitle(self.title)
self.setFixedSize(self.width, self.height)
stylesheet = """QPushButton {background: #EEE; color: #11}
!QPushButton {background: #555; color: #EEE}"""
self.setStyleSheet(stylesheet)
self.grid()
layout = QVBoxLayout()
layout.addWidget(self.box)
self.setLayout(layout)
self.show()
def grid(self):
self.box = QGroupBox()
self.layout = QGridLayout()
self.box.setLayout(self.layout)
self.button1 = QPushButton('X', self)
self.button2 = QPushButton('X', self)
self.button3 = QPushButton('X', self)
self.button1.clicked.connect(self.pick)
self.button2.clicked.connect(self.pick)
self.button3.clicked.connect(self.pick)
self.layout.addWidget(self.button1)
self.layout.addWidget(self.button2)
self.layout.addWidget(self.button3)
def pick(self):
# turn 'X' from black to red ONLY on the clicked button
# while leaving the others untouched
pass
#---------------------------------------------------------------
if __name__ == '__main__':
app = QApplication(sys.argv)
gui = App()
sys.exit(app.exec_())
What does the 'pick' function have to look like in order to do this? To clarify: I don't want to make three individual functions, one for each button (as it would be very impractical for a larger number of buttons), but a single function which would work with any button.
the sender() method returns us the object that emits the signal, in your case the button will be pressed:
def pick(self):
# turn 'X' from black to red ONLY on the clicked button
# while leaving the others untouched
btn = self.sender()
btn.setStyleSheet("color: red")