CODEWITHSUNDEEP
javascriptpython-3.xpyside
TheBlueMan
TheBlueMan

Reputation: 427

Getting javascript variable value into python from QWebView

In my application, I have a form on one side and google maps on the other side. To display google maps, I'm using their javascript api. The javascript is writing as a string and part of the html which gets gets called by QWebView. My objective is for the user to click and drag the pin. After the pin has stopped dragging, it would update 2 text boxes on the right side through qt which will populate with the latitude and longitude of the dropped pin. I am having trouble figuring out how to send the data between javascript and python. I am using python3 with pyside qt bindings.

Here is what I have so far.

webView = QWebView()
webView.setHtml(html)
self.central_widget_grid.addWidget(webView,1,0)

Html is a constant defined in another file

#!/usr/bin/python

jscode = """
    var map;
    var marker;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.793697, lng: -77.8586},
        zoom: 10
        });

        map.addListener('click', function(e) {
            placeMarkerAndPanTo(e.latLng, map);
        });
    }

    function placeMarkerAndPanTo(latLng, map) {
      if (marker === undefined) {
            marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: "Station Location",
            draggable: true
          });
          map.panTo(latLng);
          marker.addListener('dragend', function() { draggedMarker(); });
      }
    }

    function draggedMarker() {
        alert(marker.getPosition());
        statLoc.updateLoc(marker.getPosition().lat(), marker.getPosition().lng());

    }
     """

html = """<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap">
    </script>
    <script type="text/javascript">""" + jscode +  """


    </script>
    </head>
    <body onload="initMap();">
        <div id="map" style="width:100%; height:100%"></div>
    </body>
    </html>"""

I have tried creating a class which holds the latitude and longitude and then passing that by calling addToJavaScriptWindowObject.

class StationLocation(QObject):
    latitude = 0.0
    longitude = 0.0

    def __init__(self):
        super(StationLocation, self).__init__()

    def updateLoc(self,lat,long):
        self.latitude = lat
        self.longitude = long
        print(self.latitude, self.longitude)

With the following changes to my webView

    webView = QWebView()
    webView.setHtml(html)

    frame = webView.page().mainFrame()
    frame.addToJavaScriptWindowObject('statLoc', self.station_location)

    self.central_widget_grid.addWidget(webView, 1, 0)

With that added. With the print statement inside StationLocations, I expect to see the latitude and longitude printed in the console every time that function is called. I can't find out why this isn't the case.

Upvotes: 1

Views: 1565

Answers (1)

ekhumoro
ekhumoro

Reputation: 120568

There are two things you are doing wrong. Firstly, you need to wait until the page is loaded before adding the object. Secondly, the javascript must only call methods of the added object that are decorated as slots.

Below is a working demo. But one caveat: the PySide implementation of addToJavaScriptWindowObject is buggy. It should be possible to use self (i.e. the main window) as the added object, but when I try that with PySide, it hangs on exit for several seconds and then dumps core. For this reason, I used a proxy object in the demo - but with PyQt, the proxy wouldn't be needed.

import sys
from PySide import QtCore, QtGui, QtWebKit

html = '''
<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { width: 100%; height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    var map, marker
    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: {lat: 40.793697, lng: -77.8586},
            zoom: 10
        })
        marker = new google.maps.Marker({
            map: map,
            position: map.getCenter(),
            draggable: true
        })
        marker.addListener("dragend", function () {
            var pos = marker.getPosition()
            qt.showLocation(pos.lat(), pos.lng())
            console.log("dragend: " + pos.toString())
        })
    }
    google.maps.event.addDomListener(window, "load", initialize)
</script>
</head>
<body><div id="map"/></body>
</html>
'''

class WebPage(QtWebKit.QWebPage):
    def javaScriptConsoleMessage(self, message, line, source):
        if source:
            print('line(%s) source(%s): %s' % (line, source, message))
        else:
            print(message)

class Proxy(QtCore.QObject):
    @QtCore.Slot(float, float)
    def showLocation(self, latitude, longitude):
        self.parent().edit.setText('%s, %s' % (latitude, longitude))

class MainWindow(QtGui.QWidget):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.view = QtWebKit.QWebView(self)
        self.view.setPage(WebPage(self))
        self.edit = QtGui.QLineEdit(self)
        layout = QtGui.QVBoxLayout(self)
        layout.addWidget(self.view)
        layout.addWidget(self.edit)
        self.map = self.view.page().mainFrame()
        self.map.loadFinished.connect(self.handleLoadFinished)
        self.view.setHtml(html)
        self._proxy = Proxy(self)

    def handleLoadFinished(self, ok):
        self.map.addToJavaScriptWindowObject('qt', self._proxy)

if __name__ == '__main__':

    app = QtGui.QApplication(sys.argv)
    window = MainWindow()
    window.setGeometry(500, 300, 800, 600)
    window.show()
    sys.exit(app.exec_())

Upvotes: 2

Related Questions