Develop Reference

Qt resize layout during widget property animation

I have an existing application that I am polishing off and I want to add some animation to a few of the widgets. Animating widgets with QPropertyAnimation outside of layouts is easy and fun, however when they are in a layout I am having various difficulties. The current one giving me a headache is that when I animate the size of a widget, the layout does not adjust to it's new size.
So lets say I have a QVBoxLayout with three widgets: a label which should expand to all available space, a treeview, and a button. When I click the button I want the tree to collapse and the label to take over it's space. Below is this example in code, and as you can see while the tree animates it's size nothing happens, and then when I hide it at the end of the animation the label pops to fill the now vacant space. So it seems that during the animation the layout does not "know" the tree is resizing. What I would like to happen is that AS the tree shrinks, the label expands to fill it.
Could this could be done not by absolute sizing of the label, but by calling a resize on the layout or something like that? I ask because I want to animate several widgets across my application and I want to find the best way to do this without having to make too many widgets interdependent upon each other.
Example code:
import sys
from PyQt4 import QtGui, QtCore
class AnimatedWidgets(QtGui.QWidget):
def __init__(self):
super(AnimatedWidgets, self).__init__()
layout1 = QtGui.QVBoxLayout()
self.setLayout(layout1)
expanding_label = QtGui.QLabel("Expanding label!")
expanding_label.setStyleSheet("border: 1px solid red")
layout1.addWidget(expanding_label)
self.file_model = QtGui.QFileSystemModel(self)
sefl.file_model.setRootPath("C:/")
self.browse_tree = QtGui.QTreeView()
self.browse_tree.setModel(self.file_model)
layout1.addWidget(self.browse_tree)
shrink_tree_btn = QtGui.QPushButton("Shrink the tree")
shrink_tree_btn.clicked.connect(self.shrink_tree)
layout1.addWidget(shrink_tree_btn)
#--
self.tree_size_anim = QtCore.QPropertyAnimation(self.browse_tree, "size")
self.tree_size_anim.setDuration(1000)
self.tree_size_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
self.tree_pos_anim = QtCore.QPropertyAnimation(self.browse_tree, "pos")
self.tree_pos_anim.setDuration(1000)
self.tree_pos_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
self.tree_anim_out = QtCore.QParallelAnimationGroup()
self.tree_anim_out.addAnimation(self.tree_size_anim)
self.tree_anim_out.addAnimation(self.tree_pos_anim)
def shrink_tree(self):
self.tree_size_anim.setStartValue(self.browse_tree.size())
self.tree_size_anim.setEndValue(QtCore.QSize(self.browse_tree.width(), 0))
tree_rect = self.browse_tree.geometry()
self.tree_pos_anim.setStartValue(tree_rect.topLeft())
self.tree_pos_anim.setEndValue(QtCore.QPoint(tree_rect.left(), tree_rect.bottom()))
self.tree_anim_out.start()
self.tree_anim_out.finished.connect(self.browse_tree.hide)
def main():
app = QtGui.QApplication(sys.argv)
ex = AnimatedWidgets()
ex.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()

The layouts handle the geometry() of the widgets so that when wanting to change the pos property these are interfacing with their handles so it is very common that you get that type of behavior, a better option is to use a QVariantAnimation to establish a fixed height:
import sys
from PyQt4 import QtGui, QtCore
class AnimatedWidgets(QtGui.QWidget):
def __init__(self):
super(AnimatedWidgets, self).__init__()
layout1 = QtGui.QVBoxLayout(self)
expanding_label = QtGui.QLabel("Expanding label!")
expanding_label.setStyleSheet("border: 1px solid red")
layout1.addWidget(expanding_label)
self.file_model = QtGui.QFileSystemModel(self)
self.file_model.setRootPath(QtCore.QDir.rootPath())
self.browse_tree = QtGui.QTreeView()
self.browse_tree.setModel(self.file_model)
layout1.addWidget(self.browse_tree)
shrink_tree_btn = QtGui.QPushButton("Shrink the tree")
shrink_tree_btn.clicked.connect(self.shrink_tree)
layout1.addWidget(shrink_tree_btn)
#--
self.tree_anim = QtCore.QVariantAnimation(self)
self.tree_anim.setDuration(1000)
self.tree_anim.setEasingCurve(QtCore.QEasingCurve.InOutQuart)
def shrink_tree(self):
self.tree_anim.setStartValue(self.browse_tree.height())
self.tree_anim.setEndValue(0)
self.tree_anim.valueChanged.connect(self.on_valueChanged)
self.tree_anim.start()
def on_valueChanged(self, val):
h, isValid = val.toInt()
if isValid:
self.browse_tree.setFixedHeight(h)
def main():
app = QtGui.QApplication(sys.argv)
ex = AnimatedWidgets()
ex.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()

