Adding a simple clock to a GUI

Question

I have some code for a very generic/blank GUI with some labels and pushbuttons and an LCD widget. I also have some code for a separate window which just uses an LCD widget to display the time. My question is how do I insert to code for the clock into the generic GUI code to make that LCD widget display the time?

from PyQt5.QtCore import QTime, QTimer
from PyQt5.QtWidgets import QApplication, QLCDNumber
class DigitalClock(QLCDNumber):

    def __init__(self, parent=None):
        super(DigitalClock, self).__init__(parent)
        self.setSegmentStyle(QLCDNumber.Filled)
        timer = QTimer(self)
        timer.timeout.connect(self.showTime)
        timer.start(1000)
        self.showTime()
        self.setWindowTitle("Digital Clock")
        self.resize(150, 60)

    def showTime(self):
        time = QTime.currentTime()
        text = time.toString('hh:mm')
        if (time.second() % 2) == 0:
            text = text[:2] + ' ' + text[3:]
        self.display(text)

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    clock = DigitalClock()
    clock.show()
    sys.exit(app.exec_())

That's the code for the simple clock and I want to insert that into the following to make the LCD widget display the time like this one does:

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_mainWindow(object):
    def setupUi(self, mainWindow):
        mainWindow.setObjectName("mainWindow")
        mainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(mainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.Clock = QtWidgets.QWidget(self.centralwidget)
        self.Clock.setGeometry(QtCore.QRect(60, 420, 120, 80))
        self.Clock.setObjectName("Clock")
        self.DigitalClock = QtWidgets.QLCDNumber(self.centralwidget)
        self.DigitalClock.setGeometry(QtCore.QRect(110, 190, 64, 23))
        self.DigitalClock.setDigitCount(8)
        self.DigitalClock.setObjectName("DigitalClock")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(100, 60, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(100, 110, 75, 23))
        self.pushButton_2.setObjectName("pushButton_2")
        self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_3.setGeometry(QtCore.QRect(100, 150, 75, 23))
        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_4.setGeometry(QtCore.QRect(230, 60, 75, 23))
        self.pushButton_4.setObjectName("pushButton_4")
        self.pushButton_5 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_5.setGeometry(QtCore.QRect(220, 100, 75, 23))
        self.pushButton_5.setObjectName("pushButton_5")
        self.pushButton_6 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_6.setGeometry(QtCore.QRect(230, 150, 75, 23))
        self.pushButton_6.setObjectName("pushButton_6")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(20, 60, 47, 13))
        self.label.setObjectName("label")
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(20, 120, 47, 13))
        self.label_2.setObjectName("label_2")
        self.label_3 = QtWidgets.QLabel(self.centralwidget)
        self.label_3.setGeometry(QtCore.QRect(20, 160, 47, 13))
        self.label_3.setObjectName("label_3")
        mainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(mainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        mainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(mainWindow)
        self.statusbar.setObjectName("statusbar")
        mainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, mainWindow):
        _translate = QtCore.QCoreApplication.translate
        mainWindow.setWindowTitle(_translate("mainWindow", "Sim Monitor"))
        self.pushButton.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_2.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_3.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_4.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_5.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_6.setText(_translate("mainWindow", "PushButton"))
        self.label.setText(_translate("mainWindow", "TextLabel"))
        self.label_2.setText(_translate("mainWindow", "TextLabel"))
        self.label_3.setText(_translate("mainWindow", "TextLabel"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    mainWindow = QtWidgets.QMainWindow()
    ui = Ui_mainWindow()
    ui.setupUi(mainWindow)
    mainWindow.show()
    sys.exit(app.exec_())

if you want the DigitalClock(that you yourself created) to be used in main window then in QtDesigner dont add QLCD yourself — Nimish Bansal, Jan 09 '18 at 13:22

eyllanesc · Accepted Answer · 2019-05-29T17:22:02.683

Simple solution:

Assuming that the first file is called DigitalClock.py and the second main.py then it is only necessary to add the import to main.py and change the line that the QLCDNumber creates:

main.py

from DigitalClock import DigitalClock
# ...
self.DigitalClock = DigitalClock(self.centralwidget) # QtWidgets.QLCDNumber(self.centralwidget)

Long solution:

Promote the QLCDNumber to use the DigitalClock, you could take the guide of this other answer where you would exchange QVideoWidget with DigitalClock and PyQt5.QtMultimediaWidgets with DigitalClock.

The other way is to create a widget plugin so that it can be used directly in Qt Designer.

Worked a treat, appreciate it! – Chris Jan 09 '18 at 14:28 — Chris, Jan 09 '18 at 14:28

Nimish Bansal · Answer 2 · 2018-01-09T14:14:54.150

DigitalClockFile.py

from PyQt5.QtCore import QTime, QTimer
from PyQt5.QtWidgets import QApplication, QLCDNumber

class DigitalClock(QLCDNumber):

    def __init__(self, parent=None):
        super(DigitalClock, self).__init__(parent)
        self.setSegmentStyle(QLCDNumber.Filled)
        self.setDigitCount(10)
        timer = QTimer(self)
        timer.timeout.connect(self.showTime)
        timer.start(1000)
        self.showTime()
        self.setWindowTitle("Digital Clock")
        self.resize(150, 60)

    def showTime(self):
        time = QTime.currentTime()
        text = time.toString('hh:mm:ss')
        if (time.second() % 2) == 0:
            text = text[:2] + ' ' + text[3:5]+' '+text[6:]
        self.display(text)

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    clock = DigitalClock()
    clock.show()
    sys.exit(app.exec_())

generatedUI.py (from QtDesigner)

from PyQt5 import QtCore, QtGui, QtWidgets
import sys

class Ui_mainWindow(object):
    def setupUi(self, mainWindow):
        mainWindow.setObjectName("mainWindow")
        mainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(mainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.Clock = QtWidgets.QWidget(self.centralwidget)
        self.Clock.setGeometry(QtCore.QRect(60, 420, 120, 80))
        self.Clock.setObjectName("Clock")

#       Remove DigitalClock FROM YOUR UI DESIGN,Since you already implemented your Digital Clock
#       I would suggest regenerating .py from .ui after deleting digitalClock
#       instead of commenting uot like me

#        self.DigitalClock = QtWidgets.QLCDNumber(self.centralwidget)
#        self.DigitalClock.setGeometry(QtCore.QRect(110, 190, 64, 23))
#        self.DigitalClock.setDigitCount(8)
#        self.DigitalClock.setObjectName("DigitalClock")


        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(100, 60, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(100, 110, 75, 23))
        self.pushButton_2.setObjectName("pushButton_2")
        self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_3.setGeometry(QtCore.QRect(100, 150, 75, 23))
        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_4.setGeometry(QtCore.QRect(230, 60, 75, 23))
        self.pushButton_4.setObjectName("pushButton_4")
        self.pushButton_5 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_5.setGeometry(QtCore.QRect(220, 100, 75, 23))
        self.pushButton_5.setObjectName("pushButton_5")
        self.pushButton_6 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_6.setGeometry(QtCore.QRect(230, 150, 75, 23))
        self.pushButton_6.setObjectName("pushButton_6")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(20, 60, 47, 13))
        self.label.setObjectName("label")
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(20, 120, 47, 13))
        self.label_2.setObjectName("label_2")
        self.label_3 = QtWidgets.QLabel(self.centralwidget)
        self.label_3.setGeometry(QtCore.QRect(20, 160, 47, 13))
        self.label_3.setObjectName("label_3")
        mainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(mainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        mainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(mainWindow)
        self.statusbar.setObjectName("statusbar")
        mainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, mainWindow):
        _translate = QtCore.QCoreApplication.translate
        mainWindow.setWindowTitle(_translate("mainWindow", "Sim Monitor"))
        self.pushButton.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_2.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_3.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_4.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_5.setText(_translate("mainWindow", "PushButton"))
        self.pushButton_6.setText(_translate("mainWindow", "PushButton"))
        self.label.setText(_translate("mainWindow", "TextLabel"))
        self.label_2.setText(_translate("mainWindow", "TextLabel"))
        self.label_3.setText(_translate("mainWindow", "TextLabel"))

if  __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    mainWindow = QtWidgets.QMainWindow()
    ui = Ui_mainWindow()
    ui.setupUi(mainWindow)
    mainWindow.show()
    sys.exit(app.exec_())

main.py

from DigitalClockFile import DigitalClock
from generatedUI import Ui_mainWindow
from PyQt5.QtCore import QTime, QTimer
from PyQt5.QtWidgets import QApplication, QLCDNumber
from PyQt5 import QtWidgets,QtCore


class transformedUI(Ui_mainWindow):
    def __init__(self):
        super(transformedUI,self).__init__()
    def setupUi(self,mainWindow):
        super(transformedUI,self).setupUi(mainWindow)
        self.DigitalClock=DigitalClock(self.centralwidget)
        self.DigitalClock.setGeometry(QtCore.QRect(110, 190, 200, 100))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    mainWindow = QtWidgets.QMainWindow()
    ui = transformedUI()
    ui.setupUi(mainWindow)
    mainWindow.show()
    sys.exit(app.exec_())

Add all the three files in the single directory.Since you already implement DigitalClock dont add the clock in thi UI just inherit class generated by QtDEsigner and add your clock in the inherited transformedUI.py and simply running the main.py will achieve desired task.Hope it helps

Adding a simple clock to a GUI

2 Answers2

DigitalClockFile.py

generatedUI.py (from QtDesigner)

main.py