- QHBoxLayout
- QVBoxLayout
- QListWidget
- QDial
- QPushButton
Our current script should look something like this now
# Do the imports
import sys
from PyQt5.QtWidgets import (QApplication, QMainWindow, QWidget, QGridLayout, QLabel,
QFrame, QHBoxLayout, QPushButton, QListWidget, QVBoxLayout, \
QDial)
from PyQt5.QtCore import Qt
class Modal:
''' Class will handle data manipulations '''
pass
class Window(QMainWindow):
''' Class will handle the display '''
def __init__(self):
QMainWindow.__init__(self)
self.setWindowTitle('My Music Player')
# Sets a fixed size for the window
self.setFixedSize(1280,720)
# Create a main container - will hold all other widgets and layouts
container = QGridLayout()
# Create a header label
header = QLabel('My Music Player')
header.setFrameShape(QFrame.Shape.Box)
header.setFrameShadow(QFrame.Shadow.Raised)
header.setLineWidth(3)
# Just like in css - set color and background color and the like. Is a bit limited.
header.setStyleSheet('font-size: 48px; color: gold; \
font-weight: bold; font-family: comic sans ms; \
background-color: seagreen; padding: 10px;')
# Aligning the text to the center
header.setAlignment(Qt.AlignmentFlag.AlignCenter)
# Set some common font styles
common_style = ''' font-weight: bold; font-size: 10pt; padding: 3px; '''
# Status Bars
self.status = QLabel('Status: Now Stopped')
self.status.setStyleSheet(common_style)
self.status.setFrameShape(QFrame.Shape.Box)
self.status.setFrameShadow(QFrame.Shadow.Sunken)
self.track = QLabel('Track: ')
self.track.setStyleSheet(common_style)
self.track.setFrameShape(QFrame.Shape.Box)
self.track.setFrameShadow(QFrame.Shadow.Sunken)
# To Style Buttons
btn_style = ''' QPushButton{background-color: skyblue;}
QPushButton:hover{background-color: lightskyblue; \
color: dodgetblue; font-weight: bold;}'''
file_button = QPushButton('Get Audio')
file_button.setStyleSheet(btn_style)
file_button.setCursor(Qt.CursorShape.PointingHandCursor)
clear_button = QPushButton('Clear List')
clear_button.setStyleSheet(btn_style)
clear_button.setCursor(Qt.CursorShape.PointingHandCursor)
# Container to hold top button
box1 = QHBoxLayout()
box1.addWidget(file_button)
box1.addWidget(clear_button)
# Info Containers
info_container = QGridLayout()
# Using a frame to get a border around the info_container
frame = QFrame()
frame.setFrameShape(QFrame.Shape.Box)
frame.setFrameShadow(QFrame.Shadow.Sunken)
frame.setLayout(info_container)
# Artist Labels Static
artist = QLabel('Artist:')
album = QLabel('Album:')
_track = QLabel('Track:')
release = QLabel('Album Release:')
genre = QLabel('Genre:')
# Empty labels used as place holders. Text will show when a track is playing
self.artist = QLabel()
self.album = QLabel()
self._track = QLabel()
self.release = QLabel()
self.genre = QLabel()
self.art = QLabel()
# Numers relate to a grid - row, column, occupy how many rows, how many columns
info_container.addWidget(artist, 0, 0, 1, 1)
info_container.addWidget(self.artist, 0, 1, 1, 1)
info_container.addWidget(album, 1, 0, 1, 1)
info_container.addWidget(self.album, 1, 1, 1, 1)
info_container.addWidget(_track, 2, 0, 1, 1)
info_container.addWidget(self._track, 2, 1, 1, 1)
info_container.addWidget(release, 3, 0, 1, 1)
info_container.addWidget(self.release, 3, 1, 1, 1)
info_container.addWidget(genre, 4, 0, 1, 1)
info_container.addWidget(self.genre, 4, 1, 1, 1)
info_container.addWidget(self.art, 5, 0, 1, 2)
# Create a listbox to hold tracks
self.music_list = QListWidget()
# Container for buttons stop, play, next, back, and exit
btn_container = QHBoxLayout()
self.play = QPushButton('Play')
self.play.setStyleSheet(btn_style)
self.play.setCursor(Qt.CursorShape.PointingHandCursor)
self.prev = QPushButton('Prev')
self.prev.setStyleSheet(btn_style)
self.prev.setCursor(Qt.CursorShape.PointingHandCursor)
self._next = QPushButton('Next')
self._next.setStyleSheet(btn_style)
self._next.setCursor(Qt.CursorShape.PointingHandCursor)
self.stop = QPushButton('Stop')
self.stop.setCursor(Qt.CursorShape.PointingHandCursor)
self.stop.setStyleSheet(btn_style)
self._exit = QPushButton('Exit')
self._exit.setCursor(Qt.CursorShape.PointingHandCursor)
self._exit.setStyleSheet('QPushButton{background-color: firebrick;} \
QPushButton:hover{background-color: red; color: white; \
font-weight: bold;}')
# Add buttons to button container
btn_container.addWidget(self.play)
btn_container.addWidget(self.prev)
btn_container.addWidget(self._next)
btn_container.addWidget(self.stop)
btn_container.addWidget(self._exit)
# Placeholder
holder = QFrame()
holder.setFrameShape(QFrame.Shape.Box)
holder.setFrameShadow(QFrame.Shadow.Sunken)
# Volume Controller - Creating the box give the light gray square
dialbox = QVBoxLayout()
dialframe = QFrame()
dialframe.setFrameShape(QFrame.Shape.Box)
dialframe.setFrameShadow(QFrame.Shadow.Sunken)
dialframe.setLayout(dialbox)
# QDial creates the object, setRange - the range for volume
# setNotchesVisible - the ticks around the dial
# setSliderPosition sets the default volume
# setValues is used for passing variables
self.dial = QDial()
self.dial.setRange(0, 100)
self.dial.setNotchesVisible(True)
self.dial.setSliderPosition(50)
self.dial.setValue(50)
# The volume label in with the dial control
dialbox.addWidget(QLabel('Volume'))
dialbox.addWidget(self.dial)
# section for adding widgets to main container
container.addWidget(header, 0, 0, 1, 3, Qt.AlignmentFlag.AlignTop)
container.addWidget(self.status, 1, 0, 1, 1)
container.addWidget(self.track, 1, 1, 1, 1)
container.addLayout(box1, 1, 2, 1, 1)
container.addWidget(frame, 2, 0, 2, 1)
container.addWidget(self.music_list, 2, 1, 1, 2)
container.addLayout(btn_container, 3, 1, 1, 2)
container.addWidget(holder, 4, 0, 1, 2)
container.addWidget(dialframe, 4, 2, 1, 1)
# Sets main layout
widget = QWidget()
widget.setLayout(container)
self.setCentralWidget(widget)
class Controller:
def __init__(self, modal, window):
self.modal = modal
self.window = window
if __name__ == '__main__':
app = QApplication([])
controller = Controller(Modal(), Window())
controller.window.show()
sys.exit(app.exec())