We Keep Coding

PyQt5 add a scrollbar to main window

I know there are already lots of threads opened with this topic, I was trying to follow their recommendations, but I still struggle to achieve this.
Here is my initial code for window:
from PyQt5.QtWidgets import *
import sys
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Python ")
self.setGeometry(100, 100, 600, 400)
self.UiComponents()
self.show()
def UiComponents(self):
emphysemaLabel = QLabel("EMPHYSEMA", self)
emphysemaLabel.move(10, 10)
ggoLabel = QLabel("GGO", self)
ggoLabel.move(10, 300)
condensLabel = QLabel("Condens", self)
condensLabel.move(10, 590)
emphysema_graph_lin = QLabel(self)
emphysema_graph_lin.resize(302, 232)
emphysema_graph_lin.move(10, 50)
emphysema_graph_lin.setStyleSheet("background-color:yellow;")
ggo_graph_lin = QLabel(self)
ggo_graph_lin.resize(302, 232)
ggo_graph_lin.move(10, 340)
ggo_graph_lin.setStyleSheet("background-color:yellow;")
condens_graph_lin = QLabel(self)
condens_graph_lin.resize(302, 232)
condens_graph_lin.move(10, 630)
condens_graph_lin.setStyleSheet("background-color:yellow;")
if __name__ == "__main__":
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())
An example if what I found useful and working is code found here https://www.pythonguis.com/tutorials/qscrollarea/
I tried to apply it to my code, like this:
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import *
import sys
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Python ")
self.setGeometry(100, 100, 600, 400)
self.UiComponents()
self.show()
def UiComponents(self):
self.scroll = QScrollArea() # Scroll Area which contains the widgets, set as the centralWidget
self.widget = QWidget() # Widget that contains the collection of Vertical Box
self.vbox = QVBoxLayout() # The Vertical Box that contains the Horizontal Boxes of labels and buttons
emphysemaLabel = QLabel("EMPHYSEMA", self)
emphysemaLabel.move(10, 10)
self.vbox.addWidget(emphysemaLabel)
ggoLabel = QLabel("GGO", self)
ggoLabel.move(10, 300)
self.vbox.addWidget(ggoLabel)
condensLabel = QLabel("Condens", self)
condensLabel.move(10, 590)
self.vbox.addWidget(condensLabel)
emphysema_graph_lin = QLabel(self)
emphysema_graph_lin.resize(302, 232)
emphysema_graph_lin.move(10, 50)
emphysema_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(emphysema_graph_lin)
ggo_graph_lin = QLabel(self)
ggo_graph_lin.resize(302, 232)
ggo_graph_lin.move(10, 340)
ggo_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(ggo_graph_lin)
condens_graph_lin = QLabel(self)
condens_graph_lin.resize(302, 232)
condens_graph_lin.move(10, 630)
condens_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(condens_graph_lin)
self.widget.setLayout(self.vbox)
# Scroll Area Properties
self.scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
self.scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.scroll.setWidgetResizable(True)
self.scroll.setWidget(self.widget)
self.setCentralWidget(self.scroll)
if __name__ == "__main__":
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())
But it's not working, how should I do it?
Thank you for any advice.

