Scrollable QLabel image in PyQt5
Question
I have developed a form in PyQt5. Among other things it has one button, a ScrollArea which contains QLabel to hold pixMap. On click of the button .jpg image would be displayed in the label. Height, width of the image is much bigger than that of QLabel. Image is displayed but scroll bars are not enabled. Here is the image, code and .ui
image
import sys, PyQt5, os, cv2
from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtWidgets import QDialog
from PIL import Image
from PIL.ImageQt import ImageQt
from PyQt5.uic import loadUi
class photo(QDialog):
def __init__(self,parent=None):
super(photo, self).__init__(parent)
loadUi('EmployeeUpdate.ui', self)
self.btn.clicked.connect(self.attachImage)
def attachImage(self):
conImage = Image.open("G:/Data Analytics/Resnsol Face Recognition/a.jpg")
print(conImage.width,conImage.height)
pixMap = QtGui.QPixmap.fromImage(ImageQt(conImage))
self.imageLabel.setPixmap(pixMap)
#self.imageScrollArea.setGeometry(510, 380, 200, 195)
self.imageScrollArea.setWidgetResizable(True)
self.imageLabel.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)
def main():
app = PyQt5.QtWidgets.QApplication(sys.argv)
window = photo()
#window.attachImage()
window.show()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
.ui file
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Dialog</class>
<widget class="QDialog" name="Dialog">
<property name="windowModality">
<enum>Qt::ApplicationModal</enum>
</property>
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>1265</width>
<height>708</height>
</rect>
</property>
<property name="baseSize">
<size>
<width>600</width>
<height>600</height>
</size>
</property>
<property name="windowTitle">
<string>Employee Update</string>
</property>
<property name="modal">
<bool>true</bool>
</property>
<widget class="QTableWidget" name="employeeTableWidget">
<property name="geometry">
<rect>
<x>10</x>
<y>90</y>
<width>1241</width>
<height>261</height>
</rect>
</property>
<property name="alternatingRowColors">
<bool>true</bool>
</property>
<property name="rowCount">
<number>7</number>
</property>
<property name="columnCount">
<number>12</number>
</property>
<attribute name="horizontalHeaderShowSortIndicator" stdset="0">
<bool>true</bool>
</attribute>
<row/>
<row/>
<row/>
<row/>
<row/>
<row/>
<row/>
<column>
<property name="text">
<string>Id</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>First Name</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Last Name</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Address1</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Address2</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>City</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>State</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Pin</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Date of Birth</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Gender</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Photo</string>
</property>
<property name="toolTip">
<string>Click to take photo</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<column>
<property name="text">
<string>Del</string>
</property>
<property name="toolTip">
<string>Click to delete record</string>
</property>
<property name="font">
<font>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
</column>
<item row="0" column="0">
<property name="text">
<string/>
</property>
</item>
</widget>
<widget class="QLabel" name="idLabel">
<property name="geometry">
<rect>
<x>20</x>
<y>30</y>
<width>16</width>
<height>16</height>
</rect>
</property>
<property name="text">
<string>Id</string>
</property>
</widget>
<widget class="QLineEdit" name="idText">
<property name="geometry">
<rect>
<x>40</x>
<y>30</y>
<width>113</width>
<height>20</height>
</rect>
</property>
</widget>
<widget class="QLabel" name="firstNameLabel">
<property name="geometry">
<rect>
<x>160</x>
<y>30</y>
<width>51</width>
<height>16</height>
</rect>
</property>
<property name="text">
<string>First Name</string>
</property>
</widget>
<widget class="QLineEdit" name="firstNameText">
<property name="geometry">
<rect>
<x>220</x>
<y>30</y>
<width>113</width>
<height>20</height>
</rect>
</property>
</widget>
<widget class="QLabel" name="lastNameLabel">
<property name="geometry">
<rect>
<x>340</x>
<y>30</y>
<width>51</width>
<height>16</height>
</rect>
</property>
<property name="text">
<string>Last Name</string>
</property>
</widget>
<widget class="QLineEdit" name="lastNameText">
<property name="geometry">
<rect>
<x>400</x>
<y>30</y>
<width>113</width>
<height>20</height>
</rect>
</property>
<property name="text">
<string>1</string>
</property>
</widget>
<widget class="QPushButton" name="searchButton">
<property name="geometry">
<rect>
<x>530</x>
<y>30</y>
<width>75</width>
<height>23</height>
</rect>
</property>
<property name="text">
<string>Search</string>
</property>
<property name="default">
<bool>true</bool>
</property>
</widget>
<widget class="QLabel" name="ErrorBar">
<property name="geometry">
<rect>
<x>-50</x>
<y>620</y>
<width>601</width>
<height>31</height>
</rect>
</property>
<property name="text">
<string/>
</property>
<property name="wordWrap">
<bool>true</bool>
</property>
</widget>
<widget class="QScrollArea" name="imageScrollArea">
<property name="geometry">
<rect>
<x>120</x>
<y>390</y>
<width>231</width>
<height>171</height>
</rect>
</property>
<property name="verticalScrollBarPolicy">
<enum>Qt::ScrollBarAlwaysOn</enum>
</property>
<property name="horizontalScrollBarPolicy">
<enum>Qt::ScrollBarAlwaysOn</enum>
</property>
<property name="widgetResizable">
<bool>true</bool>
</property>
<widget class="QWidget" name="scrollAreaWidgetContents">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>212</width>
<height>152</height>
</rect>
</property>
<widget class="QLabel" name="imageLabel">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>285</width>
<height>171</height>
</rect>
</property>
<property name="autoFillBackground">
<bool>false</bool>
</property>
<property name="styleSheet">
<string notr="true">font: 20pt "MS Shell Dlg 2";</string>
</property>
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="text">
<string/>
</property>
<property name="textFormat">
<enum>Qt::AutoText</enum>
</property>
<property name="scaledContents">
<bool>false</bool>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</widget>
</widget>
<widget class="QPushButton" name="btn">
<property name="geometry">
<rect>
<x>20</x>
<y>510</y>
<width>75</width>
<height>23</height>
</rect>
</property>
<property name="text">
<string>PushButton</string>
</property>
</widget>
</widget>
<tabstops>
<tabstop>idText</tabstop>
<tabstop>firstNameText</tabstop>
<tabstop>lastNameText</tabstop>
<tabstop>searchButton</tabstop>
<tabstop>employeeTableWidget</tabstop>
</tabstops>
<resources/>
<connections/>
</ui>
1 answers
solution1
4 2018-11-02 13:35:56
When you create a QScrollArea with Qt Designer a widget called scrollAreaWidgetContents is created and this is the one inside the QScrollArea and therefore its size is used to establish what is shown in the scrollbar, in your case imageLabel is the son of scrollAreaWidgetContents it is observed but scrollAreaWidgetContents does not know the size of imageLabel, so in these cases you must use the layouts so that the minimum size of the scrollAreaWidgetContents matches that of the imageLabel.
import sys
from PyQt5 import QtCore, QtGui, QtWidgets, uic
class photo(QtWidgets.QDialog):
def __init__(self,parent=None):
super(photo, self).__init__(parent)
uic.loadUi('EmployeeUpdate.ui', self)
self.btn.clicked.connect(self.attachImage)
def attachImage(self):
lay = QtWidgets.QVBoxLayout(self.scrollAreaWidgetContents)
lay.setContentsMargins(0, 0, 0, 0)
lay.addWidget(self.imageLabel)
path = "G:/Data Analytics/Resnsol Face Recognition/a.jpg"
pixMap = QtGui.QPixmap(path)
self.imageLabel.setPixmap(pixMap)
self.imageScrollArea.setWidgetResizable(True)
self.imageLabel.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)
def main():
app = QtWidgets.QApplication(sys.argv)
window = photo()
#window.attachImage()
window.show()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to scale and move an image Qlabel Pyqt5
Pyqt5 QLabel with image at top and text at bottom
Draw over image in a QLabel with PyQt5
PyQt5 Insert QLabel into QLabel
Pyqt5 - Zoom on a QLabel
PyQt5 QLabel errors
PyQt5 Displaying an Image using a QLabel from Memory
How do I align centre image on QLabel in PyQt5?
PyQt5: render "blank" image when using QLabel with rich text
PyQt5 QLabel() string contains < >
Related Tags