CODEWITHSUNDEEP
javapythonhtmlparameter-passing
Shawne Botha
Shawne Botha

Reputation: 43

Passing parameters - Python to HTML with Javascript

I have a simple Python file which uses the QtWebkit.QWebView to display a google maps page.

This is done by calling the HTML which includes some java script.

What I don't know how to do is get the co-ordinates from Python to the java script in the HTML file.

Perhaps someone can point me in the right direction?

PYTHON:

class MainWin(QDialog,MainFrm.Ui_MainWin):
    def __init__(self, parent=None):
        super(MainWin,self).__init__(parent)
        self.setupUi(self)


        self.lat = -25.723146
        self.long = 28.267628
        self.GMapWidget.load("markers.html?",coords = self.lat)



app = QApplication(sys.argv)
frm=MainWin()
frm.show()
app.exec_()

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrRTR8nZX3m6g_nYbilamyKSBHx9QUdfw">
    </script>
    <!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrRTR8nZX3m6g_nYbilamyKSBHx9QUdfw">
    </script>
    <script type="text/javascript">
      lt = -25.723146
      ln = 28.267628
      function initialize() {
        var mapOptions = {
          center: { lat: lt, lng:  ln},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
<div id="map-canvas"></div>
  </body>
</html>
  </head>
  <body>
<div id="map-canvas"></div>
  </body>
</html>

Upvotes: 4

Views: 1412

Answers (1)

Dr. Jan-Philip Gehrcke
Dr. Jan-Philip Gehrcke

Reputation: 35751

If you really need a real-time event communication system between your Python app and your JavaScript app, you can establish an SSE or WebSocket connection between both. I am not sure if you want this additional complexity, though.

In case a static (one-time) parameter exchange is sufficient, you can work with templates. Make a template from your HTML file with placeholders for lt and ln values. string.Template in the stdlib is useful here.

The template file (call it e.g. "markers.html.tpl") content might then look like so:

[...]
<script type="text/javascript">
  lt = $latitude
  ln = $longitude 
[...]

Instead of simply loading the HTML file:

self.GMapWidget.load("markers.html?",coords = self.lat)

you first read the template, insert the values, write the new HTML file, and only then load the widget:

from tempfile import NamedTemporaryFile
from string import Template


with open("markers.html.tpl", "rb") as f:
    tpl = Template(f.read().decode("utf-8"))

htmlcontent = tpl.substitute(latitude=1.2, longitude=2.5)

with NamedTemporaryFile() as f:
    f.write(htmlcontent.encode("utf-8")
    self.GMapWidget.load(f.name)

This is a naive, but reliable approach. Note that you ca re-use the template, so tpl = Template(f.read().decode("utf-8")) is required only once, but can be followed by as many tpl.substitute() calls as you wish.

Apart from this, I am not aware of any particular interface between Python code and the WebKit component, for you do dynamically fiddle with the state of JavaScript variables.

Upvotes: 1

Related Questions