Newbie help - display album art with PyQT

tannhaus

I decided to start a project to create a multimedia player for children. I spent a couple of weeks learning Python. Now, I don't know where to even start with PyQT/QT.

Since it is for children, I want an album view similar to this one: http://boutnew.ru/wp-content/uploads/2013/07/Rhythmbox-1024x660.jpg but on the left only an eye for videos and an ear for music.

That way, children can see the album covers, select the album, then underneath that view it will show the songs on the album, but the first song will automatically start playing.

I want the same thing for videos - thumbnails created using kffmpegthumbnailer... click on the thumbnail and play the video fullscreen with only an X and a || at the bottom right corner to exit or pause.

I don't even know where to begin learning how to do this. I don't see any examples that are anything similar to what I'm trying to do to learn from. QT books and tutorials seem to want to teach me everything BUT what I'm trying to do.

Can someone please help?

SGaist

Hi and welcome to devnet,

Are you thinking of something like the "media player example":http://qt-project.org/doc/qt-4.8/demos-qmediaplayer.html with a customized interface ?

tannhaus

Well, I'm going to write it in python, but I plan on it playing videos fullscreen and music. But, just trying to find out how to do the GUI right now... I think qlistview could do it?

SGaist

You can still use the example, you only have to translate the C/C++ calls to Python. With a bit of practice it becomes easy.

Your example image results in a 404 error so I cannot really comment on the widgets to use

tannhaus

If you search "rhythmbox album cover art" in google images, it will show up first

!http://i.stack.imgur.com/LAJvZ.jpg(Here's another)!

SGaist

Then yes, you can use a QListView.

The Item Views Puzzle example might give you some ideas for that

tannhaus

Thank you very much.

I used a picture directory for an example directory and was able to do what I wanted with the pictures there....putting them in a gridview in qlistview

SGaist

You're welcome !

Great !

Is there something else you need ?

tannhaus

I'm making progress. I've got my GUI working somewhat....

What I want to do is to have pictures of 128x128 show up in the top window and have it be scrollable...so I can see more pictures and click on the one I want. That will cause the picture...which is a key in a dict, to send its value...which is a list, to the bottom window and list a group of mp3s. I'm just using some sample pictures now. The problem is, I get this instead...with all my pictures scrunched up in the size of the window:

!http://postimg.org/image/novxxuspt/(pic)!

This is my 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)
MainWindow.setAutoFillBackground(False)
self.centralwidget = QtGui.QWidget(MainWindow)
self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
self.scrollArea = QtGui.QScrollArea(self.centralwidget)
self.scrollArea.setGeometry(QtCore.QRect(60, 30, 671, 391))
self.scrollArea.setWidgetResizable(True)
self.scrollArea.setObjectName(_fromUtf8("scrollArea"))
self.scrollAreaWidgetContents = QtGui.QWidget()
self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 665, 385))
self.scrollAreaWidgetContents.setObjectName(_fromUtf8("scrollAreaWidgetContents"))
self.gridLayoutWidget = QtGui.QWidget(self.scrollAreaWidgetContents)
self.gridLayoutWidget.setGeometry(QtCore.QRect(-1, -1, 671, 391))
self.gridLayoutWidget.setObjectName(_fromUtf8("gridLayoutWidget"))
self.gridLayout = QtGui.QGridLayout(self.gridLayoutWidget)
self.gridLayout.setMargin(0)
self.gridLayout.setObjectName(_fromUtf8("gridLayout"))
self.scrollArea.setWidget(self.scrollAreaWidgetContents)
self.scrollArea_2 = QtGui.QScrollArea(self.centralwidget)
self.scrollArea_2.setGeometry(QtCore.QRect(60, 420, 671, 171))
self.scrollArea_2.setWidgetResizable(True)
self.scrollArea_2.setObjectName(_fromUtf8("scrollArea_2"))
self.scrollAreaWidgetContents_2 = QtGui.QWidget()
self.scrollAreaWidgetContents_2.setGeometry(QtCore.QRect(0, 0, 665, 165))
self.scrollAreaWidgetContents_2.setObjectName(_fromUtf8("scrollAreaWidgetContents_2"))
self.listView = QtGui.QListView(self.scrollAreaWidgetContents_2)
self.listView.setGeometry(QtCore.QRect(-10, -9, 681, 201))
self.listView.setObjectName(_fromUtf8("listView"))
self.scrollArea_2.setWidget(self.scrollAreaWidgetContents_2)
MainWindow.setCentralWidget(self.centralwidget)

    self.retranslateUi(MainWindow)
    QtCore.QMetaObject.connectSlotsByName(MainWindow)

def retranslateUi(self, MainWindow):
    MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))

@

and this is my main.py

@#!/usr/bin/env python
import os
import glob
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from windowUi import Ui_MainWindow

pathname = '/home/tannhaus/Pictures/'

size = QSize(128,128)
imagesPerRow = 5
piclist = list()

for infile in glob.glob(os.path.join(pathname, '*.jpg')):
piclist.append(infile)

class Main(QMainWindow):
def init(self):
QMainWindow.init(self)

    self.ui=Ui_MainWindow()
    self.ui.setupUi(self)
    row = col = 0
    for pic in piclist: 
        label = QLabel(self)
        pixmap = QPixmap(pic)
        pixmap = pixmap.scaled(size)
        label.setPixmap(pixmap)
        self.ui.gridLayout.addWidget(label,row, col)
        col +=1
        if col % imagesPerRow == 0:
            row += 1
            col = 0

"""
class ImageGallery(QDialog):

def __init__(self, parent=None):
    super(QDialog, self).__init__(parent)
    self.form_layout= QFormLayout()
    self.resize(600,600)
    self.setWindowTitle("Image Gallery")
    self.setGeometry(250, 200, 350, 400)
    
    
    widget = QWidget()
    widgetLayout = QGridLayout()
    widget.setLayout(widgetLayout)

    row = col = 0
    widget.setLayout(widgetLayout)
    widget.layout().setSpacing(40)
    
    scrollArea = QScrollArea()
    scrollArea.setWidget(widget)
    
    dialogLayout = QGridLayout()
    dialogLayout.addWidget(scrollArea)

"""

self.setLayout(dialogLayout)

####################################################################
def main():
app = QApplication(sys.argv)
window = Main()
window.show()

ig = ImageGallery()

ig.show()

sys.exit(app.exec_())

####################################################################
if name == "main":
main()
@

How do I get it to show the full size pictures within that gui window, but with a scrollbar so I can scroll down and see the rest of them? I don't want them to fit as is.

tannhaus

http://postimg.org/image/novxxuspt/

jazzycamel

I think the whole think would be made easier if you used a table to display the images as you can set fixed width columns and fixed height rows and it will take care of the layout and scrolling for you as and when necessary. It will also emits signals when you click on the images and show them as highlighted. I'm afraid I don't use the UI file method for designing my GUI's but the following is a simple, runnable example of what I'm proposing:

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

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):
def init(self, parent=None, **kwargs):
QMainWindow.init(self, parent, **kwargs)

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

@

Hope this helps ;o)

tannhaus

Thank you. That looks amazing. I will try fitting that into the GUI.

tannhaus

Noticed it was off-topic.

tannhaus

will make a new topic.

Thanks for everyone's help in this instance. It was solved.