Possible to make segmented arc with gradient?

[waffles123]

I saw a gauge that's apparently created by AIDA64, which looks like this:

Is it possible to create something like this in Rainmeter? I know there's the Roundline meter which is used for most circular gauges, but it doesn't seem to have options for a gradient fill, nor a segmentation option (though that could be handled presumably by uploading an image with appropriate transparencies).
I'm new to Rainmeter and so I haven't played with Shape meters at all, which seem a lot more customisable but also more complex; could something be done with those with an Arc path, a gradient fill and stroke-dash?

[CodeCode]

The basic approach is to start with two images. One for the colour arc and one for the segmented parts of the dial, that has transparencies where the colour goes. The colour arc would be a solid image.

By using the shape you would essentially be revealing the colour arc at the designed response times. The shape would be black or whatever colour you want. And by gauging with the desired Measure/s to manage how that arc is revealed. Be it with SysInfo, AudioLevel, etc...

It is a mathematic solution and I am terrible with math, and usually ask for help, just like you.

If this method is what you would like to start with, then simply find or create the images, share them here and whack in whatever code you can throw together.

There are several on DeviantArt, which is a great place to find thing to mess with.

[balala]

The basic approach is to start with two images. One for the colour arc and one for the segmented parts of the dial, that has transparencies where the colour goes. The colour arc would be a solid image.

I think the containers could better help in such a case.

Is it possible to create something like this in Rainmeter? I know there's the Roundline meter which is used for most circular gauges, but it doesn't seem to have options for a gradient fill, nor a segmentation option (though that could be handled presumably by uploading an image with appropriate transparencies).

First question is if you have the image of the segmented arc which you would like to use. Because as said above, if the image does exist, the containers could help.

[eclectic-tech]

I saw a gauge that's apparently created by AIDA64, ...
I'm new to Rainmeter and so I haven't played with Shape meters at all, which seem a lot more customizable but also more complex; could something be done with those with an Arc path, a gradient fill and stroke-dash?

