带有QTWebChannel的Folium弹出窗口

我正在qtwebengineview中显示叶面生成的html（对于feflet.js）。在弹出窗口中，我有一个带有点击功能的按钮，该按钮应该在Python中调用方法。但是我似乎无法让频道上班。我不确定我在qtwebchannel还是JS上做错了什么，还是可以是folium？

我已经将以下JavaScript注入了qwebchannel.js的末尾，该js在 <body>

的末尾加载

    var jshelper;
    new QWebChannel(qt.webChannelTransport, function (channel) {
        jshelper = channel.objects.jshelper;
    });
    document.getElementById("myBtn").addEventListener("click", function(){
        jshelper.pathSelected("Test!")
    });

这是我的python代码

import sys
import os
import branca
from branca.element import *
import folium
from folium import plugins
from PyQt5 import QtWebEngineWidgets, QtCore, QtWidgets, QtWebChannel
from PyQt5.QtWidgets import QMainWindow, QAction, QMenu, QApplication, QWidget, QLineEdit, QLabel, QPushButton, QGridLayout, QDockWidget

class Example(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setObjectName('Main')
        QtCore.QMetaObject.connectSlotsByName(self)
        self.view = QtWebEngineWidgets.QWebEngineView()
        self.view.setObjectName('MapWidget')
        self.window  = QWidget()
        self.window.setObjectName('MainWidget')
        self.layout = QGridLayout()
        self.window.setLayout(self.layout)
        self.layout.addWidget(self.view)
        self.setCentralWidget(self.window);
        self.channel = QtWebChannel.QWebChannel(self.view.page())
        self.view.page().setWebChannel(self.channel)
        self.channel.registerObject("jshelper", self)
        self.us = folium.Map(location=[36,-108],
                    zoom_start=5, tiles='StamenWatercolor')
        fastestRoute = folium.PolyLine( ((40,-110), (50,-110)),
                    weight=5,color='blue').add_to(self.us)
        f = Figure()
        f.html.add_child(Element('<button id="myBtn">Try it</button>'))
        f.html.add_child(Element('<p>n TEST n</p>'))
        link = JavascriptLink('https://rawgit.com/toknowjoyman/qwebch/master/qwebchannel.js')
        f.html.add_child(Element(link.render()))
        print (f.render())
        iframe = branca.element.IFrame(html=f.render(), width=500, height=300)
        popup = folium.Popup(iframe, max_width=500)
        fastestRoute.add_child(popup)
        self.us.save("html/test.html")
        self.view.load(QtCore.QUrl().fromLocalFile(
            os.path.split(os.path.abspath(__file__))[0]+r'/html/test.html'
        ))
        self.setGeometry(100,100,1200,900)
        self.show()
    @QtCore.pyqtSlot(str)
    def pathSelected(self, lat):
      print(lat)
if __name__ == '__main__':
    sys.argv.append("--remote-debugging-port=8000")
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

真的很感谢您解决这个问题的帮助

让我知道我是否应该张贴弹出窗口或传单生成的HTML。

qwebchannel.js您必须将其放在首位，然后将其注入弹出窗口，然后将其注册到page()中。

为此，我们创建一个图（），在标题中，我们添加qwebchannel.js

principal = Figure()
js = JavascriptLink(QUrl.fromLocalFile(self.htmlPath.absoluteFilePath("qwebchannel.js")).toString())
principal.header.add_child(Element(js.render()))

注意：在qwebchannel中不与按钮建立连接，因为它不存在。

为此，弹出窗口通过了一个新的JavaScript，它将调用popup.js，我将通过他的父母（主窗口）访问jshelper。

popup.js

var jshelper = parent.jshelper;
document.getElementById("myBtn").addEventListener("click", function(){
    console.log("okay");
    jshelper.pathSelected("Test!");
});

.py

f = Figure()
f.html.add_child(Element('<button id="myBtn">Try it</button>'))
f.html.add_child(Element('<p>n TEST n</p>'))
link = JavascriptLink(QUrl.fromLocalFile(self.htmlPath.absoluteFilePath("popup.js")).toString())
f.html.add_child(Element(link.render()))

您可以在以下链接中找到完整的示例。

相关内容

最新更新

热门标签：