You can add a vertical spacer at the end of the layout using the addStretch() method of the QVBoxLayout object.
And adjust the maximum size to view the scroll working, setMaximumSize().
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import *
import sys
class Window(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Python ")
self.setGeometry(100, 100, 600, 400)
# set maximum size of the QMainWindow
self.setMaximumSize(600, 100)
self.UiComponents()
self.show()
def UiComponents(self):
self.scroll = QScrollArea() # Scroll Area which contains the widgets, set as the centralWidget
self.widget = QWidget() # Widget that contains the collection of Vertical Box
self.vbox = QVBoxLayout() # The Vertical Box that contains the Horizontal Boxes of labels and buttons
emphysemaLabel = QLabel("EMPHYSEMA", self)
emphysemaLabel.move(10, 10)
self.vbox.addWidget(emphysemaLabel)
ggoLabel = QLabel("GGO", self)
ggoLabel.move(10, 300)
self.vbox.addWidget(ggoLabel)
condensLabel = QLabel("Condens", self)
condensLabel.move(10, 590)
self.vbox.addWidget(condensLabel)
emphysema_graph_lin = QLabel(self)
emphysema_graph_lin.resize(302, 232)
emphysema_graph_lin.move(10, 50)
emphysema_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(emphysema_graph_lin)
ggo_graph_lin = QLabel(self)
ggo_graph_lin.resize(302, 232)
ggo_graph_lin.move(10, 340)
ggo_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(ggo_graph_lin)
condens_graph_lin = QLabel(self)
condens_graph_lin.resize(302, 232)
condens_graph_lin.move(10, 630)
condens_graph_lin.setStyleSheet("background-color:yellow;")
self.vbox.addWidget(condens_graph_lin)
# add a vertical spacer with addStretch() method
self.vbox.addStretch()
self.widget.setLayout(self.vbox)
# Scroll Area Properties
self.scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
self.scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.scroll.setWidgetResizable(True)
self.scroll.setWidget(self.widget)
self.setCentralWidget(self.scroll)
if __name__ == "__main__":
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

How to create a sidebar with pyqt5 [duplicate]

This question already has an answer here:
Load whole *ui file in an frame/widget of another *.ui file
(1 answer)
Closed 3 years ago.
I need to create a desktop application with PyQt5. It will show different pages by clicking the buttons on the sidebar. So how to build a simple APP with sidebar?

Here is an example to create a sidebar for your application. Read more info in my blog.
from PyQt5.QtWidgets import *
import sys
class Window(QMainWindow):
def __init__(self):
super().__init__()
# set the title of main window
self.setWindowTitle('Sidebar layout - www.luochang.ink')
# set the size of window
self.Width = 800
self.height = int(0.618 * self.Width)
self.resize(self.Width, self.height)
# add all widgets
self.btn_1 = QPushButton('1', self)
self.btn_2 = QPushButton('2', self)
self.btn_3 = QPushButton('3', self)
self.btn_4 = QPushButton('4', self)
self.btn_1.clicked.connect(self.button1)
self.btn_2.clicked.connect(self.button2)
self.btn_3.clicked.connect(self.button3)
self.btn_4.clicked.connect(self.button4)
# add tabs
self.tab1 = self.ui1()
self.tab2 = self.ui2()
self.tab3 = self.ui3()
self.tab4 = self.ui4()
self.initUI()
def initUI(self):
left_layout = QVBoxLayout()
left_layout.addWidget(self.btn_1)
left_layout.addWidget(self.btn_2)
left_layout.addWidget(self.btn_3)
left_layout.addWidget(self.btn_4)
left_layout.addStretch(5)
left_layout.setSpacing(20)
left_widget = QWidget()
left_widget.setLayout(left_layout)
self.right_widget = QTabWidget()
self.right_widget.tabBar().setObjectName("mainTab")
self.right_widget.addTab(self.tab1, '')
self.right_widget.addTab(self.tab2, '')
self.right_widget.addTab(self.tab3, '')
self.right_widget.addTab(self.tab4, '')
self.right_widget.setCurrentIndex(0)
self.right_widget.setStyleSheet('''QTabBar::tab{width: 0; \
height: 0; margin: 0; padding: 0; border: none;}''')
main_layout = QHBoxLayout()
main_layout.addWidget(left_widget)
main_layout.addWidget(self.right_widget)
main_layout.setStretch(0, 40)
main_layout.setStretch(1, 200)
main_widget = QWidget()
main_widget.setLayout(main_layout)
self.setCentralWidget(main_widget)
# -----------------
# buttons
def button1(self):
self.right_widget.setCurrentIndex(0)
def button2(self):
self.right_widget.setCurrentIndex(1)
def button3(self):
self.right_widget.setCurrentIndex(2)
def button4(self):
self.right_widget.setCurrentIndex(3)
# -----------------
# pages
def ui1(self):
main_layout = QVBoxLayout()
main_layout.addWidget(QLabel('page 1'))
main_layout.addStretch(5)
main = QWidget()
main.setLayout(main_layout)
return main
def ui2(self):
main_layout = QVBoxLayout()
main_layout.addWidget(QLabel('page 2'))
main_layout.addStretch(5)
main = QWidget()
main.setLayout(main_layout)
return main
def ui3(self):
main_layout = QVBoxLayout()
main_layout.addWidget(QLabel('page 3'))
main_layout.addStretch(5)
main = QWidget()
main.setLayout(main_layout)
return main
def ui4(self):
main_layout = QVBoxLayout()
main_layout.addWidget(QLabel('page 4'))
main_layout.addStretch(5)
main = QWidget()
main.setLayout(main_layout)
return main
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Window()
ex.show()
sys.exit(app.exec_())

QButton layout in QGroupBox for making UI in PyQt5

I have QButtons arranged as first row has four buttons and second row has five buttons.
My code is developed using PyQt5 in Python2.7.
from PyQt5 import QtCore, QtGui, QtWidgets
import cv2
import time
import face_recognition.api as face_recognition
class Thread(QtCore.QThread):
changePixmap = QtCore.pyqtSignal(QtGui.QImage)
scaled_size = QtCore.QSize(640, 480)
def run(self):
cap = cv2.VideoCapture(1)
cap.set(3,1280);
cap.set(4,1024);
time.sleep(2)
while True:
ret, frame = cap.read()
if ret:
r=1
face_locations=[]
rescaleSize=480
if(frame.shape[0] > 480 and frame.shape[1] > 640):
r = rescaleSize / float(frame.shape[0])
dim = (int(frame.shape[1] * r), rescaleSize)
face_locations = face_recognition.face_locations(cv2.resize(frame, dim, fx=0.0, fy=0.0))
else:
face_locations = face_recognition.face_locations(frame)
for face_location in face_locations:
top, right, bottom, left = face_location
cv2.rectangle(frame,(int(right/r),int(top/r)),(int(left/r),int(bottom/r)),(0,255,0),2)
rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
convertToQtFormat = QtGui.QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QtGui.QImage.Format_RGB888)
p = convertToQtFormat.scaled(self.scaled_size, QtCore.Qt.KeepAspectRatio)
self.changePixmap.emit(p)
def scaled(self, scaled_size):
self.scaled_size = scaled_size
class PlayStreaming(QtWidgets.QLabel):
reSize = QtCore.pyqtSignal(QtCore.QSize)
def __init__(self):
super(PlayStreaming, self).__init__()
self.initUI()
#QtCore.pyqtSlot(QtGui.QImage)
def setImage(self, image):
self.label.setPixmap(QtGui.QPixmap.fromImage(image))
def initUI(self):
self.setWindowTitle("Image")
# create a label
self.label = QtWidgets.QLabel(self)
th = Thread(self)
th.changePixmap.connect(self.setImage)
self.reSize.connect(th.scaled)
th.start()
lay = QtWidgets.QVBoxLayout(self)
lay.addWidget(self.label, alignment=QtCore.Qt.AlignCenter)
def resizeEvent(self, event):
self.reSize.emit(self.size())
class UIWidget(QtWidgets.QWidget):
def __init__(self, parent=None):
super(UIWidget, self).__init__(parent)
# Initialize tab screen
self.tabs = QtWidgets.QTabWidget()
self.tab1 = QtWidgets.QWidget()
self.tab2 = QtWidgets.QWidget()
self.tab3 = QtWidgets.QWidget()
# Add tabs
self.tabs.addTab(self.tab1, "Face")
self.tabs.addTab(self.tab2, "Human")
self.tabs.addTab(self.tab3, "Vehicle")
# Create first tab
self.createGridLayout()
self.tab1.layout = QtWidgets.QVBoxLayout()
self.display = PlayStreaming()
self.tab1.layout.addWidget(self.display, stretch=1)
self.tab1.layout.addWidget(self.horizontalGroupBox)
self.tab1.setLayout(self.tab1.layout)
# Add tabs to widget
layout = QtWidgets.QVBoxLayout(self)
layout.addWidget(self.tabs)
def createGridLayout(self):
self.horizontalGroupBox = QtWidgets.QGroupBox("")
self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")
layout = QtWidgets.QGridLayout()
layout.addWidget(QtWidgets.QPushButton('Test'),0,0)
layout.addWidget(QtWidgets.QPushButton('Run'),0,1)
layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2)
layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3)
layout.addWidget(QtWidgets.QPushButton('Set Faces'),1,0)
layout.addWidget(QtWidgets.QPushButton('FacePose'),1,1)
layout.addWidget(QtWidgets.QPushButton('Gender'),1,2)
layout.addWidget(QtWidgets.QPushButton('Age'),1,3)
layout.addWidget(QtWidgets.QPushButton('Recognize'),1,4)
self.horizontalGroupBox.setLayout(layout)
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
w = UIWidget()
w.resize(1000, 800)
w.show()
sys.exit(app.exec_())
I like to make the first four buttons are equally spaced and the second fuve buttons are also equally spaced.
For that, changes are made as
class UIWidget(QtWidgets.QWidget):
def __init__(self, parent=None):
super(UIWidget, self).__init__(parent)
# Initialize tab screen
self.tabs = QtWidgets.QTabWidget()
self.tab1 = QtWidgets.QWidget()
self.tab2 = QtWidgets.QWidget()
self.tab3 = QtWidgets.QWidget()
# Add tabs
self.tabs.addTab(self.tab1, "Face")
self.tabs.addTab(self.tab2, "Human")
self.tabs.addTab(self.tab3, "Vehicle")
# Create first tab
self.createGridLayout()
self.tab1.layout = QtWidgets.QVBoxLayout()
self.display = PlayStreaming()
self.tab1.layout.addWidget(self.display, stretch=1)
self.tab1.layout.addWidget(self.horizontalGroupBox)
self.tab1.layout.addWidget(self.horizontalGroupBox2)
self.tab1.setLayout(self.tab1.layout)
# Add tabs to widget
layout = QtWidgets.QVBoxLayout(self)
layout.addWidget(self.tabs)
def createGridLayout(self):
self.horizontalGroupBox = QtWidgets.QGroupBox("")
self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")
layout = QtWidgets.QGridLayout()
layout.addWidget(QtWidgets.QPushButton('Test'),0,0)
layout.addWidget(QtWidgets.QPushButton('Run'),0,1)
layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2)
layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3)
self.horizontalGroupBox.setLayout(layout)
self.horizontalGroupBox2 = QtWidgets.QGroupBox("")
self.horizontalGroupBox2.setStyleSheet("QGroupBox{ background-color: red; border: none;}")
layout = QtWidgets.QGridLayout()
layout.addWidget(QtWidgets.QPushButton('Set Faces'),0,0)
layout.addWidget(QtWidgets.QPushButton('FacePose'),0,1)
layout.addWidget(QtWidgets.QPushButton('Gender'),0,2)
layout.addWidget(QtWidgets.QPushButton('Age'),0,3)
layout.addWidget(QtWidgets.QPushButton('Recognize'),0,4)
self.horizontalGroupBox2.setLayout(layout)
Then there is a gap in between two QGroupBoxes.
How can I make so that there is no gap and first row and second row have equally spaced buttons?

