Good morning.
Question 1
In my code I am trying to make it so when you click on a button, it flashes red for a few milliseconds.
As you can see, I have a fade and unfade function. How can the fade function know it has to change the StyleSheet of the button that's calling the function?
from PyQt5.QtCore import (Qt, QTimer)
from PyQt5.QtWidgets import (QWidget, QLCDNumber, QSlider, QVBoxLayout, QApplication, QPushButton, QGridLayout, QHBoxLayout, QLabel)
from PyQt5.QtGui import (QFont, QPainter, QColor)
# Font declaration
mainFont = QFont("arial", 18, QFont.Bold)
# Color declaration
"""
backgroundColor = "#2e3436"
buttonColor = "#729fcf"
textColor = "#2e3436"
greenColor = "#27bc10"
redColor = "#d81711"
"""
backgroundColor = "#2e3436"
buttonColor = "#ffffff"
textColor = "#000000"
greenColor = "#27bc10"
redColor = "#d81711"
# main buttons size
mainWidth = 160
mainHeight = 80
# Variable declaration
CurrentSpeed = 1
class MainInterface(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
b1 = QPushButton('Start')
b1.setFixedWidth(mainWidth)
b1.setFixedHeight(mainHeight)
b1.setStyleSheet("background-color: %s; color: %s" % (greenColor, textColor))
b1.setFont(mainFont)
b1.clicked.connect(self.fade)
b2 = QPushButton('Stop')
b2.setFixedWidth(mainWidth)
b2.setFixedHeight(mainHeight)
b2.setStyleSheet("background-color: %s; color: %s" % (redColor, textColor))
b2.setFont(mainFont)
b3 = QPushButton('Speed -')
b3.setFixedWidth(mainWidth)
b3.setFixedHeight(mainHeight)
b3.setStyleSheet("background-color: %s; color: %s" % (buttonColor, textColor))
b3.setFont(mainFont)
l1 = QLabel(str(CurrentSpeed))
l1.setStyleSheet("color: white; margin: 15px; border: 2px solid white")
l1.setFont(mainFont)
l1.setAlignment(Qt.AlignCenter)
b4 = QPushButton('Speed +')
b4.setFixedWidth(mainWidth)
b4.setFixedHeight(mainHeight)
b4.setStyleSheet("background-color: %s; color: %s" % (buttonColor, textColor))
b4.setFont(mainFont)
grid = QGridLayout()
grid.setColumnMinimumWidth(50, 400)
grid.setRowMinimumHeight(10, 250)
grid.addWidget(b1, 0, 0)
grid.addWidget(b2, 0, 2)
grid.addWidget(b3, 1, 0)
grid.addWidget(l1, 1, 1)
grid.addWidget(b4, 1, 2)
self.setStyleSheet("background-color: %s" % backgroundColor)
self.setLayout(grid)
self.setGeometry(300, 200, 850, 450)
self.setWindowTitle('Signal & slot')
self.show()
def fade(self, button):
button.setWindowOpacity(0.5)
button.setStyleSheet("background-color: red")
QTimer.singleShot(300, self.unfade)
def unfade(self):
button.setWindowOpacity(1)
button.setStyleSheet("background-color: #2e3436")
if __name__ == '__main__':
import sys
app = QApplication(sys.argv)
ex = MainInterface()
sys.exit(app.exec_())
Question 2
More advanced, how would I make an animation on the button similar to when you click on the lockscreen of your phone?
Thanks in advance.
First, slots can call self.sender() to find out object that emitted signal.
Next, you have to be mindful of the signal payload, which in this case is an optional "checked True/False", so button is not a valid parameter for fade() slot.
It is also advisable to decorate slots with pyqtSlot, there is no disadvantage and even if its advantages are not relevant now, they will be later (and save you some bugs related to signal handling when decorator not used, as posted on mailing list). As pointed out by ehkumoro, since the checked is optional and you don't use it, it is sufficient to decorate with pyqtSlot().
Finally, unfade() needs to know which button to unfade; a lambda as done by eyllanesc is fine but I'll show how to do it with data member, which has the advantage that it plays role of a "state flag" on MainInterface. I.e. when not None, it indicates that MainInterface widget is "currently fading a button"; this often comes in handy when your widget responds to an event that occurs between end of fade() and start of unfade(), like another click (widget needs to test if it is already fading another button).
def __init__(self):
...
self.__fading_button = None
#pyqtSlot()
def fade(self):
self.__fading_button = self.sender() # enter the "fading button" state
self.__fading_button.setWindowOpacity(0.5)
self.__fading_button.setStyleSheet("background-color: red")
QTimer.singleShot(300, self.unfade)
def unfade(self):
self.__fading_button.setWindowOpacity(1)
self.__fading_button.setStyleSheet("background-color: #2e3436")
self.__fading_button = None # exit the "fading button" state
Related
This question already has an answer here:
QLineEdit emits returnPressed when getting focus triggered by other returnPressed singal
(1 answer)
Closed 1 year ago.
I'm developing a GUI, and I have the issue that sometimes, hitting the 'enter' key makes several widgets send their signal. The weirdest part is that sometimes it happens, and sometimes not. The main thing is, I can't guarantee the focus on one and only one QGroupBox at all times.
Here is a somewhat minimal example. If you run it and enter text, then hit 'enter', two functions will be executed (image below).
# -*- coding: utf-8 -*-
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import (QApplication, QComboBox, QStyleFactory, QDialog, QTextEdit,
QGroupBox, QLabel, QLineEdit, QGridLayout, QPushButton, QVBoxLayout)
import sys
class GrblGUI(QDialog):
class PositionDescriber:
""" Label and widget associated for each axis. Save some writing later """
def __init__(self, labelText, initVal=0.0):
self.posLabel = QLabel(labelText)
self.value = initVal
self.posWidget = QLineEdit(str(self.value))
def __init__(self, parent=None):
""" Initializes the GUI and all widgets within.
Creates the general layout
"""
super(GrblGUI, self).__init__(parent)
self.originalPalette = QApplication.palette()
self.axes = [ self.PositionDescriber("X pos : "),
self.PositionDescriber("Y pos : "),
self.PositionDescriber("Z pos : "),
self.PositionDescriber("A pos : "),
self.PositionDescriber("B pos : ")]
self.size = range(len(self.axes))
self.ports = ["None"]
# Creating widget within panels
self.createConnectToCOM()
self.createPositionControlPanel()
self.createPushButtonsPanel()
self.createMessageHistory()
mainLayout = QGridLayout()
mainLayout.addWidget(self.connectToCOM, 0, 0, 1, 2)
mainLayout.addWidget(self.positionControlPanel, 1, 0)
mainLayout.addWidget(self.pushButtonsPanel, 0, 2, 2, 1)
mainLayout.addWidget(self.messageHistory, 1, 1)
mainLayout.setRowStretch(1, 1)
self.setLayout(mainLayout)
self.setWindowTitle("minimal")
QApplication.setStyle(QStyleFactory.create('Fusion'))
QApplication.setPalette(QApplication.style().standardPalette())
"""
Creation of panels, widgets, and associated layouts
"""
def createConnectToCOM(self):
self.connectToCOM = QGroupBox()
self.availableDevicesScroll = QComboBox()
for item in self.ports:
self.availableDevicesScroll.addItem(item)
connectLabel = QLabel("Connect to device :")
self.updatePushButton = QPushButton("Update")
self.updatePushButton.setDefault(True)
self.connectPushButton = QPushButton("Connect")
self.connectPushButton.setDefault(True)
self.updatePushButton.clicked.connect(self.updateAvailableCOM)
self.connectPushButton.clicked.connect(self.connectToPort)
layout = QGridLayout()
layout.addWidget(connectLabel, 0, 0)
layout.addWidget(self.availableDevicesScroll, 1, 0)
layout.addWidget(self.updatePushButton, 0, 1)
layout.addWidget(self.connectPushButton, 1, 1)
layout.setColumnStretch(0, 1)
self.connectToCOM.setLayout(layout)
def createPositionControlPanel(self):
self.positionControlPanel = QGroupBox("Position Control Panel : ")
for i in self.size:
self.axes[i].posWidget.returnPressed.connect(self.registerInput)
layout = QGridLayout()
for i in self.size:
layout.addWidget(self.axes[i].posLabel, i, 0)
for i in self.size:
layout.addWidget(self.axes[i].posWidget, i, 1)
sendPushButton = QPushButton("Send to pos")
sendPushButton.setDefault(True)
sendPushButton.clicked.connect(self.sendToPos)
layout.addWidget(sendPushButton, len(self.axes), 2, 1, 2)
layout.setRowStretch(6, 1)
self.positionControlPanel.setLayout(layout)
def createPushButtonsPanel(self):
self.pushButtonsPanel = QGroupBox("Things you may want to do : ")
self.homingPushButton = QPushButton("Homing")
self.homingPushButton.setDefault(True)
self.homingPushButton.clicked.connect(self.homing)
recPosPushButton = QPushButton("Record current pos")
recPosPushButton.setDefault(True)
recPosPushButton.clicked.connect(self.recordPosition)
layout = QVBoxLayout()
layout.setSpacing(20)
layout.addWidget(self.homingPushButton)
layout.addWidget(recPosPushButton)
layout.addStretch(1)
self.pushButtonsPanel.setLayout(layout)
def createMessageHistory(self):
self.messageHistory = QGroupBox("Message history : ")
self.textEdit = QTextEdit()
self.textEdit.setReadOnly(True)
self.textEdit.setPlainText("")
layout = QVBoxLayout()
layout.addWidget(self.textEdit)
self.messageHistory.setLayout(layout)
"""
Methods to call
"""
def connectToPort(self):
self.textEdit.append("connectToPort")
def updateAvailableCOM(self):
self.textEdit.append("updateAvailableCOM")
def registerInput(self):
self.textEdit.append("registerInput")
def homing(self):
self.textEdit.append("homing")
def recordPosition(self):
self.textEdit.append("recordPosition")
def sendToPos(self):
self.textEdit.append("sendToPos")
if __name__ == '__main__':
app = QApplication(sys.argv)
gallery = GrblGUI()
gallery.show()
app.exec()
# sys.exit(appctxt.app.exec())
And the result after entering text:
I've tried different thing such as setFocusPolicy(Qt.NoFocus) or setFocus(), but it didn't work. Any ideas?
The problem comes from both the default and autoDefault properties of QPushButton in combination with the usage of QDialog, and it has the following results
if autoDefault is True, a button becomes a possible default button;
the autoDefault property of a QPushButton is False, unless it is/becomes a child (even indirect) of a QDialog;
Events received by a widget that does not accept them are automatically propagated to its parent, up in the parenthood hierarchy, until one widget does accept it or the top level widget is reached.
QLineEdit by default handles the return key press, but does not accept it, which means that it knows that the key has been pressed (since it can emit the returnPressed signal) but will not handle, thus propagating it to the parent.
Considering the above, the unwanted behavior is that the key event is also received by the QDialog, so there are various possibilities, depending on the requirements.
Use QWidget instead of QDialog
This is the easiest choice, but you might still need a QDialog for its features: the exec event loop, the accepted/rejected signals and result interface, or just to simplify the modality
Set the default property to False for all buttons
Obviously, you can set the autoDefault property to False for each button, but an easier solution is to use a cycle that loops over all QPushButton instances, which should be implemented in an override that we know for sure that would be called, like exec or, maybe better, showEvent:
class Dialog(QtWidgets.QDialog)
# ...
def showEvent(self, event):
super().showEvent(event)
if not event.spontaneous():
for btn in self.findChildren(QtWidgets.QPushButton):
if btn.default():
btn.setDefault(False)
if btn.autoDefault():
btn.setAutoDefault(False)
This can become a problem, though, as sometimes you might want to use that feature anyway: for instance, if you have a tab/stacked widget, and you want to avoid the return feature in a page that has a line edit, but not in another one that only has one button (like a wizard).
Ignore the Return key in the dialog
Overriding the keyPressEvent, and call the base implementation only if the key is not return or enter (this has the same problem above, as it completely disable the feature):
class Dialog(QtWidgets.QDialog)
# ...
def keyPressEvent(self, event):
if event.key() not in (QtCore.Qt.Key_Return, QtCore.Qt.Key_Enter):
super().keyPressEvent(event)
Accept the key event in the line edit
This is probably a more appropriate approach, as it solves the problem at the source: consider the event as accepted in the QLineEdit if the return/enter key is pressed. This can only be done in a subclass:
class LineEdit(QtWidgets.QLineEdit):
def keyPressEvent(self, event):
super().keyPressEvent(event)
if event.key() in (QtCore.Qt.Key_Return, QtCore.Qt.Key_Enter):
event.accept()
As #musicamante found out, this is closely related to QLineEdit emits returnPressed when getting focus triggered by other returnPressed singal
The simpliest answer was to inherit from QWidget instead of QDialog, as there won't be default buttons anymore.
May be the use of eventFilter for whole form is the solution in your case:
from QtCore import QEvent
Define eventFilter(self, obj, event) in class GrblGUI and place under Qt.Key_Enter branch the callback you want for enter key press.
Register event filter app.installEventFilter(gallery)
Modified example below (be careful, I switched to PySide2 in example, you can easily switch back to PyQt5 again):
# -*- coding: utf-8 -*-
from PySide2.QtCore import Qt, QEvent # Step 1 - import QEvent
from PySide2.QtWidgets import QApplication, QComboBox, QStyleFactory, QDialog, QTextEdit
from PySide2.QtWidgets import QGroupBox, QLabel, QLineEdit, QGridLayout, QPushButton, QVBoxLayout
import sys
class GrblGUI(QDialog):
class PositionDescriber:
""" Label and widget associated for each axis. Save some writing later """
def __init__(self, labelText, initVal=0.0):
self.posLabel = QLabel(labelText)
self.value = initVal
self.posWidget = QLineEdit(str(self.value))
def __init__(self, parent=None):
""" Initializes the GUI and all widgets within.
Creates the general layout
"""
super(GrblGUI, self).__init__(parent)
self.originalPalette = QApplication.palette()
self.axes = [ self.PositionDescriber("X pos : "),
self.PositionDescriber("Y pos : "),
self.PositionDescriber("Z pos : "),
self.PositionDescriber("A pos : "),
self.PositionDescriber("B pos : ")]
self.size = range(len(self.axes))
self.ports = ["None"]
# Creating widget within panels
self.createConnectToCOM()
self.createPositionControlPanel()
self.createPushButtonsPanel()
self.createMessageHistory()
mainLayout = QGridLayout()
mainLayout.addWidget(self.connectToCOM, 0, 0, 1, 2)
mainLayout.addWidget(self.positionControlPanel, 1, 0)
mainLayout.addWidget(self.pushButtonsPanel, 0, 2, 2, 1)
mainLayout.addWidget(self.messageHistory, 1, 1)
mainLayout.setRowStretch(1, 1)
self.setLayout(mainLayout)
self.setWindowTitle("minimal")
QApplication.setStyle(QStyleFactory.create('Fusion'))
QApplication.setPalette(QApplication.style().standardPalette())
"""
Creation of panels, widgets, and associated layouts
"""
def eventFilter(self, obj, event): # Step 2 - declare QEvent filter
if event.type() == QEvent.KeyPress:
if (event.key() == Qt.Key_Enter or event.key() == Qt.Key_Return):
self.textEdit.append("***DEBUG: Enter pressed")
# Step 2 Place callback you want to process key press
event.accept() # block event propagation to other widgets
return True
return False
def createConnectToCOM(self):
self.connectToCOM = QGroupBox()
self.availableDevicesScroll = QComboBox()
for item in self.ports:
self.availableDevicesScroll.addItem(item)
connectLabel = QLabel("Connect to device :")
self.updatePushButton = QPushButton("Update")
self.updatePushButton.setDefault(True)
self.connectPushButton = QPushButton("Connect")
self.connectPushButton.setDefault(True)
self.updatePushButton.clicked.connect(self.updateAvailableCOM)
self.connectPushButton.clicked.connect(self.connectToPort)
layout = QGridLayout()
layout.addWidget(connectLabel, 0, 0)
layout.addWidget(self.availableDevicesScroll, 1, 0)
layout.addWidget(self.updatePushButton, 0, 1)
layout.addWidget(self.connectPushButton, 1, 1)
layout.setColumnStretch(0, 1)
self.connectToCOM.setLayout(layout)
def createPositionControlPanel(self):
self.positionControlPanel = QGroupBox("Position Control Panel : ")
for i in self.size:
self.axes[i].posWidget.returnPressed.connect(self.registerInput)
layout = QGridLayout()
for i in self.size:
layout.addWidget(self.axes[i].posLabel, i, 0)
for i in self.size:
layout.addWidget(self.axes[i].posWidget, i, 1)
sendPushButton = QPushButton("Send to pos")
sendPushButton.setDefault(True)
sendPushButton.clicked.connect(self.sendToPos)
layout.addWidget(sendPushButton, len(self.axes), 2, 1, 2)
layout.setRowStretch(6, 1)
self.positionControlPanel.setLayout(layout)
def createPushButtonsPanel(self):
self.pushButtonsPanel = QGroupBox("Things you may want to do : ")
self.homingPushButton = QPushButton("Homing")
#self.homingPushButton.setFocusPolicy(Qt.StrongFocus); #!!!
self.homingPushButton.setDefault(True)
self.homingPushButton.clicked.connect(self.homing)
recPosPushButton = QPushButton("Record current pos")
recPosPushButton.setDefault(True)
recPosPushButton.clicked.connect(self.recordPosition)
layout = QVBoxLayout()
layout.setSpacing(20)
layout.addWidget(self.homingPushButton)
layout.addWidget(recPosPushButton)
layout.addStretch(1)
self.pushButtonsPanel.setLayout(layout)
def createMessageHistory(self):
self.messageHistory = QGroupBox("Message history : ")
self.textEdit = QTextEdit()
self.textEdit.setReadOnly(True)
self.textEdit.setPlainText("")
layout = QVBoxLayout()
layout.addWidget(self.textEdit)
self.messageHistory.setLayout(layout)
"""
Methods to call
"""
def connectToPort(self):
self.textEdit.append("connectToPort")
def updateAvailableCOM(self):
self.textEdit.append("updateAvailableCOM")
def registerInput(self):
self.textEdit.append("registerInput")
def homing(self):
self.textEdit.append("homing")
def recordPosition(self):
self.textEdit.append("recordPosition")
def sendToPos(self):
self.textEdit.append("sendToPos")
if __name__ == '__main__':
app = QApplication(sys.argv)
gallery = GrblGUI()
gallery.show()
app.installEventFilter(gallery) # Step 4 - register event filter in app
app.exec_()
Starting the program, the QIcon is aligned on the left (it's standard i guess) with the text right to it.
Instead I want the icon to be centered on top with the text below it.
I tried using setStyleSheet with show_all.setStyleSheet("QIcon { vertical-align: top }") and show_all.setStyleSheet("QPushButton { text-align: bottom }").
How can I achieve this?
QPushButton doesn't allow to choose the layout of its icon and label. Also, remember that while Qt features style sheets to style widgets, not all CSS known properties and selectors are available. Furthermore, style sheets only work on widgets, so using the QIcon selector isn't supported, since QIcon is not a QWidget subclass.
The most simple solution is to use a QToolButton and set the toolButtonStyle correctly:
self.someButton = QtWidgets.QToolButton()
# ...
self.someButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
The alternative is to subclass the button, provide a customized paint method and reimplement both sizeHint() and paintEvent(); the first is to ensure that the button is able to resize itself whenever required, while the second is to paint the button control (without text!) and then paint both the icon and the text.
Here's a possible implementation:
from PyQt5 import QtCore, QtGui, QtWidgets
class CustomButton(QtWidgets.QPushButton):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self._icon = self.icon()
if not self._icon.isNull():
super().setIcon(QtGui.QIcon())
def sizeHint(self):
hint = super().sizeHint()
if not self.text() or self._icon.isNull():
return hint
style = self.style()
opt = QtWidgets.QStyleOptionButton()
self.initStyleOption(opt)
margin = style.pixelMetric(style.PM_ButtonMargin, opt, self)
spacing = style.pixelMetric(style.PM_LayoutVerticalSpacing, opt, self)
# get the possible rect required for the current label
labelRect = self.fontMetrics().boundingRect(
0, 0, 5000, 5000, QtCore.Qt.TextShowMnemonic, self.text())
iconHeight = self.iconSize().height()
height = iconHeight + spacing + labelRect.height() + margin * 2
if height > hint.height():
hint.setHeight(height)
return hint
def setIcon(self, icon):
# setting an icon might change the horizontal hint, so we need to use a
# "local" reference for the actual icon and go on by letting Qt to *think*
# that it doesn't have an icon;
if icon == self._icon:
return
self._icon = icon
self.updateGeometry()
def paintEvent(self, event):
if self._icon.isNull() or not self.text():
super().paintEvent(event)
return
opt = QtWidgets.QStyleOptionButton()
self.initStyleOption(opt)
opt.text = ''
qp = QtWidgets.QStylePainter(self)
# draw the button without any text or icon
qp.drawControl(QtWidgets.QStyle.CE_PushButton, opt)
rect = self.rect()
style = self.style()
margin = style.pixelMetric(style.PM_ButtonMargin, opt, self)
iconSize = self.iconSize()
iconRect = QtCore.QRect((rect.width() - iconSize.width()) / 2, margin,
iconSize.width(), iconSize.height())
if self.underMouse():
state = QtGui.QIcon.Active
elif self.isEnabled():
state = QtGui.QIcon.Normal
else:
state = QtGui.QIcon.Disabled
qp.drawPixmap(iconRect, self._icon.pixmap(iconSize, state))
spacing = style.pixelMetric(style.PM_LayoutVerticalSpacing, opt, self)
labelRect = QtCore.QRect(rect)
labelRect.setTop(iconRect.bottom() + spacing)
qp.drawText(labelRect,
QtCore.Qt.TextShowMnemonic|QtCore.Qt.AlignHCenter|QtCore.Qt.AlignTop,
self.text())
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
w = CustomButton('Alles anzeigen', icon=QtGui.QIcon.fromTheme('document-new'))
w.setIconSize(QtCore.QSize(32, 32))
w.show()
sys.exit(app.exec_())
Alternatively, try it:
import sys
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import Qt, QSize
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout,
QToolBar, QAction)
class Widget(QWidget):
def __init__(self, parent=None):
super(Widget, self).__init__(parent)
add_action = QAction(QIcon("img/add.png"), "Add", self)
add_action.triggered.connect(self.addValue)
sub_action = QAction(QIcon("img/min.png"), "Sub", self)
sub_action.triggered.connect(self.subValue)
toolbar = QToolBar()
toolbar.setContentsMargins(0, 0, 0, 0)
toolbar.setToolButtonStyle(Qt.ToolButtonTextBesideIcon | Qt.AlignLeading)
toolbar.setIconSize(QSize(50, 50))
toolbar.addAction(add_action)
toolbar.addAction(sub_action)
rootGrid = QGridLayout(self)
rootGrid.addWidget(toolbar)
def addValue(self):
print("def addValue:")
def subValue(self):
print("def subValue:")
if __name__ == '__main__':
app = QApplication(sys.argv)
main = Widget()
main.show()
sys.exit(app.exec_())
How do I add vertical separators to my statusbar?
(Red arrows) in this screenshot.
And if I success this how can I show selected Line and Column?
(Blue arrows) in same screenshot.
That's for windows.
void QStatusBar::addPermanentWidget(QWidget *widget, int stretch = 0)
Adds the given widget permanently to this status bar, reparenting the widget if it isn't already a child of this QStatusBar object. The stretch parameter is used to compute a suitable size for the given widget as the status bar grows and shrinks. The default stretch factor is 0, i.e giving the widget a minimum of space.
import sys
from PyQt5.QtWidgets import (QApplication, QMainWindow, QStatusBar, QLabel,
QPushButton, QFrame)
class VLine(QFrame):
# a simple VLine, like the one you get from designer
def __init__(self):
super(VLine, self).__init__()
self.setFrameShape(self.VLine|self.Sunken)
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.statusBar().showMessage("bla-bla bla")
self.lbl1 = QLabel("Label: ")
self.lbl1.setStyleSheet('border: 0; color: blue;')
self.lbl2 = QLabel("Data : ")
self.lbl2.setStyleSheet('border: 0; color: red;')
ed = QPushButton('StatusBar text')
self.statusBar().reformat()
self.statusBar().setStyleSheet('border: 0; background-color: #FFF8DC;')
self.statusBar().setStyleSheet("QStatusBar::item {border: none;}")
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(self.lbl1)
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(self.lbl2)
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(ed)
self.statusBar().addPermanentWidget(VLine()) # <---
self.lbl1.setText("Label: Hello")
self.lbl2.setText("Data : 15-09-2019")
ed.clicked.connect(lambda: self.statusBar().showMessage("Hello "))
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())
I want to add a popup menu to QPushButton, but only popup it when you click near the arrow, if you click other area on the button, it calls the slot connected in main UI.
I know there is QToolButton, and you can set its ToolButtonPopupMode to MenuButtonPopup, but for some reason it looks different than then rest of the button on my UI, I assume I could somehow modify the style of it to make it look exactly like QPushButton, anyway in the end I decided to subclass QPushButton instead.
The problems in the following code are:
1. How do I get the rect of the arrow, maybe show a dashed rect around the arrow, I thought the "popup menu hotspot" area should be a little bit bigger than the arrow. right now I hardcoded 20px, but I think it should be retrieved from QStyle?
[solved] How to make the button look "pressed" when clicked not near the arrow, right now its look does not change, I guess it's because I did not call base class MousePressEvent, because I don't want the menu to popup when clicked elsewhere.
How to move the position of the arrow, in my applicaton it is too close to the right edge, how can I move it to the left a little bit?
code:
from PyQt4 import QtGui, QtCore
import sys
class MyButton(QtGui.QPushButton):
def __init__(self, parent=None):
super(MyButton, self).__init__(parent)
def mousePressEvent(self, event):
if event.type() == QtCore.QEvent.MouseButtonPress:
# figure out press location
pos = event.pos
topRight = self.rect().topRight()
bottomRight = self.rect().bottomRight()
frameWidth = self.style().pixelMetric(QtGui.QStyle.PM_DefaultFrameWidth)
print topRight, bottomRight, frameWidth
# get the rect from QStyle instead of hardcode numbers here
arrowTopLeft = QtCore.QPoint(topRight.x()-20, topRight.y())
arrowRect = QtCore.QRect(arrowTopLeft, bottomRight)
if arrowRect.contains(event.pos()):
print 'clicked near arrow'
# event.accept()
QtGui.QPushButton.mousePressEvent(self, event)
else:
print 'clicked outside'
# call the slot connected, without popup the menu
# the following code now does not make
# the button pressed
self.clicked.emit(True)
event.accept()
class Main(QtGui.QDialog):
def __init__(self, parent=None):
super(Main, self).__init__(parent)
layout = QtGui.QVBoxLayout()
pushbutton = MyButton('Popup Button')
layout.addWidget(pushbutton)
menu = QtGui.QMenu()
menu.addAction('This is Action 1', self.Action1)
menu.addAction('This is Action 2', self.Action2)
pushbutton.setMenu(menu)
self.setLayout(layout)
pushbutton.clicked.connect(self.button_press)
def button_press(self):
print 'You pressed button'
def Action1(self):
print 'You selected Action 1'
def Action2(self):
print 'You selected Action 2'
if __name__ == '__main__':
app = QtGui.QApplication(sys.argv)
main = Main()
main.show()
app.exec_()
edit:
it seems this will stop the menu from poping up if clicked on the left side of the button
else:
print 'clicked outside'
self.blockSignals(True)
QtGui.QPushButton.mousePressEvent(self, event)
self.blockSignals(False)
Have you thought on using a QComboBox?
Or maybe two buttons next to each other one for appearance only, and the other that calls your context?
Would work to use mask on your button through pixmap.
You also could make some use of setStyleSheet("") can make some use of these attributes.
Here is a little example:
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWidgets import QHBoxLayout
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QScrollArea
from PyQt5.QtWidgets import QVBoxLayout
from PyQt5.QtWidgets import QWidget
class WPopUpButton(QWidget):
"""WPopUpButton is a personalized QPushButton."""
w_container = None
v_layout_container = None
v_scroll_area = None
v_layout_preview = None
def __init__(self):
"""Init UI."""
super(WPopUpButton, self).__init__()
self.init_ui()
def init_ui(self):
"""Init all ui object requirements."""
self.button_that_do_nothing = QPushButton("Popup Button")
self.button_that_do_nothing.setStyleSheet("""
border: 0px;
background: gray;
""")
self.button_that_do_something = QPushButton("->")
#you can also set icon, to make it look better :D
self.button_that_do_something.setStyleSheet("""
border: 0px;
background: gray;
""")
self.layout = QHBoxLayout()
self.layout.setSpacing(0)
self.layout.setContentsMargins(0,0,0,0)
self.layout.addWidget(self.button_that_do_nothing)
self.layout.addWidget(self.button_that_do_something)
self.setLayout(self.layout)
self.create_connections()
def create_connections(self):
self.button_that_do_something.pressed.connect(self.btn_smtg_pressed)
self.button_that_do_something.released.connect(self.btn_smtg_released)
def btn_smtg_pressed(self):
self.button_that_do_something.setStyleSheet("""
border: 0px;
background: blue;
""")
def btn_smtg_released(self):
self.button_that_do_something.setStyleSheet("""
border: 0px;
background: gray;
""")
# HERE YOU DO WHAT YOU NEED
# FOR EXAMPLE CALL YOUR CONTEXT WHATEVER :D
def run():
app = QApplication(sys.argv)
GUI = WPopUpButton()
GUI.show()
sys.exit(app.exec_())
run()
By the way I'm using Pyqt5, you just gotta change your imports ")
Here's another option that may partially answer your question.
Instead of using the default menu, you can combine CustomContextMenu and custom arrow created by either QLabel and/or .png images.
setContentsMargins in the code will allow a much more flexible layout.
sample image
import os
from PyQt5.QtWidgets import (
QDialog,
QPushButton,
QApplication,
QVBoxLayout,
QMenu,
QStyle,
QHBoxLayout,
QLabel,
)
from PyQt5.QtCore import (
QEvent,
QPoint,
QRect,
Qt,
QSize,
)
from PyQt5.QtGui import (
QIcon,
QMouseEvent,
)
import sys
import functools
import copy
class MyButton(QPushButton):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.clicked_near_arrow = None
# set icon by letter
self.label_icon = QLabel(" ▼ ")
self.label_icon.setAttribute(Qt.WA_TranslucentBackground)
self.label_icon.setAttribute(Qt.WA_TransparentForMouseEvents)
icon_size = QSize(19, 19)
# set icon by picture
self.pixmap_default = QIcon("default_button.png").pixmap(icon_size) # prepare images if necessary
self.pixmap_presssed = QIcon("pressed_button.png").pixmap(icon_size) # prepare images if necessary
self.pic_icon = QLabel()
self.pic_icon.setAttribute(Qt.WA_TranslucentBackground)
self.pic_icon.setAttribute(Qt.WA_TransparentForMouseEvents)
self.pic_icon.setPixmap(self.pixmap_default)
# layout
lay = QHBoxLayout(self)
lay.setContentsMargins(0, 0, 6, 3)
lay.setSpacing(0)
lay.addStretch(1)
lay.addWidget(self.pic_icon)
lay.addWidget(self.label_icon)
def set_icon(self, pressed):
if pressed:
self.label_icon.setStyleSheet("QLabel{color:white}")
self.pic_icon.setPixmap(self.pixmap_presssed)
else:
self.label_icon.setStyleSheet("QLabel{color:black}")
self.pic_icon.setPixmap(self.pixmap_default)
def mousePressEvent(self, event):
if event.type() == QEvent.MouseButtonPress:
self.set_icon(pressed=True)
# figure out press location
topRight = self.rect().topRight()
bottomRight = self.rect().bottomRight()
# get the rect from QStyle instead of hardcode numbers here
arrowTopLeft = QPoint(topRight.x()-19, topRight.y())
arrowRect = QRect(arrowTopLeft, bottomRight)
if arrowRect.contains(event.pos()):
self.clicked_near_arrow = True
self.blockSignals(True)
QPushButton.mousePressEvent(self, event)
self.blockSignals(False)
print('clicked near arrow')
self.open_context_menu()
else:
self.clicked_near_arrow = False
QPushButton.mousePressEvent(self, event)
def mouseMoveEvent(self, event):
if self.rect().contains(event.pos()):
self.set_icon(pressed=True)
else:
self.set_icon(pressed=False)
QPushButton.mouseMoveEvent(self, event)
def mouseReleaseEvent(self, event):
self.set_icon(pressed=False)
if self.clicked_near_arrow:
self.blockSignals(True)
QPushButton.mouseReleaseEvent(self, event)
self.blockSignals(False)
else:
QPushButton.mouseReleaseEvent(self, event)
def setMenu(self, menu):
self.menu = menu
self.setContextMenuPolicy(Qt.CustomContextMenu)
self.customContextMenuRequested.connect(self.open_context_menu)
# ContextMenueのlauncher
def open_context_menu(self, point=None):
point = QPoint(7, 23)
self.menu.exec_(self.mapToGlobal(point))
event = QMouseEvent(QEvent.MouseButtonRelease, QPoint(10, 10), Qt.LeftButton, Qt.LeftButton, Qt.NoModifier)
self.mouseReleaseEvent(event)
class Main(QDialog):
def __init__(self, parent=None):
super(Main, self).__init__(parent)
menu = QMenu()
menu.addAction('This is Action 1', self.Action1)
menu.addAction('This is Action 2', self.Action2)
pushbutton = MyButton('Popup Button')
pushbutton.setMenu(menu)
layout = QVBoxLayout()
layout.addWidget(pushbutton)
self.setLayout(layout)
# event connect
pushbutton.setAutoDefault(False)
pushbutton.clicked.connect(self.button_press)
def button_press(self):
print('You pressed button')
def Action1(self):
print('You selected Action 1')
def Action2(self):
print('You selected Action 2')
if __name__ == '__main__':
app = QApplication(sys.argv)
main = Main()
main.show()
app.exec_()
Im looking to update the temp and humidity in this script.
from PyQt4.QtCore import Qt
from PyQt4.QtGui import QWidget, QApplication, QSplitter, QLabel, QVBoxLayout, QColor
import Adafruit_DHT
import urllib2
from BeautifulSoup import BeautifulSoup
sensor_args = { '11': Adafruit_DHT.DHT11,
'22': Adafruit_DHT.DHT22,
'2302': Adafruit_DHT.AM2302 }
humidity, temperature = Adafruit_DHT.read_retry(11, 4)
temp = 'Temp={0:0.1f}* Humidity={1:0.1f}%'.format(temperature, humidity)
soup = BeautifulSoup(urllib2.urlopen('http://partner.mlb.com/partnerxml/gen/news/rss/bos.xml').read())
title = soup.find('item').title
desc = soup.find('item').description
url = soup.find('item').guid
temperature = temperature * 9/5.0 + 32
class MyWidget(QWidget):
def __init__( self, parent = None ):
super(MyWidget, self).__init__(parent)
# create widgets
a = QLabel('Humidity:{:0.1f}%'.format(humidity),self )
a.setMinimumSize(100, 100)
b = QLabel('Temperature:{:0.1f}F'.format(temperature),self )
b.setMinimumSize(100, 100)
c = QLabel("Redsox News \nTitle: %s\nSummary: %s " % (title.text, desc.text), self)
c.setWordWrap(True)
c.setMinimumSize(280, 200)
d = QLabel("This is some bullshit wordwrap and i cant get it tow work", self)
d.setWordWrap(True)
d.setMinimumSize(180, 300)
for lbl in (a, b, c, d):
lbl.setAlignment(Qt.AlignLeft)
# create 2 horizontal splitters
h_splitter1 = QSplitter(Qt.Horizontal, self)
h_splitter1.addWidget(a)
h_splitter1.addWidget(b)
h_splitter2 = QSplitter(Qt.Horizontal, self)
h_splitter2.addWidget(c)
h_splitter2.addWidget(d)
h_splitter1.splitterMoved.connect(self.moveSplitter)
h_splitter2.splitterMoved.connect(self.moveSplitter)
self._spltA = h_splitter1
self._spltB = h_splitter2
# create a vertical splitter
v_splitter = QSplitter(Qt.Vertical, self)
v_splitter.addWidget(h_splitter1)
v_splitter.addWidget(h_splitter2)
layout = QVBoxLayout()
layout.addWidget(v_splitter)
self.setLayout(layout)
#color widget code
palette = self.palette()
role = self.backgroundRole()
palette.setColor(role, QColor('black'))
self.setPalette(palette)
a.setStyleSheet("QLabel {color:yellow}")
b.setStyleSheet("QLabel {color:yellow}")
c.setStyleSheet("QLabel {background-color: black; color:white}")
d.setStyleSheet("QLabel {background-color: black; color:white}")
#self.setWindowFlags(Qt.CustomizeWindowHint)
timer=self.QTimer()
timer.start(5000)
timer.timeout.connect(self.temp.update)
def moveSplitter( self, index, pos ):
splt = self._spltA if self.sender() == self._spltB else self._spltB
splt.blockSignals(True)
#splt.moveSplitter(index, pos)
splt.blockSignals(False)
if ( __name__ == '__main__' ):
app = QApplication([])
widget = MyWidget()
widget.show()
app.exec_()
Ive been learning a lot about pyQt and all the ins and outs of it. Slow going i might add as i am very new to python.
What I would like is to have it so that this updates the temp and humidity every 5 minutes. I have tried this..
timer=self.QTimer()
timer.start(300)
timer.timeout.connect(self.temp.update)
This does not seem to work for me. I get the error no attribute QTimer.
(Note, I'm not really familiar with pyqt, so if this is wrong, please let me know and I'll delete the answer...)
The line
timer=self.QTimer()
is wrong. this is a QWidget subclass, which does not have QTimer attribute. In fact, QTimer is a regular Qt class, so that line should simply be:
timer = QTimer()
You also need the right import, of course, which I think is:
from PyQt4.QtCore import QTimer