WebChannel fail to port variable from QML to HTML?

charlie2024

Hi! So, I am trying to use WebChannel to port a variable from QML to HTML. However I can't seem to make this work.

First, I set up my variables in PySide6 more or less like this. I omitted some methods in Bridge, but it's functioning fine in QML.

class Bridge(QObject):

    def __init__(self):
        super().__init__()
        self._gps_location = GpsLocation()

    gps_locationChanged = Signal()
    gps_location = Property(GpsLocation, fget=get_gps_location, fset=set_gps_location, notify=gps_locationChanged)


class GpsLocation(QObject):

    def __init__(self):
        super().__init__()
        self._lat = None
        self._long = None
    latChanged = Signal()
    longChanged = Signal()

    def get_lat(self) -> float:
        return self._lat

    def get_long(self) -> float:
        return self._long

    def set_lat(self, new_value: float):
        if self._lat != new_value:
            self._lat = new_value
            self.latChanged.emit()

    def set_long(self, new_value: float):
        if self._long != new_value:
            self._long = new_value
            self.longChanged.emit()
    lat = Property(float, fget=get_lat, fset=set_lat, notify=latChanged)
    long = Property(float, fget=get_long, fset=set_long, notify=longChanged)

This variable is successfully connected to QML, as I can see the text fields change, in the following QML, when I update my bridge variable.

import QtQuick 2.15
import QtWebEngine 1.10
import QtWebChannel 1.0

import "../../shared"

Item {
    id: rootItem
    anchors.fill: parent
    anchors.centerIn: parent

    WebEngineView {
        id: webEngineView
        anchors.fill: parent
        // url: Qt.resolvedUrl("web.html")
        url: Qt.resolvedUrl("gps.html")

        settings {
            localContentCanAccessRemoteUrls: true
        }
        webChannel: channel  
    }

    WebChannel {
        id: channel
        Component.onCompleted: {
            if (bridge !== undefined && bridge.gps_location !== undefined) {
                registeredObjects: [bridge.gps_location]
            } else {
                console.log("QML Bridge or GPS Location is undefined.");
            }
        }
    }

    Text {
        text: "GPS Lat " + bridge.gps_location.lat + " Long " + bridge.gps_location.long
        font.pointSize: 24
        color: "red"
    }

}

However, when I am loading this html file, I got an error:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script type="text/javascript">
        new QWebChannel(qt.webChannelTransport, function(channel) {
            var gps_location = channel.objects.gps_location;
            document.getElementById('message').textContent = gps_location;
            
              // Listen for changes on latitude and longitude
            gps_location.latChanged.connect(function(newLat) {
                document.getElementById('latitude').textContent = newLat;
            });

            gps_location.longChanged.connect(function(newLong) {
                document.getElementById('longitude').textContent = newLong;
            });
        });
    </script>
</head>
<body>
    Latitude: <span id="latitude">0.0</span><br>
    Longitude: <span id="longitude">0.0</span>
    <div id="message"></div> 
</body>
</html>

This is the error I see:

js: Uncaught TypeError: Cannot read properties of undefined (reading 'latChanged')

Why is that? Does this mean bridge.gps_location is not ported successfully via WebChannel? How can I fix this?

Thanks!