You must use 1 QVBoxLayout next to 2 QHBoxLayouts:
def createGridLayout(self):
self.horizontalGroupBox = QtWidgets.QGroupBox("")
self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")
hlay1 = QtWidgets.QHBoxLayout()
hlay1.addWidget(QtWidgets.QPushButton('Test'))
hlay1.addWidget(QtWidgets.QPushButton('Run'))
hlay1.addWidget(QtWidgets.QPushButton('RescaleUp'))
hlay1.addWidget(QtWidgets.QPushButton('RescaleDown'))
hlay2 = QtWidgets.QHBoxLayout()
hlay2.addWidget(QtWidgets.QPushButton('Set Faces'))
hlay2.addWidget(QtWidgets.QPushButton('FacePose'))
hlay2.addWidget(QtWidgets.QPushButton('Gender'))
hlay2.addWidget(QtWidgets.QPushButton('Age'))
hlay2.addWidget(QtWidgets.QPushButton('Recognize'))
layout = QtWidgets.QVBoxLayout()
layout.addLayout(hlay1)
layout.addLayout(hlay2)
self.horizontalGroupBox.setLayout(layout)

PyQT - Add a boxlayout to a boxlayout

I would like to create a Horizontal BoxLayout and put inside a vertical BoxLayout.
I came up with the following code that does not work: my window shows up, but the BoxLayouts are not there (at least not visible):
self.setTabText(0, "Folders")
layout1 = QHBoxLayout()
l = QLabel();
l.setPixmap(QPixmap("pics/file.png"))
text = QTextEdit("Un fichier")
element = QVBoxLayout()
element.addChildWidget(l)
element.addChildWidget(text)
layout1.addChildWidget(element)
self.tab1.setLayout(layout1)
How can I make this work ?