How can i have a transparent background in a pyside QWidget, but keep its children opaque

I have an widget that contain a lot of children , i want to set its background transparent , but keep its children opaque.
I'am using PySide 1.2.1 win7
I have try something like this:
self.setAttribute(Qt.WA_TranslucentBackground,True);
self.setStyleSheet("background-color:rgba(40,40,150,150);border:0px;")
but it dosen't work for me . It make the whole widget transparent . I want to keep the children opaque. Can someone help me ? Thank you so much. Here is my code , thanks for help.
import sys
from PySide.QtCore import *
from PySide.QtGui import *
class M_SCROLL_GRID_WIDGET(QWidget):
# This is a common ui class .
def __init__(self,column_count):
super(M_SCROLL_GRID_WIDGET, self).__init__()
self.column_count = column_count
self.visible_widget_list = []
self.scroll_widget = QWidget()
self.scroll_area = QScrollArea()
self.scroll_area.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.scroll_area.setWidgetResizable(True)
self.scroll_area.setWidget(self.scroll_widget)
self.main_layout = QGridLayout()
self.main_layout.setSpacing(0)
self.scroll_widget.setLayout(self.main_layout)
self.main_layout.setAlignment(Qt.AlignTop)
master_layout = QVBoxLayout(self)
master_layout.addWidget(self.scroll_area)
self.setLayout(master_layout)
self.setAttribute(Qt.WA_TranslucentBackground, True)
self.setStyleSheet("background-color:rgba(40,40,150,150);border:0px;")
def Get_Widget_Count(self):
return len(self.visible_widget_list)
def Add_Widget_To_Vis_List(self, widget):
self.visible_widget_list.append(widget)
def Remove_Widget_To_Vis_List(self, widget):
self.visible_widget_list.remove(widget)
def Remove_All_Widgets(self):
for i in reversed(range(self.main_layout.count())):
widget = self.main_layout.itemAt(i).widget()
widget.setParent(None)
def Clean_Visible_List(self):
self.visible_widget_list = []
def Refresh(self):
for widget_index in xrange(len(self.visible_widget_list)):
r_position = widget_index / self.column_count
c_position = (widget_index + 1) % self.column_count
if c_position == 0:
c_position = self.column_count
self.main_layout.addWidget(self.visible_widget_list[widget_index], r_position, c_position)
if __name__ == '__main__':
app = QApplication(sys.argv)
caofan = M_SCROLL_GRID_WIDGET(3)
btn_list = []
caofan.Remove_All_Widgets()
for a in xrange(50):
btn = QPushButton(str(a+1))
btn_list.append(btn)
caofan.Add_Widget_To_Vis_List(btn)
caofan.Refresh()
caofan.show()
app.exec_()

I suspect the real problem is that the style sheet you specify is propagating to the child widgets.
So, remove...
self.setStyleSheet("background-color:rgba(40,40,150,150);border:0px;")
and override QWidget::paintEvent with something like...
def paintEvent(self, event):
painter = QPainter(self)
painter.fillRect(self.rect(), QColor(40, 40, 150, 150))

Qt Widget with slider

I'm writing GUI application using PyQt4 and I need to create widgets and dialog windows which can be slided vertically. After clicking "Add new widgets" button (and moving it down) I create dynamically new small widgets (containing 2 textEdit objects). I want to avoid situation when window's height will be too small to properly show all widgets so the obvious solution seems to be a slider. I tried to use QSlider but I'm not sure if it's the best way and how to configure such slider.
class MyDialog(QDialog):
def __init__(self, parent=None):
QDialog.__init__(self, parent)
self.smallWidgets = list()
self.resize(450,500)
self.buttonPosition = 60
firstWidget = SmallWidget(self)
firstWidget.setGeometry(QRect(5,5, 450, 80))
self.addWidgetButton = QPushButton(self)
self.addWidgetButton.setText("Add new widget")
self.addWidgetButton.setGeometry(QRect(165,self.buttonPosition,120,40))
self.connect(self.addWidgetButton, QtCore.SIGNAL("clicked()"), self.addNewWidget)
def addNewWidget(self):
newWidget = SmallWidget(self)
newWidget.setGeometry(QRect(5,self.buttonPosition, 450, 80))
self.buttonPosition += 70
newWidget.setVisible(True)
self.smallWidgets.append(newWidget)
self.addWidgetButton.setGeometry(QRect(165,self.buttonPosition,120,40))

