Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



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

Log in to reply