You need to add some widget to the layout, such the widget itself can have another layout.
import sys
from PyQt4 import QtGui , QtCore
class Viewer(QtGui.QMainWindow):
def __init__(self, parent = None):
super(Viewer, self).__init__(parent)
self.centralwidget = QtGui.QWidget(self)
self.setCentralWidget(self.centralwidget)
layout1 = QtGui.QHBoxLayout()
self.centralwidget.setLayout(layout1)
l = QtGui.QLabel()
l.setPixmap(QtGui.QPixmap("folder.png"))
text = QtGui.QTextEdit("Un fichier")
element = QtGui.QWidget(self)
layout2 = QtGui.QVBoxLayout()
element.setLayout(layout2)
layout2.addWidget(l)
layout2.addWidget(text)
layout1.addWidget(element)
app = QtGui.QApplication(sys.argv)
viewer = Viewer()
viewer.show()
sys.exit(app.exec_())

For me, I usually assign another widget for the inner layout and it works.
self.setTabText(0, "Folders")
layout1 = QHBoxLayout()
l = QLabel();
l.setPixmap(QPixmap("pics/file.png"))
text = QTextEdit("Un fichier")
element = QVBoxLayout()
#widget = QWidget()
#widget.setLayout(element)
element.addWidget(l)
element.addWidget(text)
#layout1.addWidget(widget)
self.tab1.setLayout(layout1)
codes beginning with # are modified or added.