So I took #ekhumoro advice and implemented this using layout and QScrollArea (thanks! That's what I was looking for!). Scrolling works as I wanted, but I suppose my implementation is not the ideal solution. ;)
class MyDialog(QDialog):
def __init__(self, strt, parent=None):
QDialog.__init__(self, parent)
self.smallWidgets = list()
self.setMinimumWidth(450)
self.setMinimumHeight(600)
self.setupLayout()
self.setupScrollArea()
self.addWidgetButton = QPushButton(self.containerWidget)
self.addWidgetButton.setText("Add new widget")
self.layout.addWidget(self.addWidgetButton)
self.connect(self.addWidgetButton, QtCore.SIGNAL("clicked()"), self.addNewWidget)
def setupLayout(self):
self.containerWidget = QWidget(self)
self.widgetHeight = 120
self.containerWidget.setGeometry(QRect(0,0,450,self.widgetHeight))
self.layout = QVBoxLayout()
self.containerWidget.setLayout(self.layout)
def setupScrollArea(self):
self.scrollArea = QScrollArea(self)
self.scrollArea.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAsNeeded)
self.scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
self.scrollArea.setMaximumWidth(440)
self.scrollArea.setMinimumHeight(600)
self.scrollArea.setWidgetResizable(False)
self.scrollArea.setWidget(self.containerWidget)
def addNewWidget(self):
newWidget = SmallWidget(self.containerWidget)
widgetPosition = len(self.smallWidgets)
self.layout.insertWidget(widgetPosition, newWidget)
self.smallWidgets.append(newWidget)
self.widgetHeight += 80
self.containerWidget.resize(450,self.widgetHeight)

PyQt4 - add a text edit area animation example

I have realized a python simple application, without any animation on it.
Now I want to add a simple animation, triggered by a signal (a button click for example), which on trigger enlarges the width of the windows and shows a new text area with some text in it.
Honestly, I am quite new to python/pyqt4, and I do not know much about the animation framework.
I tried to add this to my class code, for example in a method called clicking on the about menu :) :
self.anim = QPropertyAnimation(self, "size")
self.anim.setDuration(2500)
self.anim.setStartValue(QSize(self.width(), self.height()))
self.anim.setEndValue(QSize(self.width()+100, self.height()))
self.anim.start()
and this enlarge my window as I want.
Unfortunately I have no idea how to insert a new text area, avoiding the widgets already present to fill the new space (actually, when the window enlarge, the widgets use
all the spaces, thus enlarging themselves)
Could someone help me knowing how to add the text area appearance animation?
Any help is appreciated...really...

One way to achieve this is to animate the maximumWidth property on both the window and the text-edit.
The main difficulty is doing it in a way that plays nicely with standard layouts whilst also allowing resizing of the window. Avoiding flicker during the animation is also quite tricky.
The following demo is almost there (the animation is slightly jerky at the beginning and end):
from PyQt4 import QtGui, QtCore
class Window(QtGui.QDialog):
def __init__(self):
QtGui.QDialog.__init__(self)
self._offset = 200
self._closed = False
self._maxwidth = self.maximumWidth()
self.widget = QtGui.QWidget(self)
self.listbox = QtGui.QListWidget(self.widget)
self.button = QtGui.QPushButton('Slide', self.widget)
self.button.clicked.connect(self.handleButton)
self.editor = QtGui.QTextEdit(self)
self.editor.setMaximumWidth(self._offset)
vbox = QtGui.QVBoxLayout(self.widget)
vbox.setContentsMargins(0, 0, 0, 0)
vbox.addWidget(self.listbox)
vbox.addWidget(self.button)
layout = QtGui.QHBoxLayout(self)
layout.addWidget(self.widget)
layout.addWidget(self.editor)
layout.setSizeConstraint(QtGui.QLayout.SetMinAndMaxSize)
self.animator = QtCore.QParallelAnimationGroup(self)
for item in (self, self.editor):
animation = QtCore.QPropertyAnimation(item, 'maximumWidth')
animation.setDuration(800)
animation.setEasingCurve(QtCore.QEasingCurve.OutCubic)
self.animator.addAnimation(animation)
self.animator.finished.connect(self.handleFinished)
def handleButton(self):
for index in range(self.animator.animationCount()):
animation = self.animator.animationAt(index)
width = animation.targetObject().width()
animation.setStartValue(width)
if self._closed:
self.editor.show()
animation.setEndValue(width + self._offset)
else:
animation.setEndValue(width - self._offset)
self._closed = not self._closed
self.widget.setMinimumSize(self.widget.size())
self.layout().setSizeConstraint(QtGui.QLayout.SetFixedSize)
self.animator.start()
def handleFinished(self):
if self._closed:
self.editor.hide()
self.layout().setSizeConstraint(QtGui.QLayout.SetMinAndMaxSize)
self.widget.setMinimumSize(0, 0)
self.setMaximumWidth(self._maxwidth)
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.move(500, 300)
window.show()
sys.exit(app.exec_())

