Time for action - drawing a heartbeat

We will extend our component now and implement its main functionality—drawing a heartbeat-like diagram.

Add the following property declarations to the canvas object:

property int lineWidth: 2
property var points: []
property real arg: -Math.PI 

Inside the Canvas section, add a declaration for a timer that will trigger updates of the picture:

Timer {
    interval: 10
    repeat: true
    running: true
    onTriggered: {
        canvas.arg += Math.PI / 180;
        while(canvas.arg >= Math.PI) {
            canvas.arg -= 2 * Math.PI;
        }
    }
}

Then again, inside the Canvas section, define the handler for when the value of arg is modified:

onArgChanged: {
    points.push(func(arg));
    points = points.slice(-canvas.width);
    canvas.requestPaint();
}

This handler ...

Get Game Programming using Qt 5 Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.