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 &quot;MS Shell Dlg 2&quot;;</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>

score 4 · Answer 1 · answered Nov 02 '18 at 13:35

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()

Scrollable QLabel image in PyQt5

1 Answers1