Something like this: (simplified by balala's suggestions)

Code: Select all

[Rainmeter]
Update=100
AccurateText=1
DynamicWindowSize=1 

[Variables]
Radius=50
CenterX=100
CenterY=100

[Shape]
Meter=Shape
DynamicVariables=1
;Circle base
Shape= Ellipse #CenterX#,#CenterY#,(#Radius#*1.45) | StrokeWidth 5 | Fill Color 0,0,0,1 | StrokeColor 255,100,0,180
;Segmented
Shape2= Arc (#CenterX#+#Radius#*cos(PI*(1-[MeasureLevel]/25)/2)),(#CenterY#-#Radius#*sin(PI*(1-[MeasureLevel]/25)/2)),(#CenterX#+1),(#CenterY#-#Radius#),#Radius#,#Radius#,0,1,(round([MeasureLevel]/100)),0 | StrokeWidth 30 | Stroke Color 255,100,0 | StrokeDashes 0.3,0.1

[MeasureLevel]
Measure=Loop
StartValue=0
EndValue=99
LoopCount=0
Paused=0

[String]
Meter=String
Text=[MeasureLevel:0]%
AntiAlias=1
DynamicVariables=1
FontFace=Segoe UI
FontSize=20
FontColor=222,222,222,222
SolidColor=0,0,0,1
StringAlign=CenterCenter
X=#CenterX#
Y=#CenterY#
LeftMouseUpAction=[!TogglePauseMeasure MeasureLevel]
Tooltiptext=Click!

segmented.gif

[balala]

Something like this:

I sincerly hope you don't mind, but I have two comments related to the posted code:

• The [Percent] measure is not needed. You can use the [MeasureLevel] measure directly, [Percent] returning the same value as [MeasureLevel], even if one update cycle later.
• [Radius], [CenterX] and [CenterY] are also not needed, variables could be much better used instead of them. Or, if you want to use the measures, at least apply an UpdateDivider=-1 on them, to not get them updated ten times per second, especially that they are constants. But I'd better renounce to them.

With this the shorten code is the following one:

Code: Select all

[Rainmeter]
Update=100
AccurateText=1

[Variables]
Radius=50
CenterX=100
CenterY=100

[PositionX]
Measure=Calc
Formula=( #CenterX# + #Radius# * cos(PI/2 - (MeasureLevel/100) * 2 * PI))

[PositionY]
Measure=Calc
Formula=( #CenterY# - #Radius# * sin(PI/2 - (MeasureLevel/100) * 2 * PI))

[Shape]
Meter=Shape
DynamicVariables=1
;Circle base
Shape= Ellipse #CenterX#,#CenterY#,(#Radius#*1.45) | StrokeWidth 5 | Fill Color 0,0,0,1 | StrokeColor 255,100,0,180
;Segmented
Shape2= Arc [PositionX],[PositionY], (#CenterX#+1),(#CenterY#-#Radius#), #Radius#,#Radius#, 0,1, (round([MeasureLevel]/100)),0 | StrokeWidth 30 | Stroke Color  255,100,0 | StrokeDashes 0.3,0.1 

[MeasureLevel]
Measure=Loop
StartValue=0
EndValue=99
LoopCount=0
Paused=1

[String]
Meter=String
Text=[MeasureLevel:0]%
AntiAlias=1
DynamicVariables=1
FontFace=Segoe UI
FontSize=20
FontColor=222,222,222,222
SolidColor=0,0,0,1
StringAlign=CenterCenter
X=#CenterX#
Y=#CenterY#
LeftMouseUpAction=[!TogglePauseMeasure MeasureLevel]
Tooltiptext=Click!

Finally even the [PositionX] and [PositionY] measures could be removed, but this doesn't worth, I think.

[jsmorley]

What causes the little hiccup at 50%?

[eclectic-tech]

What causes the little hiccup at 50%?

I noticed that too, but ignored it for now in order to post an example... I am busy with other projects, so maybe balala can figure that out too.

Edit:
I borrowed this code from another skin that used mouse actions; so there were portions that could be simplified (so thanks for the updates balala).

HICCUP
Edit2: Corrected by balala's simplification solution.
The arc changes it's center pivot point when the measured value equals 50; not sure if there is anything I can do to prevent the "hiccup".
Here is an even simpler code that may help someone provide a solution.

Code: Select all

[Rainmeter]
Update=100
AccurateText=1
DynamicWindowSize=1 

[Variables]
Radius=50
CenterX=100
CenterY=100

[Shape]
Meter=Shape
DynamicVariables=1
;Circle base
Shape= Ellipse [#CenterX],[#CenterY],([#Radius]*1.45) | StrokeWidth 5 | Fill Color 0,0,0,1 | StrokeColor 255,100,0,180
;Segmented
Shape2= Arc (#CenterX#+#Radius#*cos(PI*(1-[MeasureLevel]/25)/2)),(#CenterY#-#Radius#*sin(PI*(1-[MeasureLevel]/25)/2)),(#CenterX#+1),(#CenterY#-#Radius#),#Radius#,#Radius#,0,1,(round([MeasureLevel]/100)),0 | StrokeWidth 30 | Stroke Color 255,100,0 | StrokeDashes 0.3,0.1

[MeasureLevel]
Measure=Loop
StartValue=0
EndValue=99
LoopCount=0
Paused=0

[String]
Meter=String
Text=[MeasureLevel:0]%
AntiAlias=1
DynamicVariables=1
FontFace=Segoe UI
FontSize=20
FontColor=222,222,222,222
SolidColor=0,0,0,1
StringAlign=CenterCenter
X=[#CenterX]
Y=[#CenterY]
LeftMouseUpAction=[!TogglePauseMeasure MeasureLevel]
Tooltiptext=Click!

[balala]

I noticed that too, but ignored it for now in order to post an example... I am busy with other projects, so maybe balala can figure that out too.

Thank you for the trust. I indeed figured out something, but probably further investigations are still needed.
The hiccup is caused by a delay between when the [PositionX] and [PositionY] get updated and when the [Shape] meter is updated.
To fix it, you have to replace the [PositionX] and [PositionY] parameters into the Shape2 option of the [Shape] meter, as it follows: Shape2= Arc (#CenterX#+#Radius#*cos(PI/2-([MeasureLevel]/100)*2*PI)),(#CenterY#-#Radius#*sin(PI/2-([MeasureLevel]/100)*2*PI)),(#CenterX#+1),(#CenterY#-#Radius#),#Radius#,#Radius#,0,1,(round([MeasureLevel]/100)),0 | StrokeWidth 30 | Stroke Color 255,100,0 | StrokeDashes 0.3,0.1 .
Additionally if you did the above update, the [PositionX] and [PositionY] measures can be removed, not being needed anymore.

[eclectic-tech]

Thanks, I figured it was some sort of delay due to my code.
Excellent! Thanks again

I will update the posted codes...

[balala]

Thanks, I figured it was some sort of delay due to my code.
Excellent!

Well, in fact I'd simplify even more the above two parameters of the Shape2 option, for instance this way: Shape2= Arc (#CenterX#+#Radius#*cos(PI*(1-[MeasureLevel]/25)/2)),(#CenterY#-#Radius#*sin(PI*(1-[MeasureLevel]/25)/2)),(#CenterX#+1),(#CenterY#-#Radius#),#Radius#,#Radius#,0,1,(round([MeasureLevel]/100)),0 | StrokeWidth 30 | Stroke Color 255,100,0 | StrokeDashes 0.3,0.1.