python - 在 PyQt5 GUI 中嵌入 Plotly-Dash 图 : Handshake Failed, SSL 错误

Question

我正在尝试构建一个 GUI 来帮助我的团队快速比较信号形式的大量测试数据。我设想高度模块化、交互式的绘图，其格式类似于 Audacity。我正在 PyQt5 中构建 GUI，目前正在尝试决定用于绘图的内容；我原本计划使用 matplotlib，但对于预期用途而言，它会非常笨重。 Plotly 和/或 Dash 似乎更有前途；然而，它们只在浏览器中显示交互式绘图，所以我需要使用某种嵌入在 GUI 中的浏览器显示。因此，QWebEngineView。

我的 GUI 本身将在我开发的 QTabWidget 的选项卡中容纳绘图，而其他选项卡则填充占位符 matplotlib 绘图，我想替换它们，因为它们缺乏简单的交互性。我能够在浏览器中成功显示网页 (google.com)。

在 PyQt5 GUI 的 QTabWidget 中成功显示 QWebEngineView 对象中的网页

但是，当我将其指向我的破折号图的地址时(出于开发目的，我在另一个内核中运行的单独程序中创建了该地址)，它会给出错误:此站点无法提供安全连接:

折线图未显示

 On the GUI's Kernel, the error is "[29477:29512:0716/121826.555372:ERROR:ssl_client_socket_impl.cc(1050)] handshake failed; returned -1, SSL error code 1, net_error -107".

In the kernel running the dash plot, the message is: 
127.0.0.1 - - [16/Jul/2019 12:18:26] code 400, message Bad request version ('**À+À/À,À0̨̩À\x13À\x14\x00\x9c\x00\x9d\x00/\x005\x00')

127.0.0.1 - - [16/Jul/2019 12:18:26] "µ±ª~ÜÎÌDñB¤¦jËfM½;*÷hå¸GÛ¼i©Tè**À+À/À,À0̨̩ÀÀ/5" HTTPStatus.BAD_REQUEST -

这仅在 QTabsWidget 中。短划线图在单独的独立应用程序中显示良好(下面提供了作为占位符短划线图的工作代码)。

破折号图成功显示在简单的 PyQt5 GUI 中

我用谷歌搜索了这个错误，但没有找到相关的结果。我不明白为什么这对于第一个 url 来说工作得很好，但当我将它指向我的破折号图时却失败了，特别是考虑到我能够在我的精简原型(prototype)代码中查看 QWebEngineView 中的破折号图。

折线图工作代码:

import sys
import threading
from PyQt5 import QtWidgets
import dash
import dash_core_components as dcc
import dash_html_components as html


def run_dash(data, layout):
    app = dash.Dash()
    app.layout = html.Div(children=[
        html.H1(children='Hello Dash'),
        html.Div(children='''
            Dash: A web application framework for Python.
        '''),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': data,
                'layout': layout
            })
        ])
    app.run_server(debug=False)


class MainWindow(QtWidgets.QMainWindow):
    pass

if __name__ == '__main__':
    data = [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
    layout = {
        'title': 'Dash Data Visualization'
    }

    threading.Thread(target=run_dash, args=(data, layout), daemon=True).start()
    app = QtWidgets.QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()
    sys.exit(app.exec_())

运行此代码后，内核会提供绘图的地址。在我的机器上，它是 http://127.0.0.1:8050 .

原型(prototype) GUI 嵌入代码:

import sys
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import *
from PyQt5.QtWidgets import QApplication

app = QApplication(sys.argv)

web = QWebEngineView()
#web.load(QUrl("https://www.google.com"))
web.load(QUrl("http://127.0.0.1:8050"))
web.show()

sys.exit(app.exec ())

来 self 实际 PyQt5 GUI 的代码片段:

web = QWebEngineView()
# web.load(QUrl("https://www.google.com")) web.load(QUrl("https://127.0.0.1:8050/"))
web.show()
self.ui.TabsContainer.addTab(web, "QWebEngineView Object") 
# TabsContainer is a QTabsWidget

如何解决阻止我在 GUI 中嵌入绘图的错误？

编辑:我认为它可能与 QTabWidget 有关，所以我编写了以下简单的代码来测试这个想法，并且我的短划线图显示良好。但是，尽管以相同的方式构建，但它不会显示在我需要的主多线程 GUI 中。

import sys
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import *
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *


class CustomMainWindow(QMainWindow):  # MainWindow is a subclass of QMainWindow
    def __init__(self, *args, **kwargs):
        super(CustomMainWindow, self).__init__(*args, **kwargs)
#        a = 1

        self.setWindowTitle("Window Title")

        label = QLabel("Label")
        label.setAlignment(Qt.AlignCenter)
#        
        layout = QVBoxLayout()
#        layout.addWidget(Color('red'))
#        layout.addWidget(Color('green'))
        layout.addWidget(Color('blue'))

        TW = QTabWidget()


        web1 = QWebEngineView()
        web1.load(QUrl("http://www.google.com"))
        #web1.load(QUrl("http://127.0.0.1:8050"))

        web2 = QWebEngineView()
        web2.load(QUrl("http://127.0.0.1:8050"))

        TW.addTab(web1, 'web1')
        TW.addTab(web2, 'web2')
        layout.addWidget(TW)


        widget = QWidget()
        widget.setLayout(layout)
        self.setCentralWidget(widget)        

class Color(QWidget):

    def __init__(self, color, *args, **kwargs):
        super(Color, self).__init__(*args, **kwargs)
        self.setAutoFillBackground(True)

        palette = self.palette()
        palette.setColor(QPalette.Window, QColor(color))
        self.setPalette(palette)


app = QApplication(sys.argv)

CMWindow = CustomMainWindow()  # Instead of using QMainWindow, we now use our custom window subclassed from QMainWindow
CMWindow.show()
sys.exit(app.exec ())

Answer 1

嗯，答案很简单:

在我发布的工作示例中，我加载了 QUrl("http://127.0.0.1:8050 ")。在不起作用的代码中，我使用了 https://。显然 Dash 图不使用 https。