如何在html端使用QT网络通道从qml接收动态变量

我目前可以通过网络通道将常量值从qml文件发送到html并显示值。但是当我发送动态变量lick-clock时，变量的初始值显示在html中，并且不能随时间更新。我使用了一个动态图来显示属性的值。

如何发送和显示动态变量？

我的QML代码：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtWebChannel 1.0
import QtWebEngine 1.1
Window {
    id: clock
    width: 800
    height: 400
    visible: true
    property int seconds
    function timeChanged() {
        var date = new Date;
        seconds = date.getUTCSeconds();
    }
    Timer {
        interval: 100; running: true; repeat: true;
        onTriggered: clock.timeChanged()
    }

    WebChannel {
        id: channel
        registeredObjects: [myObject]
    }

    QtObject {
        id: myObject
        objectName: "myObject"
        WebChannel.id: "myObject"
        signal someSignal(string message);
        property string value: "hello world";
        property double time : clock.seconds ;
    }

    WebEngineView {
        id: webEnginView
        anchors.fill: parent
        url: "qrc:/viewer.html"
        webChannel: channel
    }
    Component.onCompleted: {
      channel.registerObject("myObject", myObject);
  }

}

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
 </script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
  <script type="text/javascript">

     new QWebChannel(qt.webChannelTransport, function(channel) {
     var myObject = channel.objects.myObject;
     var sin =  Math.sin(myObject.time);

var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        title: {
                text: "Live Data"
        },
        data: [{
                type: "line",
                dataPoints: dataPoints
        }]
});
updateData();
// Initial Values
var xValue = 0;
var yValue = 10;
var newDataCount = 6;
function addData(data) {
        if(newDataCount != 1) {
                $.each(data, function(key, value) {
                        dataPoints.push({x: value[0], y: 10 });
                        xValue++;
                        yValue = 10;
                });
        } else {
                //dataPoints.shift();
                dataPoints.push({x: data[0][0], y: sin});
                xValue++;
                yValue = sin;
        }
        newDataCount = 1;
        chart.render();
        setTimeout(updateData, 1500);
}
function updateData() {
        $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"type=json", addData);
}
});

</script>
</div>
</body>
</html>

QML代码很好，但HTML/javascript有问题。你唯一一次阅读myObject.time是在这行代码中：

var sin =  Math.sin(myObject.time);

其仅在QWebChannel被初始化时执行一次。尽管您的javascript代码中有一个计时器，但该计时器不会重新读取该属性，也不会对时间属性进行任何回调处理更改。

您可以对时间属性进行回调句柄更改，如下所示：

myObject.timeChanged.connect(function() { // ... }

相关内容

最新更新

热门标签：