Delay function in qml

Question

I have created a sine wave. I added timer in the code and i try to call the delay but i am not able to get it. I try to call near ctx.lineto but no use. i need to add a delay between 1 plotting to another plotting. Pls help me to solve this issue

import QtQuick 2.9
import QtQuick.Window 2.15

Window {

    function timer() {
        return Qt.createQmlObject("import QtQuick 2.0; Timer {}", root);
    }

    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width
        Timer {
            id: timer
        }

        function delay(delayTime, cb) {
            timer.interval = delayTime;
            timer.repeat = false;
            timer.triggered.connect(cb);
            timer.start();
        }
        Canvas {
            id: canvas
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d");
                var cw = parent.width;
                var ch = parent.height;
                var  cx = cw, cy = ch/2;
                var w = width;
                var h = height;
                ctx.lineWidth = 4;
                ctx.clearRect(0, 0, cw, ch);
                ctx.beginPath();
                ctx.moveTo(0, cy);

                for(var x=0;x<1921;x++){
                    var y = Math.sin(x/305);
                    ctx.lineTo(x, cy+(y*400));//now you add delay of 1sec
                    console.log(y)
                }//from here the sine wave is plotted from left to right clean the screen with small from left to right


                ctx.stroke();
                showMaximized(Window)
            }
        }
    }
}

Can you please explain what you mean with "delay between 1 plotting to another plotting"? Is the same data supposed to be displayed at a second plot at a later time? You will likely need a buffer for that, which I don't see here. Also the `Timer` object is sending out `timeout` signal, which you should handle, I don't see that here either — Amfasis, Sep 29 '22 at 10:17
First i create a static sine wave now i was try to add delay from 1 point to another point I try adding timer but i don't where to call the timer now check the code once — sai vineeth, Sep 29 '22 at 10:25
So you want each point to appear one second after the previous? — Amfasis, Sep 29 '22 at 11:11

score 0 · Accepted Answer · answered Sep 29 '22 at 11:57

This uses a Timer to increment a property called step. In the sine wave drawing step is used to limit the for loop to only draw lines until step.

import QtQuick
import QtQuick.Window

Window {
    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width

        Timer {
            id: timer
            interval: 50
            running: true
            repeat: true
            onTriggered: {
                if (canvas.step > 1921)
                    timer.stop()
                canvas.step++
                canvas.requestPaint()
            }
        }

        Canvas {
            id: canvas

            property int step: 0

            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                var cw = parent.width
                var ch = parent.height
                var cx = cw
                var cy = ch/2
                var w = width
                var h = height
                ctx.lineWidth = 4
                ctx.clearRect(0, 0, cw, ch)
                ctx.beginPath()
                ctx.moveTo(0, cy)

                for (var x = 0; x < canvas.step; x++) {
                    ctx.lineTo(x, cy + (Math.sin(x / 305) * 400))
                }

                ctx.stroke()
            }
        }
    }
}

@sai-vineeth because you have read iam_peter's answer above and have even used it in a follow-up question here https://stackoverflow.com/questions/73932234/qml-canvas-step-is-cleaning-the-total-screen - it would be proper etiquette to acknowledge iam_peter's effort here and vote his answer up. Any concerns you had with iam_peter's answer, you should have raised it as a comment here and provided feedback. — Stephen Quan, Oct 05 '22 at 08:39

Stephen Quan · Answer 2 · 2022-09-30T06:03:07.230

If you rewrite your canvas.onPaint to just paint one step of the sine wave, then, you can invoke canvas.requestPaint() repeatedly to paint different intervals of your sine wave with an appropriate delay. I implemented it but found the interval of 1000ms too slow, so, to make it a bit more interesting I reduce the interval to 10ms:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Page {
    anchors.fill: parent
    title: qsTr("SineWave")
    Canvas {
        id: canvas
        anchors.fill: parent
        property int index: 0
        onIndexChanged: requestPaint()
        onWidthChanged: index = 0
        onHeightChanged: index = 0
        onPaint: {
            var ctx = getContext("2d");
            var cy = height/2;
            ctx.lineWidth= 4;
            if (index === 0) ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.moveTo(index    , Math.sin( index      * Math.PI / 360) * cy + cy);
            ctx.lineTo(index + 1, Math.sin((index + 1) * Math.PI / 360) * cy + cy);
            ctx.stroke();
            if (canvas.index < parent.width) timer.start();
        }
        Timer {
            id: timer
            repeat: false
            interval: 10
            onTriggered: canvas.index++
        }
        BusyIndicator {
            anchors.centerIn: parent
            running: canvas.index < parent.width
        }
    }
}

You can Try it Online!

hi Stephen Quan in your code u r using ctx.clearrect while it will clear rect full or from point to point — sai vineeth, Oct 12 '22 at 09:46
`if (index === 0) ctx.clearRect(0, 0, width, height);` means when we are on the first step, we clear. For every other step, we do not clear, since, this is an incremental `onPaint` drawing the sinewave step-by-step. @saivineeth when will you start voting the answers that are helping you? — Stephen Quan, Oct 12 '22 at 19:00

Delay function in qml

2 Answers2