Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to recieve dynamic variable from qml with QT webchannel in html side?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 135 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • bayanlouB Offline
    bayanlouB Offline
    bayanlou
    wrote on last edited by
    #1

    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>
    
    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved