M
Michael Staggs
I'm learning Python and I have a problem. I've asked the question everywhere
and no one helps me, so I'm hoping someone here will. I am making a program
that shows album covers and you click on the album cover in the top window. In
the bottom window, the list of songs appear and you can click the individual
song to play it. It's going to be a media player for children. I'm thinking
I'll be able to use a dict and have the album as the key and the list of songs
as the value to accomplish this.
Right now, I'm just using my picture directory to try and get the basic layout
right. I designed a form in QT Designer: http://i.imgur.com/Wrp1zHW.png
Here is my gui file I got from running pyuic4 on the ui file:
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'window.ui'
#
# Created by: PyQt4 UI code generator 4.9.6
#
# WARNING! All changes made in this file will be lost!
from PyQt4 import QtCore, QtGui
try:
_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
def _fromUtf8(s):
return s
try:
_encoding = QtGui.QApplication.UnicodeUTF8
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig,
_encoding)
except AttributeError:
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig)
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName(_fromUtf8("MainWindow"))
MainWindow.resize(800, 600)
self.centralwidget = QtGui.QWidget(MainWindow)
self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
self.tableWidget = QtGui.QTableWidget(self.centralwidget)
self.tableWidget.setGeometry(QtCore.QRect(70, 20, 661, 381))
self.tableWidget.setObjectName(_fromUtf8("tableWidget"))
self.tableWidget.setColumnCount(0)
self.tableWidget.setRowCount(0)
self.listWidget = QtGui.QListWidget(self.centralwidget)
self.listWidget.setGeometry(QtCore.QRect(70, 400, 661, 181))
self.listWidget.setObjectName(_fromUtf8("listWidget"))
MainWindow.setCentralWidget(self.centralwidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow",
None))
Now, according to websites I read, I should just have to add the following to
my program to get it to use the form:
from window import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None, **kwargs):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
and here is my program:
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from window import Ui_MainWindow
THUMBNAIL_SIZE = 128
SPACING = 10
IMAGES_PER_ROW = 5
class TableWidget(QTableWidget):
def __init__(self, parent=None, **kwargs):
QTableWidget.__init__(self, parent, **kwargs)
self.setIconSize(QSize(128,128))
self.setColumnCount(IMAGES_PER_ROW)
self.setGridStyle(Qt.NoPen)
# Set the default column width and hide the header
self.verticalHeader().setDefaultSectionSize(THUMBNAIL_SIZE+SPACING)
self.verticalHeader().hide()
# Set the default row height and hide the header
self.horizontalHeader().setDefaultSectionSize(THUMBNAIL_SIZE+SPACING)
self.horizontalHeader().hide()
# Set the table width to show all images without horizontal scrolling
self.setMinimumWidth((THUMBNAIL_SIZE+SPACING)*IMAGES_PER_ROW+(SPACING*2))
def addPicture(self, row, col, picturePath):
item=QTableWidgetItem()
# Scale the image by either height or width and then 'crop' it to the
# desired size, this prevents distortion of the image.
p=QPixmap(picturePath)
if p.height()>p.width(): p=p.scaledToWidth(THUMBNAIL_SIZE)
else: p=p.scaledToHeight(THUMBNAIL_SIZE)
p=p.copy(0,0,THUMBNAIL_SIZE,THUMBNAIL_SIZE)
item.setIcon(QIcon(p))
self.setItem(row,col,item)
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None, **kwargs):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
centralWidget=QWidget(self)
l=QVBoxLayout(centralWidget)
self.tableWidget=TableWidget(self)
l.addWidget(self.tableWidget)
self.setCentralWidget(centralWidget)
picturesPath=QDesktopServices.storageLocation(QDesktopServices.PicturesLocation)
pictureDir=QDir(picturesPath)
pictures=pictureDir.entryList(['*.jpg','*.png','*.gif'])
rowCount=len(pictures)//IMAGES_PER_ROW
if len(pictures)%IMAGES_PER_ROW: rowCount+=1
self.tableWidget.setRowCount(rowCount)
row=-1
for i,picture in enumerate(pictures):
col=i%IMAGES_PER_ROW
if not col: row+=1
self.tableWidget.addPicture(row, col,
pictureDir.absoluteFilePath(picture))
if __name__=="__main__":
from sys import argv, exit
a=QApplication(argv)
m=MainWindow()
m.show()
m.raise_()
exit(a.exec_())
But, it doesn't work. It ignores the form and the two windows go from side to
side in the frame. When I add buttons, it adds them on TOP of those two
windows instead of beside them in the empty space....because there is no empty
space.
http://i.imgur.com/ZQfsMDa.png
Please tell me what I'm doing wrong.
and no one helps me, so I'm hoping someone here will. I am making a program
that shows album covers and you click on the album cover in the top window. In
the bottom window, the list of songs appear and you can click the individual
song to play it. It's going to be a media player for children. I'm thinking
I'll be able to use a dict and have the album as the key and the list of songs
as the value to accomplish this.
Right now, I'm just using my picture directory to try and get the basic layout
right. I designed a form in QT Designer: http://i.imgur.com/Wrp1zHW.png
Here is my gui file I got from running pyuic4 on the ui file:
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'window.ui'
#
# Created by: PyQt4 UI code generator 4.9.6
#
# WARNING! All changes made in this file will be lost!
from PyQt4 import QtCore, QtGui
try:
_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
def _fromUtf8(s):
return s
try:
_encoding = QtGui.QApplication.UnicodeUTF8
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig,
_encoding)
except AttributeError:
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig)
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName(_fromUtf8("MainWindow"))
MainWindow.resize(800, 600)
self.centralwidget = QtGui.QWidget(MainWindow)
self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
self.tableWidget = QtGui.QTableWidget(self.centralwidget)
self.tableWidget.setGeometry(QtCore.QRect(70, 20, 661, 381))
self.tableWidget.setObjectName(_fromUtf8("tableWidget"))
self.tableWidget.setColumnCount(0)
self.tableWidget.setRowCount(0)
self.listWidget = QtGui.QListWidget(self.centralwidget)
self.listWidget.setGeometry(QtCore.QRect(70, 400, 661, 181))
self.listWidget.setObjectName(_fromUtf8("listWidget"))
MainWindow.setCentralWidget(self.centralwidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow",
None))
Now, according to websites I read, I should just have to add the following to
my program to get it to use the form:
from window import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None, **kwargs):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
and here is my program:
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from window import Ui_MainWindow
THUMBNAIL_SIZE = 128
SPACING = 10
IMAGES_PER_ROW = 5
class TableWidget(QTableWidget):
def __init__(self, parent=None, **kwargs):
QTableWidget.__init__(self, parent, **kwargs)
self.setIconSize(QSize(128,128))
self.setColumnCount(IMAGES_PER_ROW)
self.setGridStyle(Qt.NoPen)
# Set the default column width and hide the header
self.verticalHeader().setDefaultSectionSize(THUMBNAIL_SIZE+SPACING)
self.verticalHeader().hide()
# Set the default row height and hide the header
self.horizontalHeader().setDefaultSectionSize(THUMBNAIL_SIZE+SPACING)
self.horizontalHeader().hide()
# Set the table width to show all images without horizontal scrolling
self.setMinimumWidth((THUMBNAIL_SIZE+SPACING)*IMAGES_PER_ROW+(SPACING*2))
def addPicture(self, row, col, picturePath):
item=QTableWidgetItem()
# Scale the image by either height or width and then 'crop' it to the
# desired size, this prevents distortion of the image.
p=QPixmap(picturePath)
if p.height()>p.width(): p=p.scaledToWidth(THUMBNAIL_SIZE)
else: p=p.scaledToHeight(THUMBNAIL_SIZE)
p=p.copy(0,0,THUMBNAIL_SIZE,THUMBNAIL_SIZE)
item.setIcon(QIcon(p))
self.setItem(row,col,item)
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None, **kwargs):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
centralWidget=QWidget(self)
l=QVBoxLayout(centralWidget)
self.tableWidget=TableWidget(self)
l.addWidget(self.tableWidget)
self.setCentralWidget(centralWidget)
picturesPath=QDesktopServices.storageLocation(QDesktopServices.PicturesLocation)
pictureDir=QDir(picturesPath)
pictures=pictureDir.entryList(['*.jpg','*.png','*.gif'])
rowCount=len(pictures)//IMAGES_PER_ROW
if len(pictures)%IMAGES_PER_ROW: rowCount+=1
self.tableWidget.setRowCount(rowCount)
row=-1
for i,picture in enumerate(pictures):
col=i%IMAGES_PER_ROW
if not col: row+=1
self.tableWidget.addPicture(row, col,
pictureDir.absoluteFilePath(picture))
if __name__=="__main__":
from sys import argv, exit
a=QApplication(argv)
m=MainWindow()
m.show()
m.raise_()
exit(a.exec_())
But, it doesn't work. It ignores the form and the two windows go from side to
side in the frame. When I add buttons, it adds them on TOP of those two
windows instead of beside them in the empty space....because there is no empty
space.
http://i.imgur.com/ZQfsMDa.png
Please tell me what I'm doing wrong.