Passing parameters - Python to HTML with Javascript

Question

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>

Dr. Jan-Philip Gehrcke · Accepted Answer · 2015-02-12 17:30:49Z

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.

Thank you very much for this input. It has helped me tremendously. I just had a problem with the loading of the file. It caused the following error QNetworkAccessFileBackendFactory: URL has no schema set, use file:// for files. — Shawne Botha, CommentedFeb 14, 2015 at 16:24
Happy to have helped! This is indeed one of those problems where you need some technological overview to come up with solutions. I am very sure that others might have come up with different approaches, but the concepts I proposed are quite solid. Remember: you can accept answers with the green checkmark -- this helps me, and others, too! — Dr. Jan-Philip Gehrcke, CommentedFeb 14, 2015 at 17:22

Collectives™ on Stack Overflow

Passing parameters - Python to HTML with Javascript

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related