How to display PDF with python-poppler-qt4?

I have downloaded and installed python-poppler-qt4 and I am now trying out a simple Qt application to display a PDF page. I've followed what I've been able to get from the web, i.e. convert the PDF to a QImage, then to a QPixMap, but it doesn't work (all I get is a small window with no visible content).
I may have failed at some point (QImage.width() returns the width I have input, QPixMap.width() returns 0).
Here is the code:
#!/usr/bin/env python
import sys
from PyQt4 import QtGui, QtCore
import popplerqt4
class Application(QtGui.QApplication):
def __init__(self):
QtGui.QApplication.__init__(self, sys.argv)
self.main = MainWindow()
self.main.show()
class MainWindow(QtGui.QFrame):
def __init__(self, parent=None):
QtGui.QWidget.__init__(self, parent)
self.layout = QtGui.QVBoxLayout()
self.doc = popplerqt4.Poppler.Document.load('/home/benjamin/test.pdf')
self.page = self.doc.page(1)
# here below i entered almost random dpi, position and size, just to test really
self.image = self.page.renderToImage(150, 150, 0, 0, 210, 297)
self.pixmap = QtGui.QPixmap()
self.pixmap.fromImage(self.image)
self.label = QtGui.QLabel(self)
self.label.setPixmap(self.pixmap)
self.layout.addWidget(self.label)
self.setLayout(self.layout)
if __name__ == "__main__":
application = Application()
sys.exit(application.exec_())
Where does it go wrong here? Thanks.

I'm not familiar with python, so this might not apply directly, but QPixmap::fromImage is a static function that returns a QPixmap. So your code should read something like:
self.pixmap = QtGui.QPixmap.fromImage(self.image)
In other words, self.pixmap.fromImage doesn't change self.pixmap, it returns a new pixmap generated from the image you give it as a parameter.

yes i know that the question has an answer.
but i faced an error when i do the same thing in PyQt5 to show a PDF file as an image.
and i found the solution of my problem.
i posted this answer to help who faced the same problem.
if you want to show a pdf file in your PyQt5 program you have 2 choices
1 - the first one is to use web engine (but it takes a lot of resources from the ram)
2 - the second it to convert the pdf into an image and show it on label
i chose the second choice
and this is my code to show a pdf file as an image and to solve the problem :
from PyQt5 import QtWidgets,QtCore,QtGui
import pypdfium2 as pdfium
the_file = "My_PDF_File.pdf"
application = QtWidgets.QApplication([])
window = QtWidgets.QWidget()
window.resize(700,600)
window_layout = QtWidgets.QGridLayout()
label_to_display_the_page = QtWidgets.QLabel()
label_to_display_the_page.setAlignment(QtCore.Qt.AlignCenter)
label_to_display_the_page_geometry = label_to_display_the_page.geometry()
pdf = pdfium.PdfDocument(the_file)
page = pdf.get_page(1)
pil_image = page.render_topil(scale=1,rotation=0,crop=(0, 0, 0, 0),greyscale=False,optimise_mode=pdfium.OptimiseMode.NONE)
image = pil_image.toqimage()
label_pixmap = QtGui.QPixmap.fromImage(image)
size = QtCore.QSize(label_to_display_the_page_geometry.width()-50,label_to_display_the_page_geometry.height()-50)
label_to_display_the_page.setPixmap(label_pixmap.scaled(size,QtCore.Qt.KeepAspectRatio, QtCore.Qt.SmoothTransformation))
window_layout.addWidget(label_to_display_the_page)
window.setLayout(window_layout)
window.show()
application.exec()