Using QT Designer with PyQT

[tannhaus]

I have 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_())

@

and I have my gui file I got by designing the form using QT Designer then running pyuic4:

@# -- 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))

@

According to the websites I've read, I've done what needs to be done to link the two. I added

@from window import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def init(self, parent=None, **kwargs):
super(MainWindow, self).init(parent)
self.setupUi(self)
@

I thought the tablewidget from my program would be mapped onto my window.py form I created. However, it does no such thing. It totally ignores the form except for setting the title and geometry of the main window. Then, it acts like I don't even have a window.py

What am I doing wrong? Right now, I'm using my pictures directory for a working example. Eventually, I want to display album covers in the top window, click on the album cover, and display the songs in the bottom window. I thought about using a dict where the album is the key and the list of songs is the value in order to do that. However, it's totally ignoring my form.

[tannhaus]

Here is a picture of the form as it should be:

http://i.imgur.com/Wrp1zHW.png

The program should, at this point, be displaying all my pictures in that top window. However, this is what happens when I run it:

http://i.imgur.com/ZQfsMDa.png

[tannhaus]

I have made my program work by copying bits over into the program and not using the window.py at all:

http://i.imgur.com/x7VoIbd.png

However, the boxes go from side to side completely and don't have the extra space on the sides I wanted and, when I change the gui, it won't be so simple to change it. I'd like to learn how to incorporate the file properly.

@from PyQt4.QtCore import *
from PyQt4.QtGui import *

THUMBNAIL_SIZE = 128
SPACING = 10
IMAGES_PER_ROW = 5

class MainWindow(QMainWindow):
def init(self, parent=None, **kwargs):
QMainWindow.init(self, parent, **kwargs)

    self.resize(800,600)
    self.setWindowTitle("Image Gallery")
    
    centralWidget=QWidget(self)
    l=QVBoxLayout(centralWidget)
 
    self.tableWidget=TableWidget(self)
    l.addWidget(self.tableWidget)
    
    self.listWidget=ListWidget(self)
    l.addWidget(self.listWidget)
 
    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))      

class ListWidget(QListWidget):
def init(self, parent=MainWindow, **kwargs):
QListWidget.init(self, parent, **kwargs)

    self.setGeometry(QRect(70, 400, 661, 181))

class TableWidget(QTableWidget):
def init(self, parent=MainWindow, **kwargs):
QTableWidget.init(self, parent, **kwargs)

    self.setIconSize(QSize(128,128))
    self.setColumnCount(IMAGES_PER_ROW)
    self.setGridStyle(Qt.NoPen)
    self.setGeometry(QRect(70, 20, 661, 381))   
    # 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+(SPACING2))

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)

if name=="main":
from sys import argv, exit

a=QApplication(argv)
m=MainWindow()
m.show()
m.raise_()
exit(a.exec_())

@

[tannhaus]

Working further with it and adding pushbuttons, the two boxes ignoring their geometry means the pushbuttons get added ON TOP OF the boxes instead of beside them.

http://i.imgur.com/19ZMm7y.png