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