I am currently trying to open an html file generated with pydeck in a Pyqt5 webview window. I can open it on my browser (firefox, if that’s relevant) and it works correctly. However, if I try to open it in pyqt5, a blank window will open and I get the following errors:
js: Uncaught SyntaxError: Unexpected token '='
js: Uncaught ReferenceError: createDeck is not defined
I do not get these errors in my browser.
I have also tried saving the resulting HTML to a string instead of a file and sending it directly to window.setHtml. The result is the same. I have used this same code to show other HTML files and it has worked correctly.
Here is the code I am using:
r.to_html("test2.html")
data = Path("test2.html").read_text(encoding="utf8")
app = QApplication(sys.argv + ["--no-sandbox"])
window = QWebEngineView()
window.setHtml(data)
window.resize(640,480)
window.show()
sys.exit(app.exec_())
Here is the generated HTML as well:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>pydeck</title>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~9.0.*/dist/index.js'></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#deck-container {
width: 100vw;
height: 100vh;
}
#deck-container canvas {
z-index: 1;
background: none;
}
</style>
</head>
<body>
<div id="deck-container">
</div>
</body>
<script>
const container = document.getElementById('deck-container');
const jsonInput = {
"initialViewState": {
"bearing": 0,
"latitude": 41.150537,
"longitude": -8.586245,
"pitch": 45,
"zoom": 11
},
"layers": [
{
"@@type": "TripsLayer",
"currentTime": 21420,
"data": [
{
"coordinates": [
[
-8.582416,
41.160716
],
[
-8.586245,
41.150537
],
[
-8.592978,
41.146697
],
[
-8.598349,
41.148796
],
[
-8.605901,
41.149785
],
[
-8.609299,
41.152277
],
[
-8.616723,
41.157107
],
[
-8.622246,
41.158585
],
[
-8.628282,
41.160575
],
[
-8.636347,
41.165549
],
[
-8.641766,
41.172962
],
[
-8.646498,
41.177255
],
[
-8.652149,
41.182422
],
[
-8.654466,
41.188101
],
[
-8.655771,
41.194161
],
[
-8.655559,
41.200294
],
[
-8.654541,
41.216067
],
[
-8.656593,
41.233013
],
[
-8.658212,
41.238246
],
[
-8.661807,
41.246233
],
[
-8.668018,
41.254953
],
[
-8.679515,
41.270297
],
[
-8.693703,
41.285251
],
[
-8.699238,
41.293684
],
[
-8.704004,
41.300492
],
[
-8.714209,
41.315077
],
[
-8.718681,
41.321222
],
[
-8.720721,
41.334225
],
[
-8.725555,
41.340402
],
[
-8.728122,
41.345965
],
[
-8.735826,
41.353983
],
[
-8.73987,
41.359096
],
[
-8.745225,
41.364643
],
[
-8.749558,
41.368953
],
[
-8.754122,
41.373456
],
[
-8.758081,
41.378126
]
],
"timestamps": [
21240,
21420,
21540,
21600,
21660,
21780,
21900,
21960,
22080,
22200,
22320,
22380,
22440,
22560,
22680,
22800,
22920,
23100,
23220,
23340,
23520,
23820,
24060,
24240,
24420,
24660,
24780,
24960,
25140,
25260,
25440,
25560,
25680,
25800,
25860,
26040
]
}
],
"getColor": [
253,
128,
93
],
"getPath": "@@=coordinates",
"getTimestamps": "@@=timestamps",
"id": "71700afb-ebee-4f1c-863e-dc131bc2c8e6",
"opacity": 0.8,
"rounded": true,
"trailLength": 600,
"widthMinPixels": 5
}
],
"mapProvider": "carto",
"mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
"views": [
{
"@@type": "MapView",
"controller": true
}
]
};
const tooltip = true;
const customLibraries = null;
const configuration = null;
const deckInstance = createDeck({
container,
jsonInput,
tooltip,
customLibraries,
configuration
});
</script>
</html>
Luis Manuel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2