How to set widget for vispy use

I know this question has been asked in a couple ways but I cannot figure it out on my specific use case. I used QT designer (pyQT 5.15) to create a layout and would like to use vispy as the display. After reading it seemed I had to set a widget but it still isn't clear to me how. This is what I have, and I am trying to have the simple example of changing the color from black to white via a timer. There are no errors but there is no visualization either.

Here is the GUI.ui converted to Python called GUI.py

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(702, 603)
        self.vispy_widget = QtWidgets.QWidget(Dialog)
        self.vispy_widget.setGeometry(QtCore.QRect(150, 20, 531, 531))
        self.vispy_widget.setObjectName("vispy_widget")
        self.pushButton = QtWidgets.QPushButton(Dialog)
        self.pushButton.setGeometry(QtCore.QRect(580, 560, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.horizontalScrollBar = QtWidgets.QScrollBar(Dialog)
        self.horizontalScrollBar.setGeometry(QtCore.QRect(160, 560, 401, 20))
        self.horizontalScrollBar.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalScrollBar.setObjectName("horizontalScrollBar")
        self.horizontalSlider = QtWidgets.QSlider(Dialog)
        self.horizontalSlider.setGeometry(QtCore.QRect(20, 60, 111, 16))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        self.hist_widget = QtWidgets.QWidget(Dialog)
        self.hist_widget.setGeometry(QtCore.QRect(20, 90, 120, 80))
        self.hist_widget.setObjectName("hist_widget")

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

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.pushButton.setText(_translate("Dialog", "PushButton"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())
```

Here is the app part:

    import sys
    from vispy import gloo, app
    from gui import Ui_Dialog
    from PyQt5 import QtWidgets
    app.use_app('pyqt5')

    class Canvas(app.Canvas):

        def __init__(self, *args, **kwargs):
            app.Canvas.__init__(self, *args, **kwargs)
            self._timer = app.Timer('auto', connect=self.on_timer, start=True)
            self.tick = 0

        def on_draw(self, event):
            gloo.clear(color=True)

        def on_timer(self, event):
            self.tick += 1 / 60.0
            c = abs(math.sin(self.tick))
            gloo.set_clear_color((c, c, c, 1))
            self.update()

    class myWindow(QtWidgets.QMainWindow):
        def __init__(self):
            super(myWindow, self).__init__()
            self.ui = Ui_Dialog()
            self.ui.setupUi(self)

            canvas = Canvas()
            self.ui.vispy_widget(canvas.native)


    if __name__ == "__main__":
        gui = QtWidgets.QApplication(sys.argv)
        Dialog = QtWidgets.QDialog()
        ui = Ui_Dialog()
        ui.setupUi(Dialog)
        Dialog.show()
        app.run()
        #sys.exit(app.exec_())

Solution

There are the following errors:

The self.ui.vispy_widget(canvas.native) command does not make sense, the idea is to use vispy_widget as a container for the native vispy widget that can be placed through a layout.
The choice of the .ui form is used to determine the base class, in your case you should use QDialog instead of QMainWindow.
If you already set the Ui_Dialog in the widget then it is unnecessary to implement the same in if __name__ == "__main__":.
You must import the math module.

import math
import sys

from vispy import gloo, app

from PyQt5 import QtWidgets

from gui import Ui_Dialog

app.use_app("pyqt5")


class Canvas(app.Canvas):
    def __init__(self, *args, **kwargs):
        app.Canvas.__init__(self, *args, **kwargs)
        self._timer = app.Timer("auto", connect=self.on_timer, start=True)
        self.tick = 0

    def on_draw(self, event):
        gloo.clear(color=True)

    def on_timer(self, event):
        self.tick += 1 / 60.0
        c = abs(math.sin(self.tick))
        gloo.set_clear_color((c, c, c, 1))
        self.update()


class MyWindow(QtWidgets.QDialog):
    def __init__(self):
        super(MyWindow, self).__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)

        self.canvas = Canvas()

        lay = QtWidgets.QVBoxLayout(self.ui.vispy_widget)
        lay.addWidget(self.canvas.native)


if __name__ == "__main__":
    gui = QtWidgets.QApplication(sys.argv)
    w = MyWindow()
    w.show()
    app.run()