Arc gauge

[Mark81]

I kindly request some suggestions how to make a gauge that shows a value using a colored arc.
There's a background image:

and then I have the colored arc for the inner sectors.

When value is 0% you will see only the background image. When value is 100% the colored arc will fill all the background one.
For each intermediate value the colored arc will fill the background one according to the percentage.

I don't understand how to achieve this.
Any hint is appreciated!

[raven-worx]

@Mark81
simply paint ieach section yourself yourself using a Canvas element:

Canvas {
     onPaint: {
            var ctx = getContext("2d");
            ctx.resetTransform()
            ctx.reset();

           // do the painting on ctx
           // e.g. ctx.arc( x, y, radius, angleRadStart, angleRadStart, false)
    }
}

See this example, it's for HTML5 but it's still applicable.

[Mark81]

@raven-worx I can try it but I see two major issues:

• it would quite hard to perfectly fit each sector if they are not generated automatically using a function (like I would do with mine)
• it would work only if the requested painting is easy to reproduce. My pictures are only an example, but the final stuff I will receive, might contains other bells & whistles like gradients along all the colored arcs, or some texture, etc...

For these reasons I was trying to use the supplied pictures to animate the gauge.

[raven-worx]

@Mark81 said in Arc gauge:

it would quite hard to perfectly fit each sector if they are not generated automatically using a function (like I would do with mine)

For these reasons I was trying to use the supplied pictures to animate the gauge.

Those 2 sentences are a contradiction no?
actually you should only paint each sector once and color them differently according to the value.
I mean it's way harder to place images perfectly than do custom painting at calculated coordinates.

My pictures are only an example, but the final stuff I will receive, might contains other bells & whistles like gradients along all the colored arcs, or some texture, etc...

So you want a solution which automagically does everything you need with least effort?

If you want to work with images (and all it's problems, like blurring etc) the only thing you need is the Image element and probably some effects or masks.
For a clean solution i would recommend to do the painting yourself, since this gives you also perfect placement and no problems antialiasing.

[Mark81]

@raven-worx said in Arc gauge:

Those 2 sentences are a contradiction no?

At all.
The pictures are generated, say, with Photoshop changing their color. So if I use them I'm sure they can overlap perfectly each other. On the other hand, if I manually draw both scales, I'm also sure they fit together but it would be harder to reproduce all the graphics effects (and the graphic guy cannot update the images himself - as he requires).

What I meant with my sentences is it would not work if you use a mix the two approaches - as I thought (wrongly) you suggested before.

So you want a solution which automagically does everything you need with least effort?

Uh? I don't understand this question.
If you see the "QtQuick control extras example" you can find how the CircularGauge is made. For the needle they used a png that rotates according to the requested value. Of course they can draw the needle by hand too, but as said this approach has several
drawbacks. I don't think its a matter of "doing something automagically" but just to understand how to use the QML tools.

[Mark81]

@raven-worx said in Arc gauge:

If you want to work with images (and all it's problems, like blurring etc) the only thing you need is the Image element and probably some effects or masks.

Yep, and this is the only thing I don't know how to do in this case. Hence my question :-)

[J.Hilk]

@Mark81 I think, this will get complicated quite quickly, if you want to do it in pure qml & canvas.

I would suggest looking into subclassing QQuickPaintedItem that way you can just partially draw the 2nd image, depending on your gauge value.

[raven-worx]

@Mark81 said in Arc gauge:

Yep, and this is the only thing I don't know how to do in this case. Hence my question :-)

assuming your images are identical in size:

Image {
   source: "qrc/background.png"

   Image {
       source: "qrc:/foreground.png"
   }
}

[Mark81]

@J.Hilk said in Arc gauge:
that way you can just partially draw the 2nd image, depending on your gauge value.

Interesting. Following your approach could not be even easier to draw the colored scale into a Shape element with clip property true. The shape will be a trapezoid with an inclined side starting from the center of the gauges (bound to the value property).

I would try it when I understand why "module "QtQuick.Shapes" version 1.12 is not installed" on my system!

[Mark81]

@raven-worx this does nothing but paints one image one on top of the other....

[raven-worx]

@Mark81 said in Arc gauge:

@raven-worx this does nothing but paints one image one on top of the other....

i thought you get a separate image for each possible value.

If you want to keep going the QML-only way take a look at OpacityMask
Again for the mask shape you can use a Canvas element drawing an arc to cover the unneeded sectors.

[Mark81]

@raven-worx said in Arc gauge:

If you want to keep going the QML-only way take a look at OpacityMask
Again for the mask shape you can use a Canvas element drawing an arc to cover the unneeded sectors.

Got it. This is a good advice. I'm going to try it and I'll report back the result.
Thanks for the patience!

[Markkyboy]

Hi Mark81 - did you achieve your goal?, I realise this question is around 5 years old, but I'm curious to know if you found/created a solution?

I have created similar software using CircularSlider/Progress (https://github.com/arunpkio/CircularSlider) with a Repeater, including using Canvas for added circular effects.

[JKSH]

Qt 6.8 has just what the doctor ordered (see https://www.youtube.com/watch?v=iXLoC06CKOc):

[Markkyboy]

@JKSH - Nice!, going to play with that later. Have already developed something similar under Qt 5.6. Not as posh as this one though!

Next step, new PC, tablet, monitors and an upgrade to QT6!

[Pl45m4]

@Markkyboy said in Arc gauge:

Nice!, going to play with that later.

Note: 6.8 is still in Beta phase. Final release will be around the end of Sept. with a probably more stable version 6.8.1 even later.

[Markkyboy]

@Pl45m4 - thanks for the info. By the time I've bought new electronica, it'll likely be available.