Folium Popups With Qtwebchannel

I am displaying a folium generated HTML(for leaflet.js) in a QtWebEngineView. In the popups I have a button w/ an on-click function that's supposed to call a method back in python.

Solution 1:

qwebchannel.js you must put it first, and you are injecting it into the popup and you are registering it in the page().

To do this we create a Figure () and in the header we add the qwebchannel.js

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

Note: In the qwebchannel does not make the connection with the button because it does not exist.

for this the popup is passed a new javascript, which will call popup.js, and where I will access jshelper via his parent, the main window.

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()))

You can find the complete example in the following link.