How to recieve dynamic variable from qml with QT webchannel in html side?

bayanlou

I currently can send constant value with webchannel from qml file to html and show value. but when i send a dynamic variable lick clock time initial value of variable displays in html and it can not updated over time. i used a dynamic graph to display value of property.

How can i send and display dynamic variable ?

my QML file:


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);
  }


}

my html file:

<!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>