pythonpython-2.7pyqt5qtwebkitqtwidgets

How to show google map in my QtGui using PyQt5.QWebkitWidgets


I am currently trying to embed the google map on the PyQt5 based GUI. My environment includes Ubuntu 16.04 LTS and python 2.7.

Basically, I am trying to combine the following two python scripts(map.py and gui.py) into one script(gui.py) and I would do appreciate it if someone shed some light on this problem.

picture_map

picture_gui

picture_combined

--------------------------------- < map.py > -----------------------------------
#!/usr/bin/env python
# Google Maps JavaScript API:
# https://developers.google.com/maps/documentation/javascript/tutorial

import sys, os
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWebKit import QWebSettings
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebKitWidgets import QWebView


app = QApplication(sys.argv)

web = QWebView()
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
tempPath = "file:///" + os.path.join(os.getcwd(), "map.html").replace('\\','/')

web.load(QUrl(tempPath))
web.show()

sys.exit(app.exec_())
--------------------------------- < gui.py > -----------------------------------
#!/usr/bin/env python

import sys, time, subprocess, os
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5 import QtCore, QtWidgets

class Cmd:
    def sensor_start(self):
        print('Sensor Start button click')
        subprocess.Popen("exec " + "python remotedata.py", shell=True)

    def sensor_end(self):
        print('Sensor End button click')
    subprocess.Popen("pkill -f remotedata.py",shell=True)

    def mission_start(self):
        print('Mission Start button click')
        subprocess.Popen("rosrun mavros mavsafety arm",shell=True)
        time.sleep(1)
        subprocess.Popen("rosrun mavros mavsys mode -c OFFBOARD",shell=True)

    def mission_end(self):
        print('Mission End button click')
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.RTL",shell=True)

    def mission_hold(self):
        print('Mission Hold button click')
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.LOITER",shell=True)


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

    self.setMinimumSize(QSize(1280,800))
        self.setWindowTitle("Ocean Exploration UAV")
        self.statusBar().showMessage('Copyright 2020 www.uaslaboratory.com. All rights reserved.')

    # SENSOR
        self.nameLabel0 = QLabel(self)
        self.nameLabel0.setText('Sensor:')
        self.nameLabel0.move(20, 20)

    # MISSION
        self.nameLabel1 = QLabel(self)
        self.nameLabel1.setText('Mission:')
        self.nameLabel1.move(20, 50)

    # SENSOR: Start Data Logging
        button = QPushButton('Start', self)
        button.setToolTip('Start data logging')
        button.move(90,20)
        button.clicked.connect(cmd.sensor_start)

        # SENSOR: Start Data Logging
        button = QPushButton('End', self)
        button.setToolTip('End data logging')
        button.move(190,20)
        button.clicked.connect(cmd.sensor_end)

    # MISSION: Start Mission
        button = QPushButton('Start', self)
        button.setToolTip('Start UAV mission')
        button.move(90,50)
        button.clicked.connect(cmd.mission_start)

    # MISSION: End Mission
        button = QPushButton('End', self)
        button.setToolTip('End UAV mission')
        button.move(190,50)
        button.clicked.connect(cmd.mission_end)

    # MISSION: Hold Mission
        button = QPushButton('Hold', self)
        button.setToolTip('Hold UAV mission')
        button.move(290,50)
        button.clicked.connect(cmd.mission_hold)

    self.show()

if __name__ == "__main__":
    cmd = Cmd()

    app = QtWidgets.QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()

    sys.exit(app.exec_())
    time.sleep(5)

Solution

  • You just have to put the QWebView which is a widget. To manage the position I use qlayouts:

    import os
    import subprocess
    import sys
    from PyQt5.QtCore import QSize, QUrl
    from PyQt5.QtWidgets import (
        QApplication,
        QLabel,
        QMainWindow,
        QPushButton,
        QWidget,
        QGridLayout,
    )
    from PyQt5.QtWebKit import QWebSettings
    from PyQt5.QtWebKitWidgets import QWebView
    
    
    CURRENT_DIR = os.path.dirname(os.path.realpath(__file__))
    
    
    class Cmd:
        def sensor_start(self):
            print("Sensor Start button click")
            subprocess.Popen("exec " + "python remotedata.py", shell=True)
    
        def sensor_end(self):
            print("Sensor End button click")
    
        subprocess.Popen("pkill -f remotedata.py", shell=True)
    
        def mission_start(self):
            print("Mission Start button click")
            subprocess.Popen("rosrun mavros mavsafety arm", shell=True)
            time.sleep(1)
            subprocess.Popen("rosrun mavros mavsys mode -c OFFBOARD", shell=True)
    
        def mission_end(self):
            print("Mission End button click")
            subprocess.Popen("rosrun mavros mavsys mode -c AUTO.RTL", shell=True)
    
        def mission_hold(self):
            print("Mission Hold button click")
            subprocess.Popen("rosrun mavros mavsys mode -c AUTO.LOITER", shell=True)
    
    
    class MainWindow(QMainWindow):
        def __init__(self):
            QMainWindow.__init__(self)
            self.setMinimumSize(QSize(1280, 800))
            self.setWindowTitle("Ocean Exploration UAV")
            self.statusBar().showMessage(
                "Copyright 2020 www.uaslaboratory.com. All rights reserved."
            )
    
            # SENSOR
            self.nameLabel0 = QLabel("Sensor:")
    
            # MISSION
            self.nameLabel1 = QLabel("Mission:")
    
            # SENSOR: Start Data Logging
            button_start_logging = QPushButton("Start", toolTip="Start data logging")
            button_start_logging.clicked.connect(cmd.sensor_start)
    
            # SENSOR: Start Data Logging
            button_end_logging = QPushButton("End", toolTip="End data logging")
            button_end_logging.clicked.connect(cmd.sensor_end)
    
            # MISSION: Start Mission
            button_start_uav = QPushButton("Start", toolTip="Start UAV mission")
            button_start_uav.clicked.connect(cmd.mission_start)
    
            # MISSION: End Mission
            button_end_uav = QPushButton("End", toolTip="End UAV mission")
            button_end_uav.clicked.connect(cmd.mission_end)
    
            # MISSION: Hold Mission
            button_hold_uav = QPushButton("Hold", toolTip="Hold UAV mission")
            button_hold_uav.clicked.connect(cmd.mission_hold)
    
            web = QWebView()
            web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
    
            filename = os.path.join(CURRENT_DIR, "map.html")
            url = QUrl.fromLocalFile(filename)
            web.load(url)
    
            central_widget = QWidget()
            self.setCentralWidget(central_widget)
            lay = QGridLayout(central_widget)
            lay.addWidget(self.nameLabel0, 0, 0)
            lay.addWidget(button_start_logging, 0, 1)
            lay.addWidget(button_end_logging, 0, 2)
            lay.addWidget(self.nameLabel1, 1, 0)
            lay.addWidget(button_start_uav, 1, 1)
            lay.addWidget(button_end_uav, 1, 2)
            lay.addWidget(button_hold_uav, 1, 3)
            lay.addWidget(web, 2, 0, 1, 5)
            lay.setColumnStretch(4, 1)
    
    
    if __name__ == "__main__":
        cmd = Cmd()
    
        app = QApplication(sys.argv)
        mainWin = MainWindow()
        mainWin.show()
    
        sys.exit(app.exec_())
        time.sleep(5)