Dynamically resize buttons in a Pyside GUI and manage Layouts

I have read the documentation on the following matter, but QtGui is so overwhelmingly complex I might have missed the piece.
I have created a GUI, in which it consists of a menubar two QLabel and two QLineEdit and a button. The issue I am facing in my code is the button is getting placed on an absolute co-ordinate position and does not dynamically resize according to the window resizing and the QLineEdit box is displayed with a certain horizontal shift from the QLabel. But I would like to place it next to the QLabel. I have attached a pic of the GUI which I am getting. Here is my code
import sys
from PySide.QtGui import *
from PySide.QtCore import *
class guiwindow(QMainWindow):
def __init__(self):
super(guiwindow,self).__init__()
self.central = QWidget()
self.setCentralWidget(self.central)
self.setGeometry(400, 100, 1200, 800)
self.setWindowTitle(" Automatic Selector")
self.menubar()
self.makebuttons()
self.angles()
def menubar(self):
textEdit = QWidget()
self.setCentralWidget(textEdit)
exitAction = QAction('Exit', self)
exitAction.setShortcut('Ctrl+Q')
exitAction.setStatusTip('Exit application')
exitAction.triggered.connect(self.close)
self.statusBar()
menubar = self.menuBar()
fileMenu = menubar.addMenu('&File')
fileMenu.addAction(exitAction)
def makebuttons(self):
# self.central_widget = QWidget()
# self.setCentralWidget(self.central_widget)
button = QPushButton("Test", self)
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(button)
# self.central_widget.setLayout(hbox)
self.show()
def angles(self):
self.window = QWidget()
self.setCentralWidget(self.window)
self.Rotation = QLabel('Rotation:')
self.Tilt = QLabel('Tilt:')
self.RotationEdit = QLineEdit()
self.RotationEdit.setFixedWidth(55)
self.TiltEdit = QLineEdit()
self.TiltEdit.setFixedWidth(55)
self.grid = QGridLayout()
self.grid.addWidget(self.Rotation,1,0,Qt.AlignLeft)
self.grid.addWidget(self.RotationEdit,1,1,Qt.AlignLeft)
self.grid.addWidget(self.Tilt,2,0,Qt.AlignLeft)
self.grid.addWidget(self.TiltEdit, 2,1,Qt.AlignLeft)
self.window.setLayout(self.grid)
def main():
app = QApplication(sys.argv)
ex = guiwindow()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
And if I take out
self.window = QWidget()
self.setCentralWidget(self.window)
from the def angles(self): the Rotation angle and the tilt angle does not appear on the GUI. Why does this