Displaying plotly heatmaps as html files in PyQt user interface

I have been trying to generate a map with density information visualized on it. And then, embed this map into a user interface created using PyQt.

For map creation, I use plotly which is working with no problem. However, I cannot put the map into the GUI. I think that the problem is something related with Jetson Orin because exactly the same code runs on my laptop as expected. However, I get an odd error message when I try to run it on Jetson Orin.

Here is my code:

import os.path
import posixpath
import sys
from PyQt5.QtWebEngineWidgets import QWebEngineView
import plotly.offline as offline
from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QMainWindow, QApplication
import plotly.express as px

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.__initUi()

    def __initUi(self):
        self.setWindowTitle('PyQt & Plotly')

        # create data frame (or read directly from a csv file)
        self.df = {
            "Date": ["01/02/1965", "01/04/1965", "01/05/1965", "01/08/1965", "01/09/1965"],
            "Latitude": [19.246, 1.8630, -20.579, -59.076, 11.9379],
            "Longitude": [145.616, 127.352, -173.972, -23.557, 126.427],
            "Magnitude": [6.0, 5.8, 6.2, 5.8, 5.1]
            }

        # create figure for the heatmap
        fig = px.density_mapbox(self.df, lat='Latitude', lon='Longitude', z='Magnitude', radius=10, center=dict(lat=0, lon=180), zoom=0, mapbox_style="open-street-map")
        
        # create the html file for the offline map
        # note that we are working offline, so we first generate the html file with heatmaps on, then display it on the Qt GUI
        cur_dir = os.path.dirname(__file__)
        self.filename = os.path.join(cur_dir, 'map3.html').replace(os.path.sep, posixpath.sep)
        
        # put the data from the data frame on the html map
        offline.plot(fig, filename=self.filename, auto_open=False)

        self.view = QWebEngineView()
        self.view.load(QUrl.fromLocalFile(self.filename))

        self.setCentralWidget(self.view)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = MainWindow()
    w.show()
    app.exec()

And the error I get is this:

qt.glx: qglx_findConfig: Failed to finding matching FBConfig for QSurfaceFormat(version 2.0, options QFlagsQSurfaceFormat::FormatOption(), depthBufferSize -1, redBufferSize 1, greenBufferSize 1, blueBufferSize 1, alphaBufferSize -1, stencilBufferSize -1, samples -1, swapBehavior QSurfaceFormat::SingleBuffer, swapInterval 1, colorSpace QSurfaceFormat::DefaultColorSpace, profile QSurfaceFormat::NoProfile)
qt.glx: qglx_findConfig: Failed to finding matching FBConfig for QSurfaceFormat(version 2.0, options QFlagsQSurfaceFormat::FormatOption(), depthBufferSize -1, redBufferSize 1, greenBufferSize 1, blueBufferSize 1, alphaBufferSize -1, stencilBufferSize -1, samples -1, swapBehavior QSurfaceFormat::SingleBuffer, swapInterval 1, colorSpace QSurfaceFormat::DefaultColorSpace, profile QSurfaceFormat::NoProfile)
Could not initialize GLX
Aborted (core dumped)

I searched for the solution with no luck. I have seen some ideas saying that it may be related with OpenGL/GLX functionality of the hardware. But I am not sure whether this applies to Jetson AGX Orin. Any comments are appreciated.

My configuration:

Jetpack 5.1-b147
Python 3.8.10
PyQt 5.14.1
plotly 5.18.0

Hi,
The latest Jetpack 5 release is 5.1.2(r35.4.1). We suggest upgrade to latest version and try again.

I figured the solution. But I do not have any idea about the reason.

The import for QWebEngineView should be done just after the scripting condition if name == β€œmain”:. The full code is below.

Bonus information:
If you want to use opencv and QWebEngineView in the same PyQt gui, you may receive the same error. In that case, you may be using opencv-python. Instead, you are expected use opencv-python-headless. See the explanation here.

import os.path
import posixpath
import sys
#from PyQt5.QtWebEngineWidgets import QWebEngineView
import plotly.offline as offline
from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QMainWindow, QApplication
import plotly.express as px

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.__initUi()

    def __initUi(self):
        self.setWindowTitle('PyQt & Plotly')

        # create data frame (or read directly from a csv file)
        self.df = {
            "Date": ["01/02/1965", "01/04/1965", "01/05/1965", "01/08/1965", "01/09/1965"],
            "Latitude": [19.246, 1.8630, -20.579, -59.076, 11.9379],
            "Longitude": [145.616, 127.352, -173.972, -23.557, 126.427],
            "Magnitude": [6.0, 5.8, 6.2, 5.8, 5.1]
            }

        # create figure for the heatmap
        fig = px.density_mapbox(self.df, lat='Latitude', lon='Longitude', z='Magnitude', radius=10, center=dict(lat=0, lon=180), zoom=0, mapbox_style="open-street-map")
        
        # create the html file for the offline map
        # note that we are working offline, so we first generate the html file with heatmaps on, then display it on the Qt GUI
        self.filename = os.path.join(os.getcwd(), 'map.html').replace(os.path.sep, posixpath.sep)
        
        # put the data from the data frame on the html map
        offline.plot(fig, filename=self.filename, auto_open=False)

        self.view = QWebEngineView()
        self.view.load(QUrl.fromLocalFile(self.filename))

        self.setCentralWidget(self.view)

if __name__ == "__main__":
    from PyQt5.QtWebEngineWidgets import QWebEngineView
    app = QApplication(sys.argv)
    w = MainWindow()
    w.show()
    app.exec()
1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.