Draw the illuminated area of the speedometer programmatically
I am trying to make a gauge in Qt Quick which has sections that "light up" from 0 to the needle position.
One way I can think of is to create a segment image and color it and rotate it many times from code. However, I don't know how this can be done in QML.
It doesn't have to be QML, and it doesn't have to be Qt Quick; it can be anything, as long as I can use it with Qt and inside the Qt creator, and preferably works across platforms.
Edit : Rough sketch done, but StackOverflow requires me to have 10 rep in order to post, so I post links.
No segment highlighting ------------------------ ---- Some segments are highlighted 
-
source to share
You can easily use an element Canvas
to draw an arc with control over its start and end position. Just compose it below the scale of the scale.
Here's an example of how to do this, using a value between 0 and 1 to select the "full" sensor.
ApplicationWindow {
visible: true
width: 500
height: 500
Canvas {
id: canvas
anchors.fill: parent
rotation: -90
onPaint: {
var c = getContext('2d')
c.clearRect(0, 0, width, height)
c.beginPath()
c.lineWidth = 30
c.strokeStyle = "red"
c.arc(250, 250, 250 - 15, 0, Math.PI * 2 * circ.value)
c.stroke()
}
}
Slider {
id: circ
minimumValue: 0
maximumValue: 1
value: maximumValue / 2
onValueChanged: canvas.requestPaint()
}
}
At Mitch's request, I explain - the canvas rotates at 90 CCW because of the way Qt draws arcs - they don't start at 12 o'clock, but at 3. You can remove the canvas rotation just in case you want to draw additional things because you don't want to make all your drawings offset 90 degrees to sit straight with the canvas rotated, all you have to do to get rid of the rotation is draw an arc in the range from -Math.PI * 0.5
to Math.PI * 1.5
to accommodate art starting with 3 hours.
source to share